/*
bgUI for PC
作者：百舸
版本：v21.12.7.1
*/




/* 高度 */
.bg-h0{ height: 0px!important;}
.bg-h1{ height: 1px!important;}
.bg-h5{ height: 5px!important;}
.bg-h10{ height: 10px!important;}
.bg-h15{ height: 15px!important;}
.bg-h20{ height: 20px!important;}
.bg-h25{ height: 25px!important;}
.bg-h30{ height: 30px!important;}
.bg-h35{ height: 35px!important;}
.bg-h40{ height: 40px!important;}
.bg-h45{ height: 45px!important;}
.bg-h50{ height: 50px!important;}
.bg-h55{ height: 55px!important;}
.bg-h60{ height: 60px!important;}
.bg-h65{ height: 65px!important;}
.bg-h70{ height: 70px!important;}
.bg-h75{ height: 75px!important;}
.bg-h80{ height: 80px!important;}
.bg-h85{ height: 85px!important;}
.bg-h90{ height: 90px!important;}
.bg-h95{ height: 95px!important;}
.bg-h100{ height: 100px!important;}
.bg-h150{ height: 150px!important;}
.bg-h200{ height: 200px!important;}
.bg-h250{ height: 250px!important;}
.bg-h300{ height: 300px!important;}
.bg-h350{ height: 350px!important;}
.bg-h400{ height: 400px!important;}
.bg-h450{ height: 450px!important;}
.bg-h500{ height: 500px!important;}

/* 宽度 */
.bg-w0{ width: 0px!important;}
.bg-w1{ width: 1px!important;}
.bg-w2{ width: 2px!important;}
.bg-w3{ width: 3px!important;}
.bg-w4{ width: 4px!important;}
.bg-w5{ width: 5px!important;}
.bg-w10{ width: 10px!important;}
.bg-w15{ width: 15px!important;}
.bg-w20{ width: 20px!important;}
.bg-w25{ width: 25px!important;}
.bg-w30{ width: 30px!important;}
.bg-w35{ width: 35px!important;}
.bg-w40{ width: 40px!important;}
.bg-w45{ width: 45px!important;}
.bg-w50{ width: 50px!important;}
.bg-w55{ width: 55px!important;}
.bg-w60{ width: 60px!important;}
.bg-w65{ width: 65px!important;}
.bg-w70{ width: 70px!important;}
.bg-w75{ width: 75px!important;}
.bg-w80{ width: 80px!important;}
.bg-w85{ width: 85px!important;}
.bg-w90{ width: 90px!important;}
.bg-w95{ width: 95px!important;}
.bg-w100{ width: 100px!important;}
.bg-w150{ width: 150px!important;}
.bg-w200{ width: 200px!important;}
.bg-w250{ width: 250px!important;}
.bg-w300{ width: 300px!important;}
.bg-w350{ width: 350px!important;}
.bg-w400{ width: 400px!important;}
.bg-w450{ width: 450px!important;}
.bg-w500{ width: 500px!important;}
.bg-wp5{ width: 5%!important;}
.bg-wp10{ width: 10%!important;}
.bg-wp15{ width: 15%!important;}
.bg-wp20{ width: 20%!important;}
.bg-wp25{ width: 25%!important;}
.bg-wp30{ width: 30%!important;}
.bg-wp33{ width: 33.33%!important;}
.bg-wp35{ width: 35%!important;}
.bg-wp40{ width: 40%!important;}
.bg-wp45{ width: 45%!important;}
.bg-wp50{ width: 50%!important;}
.bg-wp55{ width: 55%!important;}
.bg-wp60{ width: 60%!important;}
.bg-wp65{ width: 65%!important;}
.bg-wp70{ width: 70%!important;}
.bg-wp75{ width: 75%!important;}
.bg-wp80{ width: 80%!important;}
.bg-wp85{ width: 85%!important;}
.bg-wp90{ width: 90%!important;}
.bg-wp91{ width: 91%!important;}
.bg-wp92{ width: 92%!important;}
.bg-wp93{ width: 93%!important;}
.bg-wp94{ width: 94%!important;}
.bg-wp95{ width: 95%!important;}
.bg-wp96{ width: 96%!important;}
.bg-wp97{ width: 97%!important;}
.bg-wp98{ width: 98%!important;}
.bg-wp99{ width: 99%!important;}
.bg-wp100{ width: 100%!important;}

/* margin&padding */
.bg-m-auto{ margin: auto;}
.bg-m0{ margin: 0 !important;}
.bg-m10{ margin: 10px !important;}
.bg-m15{ margin: 15px !important;}
.bg-m20{ margin: 20px !important;}
.bg-p0{ padding: 0 !important;}
.bg-p5{ padding: 5px !important;}
.bg-p10{ padding: 10px !important;}
.bg-p20{ padding: 20px !important;}
.bg-p30{ padding: 30px !important;}
.bg-p40{ padding: 40px !important;}
.bg-p50{ padding: 50px !important;}
.bg-p60{ padding: 60px !important;}
.bg-p70{ padding: 70px !important;}
.bg-p80{ padding: 80px !important;}
.bg-p90{ padding: 90px !important;}
.bg-p100{ padding: 100px !important;}

