/*进度条效果*/
#bar_container{
    float: left;
    color: #ffffff;
    width: 50%;
}

.bar {
  height: 40px;
  width: 0;
  transition: width 1.2s ease-in-out;
  -webkit-transition: width 1.2s ease-in-out;
  -moz-transition: width 1.2s ease-in-out;
  -ms-transition: width 1.2s ease-in-out;
  position: relative;
  margin: 30px 0;
  border-radius: 4px;
}

.bar.mint {
  background-color: #14c3a2;
  background-image: repeating-linear-gradient(-45deg, #14c3a2, #14c3a2 30px, #22e8c3 30px, #22e8c3 60px);
  background-size: 600px 100%;
  animation: barberpole 12s linear infinite;
  -webkit-animation: barberpole 12s linear infinite;
  -moz-animation: barberpole 12s linear infinite;
  -o-animation: barberpole 12s linear infinite;
  -ms-accelerator: barberpole 12s linear infinite;
  border-bottom: 5px solid #0d7e68;
}

.bar.red {
  background-color: #cf4647;
  background-image: repeating-linear-gradient(-45deg, #cf4647, #cf4647 30px, #da6e6f 30px, #da6e6f 60px);
  background-size: 600px 100%;
  animation: barberpole 12s linear infinite;
  -webkit-animation: barberpole 12s linear infinite;
  -moz-animation: barberpole 12s linear infinite;
  -o-animation: barberpole 12s linear infinite;
  -ms-accelerator: barberpole 12s linear infinite;
  border-bottom: 5px solid #9f292a;
}

.bar.orange {d
  background-color: #eb7b59;
  background-image: repeating-linear-gradient(-45deg, #eb7b59, #eb7b59 30px, #f09f87 30px, #f09f87 60px);
  background-size: 600px 100%;
  animation: barberpole 12s linear infinite;
  -webkit-animation: barberpole 12s linear infinite;
  -moz-animation: barberpole 12s linear infinite;
  -o-animation: barberpole 12s linear infinite;
  -ms-accelerator: barberpole 12s linear infinite;
  border-bottom: 5px solid #dd481b;
}

.bar.lila {
  background-color: #524656;
  background-image: repeating-linear-gradient(-45deg, #524656, #524656 30px, #6d5d72 30px, #6d5d72 60px);
  background-size: 600px 100%;
  animation: barberpole 12s linear infinite;
  -webkit-animation: barberpole 12s linear infinite;
  -moz-animation: barberpole 12s linear infinite;
  -ms-accelerator: barberpole 12s linear infinite;
  -o-animation: barberpole 12s linear infinite;
  border-bottom: 5px solid #2a242c;
}

.bar.gray {
  background-color: #595b5a;
  background-image: repeating-linear-gradient(-45deg, #595b5a, #595b5a 30px, #727574 30px, #727574 60px);
  background-size: 600px 100%;
  animation: barberpole 12s linear infinite;
  -webkit-animation: barberpole 12s linear infinite;
  -moz-animation: barberpole 12s linear infinite;
  -ms-accelerator: barberpole 12s linear infinite;
  -o-animation: barberpole 12s linear infinite;
  border-bottom: 5px solid #333434;
}

.bar.blue {
  background-color: blueviolet;
  background-image: repeating-linear-gradient(-45deg, #595b5a, #595b5a 30px, #727574 30px, #727574 60px);
  background-size: 600px 100%;
  animation: barberpole 12s linear infinite;
  -webkit-animation: barberpole 12s linear infinite;
  -moz-animation: barberpole 12s linear infinite;
  -o-animation: barberpole 12s linear infinite;
  -ms-accelerator: barberpole 12s linear infinite;
  border-bottom: 5px solid #333434;
}

.bar.moe {
  background-color: green;
   background-image: repeating-linear-gradient(-45deg, #f56d5d, #ff7374 30px, #ff8383 30px, #ff8c8d 60px);
  background-size: 600px 100%;
  animation: barberpole 12s linear infinite;
  -webkit-animation: barberpole 12s linear infinite;
  -moz-animation: barberpole 12s linear infinite;
  -o-animation: barberpole 12s linear infinite;
  -ms-accelerator: barberpole 12s linear infinite;
  border-bottom: 5px solid #dd481b;
}

.bar.active:after, .bar.active:before {
  opacity: 1;
  font-size: 16px;
}

.bar:before {
  content: attr(data-skill);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  height: 40px;
  font-style: italic;
  opacity: 0;
  transition: opacity 2s 0.6s;
  -webkit-transition: opacity 2s 0.6s;
  -moz-transition: opacity 2s 0.6s;
  -ms-transition: opacity 2s 0.6s;
  -o-animation: opacity 2s 0.6s;
}

.bar:after {
  content: attr(data-percent) "%";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 40px;
  padding: 10px;
  opacity: 0;
  transition: opacity 2s 0.6s;
  -webkit-transition: opacity 2s 0.6s;
  -moz-transition: opacity 2s 0.6s;
  -ms-transition: opacity 2s 0.6s;
  -o-animation: opacity 2s 0.6s;
}

@keyframes barberpole {
  from {
    background-position: 0% 0%;
  }

  to {
    background-position: 600px 0%;
  }
}

@-webkit-keyframes barberpole {
  from {
    background-position: 0% 0%;
  }

  to {
    background-position: 600px 0%;
  }
}

@-moz-keyframes barberpole {
  from {
    background-position: 0% 0%;
  }

  to {
    background-position: 600px 0%;
  }
}

@-ms-keyframes barberpole {
  from {
    background-position: 0% 0%;
  }

  to {
    background-position: 600px 0%;
  }
}

@-o-keyframes barberpole {
  from {
    background-position: 0% 0%;
  }

  to {
    background-position: 600px 0%;
  }
}

.bar.active[data-percent="5"] {
  width: 5%;
}

.bar.active[data-percent="10"] {
  width: 10%;
}

.bar.active[data-percent="15"] {
  width: 15%;
}

.bar.active[data-percent="20"] {
  width: 20%;
}

.bar.active[data-percent="25"] {
  width: 25%;
}

.bar.active[data-percent="30"] {
  width: 30%;
}

.bar.active[data-percent="35"] {
  width: 35%;
}

.bar.active[data-percent="40"] {
  width: 40%;
}

.bar.active[data-percent="45"] {
  width: 45%;
}

.bar.active[data-percent="50"] {
  width: 50%;
}

.bar.active[data-percent="55"] {
  width: 55%;
}

.bar.active[data-percent="60"] {
  width: 60%;
}

.bar.active[data-percent="65"] {
  width: 65%;
}

.bar.active[data-percent="70"] {
  width: 70%;
}

.bar.active[data-percent="75"] {
  width: 75%;
}

.bar.active[data-percent="80"] {
  width: 80%;
}

.bar.active[data-percent="85"] {
  width: 85%;
}

.bar.active[data-percent="90"] {
  width: 90%;
}

.bar.active[data-percent="95"] {
  width: 95%;
}

.bar.active[data-percent="100"] {
  width: 100%;
}
/*便签*/
}
.bq ul{
  overflow:hidden;
  padding:3em;
  list-style:none;
}
.bq li a{
  text-decoration:none;
  color:#000;
  background:rgba(183, 183, 183, 0.81);
  display:block;
  height:10em;
  width:10em;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
  text-align: center;
}
.bq li{
  margin:1em;
  float:left;
  list-style:none;
}
.bq li h2{
  font-size:140%;
  font-weight:bold;
  /*! padding-bottom:10px; */
  /*! padding: inherit !important; */
  text-align: center;
}
.bq li p{
  font-family:"Reenie Beanie",arial,sans-serif;
  font-size:180%;
}
.bq li a{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}
.bq li:nth-child(even) a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:rgba(201, 70, 70, 0.8);
}
.bq li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:rgba(182, 130, 206, 0.8);
}
.bq li:nth-child(5n) a{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}
.bq li a:hover, .bq li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}