#model-box {
  width: 100%;
  height: 100%;
}
/* The right grid contains the model and occupies 50% of the available space */
model-viewer {
    width: 100%;
    height: 100%;
    outline: none;
    background: no-repeat center center;
    background-size: 100% 100%;
}

 .progress-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
 }
 .p-c-text {
   margin-top: .8rem /* 60/75 */;
   font-size: .48rem /* 36/75 */;
   color: #fff;
   text-align: center;
 }
.progress_bar{
  display: none;
    width: 4.48rem;
    height: 4.48rem;
    position: relative;
    border-radius: 50%;
    box-sizing: border-box;
    margin: 0 auto;
}
.default {
  width: 4.266667rem /* 320/75 */;
  height: 4.266667rem;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid #e7fe76;
  transform: translate(-50%, -50%);
}
.num{
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    width: 4.48rem; 
    height: 4.48rem;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 4.48rem;
    font-size: .48rem /* 36/75 */;
    color: #e7fe76;
}
 
 
.clip{
  width: 4.48rem /* 336/75 */;
  height: 4.48rem;
  position: absolute;
  border: .213333rem /* 16/75 */ solid transparent;
  border-radius: 50%;
  box-sizing: border-box;
  clip: rect(0, 4.48rem, 4.48rem, 2.24rem /* 168/75 */);
}
.left{
  width: 4.48rem;
  height: 4.48rem;
  position: absolute;
  border: .213333rem solid #e7fe76;
  border-radius: 50%;
  clip: rect(0 2.24rem 4.48rem 0);
  top: -.213333rem;
  left: -.213333rem;
  box-sizing: border-box;
}
.right{
  width: 4.48rem;
  height: 4.48rem;
  position: absolute;
  border: .213333rem solid #e7fe76;
  border-radius: 50%;
  clip: rect(0 4.48rem 4.48rem 2.24rem);
  top: -.213333rem;
  left: -.213333rem;
  box-sizing: border-box;
}
.width-none{
    width: 0;
}
.auto{
    clip: auto;
}