.bg-mt0{ margin-top: 0 !important;}
.bg-mt5{ margin-top: 5px !important;}
.bg-mt10{ margin-top: 10px !important;}
.bg-mt15{ margin-top: 15px !important;}
.bg-mt20{ margin-top: 20px !important;}
.bg-mt30{ margin-top: 30px !important;}
.bg-mt40{ margin-top: 40px !important;}
.bg-mt50{ margin-top: 50px !important;}
.bg-mt60{ margin-top: 60px !important;}
.bg-mt70{ margin-top: 70px !important;}
.bg-mt80{ margin-top: 80px !important;}
.bg-mt90{ margin-top: 90px !important;}
.bg-mt100{ margin-top: 100px !important;}

.bg-mb0{ margin-bottom: 0 !important;}
.bg-mb5{ margin-bottom: 5px !important;}
.bg-mb10{ margin-bottom: 10px !important;}
.bg-mb15{ margin-bottom: 15px !important;}
.bg-mb20{ margin-bottom: 20px !important;}
.bg-mb30{ margin-bottom: 30px !important;}
.bg-mb40{ margin-bottom: 40px !important;}
.bg-mb50{ margin-bottom: 50px !important;}
.bg-mb60{ margin-bottom: 60px !important;}
.bg-mb70{ margin-bottom: 70px !important;}
.bg-mb80{ margin-bottom: 80px !important;}
.bg-mb90{ margin-bottom: 90px !important;}
.bg-mb100{ margin-bottom: 100px !important;}

.bg-ml0{ margin-left: 0 !important;}
.bg-ml5{ margin-left: 5px !important;}
.bg-ml10{ margin-left: 10px !important;}
.bg-ml15{ margin-left: 15px !important;}
.bg-ml20{ margin-left: 20px !important;}
.bg-ml30{ margin-left: 30px !important;}
.bg-ml40{ margin-left: 40px !important;}
.bg-ml50{ margin-left: 50px !important;}
.bg-ml60{ margin-left: 60px !important;}
.bg-ml70{ margin-left: 70px !important;}
.bg-ml80{ margin-left: 80px !important;}
.bg-ml90{ margin-left: 90px !important;}
.bg-ml100{ margin-left: 100px !important;}

.bg-mr0{ margin-right: 0 !important;}
.bg-mr5{ margin-right: 5px !important;}
.bg-mr10{ margin-right: 10px !important;}
.bg-mr15{ margin-right: 15px !important;}
.bg-mr20{ margin-right: 20px !important;}
.bg-mr30{ margin-right: 30px !important;}
.bg-mr40{ margin-right: 40px !important;}
.bg-mr50{ margin-right: 50px !important;}
.bg-mr60{ margin-right: 60px !important;}
.bg-mr70{ margin-right: 70px !important;}
.bg-mr80{ margin-right: 80px !important;}
.bg-mr90{ margin-right: 90px !important;}
.bg-mr100{ margin-right: 100px !important;}

.bg-mv0{ margin-top:0!important;margin-bottom:0!important;}
.bg-mv5{ margin-top: 5px!important;margin-bottom: 5px!important;}
.bg-mv10{ margin-top: 10px!important;margin-bottom: 10px!important;}
.bg-mv15{ margin-top: 15px!important;margin-bottom: 15px!important;}
.bg-mv20{ margin-top: 20px!important;margin-bottom: 20px!important;}
.bg-mv30{ margin-top: 30px!important;margin-bottom: 30px!important;}
.bg-mv40{ margin-top: 40px!important;margin-bottom: 40px!important;}
.bg-mv50{ margin-top: 50px!important;margin-bottom: 50px!important;}
.bg-mv60{ margin-top: 60px!important;margin-bottom: 60px!important;}
.bg-mv70{ margin-top: 70px!important;margin-bottom: 70px!important;}
.bg-mv80{ margin-top: 80px!important;margin-bottom: 80px!important;}
.bg-mv90{ margin-top: 90px!important;margin-bottom: 90px!important;}
.bg-mv100{ margin-top: 100px!important;margin-bottom: 100px!important;}

.bg-mh0{ margin-left:0!important;margin-right:0!important;}
.bg-mh5{ margin-left: 5px !important;margin-right: 5px!important;}
.bg-mh10{ margin-left: 10px !important;margin-right: 10px!important;}
.bg-mh15{ margin-left: 15px !important;margin-right: 15px!important;}
.bg-mh20{ margin-left: 20px !important;margin-right: 20px!important;}
.bg-mh30{ margin-left: 30px !important;margin-right: 30px!important;}
.bg-mh40{ margin-left: 40px !important;margin-right: 40px !important;}
.bg-mh50{ margin-left: 50px !important;margin-right: 50px !important;}
.bg-mh60{ margin-left: 60px !important;margin-right: 60px !important;}
.bg-mh70{ margin-left: 70px !important;margin-right: 70px !important;}
.bg-mh80{ margin-left: 80px !important;margin-right: 80px !important;}
.bg-mh90{ margin-left: 90px !important;margin-right: 90px !important;}
.bg-mh100{ margin-left: 100px !important;margin-right: 100px!important;}

