@charset "utf-8";

/* flex */
.flexbox{ display: box; display: -webkit-box; display: -moz-box; display: -ms-box; -webkit-box-orient:horizontal; box-orient:horizontal;}
.flexbox > *{ display: block; box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; -ms-box-flex:1;}


/*圆形进度条*/
.circleProBox{position:fixed;bottom:168px;right:5px;height:100px;z-index:100;}
.circleProBox .circlePro{position:absolute;right:10px;top:10px;width:80px;height:80px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.2);border-radius:50%;overflow:hidden;z-index:102;}        
.circlePro section{position:relative;margin:5px;width:70px;height:70px;}
.circlePro .wrap,.circlePro .circle,.circlePro .percent{position:absolute;width:70px;height:70px;border-radius:50%;}
.circlePro .wrap{top:0;left:0;background-color:#ffdddc;}
.circlePro .circle{box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;border:1px solid #ffdddc;clip:rect(0,70px,70px,35px);}
.circlePro .clip-auto{clip:rect(auto, auto, auto, auto);}
.circlePro .percent{box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;top:-1px;left:-1px;}
.circlePro .left{border:3px solid #f83854;clip:rect(0,35px,70px,0);}
.circlePro .right{border:3px solid #f83854;clip:rect(0,70px,70px,35px);}
.circlePro .wth0{width:0;}
.circlePro .num{position:absolute;left:3px;top:3px;width:64px;height:64px;line-height:64px;text-align:center;color:#f83854;background:#fff;border-radius:50%;overflow:hidden;z-index:1;}
.circlePro .num .img{display:block;height:100%;background:url(../images/img_hb_xq.png) no-repeat;background-size:100%;}
.circlePro .num span{display:block;width:100%;height:100%;font-size:15px;letter-spacing:2px;background:#fff;border-radius:50%;overflow:hidden;}
.circlePro .num span em{display:inline-block;font-size:14px;}
.circlePro .num span i{font-size:24px;}
.circleProBox .xqhb_tsk{position:absolute;top:50%;right:94px;margin-top:-20px;padding:0 17px;height:40px;line-height:40px;font-size:15px;color:#fff;background:rgba(0,0,0,.8);border-radius:4px;white-space:nowrap;z-index:101;}
.circleProBox .xqhb_tsk:after{content:'';display:block;position:absolute;right:-8px;top:50%;margin-top:-3px;width:0;height:0;border:4px solid rgba(0,0,0,.8);border-color:transparent transparent transparent rgba(0,0,0,.8);}
.fade{-webkit-animation:fade .5s linear both;animation:fade .5s linear both;-moz-animation:fade .5s linear both;}
.fadeOut{-webkit-animation:fadeOut .5s linear both 3s;animation:fadeOut .5s linear both;-moz-animation:fadeOut .5s linear both 3s;}