.box
{
  margin-right: auto;
  margin-left: auto;
  background:#fff;
  width:300px;
  height:400px;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  flex-direction:column;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
  transition: transform .2s;
  border-radius: 3%;
  margin-top: 3%;
}
/* .box:hover
{
 transform:scale(1.2);
} */
.box .percent
{
  width:150px;
  height:150px;
  position:relative;
}
.box .percent svg
{
  width:150px;
  height:150px;
  position:relative;
}
.box .percent svg circle
{
  width:150px;
  height:150px;
  fill:none;
  stroke-width:10;
  stroke:#000;
  transform:translate(5px,5px);
  stroke-dasharray:440;
  stroke-dashoffset:440;
  stroke-linecap:round;
}
.box .percent svg circle:nth-child(1)
{
  stroke-dashoffset:0;
  stroke:#f3f3f3;
}
.box .percent svg circle:nth-child(2)
{
  stroke-dashoffset:calc(440 - (440 * 87) / 100);
  stroke:#03a9f4;
}
.box .percent .num
{
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  position:absolute;
  color:#111;
}
.box .percent .num h2
{
  font-size:48px;
}
.box .percent .num h2 span
{
  font-size:24px;
}
.box .text
{
  padding: 10px 0 0;
  color:#999;
  font-weight:700;
  letter-spacing:1px;
}