/*
bgUI
作者：张洪
邮箱：zhanghong@web100.cc
版本：v3.3.20200422.1
*/

/*
通用部分
*/
html{ font-size: 10px; }
body{
    font-size: 1.4rem;
    background-color: #F2F2F2;
    -webkit-tap-highlight-color: transparent;
}
label{ font-weight: 300; }
li{ list-style: none; }
input, select, textarea{ outline: none; }
a,a:link,a:active,a:hover,a:visited{text-decoration: none;}


/* 高度 */
.bg-h1{ height: 1px!important;}
.bg-h5{ height: 0.5rem!important;}
.bg-h10{ height: 1rem!important;}
.bg-h15{ height: 1.5rem!important;}
.bg-h20{ height: 2rem!important;}
.bg-h30{ height: 3rem!important;}
.bg-h40{ height: 4rem!important;}
.bg-h50{ height: 5rem!important;}
.bg-h60{ height: 6rem!important;}
.bg-h70{ height: 7rem!important;}
.bg-h80{ height: 8rem!important;}
.bg-h90{ height: 9rem!important;}
.bg-h100{ height: 10rem!important;}

/* 宽度 */
.bg-w10{ width: 1rem!important;}
.bg-w20{ width: 2rem!important;}
.bg-w30{ width: 3rem!important;}
.bg-w40{ width: 4rem!important;}
.bg-w50{ width: 5rem!important;}
.bg-w60{ width: 6rem!important;}
.bg-w70{ width: 7rem!important;}
.bg-w80{ width: 8rem!important;}
.bg-w90{ width: 9rem!important;}
.bg-w100{ width: 10rem!important;}
.bg-w200{ width: 20rem!important;}
.bg-w300{ width: 30rem!important;}
.bg-w400{ width: 40rem!important;}
.bg-w500{ width: 50rem!important;}
.bg-wp10{ width: 10%!important;}
.bg-wp20{ width: 20%!important;}
.bg-wp25{ width: 25%!important;}
.bg-wp30{ width: 30%!important;}
.bg-wp33{ width: 33.33%!important;}
.bg-wp40{ width: 40%!important;}
.bg-wp50{ width: 50%!important;}
.bg-wp60{ width: 60%!important;}
.bg-wp70{ width: 70%!important;}
.bg-wp80{ width: 80%!important;}
.bg-wp90{ width: 90%!important;}
.bg-wp100{ width: 100%!important;}

/* margin&padding */
.bg-m0{ margin: 0 !important;}
.bg-m10{ margin: 1.0rem !important;}
.bg-m20{ margin: 2.0rem !important;}
.bg-p0{ padding: 0 !important;}
.bg-p5{ padding: 0.5rem !important;}
.bg-p10{ padding: 1.0rem !important;}
.bg-p20{ padding: 2.0rem !important;}

.bg-mt0{ margin-top: 0 !important;}
.bg-mt5{ margin-top: 0.5rem !important;}
.bg-mt10{ margin-top: 1rem !important;}
.bg-mt20{ margin-top: 2rem !important;}
.bg-mt30{ margin-top: 3rem !important;}
.bg-mt40{ margin-top: 4rem !important;}
.bg-mt50{ margin-top: 5rem !important;}
.bg-mt100{ margin-top: 10rem !important;}

.bg-mb0{ margin-bottom: 0 !important;}
.bg-mb5{ margin-bottom: 0.5rem !important;}
.bg-mb10{ margin-bottom: 1rem !important;}
.bg-mb20{ margin-bottom: 2rem !important;}
.bg-mb30{ margin-bottom: 3rem !important;}
.bg-mb40{ margin-bottom: 4rem !important;}
.bg-mb50{ margin-bottom: 5rem !important;}
.bg-mb100{ margin-bottom: 10rem !important;}

.bg-ml0{ margin-left: 0 !important;}
.bg-ml5{ margin-left: 0.5rem !important;}
.bg-ml10{ margin-left: 1rem !important;}
.bg-ml20{ margin-left: 2rem !important;}
.bg-ml30{ margin-left: 3rem !important;}
.bg-ml40{ margin-left: 4rem !important;}
.bg-ml50{ margin-left: 5rem !important;}
.bg-ml100{ margin-left: 10rem !important;}

