*{margin:0;padding:0}
ol,ul,li{list-style:none;}
body{font-family:"Verdana", "Tahoma", "Lucida Grande", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;color: #333;font-size: 14px;}
.drag-box{width:1000px;height:500px;border:1px solid #ccc;margin:20px auto; position:relative; background: url(../img/bg.png) no-repeat;-webkit-user-select:none;-moz-user-select: none; -khtml-user-select: none; user-select: none;}
.dragX{position:absolute;width:80%;margin:0 auto;height:10px;background:#eee;left:10%;bottom:50px; border-radius:5px;z-index: 0;}
.drag-mask{position: relative;background:transparent;top: 0;left: 0;width: 100%;height: 430px;z-index:1;}
.drag-handle{position:absolute;background:#429DEF;top:-8px;left:0;padding:0; width:24px;height:24px;border-radius:50%;cursor:-webkit-grab;margin-left:-12px;}
.drag-handle:active{cursor: -webkit-grabbing;}
.drag-line{width:2px;height:370px;background:#ccc; position:absolute;bottom:24px;left:50%;margin-left:-1px;}
.drag-line:before{content: '';position:absolute;width:2px;background: #ccc;height:50px;left:0;top:-25px;}
.drag-line:after{content: '';position: absolute;width:12px;height: 12px;border:solid #ccc;border-width: 2px 0 0 2px;transform: rotate(45deg);top: -25px;left: -6px;}
.calibrationX{position: absolute;background:#ccc;left:0;top:30px;width:100%;}
.calibrationX ul li{position: absolute;top:0;width:70px;text-align: center;margin-left:-35px;}
.calibrationX ul li:before{content: '';position: absolute;width: 0;height: 18px;border-left:1px solid #eee;top:-27px;left:50%}
.calibrationX ul li:nth-child(1){left:0}
.calibrationX ul li:nth-child(2){left:19%}
.calibrationX ul li:nth-child(3){left:38%}
.calibrationX ul li:nth-child(4){left:57%}
.calibrationX ul li:nth-child(5){left:76%}
.calibrationX ul li:nth-child(6){left:100%}

.PercentBit{position: absolute;width:226px;left:0;margin-left: -113px;height: 20px;line-height: 20px;margin-bottom: -10px;z-index:0;}
.PercentBit span{position: absolute;width:14px;height:14px;background:#fff;border:1px solid #ccc;border-radius: 50%;left:50%;margin-left:-7px;top: 3px;}
.PercentBit p{width:100px;background:rgba(255,255,255,0.8);}
.PercentBit p:first-child{float: left;text-align: right;}
.PercentBit p:last-child{float: right;text-align: left;}
.pb25{bottom: 25%;}
.pb50{bottom: 50%;}
.pb75{bottom: 75%;}
.pb-bgs{bottom:0;color:#ff9900;z-index: 1;}
.pb-bgs span{background: #ff9900;border-color: #ff9900; perspective: none;}
.overflow-hidden{overflow: hidden;height:380px;width: 226px;margin-left: -113px;margin-top:-10px}
.drag-ul{width: 226px;height:370px;position: relative;margin-top:10px;}
.drag-ul ul{height: 500%;position: absolute;bottom: 0;width:226px;/*transition: 0.2;-moz-transition: 0.2s;-webkit-transition: 0.2s;-o-transition: 0.2s;*/}
.drag-ul ul li{width:226px;left:0;margin-left:0;}

.Explain{width:78%;margin-left: 10%;padding:5px 1%}
.Explain span{margin: 0 3px;color: #ff9900;font-weight: bold;}