html,
body {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
  font-family: "Microsoft YaHei", serif;
}
html > div,
body > div {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
}
html .rd-btn-code,
body .rd-btn-code {
  box-sizing: border-box;
  left: auto;
  top: 1.25rem;
  right: 1.08333333rem;
  height: 3.33333333rem;
  line-height: 3.33333333rem;
  width: 11rem;
  font-size: 1.25rem;
  color: #333333;
  padding: 0 1.25rem;
  margin: 0;
  border-radius: 0.41666667rem;
  box-shadow: 0 1px 1px 1.5px rgba(97, 97, 97, 0.3);
}
html .rd-btn-code img,
body .rd-btn-code img {
  width: 1.75rem;
  position: absolute;
  top: 0.66666667rem;
  left: 1.25rem;
}
html .rd-btn-code span,
body .rd-btn-code span {
  font-size: 1.25rem;
  position: absolute;
  right: 1.25rem;
}

html .container,
body .container {
  top: 40%;
  height: 3.33333333rem;
  width: 23.33333333rem;
}
html .bar-unfill,
body .bar-unfill {
    margin-top: 30px;
    height:15px;
    display:block;
    background:rgba(69,201,165,.3);
    width:100%;
    border-radius:8px
}
html .bar-fill,
body .bar-fill {
    height:15px;
    display:block;
    background:#45c9a5;
    width:100%;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); */
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); 
    -webkit-background-size: 40px 40px;
    border-radius:8px;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 2s;
    animation:progressbar 2s;
}

html .infinite-bar-fill,
body .infinite-bar-fill {
    height:15px;
    display:block;
    background:#45c9a5;
    width:100%;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); */
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); 
    -webkit-background-size: 40px 40px;
    border-radius:8px;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 2s infinite;
    animation:progressbar 2s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar { 
    from {
        width:0
    }
    to {
        width:100%
    }
}
/* Standard syntax */
@keyframes progressbar {
    from {
        width:0
    }
    to {
        width:100%
    }
}

html .title{
  text-align: center;
  font-size: 1.85rem;
  font-family: "Microsoft YaHei", serif;
}

html .rd-comment,
body .rd-comment {
  color: #666666;
  font-size: 1.08333333rem;
  bottom: 10%;
  width: 23.33333333rem;
  line-height: 2.33333333rem;
}