.bg-pt0{ padding-top: 0 !important;}
.bg-pt5{ padding-top: 5px !important;}
.bg-pt10{ padding-top: 10px !important;}
.bg-pt15{ padding-top: 15px !important;}
.bg-pt20{ padding-top: 20px !important;}
.bg-pt30{ padding-top: 30px !important;}
.bg-pt40{ padding-top: 40px !important;}
.bg-pt50{ padding-top: 50px !important;}
.bg-pt60{ padding-top: 60px !important;}
.bg-pt70{ padding-top: 70px !important;}
.bg-pt80{ padding-top: 80px !important;}
.bg-pt90{ padding-top: 90px !important;}
.bg-pt100{ padding-top: 100px !important;}

.bg-pb0{ padding-bottom: 0 !important;}
.bg-pb5{ padding-bottom: 5px !important;}
.bg-pb10{ padding-bottom: 10px !important;}
.bg-pb15{ padding-bottom: 15px !important;}
.bg-pb20{ padding-bottom: 20px !important;}
.bg-pb30{ padding-bottom: 30px !important;}
.bg-pb40{ padding-bottom: 40px !important;}
.bg-pb50{ padding-bottom: 50px !important;}
.bg-pb60{ padding-bottom: 60px !important;}
.bg-pb70{ padding-bottom: 70px !important;}
.bg-pb80{ padding-bottom: 80px !important;}
.bg-pb90{ padding-bottom: 90px !important;}
.bg-pb100{ padding-bottom: 100px !important;}

.bg-pl0{ padding-left: 0 !important;}
.bg-pl5{ padding-left: 5px !important;}
.bg-pl10{ padding-left: 10px !important;}
.bg-pl15{ padding-left: 15px !important;}
.bg-pl20{ padding-left: 20px !important;}
.bg-pl30{ padding-left: 30px !important;}
.bg-pl40{ padding-left: 40px !important;}
.bg-pl50{ padding-left: 50px !important;}
.bg-pl60{ padding-left: 60px !important;}
.bg-pl70{ padding-left: 70px !important;}
.bg-pl80{ padding-left: 80px !important;}
.bg-pl90{ padding-left: 90px !important;}
.bg-pl100{ padding-left: 100px !important;}

.bg-pr0{ padding-right: 0 !important;}
.bg-pr5{ padding-right: 5px !important;}
.bg-pr10{ padding-right: 10px !important;}
.bg-pr15{ padding-right: 15px !important;}
.bg-pr20{ padding-right: 20px !important;}
.bg-pr30{ padding-right: 30px !important;}
.bg-pr40{ padding-right: 40px !important;}
.bg-pr50{ padding-right: 50px !important;}
.bg-pr60{ padding-right: 60px !important;}
.bg-pr70{ padding-right: 70px !important;}
.bg-pr80{ padding-right: 80px !important;}
.bg-pr90{ padding-right: 90px !important;}
.bg-pr100{ padding-right: 100px !important;}

.bg-pv0{ padding-top:0 !important;padding-bottom:0 !important;}
.bg-pv5{ padding-top: 5px !important;padding-bottom: 5px!important;}
.bg-pv10{ padding-top: 10px !important;padding-bottom: 10px!important;}
.bg-pv15{ padding-top: 15px !important;padding-bottom: 15px!important;}
.bg-pv20{ padding-top: 20px !important;padding-bottom: 20px!important;}
.bg-pv30{ padding-top: 30px !important;padding-bottom: 30px!important;}
.bg-pv40{ padding-top: 40px !important;padding-bottom: 40px !important;}
.bg-pv50{ padding-top: 50px !important;padding-bottom: 50px !important;}
.bg-pv60{ padding-top: 60px !important;padding-bottom: 60px !important;}
.bg-pv70{ padding-top: 70px !important;padding-bottom: 70px !important;}
.bg-pv80{ padding-top: 80px !important;padding-bottom: 80px !important;}
.bg-pv90{ padding-top: 90px !important;padding-bottom: 90px !important;}
.bg-pv100{ padding-top: 100px !important;padding-bottom: 100px!important;}

.bg-ph0{ padding-left:0 !important;padding-right:0 !important;}
.bg-ph5{ padding-left: 5px !important;padding-right: 5px!important;}
.bg-ph10{ padding-left: 10px !important;padding-right: 10px!important;}
.bg-ph15{ padding-left: 15px !important;padding-right: 15px!important;}
.bg-ph20{ padding-left: 20px !important;padding-right: 20px!important;}
.bg-ph30{ padding-left: 30px !important;padding-right: 30px!important;}
.bg-ph40{ padding-left: 40px !important;padding-right: 40px !important;}
.bg-ph50{ padding-left: 50px !important;padding-right: 50px !important;}
.bg-ph60{ padding-left: 60px !important;padding-right: 60px !important;}
.bg-ph70{ padding-left: 70px !important;padding-right: 70px !important;}
.bg-ph80{ padding-left: 80px !important;padding-right: 80px !important;}
.bg-ph90{ padding-left: 90px !important;padding-right: 90px !important;}
.bg-ph100{ padding-left: 100px !important;padding-right: 100px!important;}