.bg-mr0{ margin-right: 0 !important;}
.bg-mr5{ margin-right: 0.5rem !important;}
.bg-mr10{ margin-right: 1rem !important;}
.bg-mr20{ margin-right: 2rem !important;}
.bg-mr30{ margin-right: 3rem !important;}
.bg-mr40{ margin-right: 4rem !important;}
.bg-mr50{ margin-right: 5rem !important;}
.bg-mr100{ margin-right: 10rem !important;}

.bg-mv0{ margin-top:0!important;margin-bottom:0!important;}
.bg-mv5{ margin-top:0.5rem!important;margin-bottom:0.5!important;}
.bg-mv10{ margin-top:1rem!important;margin-bottom:1rem!important;}
.bg-mv20{ margin-top:2rem!important;margin-bottom:2rem!important;}
.bg-mv30{ margin-top:3rem!important;margin-bottom:3rem!important;}
.bg-mv40{ margin-top:4rem!important;margin-bottom:4rem!important;}
.bg-mv50{ margin-top:5rem!important;margin-bottom:5rem!important;}
.bg-mv100{ margin-top:10rem!important;margin-bottom:10rem!important;}

.bg-mh0{ margin-left:0!important;margin-right:0!important;}
.bg-mh5{ margin-left:0.5rem !important;margin-right:0.5!important;}
.bg-mh10{ margin-left:1rem !important;margin-right:1rem!important;}
.bg-mh20{ margin-left:2rem !important;margin-right:2rem!important;}
.bg-mh30{ margin-left:3rem !important;margin-right:3rem!important;}
.bg-mh40{ margin-left:4rem !important;margin-right:4rem !important;}
.bg-mh50{ margin-left:5rem !important;margin-right:5rem !important;}
.bg-mh100{ margin-left:10rem !important;margin-right:10rem!important;}

.bg-pt0{ padding-top: 0 !important;}
.bg-pt5{ padding-top: 0.5rem !important;}
.bg-pt10{ padding-top: 1rem !important;}
.bg-pt20{ padding-top: 2rem !important;}
.bg-pt30{ padding-top: 3rem !important;}
.bg-pt40{ padding-top: 4rem !important;}
.bg-pt50{ padding-top: 5rem !important;}
.bg-pt100{ padding-top: 10rem !important;}

.bg-pb0{ padding-bottom: 0 !important;}
.bg-pb5{ padding-bottom: 0.5rem !important;}
.bg-pb10{ padding-bottom: 1rem !important;}
.bg-pb20{ padding-bottom: 2rem !important;}
.bg-pb30{ padding-bottom: 3rem !important;}
.bg-pb40{ padding-bottom: 4rem !important;}
.bg-pb50{ padding-bottom: 5rem !important;}
.bg-pb100{ padding-bottom: 10rem !important;}

.bg-pl0{ padding-left: 0 !important;}
.bg-pl5{ padding-left: 0.5rem !important;}
.bg-pl10{ padding-left: 1rem !important;}
.bg-pl20{ padding-left: 2rem !important;}
.bg-pl30{ padding-left: 3rem !important;}
.bg-pl40{ padding-left: 4rem !important;}
.bg-pl50{ padding-left: 5rem !important;}
.bg-pl100{ padding-left: 10rem !important;}

.bg-pr0{ padding-right: 0 !important;}
.bg-pr5{ padding-right: 0.5rem !important;}
.bg-pr10{ padding-right: 1rem !important;}
.bg-pr20{ padding-right: 2rem !important;}
.bg-pr30{ padding-right: 3rem !important;}
.bg-pr40{ padding-right: 4rem !important;}
.bg-pr50{ padding-right: 5rem !important;}
.bg-pr100{ padding-right: 10rem !important;}

.bg-pv0{ padding-top:0 !important;padding-bottom:0 !important;}
.bg-pv5{ padding-top:0.5rem !important;padding-bottom:0.5!important;}
.bg-pv10{ padding-top:1rem !important;padding-bottom:1rem!important;}
.bg-pv20{ padding-top:2rem !important;padding-bottom:2rem!important;}
.bg-pv30{ padding-top:3rem !important;padding-bottom:3rem!important;}
.bg-pv40{ padding-top:4rem !important;padding-bottom:4rem !important;}
.bg-pv50{ padding-top:5rem !important;padding-bottom:5rem !important;}
.bg-pv100{ padding-top:10rem !important;padding-bottom:10rem!important;}

