@charset "utf-8";
html, body,canvas{margin: 0px;padding: 0px}
.clear{clear:both;height:0;line-height:0;font-size:0;overflow:hidden;visibility:hidden}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.cap-shade{position: fixed; height:100%; width:100%; z-index:9999; top:0px; left:0px; background-color:#000; opacity:0.2; filter:alpha(opacity=20);}
.cap-box{width: 400px; height: 360px;  position:fixed; top:50%; left:50%; margin-left:-200px; margin-top:-180px;  border: 1px solid #e5e5e5;  border-radius: 4px;  box-shadow: 0 4px 18px rgba(0,0,0,0.2);overflow: hidden; background: #fff; z-index: 10000; }
.cap-box .cap-con{ width: 340px; margin:0 auto;padding-top: 55px; box-sizing:content-box;-moz-box-sizing:content-box; /* Firefox */  -webkit-box-sizing:content-box; /* Safari */}
.cap-box .cap-con .cap-ui{width:301px;position:relative;padding:16px 16px;border:1px solid #ddd;background:#f2ece1;border-radius:16px; overflow: hidden; box-sizing:content-box;-moz-box-sizing:content-box; /* Firefox */  -webkit-box-sizing:content-box; /* Safari */ }
.cap-box .cap-con .cap-ui .cap-ui-img{ width: 300px; height: 150px;position:relative; overflow: hidden}
#cap_canvas_bg,#cap_canvas_mask{width: 300px; height: 150px;}
#cap_canvas_mask{ position: absolute; top: 0px; left: 0px; z-index: 9999}
.cap-box .cap-con .cap-ui-slide{ width: 300px; height: 40px; background: url("../images/cap_icon.png") no-repeat; margin: 20px auto; position: relative}
.cap-box .cap-tips{position:absolute;left:0;bottom:-22px;background:rgba(255,255,255,.9);height:22px;line-height:22px;font-size:14px;width:100%;margin:0;text-align:center; color: #fff;transition:all .4s}
.cap-box .slider-success{bottom:0px; background: #24C628;}
.cap-box .slider-fail{bottom:0px;background: #DE5145; }
.cap-box .cap-con .cap-ui-slide p{font-size:12px;color: #486c80;line-height:40px;margin:0;text-align:right;padding-right:50px; -moz-user-select: none; -khtml-user-select: none; user-select: none;  box-sizing:content-box;-moz-box-sizing:content-box; /* Firefox */  -webkit-box-sizing:content-box; /* Safari */}
.cap-box .cap-con .cap-ui-slide-block{ width: 65px; height: 65px; background: url("../images/cap_icon.png") no-repeat 0 -46px; position: absolute; top: -10px; left: 0px;cursor: pointer;}
.cap-box .cap-con .cap-ui-tool{ width: 100%; height: 40px;}
.cap-box .cap-con .cap-ui-tool a{ display: inline-block; background: url("../images/cap_icon.png") no-repeat; width: 24px; height: 24px; margin-right: 5px;  }
.cap-box .cap-con .cap-ui-tool a:hover{opacity:0.8; filter:alpha(opacity=80)}
.cap-box .cap-con .cap-ui-tool .cap-close{ background-position: 0 -186px;}
.cap-box .cap-con .cap-ui-tool .cap-refresh{background-position: 0 -351px;}