/*行间距*/
.bg-lh20{ line-height: 20px; }
.bg-lh21{ line-height: 21px; }
.bg-lh22{ line-height: 22px; }
.bg-lh23{ line-height: 23px; }
.bg-lh24{ line-height: 24px; }
.bg-lh25{ line-height: 25px; }
.bg-lh26{ line-height: 26px; }
.bg-lh27{ line-height: 27px; }
.bg-lh28{ line-height: 28px; }
.bg-lh29{ line-height: 29px; }
.bg-lh30{ line-height: 30px; }
.bg-lh31{ line-height: 31px; }
.bg-lh32{ line-height: 32px; }
.bg-lh33{ line-height: 33px; }
.bg-lh34{ line-height: 34px; }
.bg-lh35{ line-height: 35px; }
.bg-lh36{ line-height: 36px; }
.bg-lh37{ line-height: 37px; }
.bg-lh38{ line-height: 38px; }
.bg-lh39{ line-height: 39px; }
.bg-lh40{ line-height: 40px; }
.bg-lh45{ line-height: 45px; }



/* 浮动 */
.bg-fleft,.bg-fl{ float: left!important; }
.bg-fright,.bg-fr{ float: right!important; }
.bg-clear{ clear:both!important; }

/* 对齐 */
.bg-c{ margin-left: auto; margin-right: auto;}
.bg-center{ text-align:center!important; }
.bg-left{ text-align:left!important; }
.bg-right{ text-align:right!important; }
.bg-vm { vertical-align: middle!important;}

/* 显示方式 */
.bg-inline,.bg-in { display: inline!important;}
.bg-inlineblock, .bg-inb { display: inline-block!important;}
.bg-blk { display: block!important;}
.bg-hide,.bg-collapse { display: none;}
.bg-over-hide{ overflow: hidden; }

/* 粗体 */
.bg-bold{font-weight: bold!important;}
.bg-b700{font-weight: 700!important;}
.bg-nobold{font-weight: normal!important;}

/* 圆角 */
.bg-circle, .bg-radius-50{ border-radius:50%!important; }
.bg-round, .bg-radius-100{ border-radius:1000px; }
.bg-radius-2{border-radius: 2px;}
.bg-radius-3{border-radius: 03px;}
.bg-radius-4{border-radius: 04px;}
.bg-radius-5{border-radius: 5px;}
.bg-radius-6{border-radius: 06px;}
.bg-radius-7{border-radius: 07px;}
.bg-radius-8{border-radius: 8px;}
.bg-radius-9{border-radius: 09px;}
.bg-radius-10{border-radius: 10px;}

