/* Common CSS */
.white { color: #FFF}
.black { color: #000}
.black3 { color: #333}
.black6 { color: #666}
.black9 { color: #999}
.gray { color: #CCC}
.graya { color: #AAA}
.grayb { color: #BBB}
.grayc { color: #CCC}
.graye { color: #796E6E}
.gray51 { color: #515151}
.bgnone { background: none}
.bgcwhite { background-color: #FFF}
.bgcblack { background-color: #000}
.bgcgray { background-color: #CCC}
.bgce2 { background-color: #E2E2E2}
.bgce5 { background-color: #E5E5E5}
.bgce7 { background-color: #E7E7E7}
.bgce9 { background-color: #E9E9E9}
.bgcf2 { background-color: #F2F2F2}
.bgcf5 { background-color: #F5F5F5}
.bgcf7 { background-color: #F7F7F7}
.bgcf9 { background-color: #F9F9F9}
.bce2 { border-color: #E2E2E2}
.bce5 { border-color: #E5E5E5}
.bce7 { border-color: #E7E7E7}
.bce9 { border-color: #E9E9E9}
.bcf2 { border-color: #F2F2F2}
.bcf5 { border-color: #F5F5F5}
.bcf7 { border-color: #F7F7F7}
.bcf9 { border-color: #F9F9F9}
.bcf10 { border-color: #68afbd}
.bcwhite { border-color: #FFF}
.bcblack { border-color: #000}
.bcgray { border-color: #CCC}

.bold { font-weight: bold}
.relative { position: relative}
.absolute { position: absolute}
.fixed { position: fixed}
.zindex1 { z-index: 1}
.zindex9 { z-index: 9}
.nowrap { white-space: nowrap; word-break: break-all; text-overflow: ellipsis; overflow: hidden}
.allwrap { white-space: normal; word-break: break-all; text-overflow: ellipsis; overflow: hidden}
.show { display: block}
.hide { display: none}
.inline { display: inline}
.inlineblock { display: inline-block}
.invisible { visibility: hidden}
.visible { visibility: visible}
.overflowhidden { overflow: hidden}
.overflowxhidden { overflow-x: hidden}
.overflowyhidden { overflow-y: hidden}
.overflowvisible { overflow: visible}
.overflowxvisible { overflow-x: visible}
.overflowyvisible { overflow-y: visible}
.overflowscroll { overflow: scroll;}
.overflowxscroll { overflow-x: scroll}
.overflowyscroll { overflow-y: scroll}
.hidescrollbar::-webkit-scrollbar { display:none}
.contenteditable { -webkit-user-select: text}
.outlinenone { outline: none}
.appearancenone { -webkit-appearance:none; appearance:none}
.fl { float: left}
.fr { float: right}
.clear { clear: both}

.postl { left: 0; top: 0}
.postr { right: 0; top: 0}
.posbl { left: 0; bottom: 0}
.posbr { right: 0; bottom: 0}
.poscc { left: 50%; top: 50%}

.lh10 { line-height: 1.0} /* 16px */
.lh12 { line-height: 1.25} /* 20px */
.lh14 { line-height: 1.375} /* 22px */
.lh15 { line-height: 1.5} /* 24px */
.lh18 { line-height: 1.75} /* 28px */
.lh20 { line-height: 2.0} /* 32px */

.font5 { font-size: .5em} /* 8px */
.font625 { font-size: .625em} /* 10px */
.font75 { font-size: .75em} /* 12px */
.font875 { font-size: .875em} /* 14px */
.font10 { font-size: 1em} /* 16px */
.font125 { font-size: 1.125em} /* 18px */
.font12 { font-size: 1.25em} /* 20px */
.font15 { font-size: 1.5em} /* 24px */
.font18 { font-size: 1.75em} /* 28px */
.font20 { font-size: 2em} /* 32px */

.mh05 { min-height: .5em}
.mh075 { min-height: .75em}
.mh1 { min-height: 1em}
.mh125 { min-height: 1.25em}
.mh15 { min-height: 1.5em}
.mh2 { min-height: 2em}
.mh25 { min-height: 2.5em}
.mh275 { min-height: 2.75em}
.mh3 { min-height: 3em}
.mh4 { min-height: 4em}
.mh5 { min-height: 5em}
.mh6 { min-height: 6em}
.mh7 { min-height: 7em}
.mh8 { min-height: 8em}
.mh10 { min-height: 10em}
.h100 { height: 100%}
.mw05 { min-width: .5em}
.mw075 { min-width: .75em}
.mw1 { min-width: 1em}
.mw125 { min-width: 1.25em}
.mw15 { min-width: 1.5em}
.mw2 { min-width: 2em}
.mw25 { min-width: 2.5em}
.mw275 { min-width: 2.75em}
.mw3 { min-width: 3em}
.mw4 { min-width: 4em}
.mw5 { min-width: 5em}
.mw6 { min-width: 6em}
.mw7 { min-width: 7em}
.mw8 { min-width: 8em}
.mw10 { min-width: 10em}
.w0 { width: 0%}
.w100 { width: 100%}

.pt1 { padding-top: .1em}
.pt2 { padding-top: .2em}
.pt25 { padding-top: .25em}
.pt4 { padding-top: .4em}
.pt5 { padding-top: .5em}
.pt75 { padding-top: .75em}
.pt10 { padding-top: 1em}

.pr1 { padding-right: .1em}
.pr2 { padding-right: .2em}
.pr25 { padding-right: .25em}
.pr4 { padding-right: .4em}
.pr5 { padding-right: .5em}
.pr75 { padding-right: .75em}
.pr10 { padding-right: 1em}
.pr15 { padding-right: 1.5em}
.pb1 { padding-bottom: .1em}
.pb2 { padding-bottom: .2em}
.pb25 { padding-bottom: .25em}
.pb4 { padding-bottom: .4em}
.pb5 { padding-bottom: .5em}
.pb75 { padding-bottom: .75em}
.pb10 { padding-bottom: 1em}
.pl2 { padding-left: .2em}
.pl25 { padding-left: .25em}
.pl4 { padding-left: .4em}
.pl5 { padding-left: .5em}
.pl75 { padding-left: .75em}
.pl10 { padding-left: 1em}
.mt2 { margin-top: .2em}
.mt25 { margin-top: .25em}
.mt4 { margin-top: .4em}
.mt5 { margin-top: .5em}
.mt75 { margin-top: .75em}
.mt10 { margin-top: 1em}
.mr2 { margin-right: .2em}
.mr25 { margin-right: .25em}
.mr4 { margin-right: .4em}
.mr5 { margin-right: .5em}
.mr75 { margin-right: .75em}
.mr10 { margin-right: 1em}
.mb2 { margin-bottom: .2em}
.mb25 { margin-bottom: .25em}
.mb4 { margin-bottom: .4em}
.mb5 { margin-bottom: .5em}
.mb75 { margin-bottom: .75em}
.mb10 { margin-bottom: 1em}
.ml2 { margin-left: .2em}
.ml25 { margin-left: .25em}
.ml4 { margin-left: .4em}
.ml5 { margin-left: .5em}
.ml75 { margin-left: .75em}
.ml10 { margin-left: 1em}

.bnone { border: none}
.bw1 { border-width: 1px}
.bw2 { border-width: 2px}
.bw3 { border-width: 3px}
.bss { border-style: solid}
.btss { border-top-style: solid}
.brss { border-right-style: solid}
.bbss { border-bottom-style: solid}
.blss { border-left-style: solid}
.bsn { border-style: none}
.btsn { border-top-style: none}
.brsn { border-right-style: none}
.bbsn { border-bottom-style: none}
.blsn { border-left-style: none}
.round { border-radius: 50%}
.br1 { -webkit-border-radius: .1em; border-radius: .1em}
.br2 { -webkit-border-radius: .2em; border-radius: .2em}
.br3 { -webkit-border-radius: .3em; border-radius: .3em}
.br4 { -webkit-border-radius: .4em; border-radius: .4em}
.br5 { -webkit-border-radius: .5em; border-radius: .5em}
.br75 { -webkit-border-radius: .75em; border-radius: .75em}
.br10 { -webkit-border-radius: 1em; border-radius: 1em}
.br20 { -webkit-border-radius: 2em; border-radius: 2em}
.br0tl { -webkit-border-top-left-radius: 0; border-top-left-radius: 0}
.br0tr { -webkit-border-top-right-radius: 0; border-top-right-radius: 0}
.br0bl { -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0}
.br0br { -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0}
.br1,.br2,.br3,.br4,.br5,.br75,.br10,.br20,.br0tl,.br0tr,.br0bl,.br0br { -webkit-background-clip: padding-box; background-clip: padding-box}

.tal { text-align: left}
.tac { text-align: center}
.tar { text-align: right}
.ti2 { text-indent: 2em}
.linethrough { text-decoration: line-through}
.underline { text-decoration: underline}

.lineclamp1 { -webkit-line-clamp: 1} /* 指定行数 */
.lineclamp2 { -webkit-line-clamp: 2}
.lineclamp3 { -webkit-line-clamp: 3}

.act {
    transform: scale(0.95,0.97);
    -webkit-transform: scale(0.95,0.97);
    -webkit-transition-duration: 300ms;
    opacity: .7;
}
.act2 {
    background-color: #DFDFDF;
    opacity: .7;
}

/* Box CSS */
.box {
	display: -webkit-box !important;
	display: box !important;
	position:relative;
}
.boxrev {
	-webkit-box-direction:reverse;
	box-direction:reverse;
}
.boxver {
	-webkit-box-orient:vertical;
	box-orient:vertical;
}
.boxhor {
	-webkit-box-orient:horizontal;
	box-orient:horizontal;
}
.boxfh {
	width:100%;
}
.boxfv {
	height:100%;
}
.boxcon {
	position:absolute;
	width:100%;
	height:100%;
}
.boxac {
	-webkit-box-align:center;
	box-align:center;
}
.boxae {
	-webkit-box-align:end;
	box-align:end;
}
.boxpc {
	-webkit-box-pack:center;
	box-pack:center;
}
.boxpe {
	-webkit-box-pack:end;
	box-pack:end;
}
.boxpj {
	-webkit-box-pack:justify;
	box-pack:justify;
}
.boxf1 {
	position:relative;
	-webkit-box-flex: 1;
	box-flex: 1;
}
.boxf2 {
	position:relative;
	-webkit-box-flex: 2;
	box-flex: 2;
}
.boxf3 {
	position:relative;
	-webkit-box-flex: 3;
	box-flex: 3;
}
.boxf4 {
	position:relative;
	-webkit-box-flex: 4;
	box-flex: 4;
}
.boximg {
	-webkit-background-size:contain;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
}
.boximg1 {
	-webkit-background-size:cover;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
.boximg2 {
	background-repeat:repeat-x;
	background-size:auto 100%
}
.boximg3 {
	background-repeat:repeat-y;
	background-size:100% auto
}
.boximg4 {
	-webkit-background-size:100% auto;
	background-size:100% auto;
	background-repeat:no-repeat;
	background-position:center;
}
.boximg5 {
	-webkit-background-size:auto 100%;
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:center;
}
.boximg6 {
	background-repeat:no-repeat;
	background-position:center;
}
.boximg7 {
	-webkit-background-size:100% 100%;
	background-size:100% 100%;
	background-repeat:no-repeat;
	background-position:center;
}
.boxsizingcontent {
  box-sizing: content-box;
  -webkit-box-sizing: content-box
}
.boxsizingborder {
  box-sizing: border-box;
  -webkit-box-sizing: border-box
}

/* CheckBox/Radio/Input/Textarea Control CSS */

/* Article */
.article { overflow: hidden}
.article h1 { font-size: 1.2rem; padding-top: .5rem; padding-bottom: .5rem; font-weight: bold}
.article h2,.article h3,.article h4 { font-size: 1rem; padding-top: .5rem; padding-bottom: .5rem; font-weight: normal}
.article h5,.article h6 { font-size: .875rem; padding-top: .25rem; padding-bottom: .25rem; font-weight: normal}
.article p { padding-top: .2rem; padding-bottom: .2rem}
.article .articletitle { padding-top: .5rem; padding-bottom: .5rem}
.article .articlemedia { text-indent: 0} /* 一般放在p标签上 */
.article .articlemedia img { width: 100%; vertical-align: middle;}
.article .articlemedia video { width: 100%; height: 56.25vw}
.article img,.article video,.article audio,.article frame,.article object { max-width: 100%}
.article .articlemedia .video,.article .articlemedia .live {
  display: block;
  height: 56.25vw;
  position: relative;
  -webkit-background-size:cover;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}
.article .articlemedia .video .play,.articlemedia .live .play {
  display: block;
  width: 2rem;
  height: 2rem;
  position: absolute;
  z-index: 1;
  -webkit-background-size:contain;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
}
.article .articlemedia .video .play {
  left: 50%;
  top: 50%;
  margin-left: -1rem;
  margin-top: -1rem;
  background-image: url('../icon/play.png');
}
.article .articlemedia .live .play {
  left: 1rem;
  top: 1rem;
  background-image: url('../icon/playlive.png');
}
.article .articlemedia .widthauto { width: auto}
.article .articlewords { text-indent: 2rem}

/* Icon CSS */

.icon-add { background-image: url('yuiicon/icon_add.png') !important}
.icon-add-white { background-image: url('yuiicon/icon_add_white.png') !important}
.icon-adduser { background-image: url('yuiicon/icon_adduser.png') !important}
.icon-adduser-white { background-image: url('yuiicon/icon_adduser_white.png') !important}
.icon-back { background-image: url('yuiicon/icon_back.png') !important}
.icon-back-white { background-image: url('yuiicon/icon_back_white.png') !important}
.icon-back2 { background-image: url('yuiicon/icon_back2.png') !important}
.icon-back2-white { background-image: url('yuiicon/icon_back2_white.png') !important}
.icon-cal { background-image: url('yuiicon/icon_cal.png') !important}
.icon-cal-white { background-image: url('yuiicon/icon_cal_white.png') !important}
.icon-call { background-image: url('yuiicon/icon_call.png') !important}
.icon-call-white { background-image: url('yuiicon/icon_call_white.png') !important}
.icon-cart { background-image: url('yuiicon/icon_cart.png') !important}
.icon-cart-white { background-image: url('yuiicon/icon_cart_white.png') !important}
.icon-chart { background-image: url('yuiicon/icon_chart.png') !important}
.icon-chart-white { background-image: url('yuiicon/icon_chart_white.png') !important}
.icon-close { background-image: url('yuiicon/icon_close.png') !important}
.icon-close-white { background-image: url('yuiicon/icon_close_white.png') !important}
.icon-disk { background-image: url('yuiicon/icon_disk.png') !important}
.icon-disk-white { background-image: url('yuiicon/icon_disk_white.png') !important}
.icon-download { background-image: url('yuiicon/icon_download.png') !important}
.icon-download-white { background-image: url('yuiicon/icon_download_white.png') !important}
.icon-edit { background-image: url('yuiicon/icon_edit.png') !important}
.icon-edit-white { background-image: url('yuiicon/icon_edit_white.png') !important}
.icon-exit { background-image: url('yuiicon/icon_exit.png') !important}
.icon-exit-white { background-image: url('yuiicon/icon_exit_white.png') !important}
.icon-filter { background-image: url('yuiicon/icon_filter.png') !important}
.icon-filter-white { background-image: url('yuiicon/icon_filter_white.png') !important}
.icon-forward { background-image: url('yuiicon/icon_forward.png') !important}
.icon-forward-white { background-image: url('yuiicon/icon_forward_white.png') !important}
.icon-home { background-image: url('yuiicon/icon_home.png') !important}
.icon-home-white { background-image: url('yuiicon/icon_home_white.png') !important}
.icon-map { background-image: url('yuiicon/icon_map.png') !important}
.icon-map-white { background-image: url('yuiicon/icon_map_white.png') !important}
.icon-menu { background-image: url('yuiicon/icon_menu.png') !important}
.icon-menu-white { background-image: url('yuiicon/icon_menu_white.png') !important}
.icon-more { background-image: url('yuiicon/icon_more.png') !important}
.icon-more-white { background-image: url('yuiicon/icon_more_white.png') !important}
.icon-msg { background-image: url('yuiicon/icon_msg.png') !important}
.icon-msg-white { background-image: url('yuiicon/icon_msg_white.png') !important}
.icon-msghave { background-image: url('yuiicon/icon_msghave.png') !important}
.icon-msghave-white { background-image: url('yuiicon/icon_msghave_white.png') !important}
.icon-ok { background-image: url('yuiicon/icon_ok.png') !important}
.icon-ok-white { background-image: url('yuiicon/icon_ok_white.png') !important}
.icon-refresh { background-image: url('yuiicon/icon_refresh.png') !important}
.icon-refresh-white { background-image: url('yuiicon/icon_refresh_white.png') !important}
.icon-scan { background-image: url('yuiicon/icon_scan.png') !important}
.icon-scan-white { background-image: url('yuiicon/icon_scan_white.png') !important}
.icon-search { background-image: url('yuiicon/icon_search.png') !important}
/*.icon-search-white { background-image: url('yuiicon/icon_search_white.png') !important}*/
.icon-search-white { background-image: url('icon/icon_search_white.png') !important}
.icon-setting { background-image: url('yuiicon/icon_setting.png') !important}
.icon-setting-white { background-image: url('yuiicon/icon_setting_white.png') !important}
.icon-share { background-image: url('yuiicon/icon_share.png') !important}
.icon-share-white { background-image: url('yuiicon/icon_share_white.png') !important}
.icon-submenu { background-image: url('yuiicon/icon_submenu.png') !important}
.icon-submenu-white { background-image: url('yuiicon/icon_submenu_white.png') !important}
.icon-submenu2 { background-image: url('yuiicon/icon_submenu2.png') !important}
.icon-submenu2-white { background-image: url('yuiicon/icon_submenu2_white.png') !important}
.icon-user { background-image: url('yuiicon/icon_user.png') !important}
.icon-user-white { background-image: url('yuiicon/icon_user_white.png') !important}
.icon-warn { background-image: url('yuiicon/icon_warn.png') !important}
.icon-warn-white { background-image: url('yuiicon/icon_warn_white.png') !important}

/* DIY CSS (For APP Itself) */
.green { color:#46D0BC}
.bcgreen{ border-color:#46D0BC}
.red { color: #E61C1C}
.bcred { border-color: #E61C1C}
.bcpurple { border-color: #7C2993}
.bclightblack { border-color: #999999}
.bgcred { background-color: #E61C1C}
.bggrayd { background-color:#D0D5DB}
.orange { color: #FF6700}
.bcorange { border-color: #FF6700}
.bgcorange { background-color: #FF6700}
.bgcyellow { background-color: #FFC000}
.bgcpurple { background-color: #7C2993}
.bgcblack3 { background-color: #333333}
.bgcblack9 { background-color: #999999}
.blue { color: #51ABFF}
.darkblue { color: #367ADD}
.purple { color: #7C2993}
.bcblue { border-color: #51ABFF}
.bcdarkblue { border-color: #367ADD}
.bgcblue { background-color: #51ABFF}
.bgcdarkblue { background-color: #367ADD}
.bghead { min-height: 4.14rem; background-image: linear-gradient(to right, #46D0BC , #5A74C3);}
.bghead-color{background-image: linear-gradient(to right, #46D0BC , #5A74C3);}