.bg-ph0{ padding-left:0 !important;padding-right:0 !important;}
.bg-ph5{ padding-left:0.5rem !important;padding-right:0.5!important;}
.bg-ph10{ padding-left:1rem !important;padding-right:1rem!important;}
.bg-ph20{ padding-left:2rem !important;padding-right:2rem!important;}
.bg-ph30{ padding-left:3rem !important;padding-right:3rem!important;}
.bg-ph40{ padding-left:4rem !important;padding-right:4rem !important;}
.bg-ph50{ padding-left:5rem !important;padding-right:5rem !important;}
.bg-ph100{ padding-left:10rem !important;padding-right:10rem!important;}

/* 浮动 */
.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-in { display: inline!important;}
.bg-inb { display: inline-block!important;}
.bg-blk { display: block!important;}
.bg-hide { display: none!important;}
.bg-over-hide{ overflow: hidden; }

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

/* 边框 */
.bg-border{ border: 1px solid red!important; }
.bg-border-top { border: 1px solid #f4f4f4; }
.bg-radius{ border-radius:5px; }
.bg-circle{ border-radius:50%!important; }

/* 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-333 { color: #333!important; }
.bg-555 { color: #555!important; }
.bg-666 { color: #666!important; }
.bg-999 { color: #999!important; }
.bg-aaa { color: #aaa!important; }
.bg-ccc { color: #ccc!important; }
.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-black { 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-lightgray { background-color: #F0F0F0!important; }
.bg-bg-ccc { background-color: #ccc!important; }
.bg-bg-999 { background-color: #999!important; }


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

/*字号*/
.bg-fs10{font-size:1.0rem!important;}
.bg-fs11{font-size:1.1rem!important;}
.bg-fs12{font-size:1.2rem!important;}
.bg-fs13{font-size:1.3rem!important;}
.bg-fs14{font-size:1.4rem!important;}
.bg-fs15{font-size:1.5rem!important;}
.bg-fs16{font-size:1.6rem!important;}
.bg-fs17{font-size:1.7rem!important;}
.bg-fs18{font-size:1.8rem!important;}
.bg-fs19{font-size:1.9rem!important;}
.bg-fs20{font-size:2.0rem!important;}
.bg-fs22{font-size:2.2rem!important;}
.bg-fs24{font-size:2.4rem!important;}
.bg-fs26{font-size:2.6rem!important;}
.bg-fs30{font-size:3.0rem!important;}
.bg-fs40{font-size:4.0rem!important;}

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


/* flex 栅格 */
.bg-flex{display: flex; align-items: center; justify-content: space-between;}
.bg-flex-t{display: flex; align-items: flex-start; justify-content: center;}
.bg-flex-m{display: flex; flex-direction: column; align-items: center; justify-content: center;}
.bg-flex-c{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
.bg-flex-grow{ flex-grow: 1; }
.bg-flex-g{ display: flex; }
.bg-flex-g-1{ width: 100%; }
.bg-flex-g-2{ width: 50%; }
.bg-flex-g-3{ width: 33.33%; }
.bg-flex-g-4{ width: 25%; }
.bg-flex-g-5{ width: 20%;}
.bg-flex-g-8{ width: 12.5%;}
.bg-flex-g-10{ width: 10%; }

/*单行超出省略*/
.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-wrapper{ max-width: 64.0rem; margin: 0 auto; }
.bg-block{ margin: 0 1.0rem; background-color: #fff; border-radius:0.8rem; }
.bg-content{ }
.bg-content img{ max-width: 100%; }
.bg-content p{margin:0; padding: 0;}


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

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


/*一幅图轮播*/
.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: 0.6rem;}
.bg-up-s{width:140px; height:30px; background-color: #e6e6e6; border-radius:2px; font-size:1.4rem; 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:5rem; 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: 5rem; }
.bg-headbar-left{ width: 20%; height: 5rem; line-height: 5rem; padding-left: 1rem; }
.bg-headbar-center{ width: 60%; height: 5rem; line-height: 5rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-headbar-right{ width: 20%; height: 5rem; line-height: 5rem; text-align: right; padding-right: 1rem; 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: 6.0rem; }
.bg-footerbar{ position: fixed; bottom: 0; left:0; right:0; margin: 0 auto; width: 100%; max-width: 64.0rem; height: 6.0rem; 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: 2.2rem; line-height:2.4rem; color: #666; }
.bg-footerbar-item>span{ margin: 0; font-size: 1.2rem; line-height:2.0rem; color: #666; }
.bg-footerbar-item-on>i{ color: #f80; }
.bg-footerbar-item-on>span{ color: #f80; }

/*-----------------------
 *
 * nomore
 *
 ------------------------*/
.bg-nomore{
    height:4.0rem; line-height:4.0rem;
    font-size:1.4rem; color:#999; text-align: center;
}

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


/*-----------------------
 *
 * form-button
 *
 ------------------------*/
/*通用*/
.bg-btn{ padding: 1rem 2rem; background-color: #aaa; color: #fff; text-decoration:none; text-align:center; font-size: 1.6rem; }
.bg-btn:active{ color: #fff; text-decoration: none; }
.bg-btn:visited{ color: #fff; text-decoration: none; }
/*圆角*/
.bg-btn-radius{ border-radius: .4rem; }
/*圆形*/
.bg-btn-round{ border-radius: 1000px; }
/*大小*/
.bg-btn-xs{ padding: 0.2rem 0.8rem; font-size: 1.2rem; line-height: 2.0rem !important; }
.bg-btn-sm{ padding: 0.8rem 1.2rem; font-size: 1.2rem; line-height: 1.5; }
.bg-btn-md{ padding: 1.0rem 2.0rem; font-size: 1.4rem; line-height: 1.5; }
.bg-btn-lg{ padding: 1.5rem 3rem; font-size: 1.6rem; }
/*颜色*/
.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: 1.4rem; display: block; margin-bottom: 0.6rem; margin-top: 1.0rem; }
.bg-fm {
    display: block;
    width: 100%;
    height: 4.0rem;
    padding: 0.8rem 1.2rem;
    font-size: 1.4rem;
    line-height: 1.4rem;
    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: 1.2rem;
    line-height: 1.2rem;
    display: inline-block;
    padding: 0.3rem 0.6rem;
    color: #333;
    border-radius: 10.0rem;
    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: 2rem 1.6rem;
}
/* 标题 */
.bg-article-title {
    margin-bottom: 1.0rem;
    line-height: 1.4;
    font-size: 2.2rem;
    color: #333;
}
/* 元素那一行 */
.bg-article-meta-list {
    margin-bottom: 2.0rem;
    line-height: 2.0rem;
    font-size: 0;
    word-wrap: break-word;
    word-break: break-all;
}
/* 元素 */
.bg-article-meta {
    display: inline-block;
    margin: 0 1rem 1rem 0;
    vertical-align: middle;
    font-size: 1.5rem;
    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: 1.6rem;
    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: 1.0rem;
    width: 100% !important;
    height: auto !important;
    visibility: visible !important;
}
/* 内容中的段落 */
.bg-article-content p{
    margin-top: 1.0rem;
    color: rgb(74, 74, 74);
    line-height: 2.0rem;
}

/*-----------------------
 *
 * 选项卡（标题）
 *
 ------------------------*/
.bg-switchbar{
    padding: 1.0rem 3.0rem 0; height: 5.0rem; 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: 4.0rem; cursor: pointer;
}
.bg-switchbar-on{
    border-bottom: 2px solid #f00; font-weight: 700;
}





/*-----------------------
 *
 * box
 *
 ------------------------*/
.bg-box {
    width: 100%;
    border-radius: 0.8rem;
    background: #ffffff;
    box-shadow: 2px 5px 5px rgba(0,0,0,0.1);
    border-top: 3px solid #fff;
}
.bg-box-warning {
    border-top-color: #f39c12;
}
.bg-box-info {
    border-top-color: #00c0ef;
}
.bg-box-header {
    padding: 1.0rem;
    font-size: 1.4rem;
    color: #333;
    border-bottom: 1px solid #f4f4f4;
}
.bg-box-title {
    display: inline-block;
    font-size: 1.6rem;
    margin: 0;
    line-height: 1;
}
.bg-box-header-noborder {
    border-bottom: 0;
}
.bg-box-body {
    border-bottom: 1px solid #f4f4f4;
    padding: 1.0rem;
}
.bg-box-row{
    padding: 1.0rem;
    font-size: 1.4rem;
    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: 1.0rem; 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: 1.0rem; font-size: 1.4rem; 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: 1.0rem; font-size: 1.4rem; display: flex; align-items: center; justify-content: space-between;}
.bg-box-btn2{ padding: 1.0rem; font-size: 1.4rem; display: flex; align-items: center; justify-content: space-around;}


/*-----------------------
 *
 * powerby 信息
 *
 ------------------------*/
.bg-power{
    margin-top: 2.0rem; padding: 2.0rem; text-align:center;
}
.bg-power-img{ width: 8.0rem; }
.bg-power-p{ margin-top: 1.0rem; color: #AAA; }


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