/* Color */
.bg-red { color: red!important; }
.bg-f00 { color: #f00!important; }
.bg-green { color: green!important; }
.bg-0f0 { color: #0f0!important; }
.bg-blue { color: blue!important; }
.bg-00f { color: #00f!important; }
.bg-white { color: white!important; }
.bg-fff { color: #fff!important; }
.bg-black { color: black!important; }
.bg-000 { color: #000!important; }
.bg-orange { color: orange!important; }
.bg-f80 { color: #f80!important; }
.bg-purple { color: purple!important; }
.bg-f0f { color: #f0f!important; }
.bg-111 { color: #111!important; }
.bg-222 { color: #222!important; }
.bg-333 { color: #333!important; }
.bg-444 { color: #444!important; }
.bg-4c { color: #4c4c4c!important; }
.bg-555 { color: #555!important; }
.bg-666 { color: #666!important; }
.bg-777 { color: #777!important; }
.bg-888 { color: #888!important; }
.bg-999 { color: #999!important; }
.bg-aaa { color: #aaa!important; }
.bg-ccc { color: #ccc!important; }
.bg-ef, .bg-efefef { color: #efefef!important; }

/* 背景色Color */
.bg-bg-red { background-color: red!important; }
.bg-bg-green { background-color: green!important; }
.bg-bg-blue { background-color: blue!important; }
.bg-bg-white { background-color: white!important; }
.bg-bg-fff { background-color: white!important; }
.bg-bg-black { background-color: black!important; }
.bg-bg-000 { background-color: black!important; }
.bg-bg-orange { background-color: orange!important; }
.bg-bg-purple { background-color: purple!important; }
.bg-bg-cyan { background-color: cyan!important; }
.bg-bg-f0, .bg-bg-lightgray { background-color: #F0F0F0!important; }
.bg-bg-ccc { background-color: #ccc!important; }
.bg-bg-eee { background-color: #eee!important; }
.bg-bg-999 { background-color: #999!important; }
.bg-bg-f8 { background-color: #f8f8f8!important; }
.bg-bg-f7 { background-color: #f7f7f7!important; }
.bg-bg-f6 { background-color: #f6f6f6!important; }
.bg-bg-f5 { background-color: #f5f5f5!important; }
.bg-bg-f4 { background-color: #f4f4f4!important; }
.bg-bg-f2 { background-color: #f2f2f2!important; }
.bg-bg-ef { background-color: #efefef!important; }

/*边框*/
.bg-border-eee { border: 1px solid #eee; }
.bg-border-f5 { border: 1px solid #f5f5f5; }
.bg-border-f0 { border: 1px solid #f0f0f0; }
.bg-border-b-eee {border-bottom: 1px solid #eee;}
.bg-border-b-f5 {border-bottom: 1px solid #f5f5f5;}
.bg-border-b-f0 {border-bottom: 1px solid #f0f0f0;}
.bg-border-t-eee { border-top: 1px solid #eee; }
.bg-border-t-f5 { border-top: 1px solid #f5f5f5; }
.bg-border-t-f0 { border-top: 1px solid #f0f0f0; }
.bg-noborder { border: none !important; }
.bg-last-child:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; }

/* 字体 */
.bg-f-geo { font-family: "Georgia"!important;}
.bg-f-yahei { font-family: "微软雅黑"!important;}

/*字号*/
.bg-fs0{font-size: 0!important;}
.bg-fs10{font-size: 10px!important;}
.bg-fs11{font-size: 11px!important;}
.bg-fs12{font-size: 12px!important;}
.bg-fs13{font-size: 13px!important;}
.bg-fs14{font-size: 14px!important;}
.bg-fs15{font-size: 15px!important;}
.bg-fs16{font-size: 16px!important;}
.bg-fs17{font-size: 17px!important;}
.bg-fs18{font-size: 18px!important;}
.bg-fs19{font-size: 19px!important;}
.bg-fs20{font-size: 20px!important;}
.bg-fs21{font-size: 21px!important;}
.bg-fs22{font-size: 22px!important;}
.bg-fs23{font-size: 23px!important;}
.bg-fs24{font-size: 24px!important;}
.bg-fs25{font-size: 25px!important;}
.bg-fs26{font-size: 26px!important;}
.bg-fs27{font-size: 27px!important;}
.bg-fs28{font-size: 28px!important;}
.bg-fs29{font-size: 29px!important;}
.bg-fs30{font-size: 30px!important;}
.bg-fs31{font-size: 31px!important;}
.bg-fs32{font-size: 32px!important;}
.bg-fs33{font-size: 33px!important;}
.bg-fs34{font-size: 34px!important;}
.bg-fs35{font-size: 35px!important;}
.bg-fs36{font-size: 36px!important;}
.bg-fs37{font-size: 37px!important;}
.bg-fs38{font-size: 38px!important;}
.bg-fs39{font-size: 39px!important;}
.bg-fs40{font-size: 40px!important;}

.bg-uppercase { text-transform: uppercase; }
.bg-break-all { word-break: break-all; }
.bg-indent-1 { text-indent: 10px; }
.bg-box-shadow { box-shadow: 0 0 5px #ccc; }

/*响应式*/
.bg-resps{max-width: 100%;}


/* flex 栅格 */
/*
bg-flex-hv 水平/垂直
flex-start\flex-end\center\space-between\space-around
h：s\e\c\b\a
flex-start\flex-end\center\stretch\baseline
v:s\e\c\t\b
*/
.bg-flex{ display: flex; }
.bg-flex-v{ flex-direction: column; }

.bg-flex-ss{justify-content: flex-start; align-items: flex-start;}
.bg-flex-se{justify-content: flex-start; align-items: flex-end;}
.bg-flex-sc{justify-content: flex-start; align-items: center;}
.bg-flex-st{justify-content: flex-start; align-items: stretch;}
.bg-flex-sb{justify-content: flex-start; align-items: baseline;}

.bg-flex-es{justify-content: flex-end; align-items: flex-start;}
.bg-flex-ee{justify-content: flex-end; align-items: flex-end;}
.bg-flex-ec{justify-content: flex-end; align-items: center;}
.bg-flex-et{justify-content: flex-end; align-items: stretch;}
.bg-flex-eb{justify-content: flex-end; align-items: baseline;}

.bg-flex-cs{justify-content: center; align-items: flex-start;}
.bg-flex-ce{justify-content: center; align-items: flex-end;}
.bg-flex-cc{justify-content: center; align-items: center;}
.bg-flex-ct{justify-content: center; align-items: stretch;}
.bg-flex-cb{justify-content: center; align-items: baseline;}

.bg-flex-bs{justify-content: space-between; align-items: flex-start;}
.bg-flex-be{justify-content: space-between; align-items: flex-end;}
.bg-flex-bc{justify-content: space-between; align-items: center;}
.bg-flex-bt{justify-content: space-between; align-items: stretch;}
.bg-flex-bb{justify-content: space-between; align-items: baseline;}

.bg-flex-as{justify-content: space-around; align-items: flex-start;}
.bg-flex-ae{justify-content: space-around; align-items: flex-end;}
.bg-flex-ac{justify-content: space-around; align-items: center;}
.bg-flex-at{justify-content: space-around; align-items: stretch;}
.bg-flex-ab{justify-content: space-around; align-items: baseline;}

.bg-flex-wrap { flex-wrap: wrap; }
.bg-flex-nowrap { flex-wrap: nowrap; }
.bg-flex-grow{ flex-grow: 1; }
.bg-flex-1{ flex: 1; }

/*单行超出省略*/
.bg-elps{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.bg-elps-r2{text-overflow: ellipsis; overflow : hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.bg-elps-r3{text-overflow: ellipsis; overflow : hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.bg-elps-r4{text-overflow: ellipsis; overflow : hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.bg-elps-r5{text-overflow: ellipsis; overflow : hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;}

.bg-relative { position: relative; }
.bg-cursor { cursor: pointer; }

/*--------------------以下为复杂样式---------------------------*/

.bg-wrapper{ max-width: 640px; margin: 0 auto; }
.bg-block{ margin: 0 10px; background-color: #fff; border-radius:08px; }
.bg-content{ }
.bg-content img{ max-width: 100%; }
.bg-content p{margin:0; padding: 0;}


/*链接*/
.bg-link{ cursor: pointer; }

/*后退按钮*/
.bg-back{
    position: absolute; left: 20px; top: 20px; z-index: 9999;
    background-color: rgba(0,0,0,0.3);
    width: 40px; height: 40px; line-height: 40px;
    text-align: center; border-radius: 40px; 
    overflow: hidden;
    color: #EEE; font-size: 22px;
}
.bg-back-lb{ position: fixed; left: 20px; top: auto; bottom: 60px; }


/*一幅图轮播*/
.bg-lunbo{ position: relative;}
.bg-lunbo .bd{ overflow: hidden; }
.bg-lunbo .bd ul{ margin:0px; padding:0px; }
.bg-lunbo .bd ul li{ background-repeat: no-repeat; background-attachment: scroll; background-position:center; list-style:none; padding:0; margin:0;}
.bg-lunbo>.bd>ul>li>img{ border:0; max-width: 100%;}
.bg-lunbo .hd{ position: absolute;}
.bg-lunbo .hd ul{ text-align:center;}
.bg-lunbo .hd ul li{display: inline-block;}
.bg-lunbo .hd ul li.on{}

/* Swiper */
.bg-swiper-img{ width:100%; }
.bg-swiper-pagination {
    left: auto;
    right: 20px;
    bottom: 10px;
    width: auto;
    padding: 2px 7px;
    border-radius: 10px;
    color: #fff;
    background: rgba(0,0,0,.3);
}

/*分页*/
.bg-page-div { text-align:center; font-size:14px;}
.bg-page-div a{ margin-right:10px; display: inline!important; color:#999;}
.bg-page-div span{ margin-right:10px; display: inline!important;}

/*分割线*/
.bg-line{width:100%;height:1px; border-bottom:1px solid #ccc;}
.bg-line-dashed{border-bottom:1px dashed #ccc!important;}



/*上传图片*/
.bg-up-p{position: relative; width:140px; height:30px; margin-bottom: 06px;}
.bg-up-s{width:140px; height:30px; background-color: #e6e6e6; border-radius:2px; font-size:14px; line-height:30px; text-align:center; color:#666; cursor: pointer;}
.bg-up-f{position: absolute; top:0; left:0; width: 140px; height: 30px; /*visibility: hidden;*/ opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0); outline: none; }
.bg-up-item{ margin-top:10px; width:100px; height:120px; text-align: center; display: table-cell; vertical-align: top;}
.bg-up-item-div{ width:100px; height:100px; border:1px solid #efefef; padding:1px; display: table-cell; vertical-align: middle; text-align: center;}
.bg-up-item-img{max-width:100px; max-height:100px;}
.bg-up-item-del{color: #666;}
.bg-up-split{ display: table-cell; width:10px;}



/* wdvalidate */
.bg-valid-errmsg{display: block; margin-top: 5px; margin-bottom: 10px; color: #ff3322;
}
.bg-valid-errborder{border-color:#ff3322!important;}


/*数量加减*/
.bg-numinput{ box-sizing: border-box; width: 120px; height: 35px; border: solid 1px #bbb; border-radius: 3px; display: flex; }
/*减号*/
.bg-numinput-sub{ width: 40px; height:33px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #555; background-color: #f9f9f9; }
/*加号*/
.bg-numinput-add{ width: 40px; height:33px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #555; background-color: #f9f9f9; }
/*数字*/
.bg-numinput-num{ box-sizing: border-box; width: 40px !important; height: 33px !important; padding:4px !important; border:0 !important; border-left: 1px solid #ccc !important; border-right: 1px solid #ccc !important; text-align: center; line-height:33px; color: #666 !important; }


/*-----------------------
 *
 * headbar
 *
 ------------------------*/
.bg-headbar{ height: 50px; display: flex; overflow: hidden; z-index: 1000; }
.bg-headbar-red{ background-color: #DD4B39; }
.bg-headbar-green{ background-color: #00A65A; }
.bg-headbar-blue{ background-color: #3C8DBC; }
.bg-headbar-primay{ background-color: #3C8DBC; }
.bg-headbar-info{ background-color: #00C0EF; }
.bg-headbar-orange{ background-color: #F39C12; }
.bg-headbar-purple{ background-color: #9585BF; }
.bg-headbar-gray{ background-color: #e7e7e7; }
.bg-headbar-fixed{ position: fixed; width: 100%; }
.bg-headbar-blank{ height: 50px; }
.bg-headbar-left{ width: 20%; height: 50px; line-height: 50px; padding-left: 10px; }
.bg-headbar-center{ width: 60%; height: 50px; line-height: 50px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-headbar-right{ width: 20%; height: 50px; line-height: 50px; text-align: right; padding-right: 10px; overflow: hidden; }
.bg-headbar-red,
.bg-headbar-green,
.bg-headbar-blue,
.bg-headbar-primay,
.bg-headbar-info,
.bg-headbar-orange,
.bg-headbar-purple,
.bg-headbar a{ color: #fff; }
.bg-headbar-left a{ display: flex; height: 100%; flex-direction: column; justify-content: center; }
.bg-headbar-gray a{ color: #666; }
.bg-headbar-right a{ display: block; height: 100%;}



/*-----------------------
 *
 * footbar
 *
 ------------------------*/
.bg-footerbar-blank{ height: 60px; }
.bg-footerbar{ position: fixed; bottom: 0; left:0; right:0; margin: 0 auto; width: 100%; max-width: 640px; height: 60px; display: flex; align-items: center; justify-content: space-between;   background-color: #f0f0f0;}
.bg-footerbar-item{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 20%; }
.bg-footerbar-item>i{ font-size: 22px; line-height:24px; color: #666; }
.bg-footerbar-item>span{ margin: 0; font-size: 12px; line-height:20px; color: #666; }
.bg-footerbar-item-on>i{ color: #f80; }
.bg-footerbar-item-on>span{ color: #f80; }

/*-----------------------
 *
 * nomore
 *
 ------------------------*/
.bg-nomore{
    height:40px; line-height:40px;
    font-size:14px; color:#999; text-align: center;
}

/*-----------------------
 *
 * menubar
 *
 ------------------------*/
.bg-menubar{
    overflow: hidden;
}
.bg-menubar-item{
    float: left;
    padding: 10px 0px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.bg-menubar-item img{
    width: 50%;
    color: #fff;
}
.bg-menubar-item p{
    font-size: 14px;
    color: #333;
    margin: 0px;
    padding-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*-----------------------
 *
 * form-button
 *
 ------------------------*/
/*通用*/
.bg-btn{ padding: 10px 20px; background-color: #aaa; color: #fff; text-decoration:none; text-align:center; font-size: 16px; }
.bg-btn:active{ color: #fff; text-decoration: none; }
.bg-btn:visited{ color: #fff; text-decoration: none; }
/*圆角*/
.bg-btn-radius{ border-radius: 4px; }
/*圆形*/
.bg-btn-round{ border-radius: 1000px; }
/*大小*/
.bg-btn-xs{ padding: 2px 8px; font-size: 12px; line-height: 20px !important; }
.bg-btn-sm{ padding: 8px 12px; font-size: 12px; line-height: 1.5; }
.bg-btn-md{ padding: 10px 20px; font-size: 14px; line-height: 1.5; }
.bg-btn-lg{ padding: 15px 30px; font-size: 16px; }
/*颜色*/
.bg-btn-red{ background-color: #DD4B39; color: #fff;}
.bg-btn-red:active{ color: #fff; }
.bg-btn-red-ol{ border: 1px solid #DD4B39; color: #DD4B39; background-color: #fff;}
.bg-btn-red-ol:active{ color: #DD4B39; }
.bg-btn-primary{ background-color: #3C8DBC; color: #fff;}
.bg-btn-primary:active{ color: #fff; }
.bg-btn-primary-ol{ border: 1px solid #3C8DBC; color: #3C8DBC; background-color: #fff;}
.bg-btn-primary-ol:active{ color: #3C8DBC; }
.bg-btn-info{ background-color: #00C0EF; color: #fff;}
.bg-btn-info:active{ color: #fff; }
.bg-btn-info-ol{ border: 1px solid #00C0EF; color: #00C0EF; background-color: #fff;}
.bg-btn-info-ol:active{ color: #00C0EF; }
.bg-btn-green{ background-color: #00A65A; color: #fff;}
.bg-btn-green:active{ color: #fff; }
.bg-btn-green-ol{ border: 1px solid #00A65A; color: #00A65A; background-color: #fff;}
.bg-btn-green-ol:active{ color: #00A65A; }
.bg-btn-orange{ background-color: #F39C12; color: #fff;}
.bg-btn-orange:active{ color: #fff; }
.bg-btn-orange-ol{ border: 1px solid #F39C12; color: #F39C12; background-color: #fff;}
.bg-btn-orange-ol:active{ color: #F39C12; }
.bg-btn-purple{ background-color: #9585BF; color: #fff;}
.bg-btn-purple:active{ color: #fff; }
.bg-btn-purple-ol{ border: 1px solid #9585BF; color: #9585BF; background-color: #fff;}
.bg-btn-purple-ol:active{ color: #9585BF; }
/*行按钮*/
.bg-btn-block{ display: block; }



/*-----------------------
 *
 * form-input
 *
 ------------------------*/
.bg-input{
    
}
.bg-fm-title{ font-size: 14px; display: block; margin-bottom: 06px; margin-top: 10px; }
.bg-fm {
    display: block;
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 14px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
}
.bg-fm-line{
    border: 0; border-bottom: 1px solid #ddd;
}
.bg-fm-noborder{
    border: 0; 
}



/*-----------------------
 *
 * 小徽章
 *
 ------------------------*/
.bg-badge {
    font-size: 12px;
    line-height: 12px;
    display: inline-block;
    padding: 03px 06px;
    color: #333;
    border-radius: 100px;
    background-color: rgba(0,0,0,.15);
}
.bg-badge-purple, .bg-badge-royal {
    color: #fff;
    background-color: #8a6de9;
}
.bg-badge-green, .bg-badge-success {
    color: #fff;
    background-color: #00A65A;
}
.bg-badge-blue, .bg-badge-primary {
    color: #fff;
    background-color: #3C8DBC;
}
.bg-badge-lightblue, .bg-badge-info {
    color: #fff;
    background-color: #00C0EF;
}
.bg-badge-orange, .bg-badge-warning {
    color: #fff;
    background-color: #F39C12;
}
.bg-badge-red, .bg-badge-danger {
    color: #fff;
    background-color: #DD4B39;
}


/*-----------------------
 *
 * 文章页
 *
 ------------------------*/

.bg-article{
    padding: 20px 16px;
}
/* 标题 */
.bg-article-title {
    margin-bottom: 10px;
    line-height: 1.4;
    font-size: 22px;
    color: #333;
}
/* 元素那一行 */
.bg-article-meta-list {
    line-height: 20px;
    font-size: 0;
    word-wrap: break-word;
    word-break: break-all;
}
/* 元素 */
.bg-article-meta {
    display: inline-block;
    margin: 0 10px 0;
    vertical-align: middle;
    font-size: 15px;
    color: rgba(0,0,0,0.3);
}
/* 元素链接 */
.bg-article-meta-a {
    color: #576b95;
    text-decoration: none;
}
/* 内容 */
.bg-article-content{
    overflow: hidden;
    color: #333;
    font-size: 16px;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-align: justify;
    position: relative;
    z-index: 0;
}
/* 内容中的图片 */
.bg-article-content img{
    border-radius: 4px;
    margin-bottom: 10px;
    width: 100% !important;
    height: auto !important;
    visibility: visible !important;
}
/* 内容中的段落 */
.bg-article-content p{
    margin-top: 15px;
    color: rgb(74, 74, 74);
    line-height: 22px;
}

/*-----------------------
 *
 * 选项卡（标题）
 *
 ------------------------*/
.bg-switchbar{
    padding: 10px 30px 0; height: 50px; display: flex; align-items: center; justify-content: space-around; background-color: #fff; border-bottom: 2px solid #fff;
}
.bg-switchbar-item{
    text-align: center; line-height: 40px; cursor: pointer;
}
.bg-switchbar-on{
    border-bottom: 2px solid #f00; font-weight: 700;
}





/*-----------------------
 *
 * box
 *
 ------------------------*/
.bg-box {
    width: 100%;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 0 5px #ccc;;
    border-top: 3px solid #fff;
}
.bg-box-warning {
    border-top-color: #f39c12;
}
.bg-box-info {
    border-top-color: #00c0ef;
}
.bg-box-header {
    padding: 10px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f4f4f4;
}
.bg-box-title {
    display: inline-block;
    font-size: 16px;
    margin: 0;
    line-height: 1;
}
.bg-box-header-noborder {
    border-bottom: 0;
}
.bg-box-body {
    border-bottom: 1px solid #f4f4f4;
    padding: 10px;
}
.bg-box-row{
    padding: 10px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f4f4f4;
    display: flex; align-items: flex-start; justify-content: space-between;
}
.bg-box-row:last-child{  border-bottom: 0; }
.bg-box-row-title{ margin-right: 10px; color: #999; width: 20%; white-space: nowrap; }
.bg-box-row-content{ color: #666; }
.bg-box-row-right{ color: #999; }
.bg-box-row-grow{ flex: 1;}
.bg-box-go{ padding: 10px; font-size: 14px; display: flex; align-items: center; justify-content: space-between;}
.bg-box-go-1{ color: #333; }
.bg-box-go-2{ color: #999; }
.bg-box-btn{ padding: 10px; font-size: 14px; display: flex; align-items: center; justify-content: space-between;}
.bg-box-btn2{ padding: 10px; font-size: 14px; display: flex; align-items: center; justify-content: space-around;}


/*-----------------------
 *
 * powerby 信息
 *
 ------------------------*/
.bg-power{
    margin-top: 20px; padding: 20px; text-align:center;
}
.bg-power-img{ width: 80px; }
.bg-power-p{ margin-top: 10px; color: #AAA; }.box-shadow {
	box-shadow: 0 0 5px #ccc;
}
.box-shadow-y2 {
	box-shadow: 0 2px 3px #ccc;
}


/*-----------------------
 *
 * 处理第三方样式
 *
 ------------------------*/
 
/*
 * Vue隐藏代码
 */
[v-cloak] {
    display: none;
}