.glyphicon-menu-down:before{content:"\e259"}
 .glyphicon-menu-up:before{content:"\e260"}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
 


// WebKit
@-webkit-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// Spec and IE10+
@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}


// Bar itself
// -------------------------

// Outer container
.progress {
  overflow: hidden;
  height: @line-height-computed;
  margin-bottom: @line-height-computed;
  background-color: @progress-bg;
  border-radius: @progress-border-radius;
  .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
}

// Bar of progress
.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: @font-size-small;
  line-height: @line-height-computed;
  color: @progress-bar-color;
  text-align: center;
  background-color: @progress-bar-bg;
  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  .transition(width .6s ease);
}

// Striped bars
//
// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar-striped` class, which you just add to an existing
// `.progress-bar`.
.progress-striped .progress-bar,
.progress-bar-striped {
  #gradient > .striped();
  background-size: 40px 40px;
}

// Call animation for the active one
//
// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar.active` approach.
.progress.active .progress-bar,
.progress-bar.active {
  .animation(progress-bar-stripes 2s linear infinite);
}


// Variations
// -------------------------

.progress-bar-success {
  .progress-bar-variant(@progress-bar-success-bg);
}

.progress-bar-info {
  .progress-bar-variant(@progress-bar-info-bg);
}

.progress-bar-warning {
  .progress-bar-variant(@progress-bar-warning-bg);
}

.progress-bar-danger {
  .progress-bar-variant(@progress-bar-danger-bg);
}



 .progress {
  width: 300px;
  height: 300px;
  margin: 0 auto  ;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 30px solid #eee;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left { left: 0; }
.progress .progress-right { right: 0; }

.progress .progress-bar {
  width: 100%;
  height: 100%;
  border: 30px solid var(--main_c);
  position: absolute;
  top: 0;
  background: none;
}
.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 150px;
  border-bottom-right-radius: 150px;
  border-left: 0;
  transform-origin: center left;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 150px;
  border-bottom-left-radius: 150px;
  border-right: 0;
  transform-origin: center right;
}
.progress .progress-value {
  display: flex;
  border-radius: 50%;
  font-size: 50px;
  align-items: center;
  justify-content: center;
  height: 100%;
   text-align: center;
  font-weight:600; 
 color:var(--main_c); 
 }
 
 /* 100%에서도 2% 남기기: 오른쪽은 꽉(180deg), 왼쪽만 172.8deg */
.active .progress[data-percentage="100"] .progress-right .progress-bar {
  animation: fill-right-full 1.1s linear forwards;   /* 180deg */
}
.active .progress[data-percentage="100"] .progress-left .progress-bar {
  animation: fill-left-98 1.1s linear forwards 1.1s; /* 172.8deg */
}

/* keyframes */
@keyframes fill-right-full {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }   /* 바닥까지 채움 */
}
@keyframes fill-left-98 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(172.8deg); } /* 약 2%(7.2deg) 남김 */
}

/* 필요하면 벤더 접두사도 추가 */
@-webkit-keyframes fill-right-full {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(180deg); }
}
@-webkit-keyframes fill-left-98 {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(172.8deg); }
}

@media all and (max-width:900px) {
  
  .progress {width:200px; height:200px;}
  .progress .progress-value {font-size:29px} 
  .progress .progress-bar { border: 20px solid var(--main_c); }
 .progress:after { border: 20px solid #eee; }
}