/***************
***Author: bimoe
***Blog: 9499460.com
***Time: 2018-12-24 04:27:48
***************/
html,body {
  height: 100%;
}

.wrap {
  min-height: 100%;
}
.main {
  padding-bottom:50px;
}
.uatip {
  background: rgba(0,0,0,0.8);
  text-align: center; position: fixed;
  left:0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  display: none;
}
.uatip-icon {
  width: 52px;
  height: 67px;
  background: url(../images/ua-tip.png) no-repeat;
  display: block;
  position: absolute;
  right: 20px;
  top: 20px;
}
.uatip-txt {
  margin: 25px; 
  color: #fff;
  font-size: 18px;
  font-weight: bold; 
  line-height: 1.8;
  letter-spacing: 2px; 
}



.polaroid {
  margin: auto;
  width: 99px;
  height: 99px;
  box-shadow: 2px 1px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  border-radius: 23%;
}



.btn-circle {
  border-radius: 22px;
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
}
.id {
  width: 300px;
  margin:0 auto;
}
.info {
  padding-left: 0px;
  position: relative;
  top: 10px;
}



.bar {
  background-color: #ccc;
  height: 2vh;
  margin: 0vh 0 1vh 0;
  padding: 1vh;
  position: relative;
  width: 100%;
}

.bar:before {
  animation: barWidth 40s linear;
  background-color: #0c0;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(0.99, 1);
  transform-origin: left;
  width: 100%;
}




@keyframes barWidth {
0%,6% {transform: scale(0, 1);}
21%,32% {transform: scale(0.2, 1);}
45%,46% {transform: scale(0.3, 1);}
57%,58% {transform: scale(0.4, 1);}
69%,70% {transform: scale(0.5, 1);}
74%,75% {transform: scale(0.6, 1);}
84%,85% {transform: scale(0.8, 1);}
92%,93% {transform: scale(0.9, 1);}
98%,99% {transform: scale(0.99, 1);}

}