@charset "utf-8";

* {margin:0; padding:0; box-sizing:border-box;} /* 서버 적용시에는 해당 줄 삭제 */

.progressbar-inner {
    position:fixed; width:100%; height:100vh;
    background:rgba(0,0,0,.6);
}
.progressbar-inner .progressbar-box {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:88.8%; height:200px;
    max-width: 420px;
    background:#fff; padding-top:48px;
    border-radius:10px;
}
.progressbar-inner .progressbar-box .bar-inner {
    height:24px;
}
.progressbar-inner .progressbar-box .p-bar {
    position:relative;
    width:81.25%; height:24px;
    margin:0 auto;
    border-radius:100px;
    background:#E7E7E7;
}
.progressbar-inner .progressbar-box .p-bar .move-bar {
    width:0; height:24px;
    position:absolute; top:0; left:0;
    border-radius:100px;
    background:#6045E2 url(../img/common/progress_bar_ling.svg);
    background-repeat:repeat-x;
    background-size:auto 100%;
    overflow:hidden;
}

/* 텍스트 추가 */
.progressbar-inner.text .progressbar-box {
    height:200px;
    padding-top:44px;
}
.progressbar-inner.text .progressbar-box > p {
    font-size:14px;
    color:#666;
    text-align:center;
    line-height:150%;
    margin-bottom:28px;
}
.progressbar-inner.text .progressbar-box > p > strong {
    font-weight:700;
    color:#222;
    font-size: 16px;
    margin-bottom: 10px;
    display: inline-block;
}

/* 퍼센트 추가 */
.progressbar-inner.percent .progressbar-box {
    height:200px;
    padding-top:44px;
}
.progressbar-inner.percent .progressbar-box .bar-inner {
    padding:0 23px;
}
.progressbar-inner.percent .progressbar-box .p-bar {
    float:left;
}
.progressbar-inner.percent .progressbar-box .bar-inner > strong {
    float:right;
    font-size:16px; font-weight:900;
    color:#7459D9;
}