@charset "utf-8";

/* focus */
input:focus, textarea:focus, button:focus{
    outline: none !important;
    box-shadow:none !important;
}

/* 임시 - 공통 CSS 수정 후 삭제 예정 */
.input-group-text{
    background-color: #fafafa;
    color: #ccc;
}

/* 디자인 dark 변경*/
.btn-dark{
    background-color: #313b44 !important;
}

/* badge type  추가*/
.badge.type-text{
    border: 1px solid;
    border-radius: 1rem;
    background-color: #ffffff !important;
    font-size: 0.685rem !important;
}
.badge.type-round{
    width: .875rem;
    height: .875rem;
    border-radius:50%;
    padding: 0 !important;
    line-height: .875rem;
}

/* font color */
.text-complete, .text-success  {  /* complete, success */
    color:#8cc152 !important;
    border-color:#8cc152 !important;
}
.text-success2  {  /* success */
    color:#8cc152 !important;
}
.text-fail {
    color:#da4453 !important;
    border-color:#da4453 !important;
}
.text-wait, .text-stop {  /* wait, stop */
    color:#f6bb42 !important;
    border-color:#f6bb42 !important;
}
.text-g-8d {
    color:#8d8d8d !important;
}
.text-f60 {
    color:#ff6600 !important;
}
.text-warning {
    color:#cc3333 !important;
}
.text-opacity-0{
    color: transparent !important;
}

.text-deep-1 {
    color: #0e171e !important;
}
.text-deep-2 {
    color: #212b34 !important;
}
.text-deep-3 {
    color: #313b44 !important;
}
.text-deep-4 {
    color: #2e475d !important;
}

.text-grey-1 {
    color: #8493a1 !important;
}
.text-grey-2 {
    color: #cccccc !important;
}
.text-grey-3 {
    color: #eaeaea !important;
}
.text-grey-4 {
    color: #333333 !important;
}

/* bg color */
.bg-complete {
    background-color:#709a52 !important;
}
.bg-fail {
    background-color:#c35e60 !important;
}
.bg-wait {
    background-color:#d3924d !important;
}
.bg-f8{
    background-color: #f8f8f8;
}
.bg-chart-main{
    background-color: #27435f;
}
.bg-chart-main-gradient{
    background-image: linear-gradient(to right, #8d9eae 0%, #27435f 100%);
}
.bg-d-grey{background-color: #dee2e6;}

.bg-bk-17{background-color: #171717 !important;}

/* 메인 대시보드 - 임시 */
.main-dashboard .progress{
    height: .4375rem;
}

/* 전체 여백 수정 - 디자인 요청 */
.table-type-s>:not(caption)>*>*{
    padding: .3rem .4rem;
}
.table-type-m>:not(caption)>*>*{
    padding: .75rem .6rem;
}
.table.table-type-m>:not(:first-child){
    border-top: 0 !important;
}
.table-type-m.table-striped>tbody>tr:nth-of-type(odd)>*{
    background-color: #f8faf9 !important;
    box-shadow : none !important;
}
.table-type-m.table-striped>tbody>tr{border-bottom: #e5e5e5 !important;}
.table-type-m.table-striped>tbody>tr:hover{
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05) !important;
}





/* main-dashboar 탭 여백 수정 요청 - 확인 후 공통 처리 해야 함 */
.nav-tabs.nav-tabs-dark .nav-link{
    padding: .4rem 1rem;
}
.nav-tabs.nav-tabs-dark .nav-link{
    border-radius: 0 !important;
}

.nav-tabs.nav-tabs-dark .nav-item .nav-link{
    border-top: 0;
    border-left: 1px solid #fff;
}
.nav-tabs.nav-tabs-dark .nav-item:hover .nav-link{
    border-color: transparent;
}
.nav-tabs.nav-tabs-dark .nav-item:first-child .nav-link.active
{
    border-left: 1px solid #dee2e6;
    border-bottom-color: transparent !important;
}
.nav-tabs.nav-tabs-dark .nav-item:last-child .nav-link.active
{
    border-right: 1px solid #dee2e6;
    border-bottom-color: transparent !important;
}

.nav-tabs.nav-tabs-dark .nav-item:first-child:hover .nav-link.active,
.nav-tabs.nav-tabs-dark .nav-item:last-child:hover .nav-link.active
{
    border-color:#dee2e6;
    border-bottom-color: transparent;
}

.nav-tabs.nav-tabs-dark .nav-item .nav-link.active{
    border-top: 1px solid #dee2e6;
    border-bottom-color: transparent !important;
    border-color: #dee2e6;
}
.nav-tabs.nav-tabs-dark .nav-item:hover .nav-link.active{
    border-color:#dee2e6;
}
.nav-tabs.nav-tabs-dark .nav-link{
    border-color: transparent;
}

/* 페이지에 추가로 올수 없음 - 공통 */
.breadcrumb-item+.breadcrumb-item::before{
    content: '>';
    padding-right: 0;
}
.breadcrumb-item+.breadcrumb-item{
    padding-left: 0;
}


/* 임시 이미지 영역 - 삭제예정 */
.tmp-img-box{
    width: 5.375rem;
    height: 5.375rem;
    border-radius: 50%;
    margin: 0 3.75rem;
    background-color: #999;
    overflow: hidden;
}
.tmp-img-box img{
    width: 100%;
}
/* 텍스트  hidden - 기존 정의된 내용 있는 경우 삭제예정 */
.text-hide{
    font-size: 0 !important;
    color: transparent;
}

/* 타임라인 */
.time-wrap{
    width: 100%;
    overflow: hidden;
    border-left: 2px solid #222 !important;
    border-right: 2px solid #222 !important;
}

.time-line::after{ /* 그래프 내부 작업 후 수정예정 */
    content: '';
    display: block;
    width: 27rem;
    height: 100%;
    background-color: #eee;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-48%);
    z-index: -1;
}

.page-link{
    color: #434a54;
    outline: none;
    box-shadow: none !important;
}
.page-link:focus,.page-link:hover{
    color: #434a54;
}

.page-item.active .page-link{
    background-color: #3e4d5a;
    border-color:#3e4d5a;
}

.list-group-type-striped{
    padding-right: 0;
}
.list-group-type-striped li:nth-child(odd){
    background-color: rgba(0, 0, 0, 0.05);
}



/* 공통 수정 - 삭제예정 */
.btn{
    border-radius: .3rem;
    padding: .475rem 1rem;
    font-size: .875rem;
    vertical-align: middle;
}
.btn-lg{
    font-size: 1rem;
    padding: .75rem 1rem;
}
.btn-sm{
    font-size: .875rem;
    padding: .2rem .75rem;
    border-radius: .6rem;
}
/* .btn:hover{
    background-color: #3e4d5a;
    border-color: #3e4d5a
} */
/* 20220517 mwlee 임시 추가 -  위의 css 삭제시 함께 삭제해주세요 */
.btn-radius {
    border-radius: .25rem;
}
.btn-sm-radius {
    border-radius: .3rem;
}
/*
------------------------
버튼 아이콘 타입 추가
------------------------
*/
.btn-type-icon{
    border: 1px solid #ccd1d9;
    color: #313b44;
    position: relative;
    padding-left: 2.625rem;
    transition: all .2s ease-out;
}
.btn-type-icon > .bi{
    font-size: 1.125rem;
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.btn.btn-type-icon:hover{
    background-color: #313b44 !important;
    color: #fff;
    border-color: #313b44 !important;
}
.list-group-item .btn-type-icon{
    padding: .175rem 1rem;
    border-radius: 2rem;
    border-color: #313b44;
    background-color: #fff;
}




/* form 공통 - 삭제예정 */
.form-control-lg{
    font-size: 1rem;
    padding: .75rem 1rem;
}
.form-check-input:checked{
    background-color: #313b44;
    border-color:#313b44;
}
.form-control:disabled + .btn, .form-control[readonly] + .btn{
    background-color: #e9ecef;
}
.form-control:focus{
    border-color: #313b44;
    box-shadow: 0 0 0 0.25rem #313b44;
}
.form-select:focus {
    border-color: #313b44;
    box-shadow: 0 0 0 0.001rem #313b44;
}

/* paFrom custom - mwlee */
#processAutomationForm .form-control[readonly] + .btn{
    background-color: transparent;
}
#processAutomationForm .form-control[readonly] + .btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
}
#processAutomationForm .form-control[readonly]:focus{
    border-color: #ced4da;
    box-shadow: none;
}
#processAutomationForm .form-select.readonly:focus {
    border-color: #ced4da;
    box-shadow: none;
}
#processAutomationForm .form-select.readonly {
    background-color: #e9ecef;
}


/* 자간 */
.letter-spacing-5{letter-spacing: -.5px;}


/*
------------------------
menu-tree custom
------------------------
*/
#menu-tree .dropdown-toggle{
    position: relative;
}
#menu-tree .dropdown-toggle::after{
    font-family: bootstrap-icons !important;
    content: '\F282';
    border: none;
    vertical-align: top;
    position: absolute;
    top: 50%; left: .5rem;
    transform: translateY(-50%);
}

#menu-tree .dropdown-toggle.collapsed::after{
    content: '\F285';
}

#menu-tree .nav-link{
    padding-left: 2rem;
    padding-top: .2rem;
}

/*
------------------------
Modal 공통
------------------------
*/
.modal-header{
    border-bottom: 0;
}
.modal-footer{
    border-top: 0;
}
.modal-content{
    border-radius: 1rem;
}
.modal-footer>.btn{
    margin: .75rem;
}
.modal-body .list-group-flush li:last-child{
    border-bottom: 1px solid #dee2e6;
}
/*
------------------------
Modal LEFT/RIGHT ADD
------------------------
*/
.modal.left .modal-dialog,
.modal.right .modal-dialog{
    position: fixed;
    margin: auto;
    width: 40rem;
    max-width: none;
    height: 100%;
    transform: translate3d(0%, 0, 0);
}
.modal.left .modal-content,
.modal.right .modal-content{
    height: 100%;
    /* overflow-y: auto; */ /* 팝업 내부 스크롤 삭제 : 이동엽부장 요청 */
    border-radius: 0;
}
.modal.left .modal-body,
.modal.right .modal-body{
    padding: 1rem;
}

/* LEFT */
.modal.left.fade .modal-dialog{
    left: -40rem;
    transition: opacity .3s linear, left .3s ease-out;
}
.modal.left.fade.show .modal-dialog{
    left: 0;
}

/* RIGHT */
.modal.right.fade .modal-dialog{
    right: -40rem;
    transition: opacity .3s linear, right .3s ease-out;
}
.modal.right.fade.show .modal-dialog{
    right: 0;
}
.modal-fullscreen.guide-popup .modal-content{
    background-color: rgba(0, 0, 0, 0.5);
}
/* guide popup 디자인 */
.guide-wrap{
    width: 100%;
    height: 100%;
    position: relative;
}

.guide-wrap .step{
    position: absolute;
    /* padding-top: 8rem; */
}

.guide-wrap .step::before{
    content: "";
    display: block;
    width: 17rem;
    height: 11rem;
    background-repeat: no-repeat;
}
/* 가이드 이미지 추가 */
.guide-wrap .step.step01::before{
   background-image: url(../img/guide/guide-01.png);
   background-position: left bottom;
}
.guide-wrap .step.step02::before{
    background-image: url(../img/guide/guide-02.png);
}
.guide-wrap .step.step03::before{
    background-image: url(../img/guide/guide-03.png);
}
.guide-wrap .step.step04::before{
    background-image: url(../img/guide/guide-04.png);
}


.guide-wrap .step p{
    color: #fff;
    margin-bottom: 0;
    position: absolute;
}
.guide-wrap .step.step01 p{
    top: 176px;
    left: -42px;
}
.guide-wrap .step.step02 p{
    top: 105px;
    left: 94px;
}
.guide-wrap .step.step03 p{
    top: 37px;
    left: -175px;
    text-align: right;
}
.guide-wrap .step.step04 p{
    top: 121px;
    left: 40px;
}



.guide-wrap .step p strong{
    display: block;
    font-style: italic;
    font-size: 2.5rem;
    line-height: 1;
}

.guide-wrap .step.step01{
    top: 8%;
    left: 24%;
}
.guide-wrap .step.step02{
    top: 58%;
    left: 10%;
}
.guide-wrap .step.step03{
    bottom: 15%;
    right: 10%;
}
.guide-wrap .step.step04{
    top: 44%;
    left: 45%;
}

/* 자동화 레이아웃 변경 */
.layout-process,
.layout-automation,
.layout-resource{
    transition: all .5s;
}

/* height 추가 - 삭제예정 */
.h-10{
    height: 10% !important;
}
.h-33{
    height: 33.33% !important;
}
.h-40{
    height: 40% !important;
}
.h-60{
    height: 60% !important;
}
.h-90{
    height: 90% !important;
}
.h-100{
    height: 100% !important;
}
.h-17-5rem {
    height: 17.5rem !important;
}


/* 변경율 테이블 */
.list-range{
    position: relative;
    padding-left: 2.25rem;
}
.list-range::before{
    content: "";
    display: block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}
.list-range.type-danger::before{
    background-color: #dc3545;
}
.list-range.type-warning::before{
    background-color: #ffc107;
}
.list-range.type-primary::before{
    background-color: #0d6efd;
}
.list-range + div .mining-date{
    display: inline-block;
    margin-left: 0.75rem;
}

.map img{height: 100%;}


/* z-index 정의된 곳 못찾음 - 확인 후 삭제 예정 */
.z-index-9{
    z-index: 99999;
}


/* popover */
.popover{
    margin-top: -.95rem !important;
}
.popover-body{
    padding: 0 !important;
}

textarea{
    resize: none;
}

.form-floating>label{
    left: .625rem;
    font-size: .75rem !important;
}

.ui-state-highlight{ /* ---------------------> 확인해야 함 */
    height: 1.6rem !important;
    border-color: #eee !important;
    background-color: #eee !important;
}


.modal.fade.zoom-in .modal-dialog{
    transform: scale(0) translate(0,-50px);
    transition: all .3s ease-out;
}
.modal.fade.zoom-in.show .modal-dialog{
    transform: scale(1) translate(0,-50px);
}

.list-group-item:hover{  /*  이동엽 부장 요청으로 마우스 커서 변경 */
    cursor: pointer !important;
}

.no-cursor:hover{  /*  그리드 row에서 이벤트가 없는 경우 기본 커서로 변경 */
    cursor: default !important;
}

/* 메뉴 트리구조 CSS 수정 jqtree custom */
ul.jqtree-tree .jqtree-toggler{
    position: relative;
    padding-left: .5rem;
    color: transparent !important;
}

ul.jqtree-tree .jqtree-toggler.jqtree-toggler-left:before{
    font-family: bootstrap-icons !important;
    /* content: '\F285'; */
    content: '\F282';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    color: #333;
}

ul.jqtree-tree .jqtree-toggler.jqtree-toggler-left.jqtree-closed:before{
    content: '\F285';
}
ul.jqtree-tree .jqtree-toggler.jqtree-toggler-left[aria-expanded="false"]{
    margin-left: 0;
}

ul.jqtree-tree.jqtree-selected .jqtree-toggler{
    color: transparent !important;
}

ul.jqtree-tree .jqtree-toggler.jqtree-toggler-left{
    margin-right: 0 !important;
    color: #333;
}

ul.jqtree-tree li.jqtree-selected > .jqtree-element,
ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover{
    background-color: transparent;
    background: linear-gradient(transparent, transparent) !important;
    text-shadow: none;
}

ul.jqtree-tree li.jqtree-selected > .jqtree-element .jqtree-title,
ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover .jqtree-title{
    text-decoration: underline;
    outline: 0;
}
ul.jqtree-tree .jqtree-title{
    color: #000 !important;
}

.jqtree-title[aria-level="1"],
.jqtree-title[aria-level="2"]{
    font-weight: bold;
}

ul.jqtree-tree .jqtree-title[aria-level="4"]{
    font-size: 14px !important;
    color: #333 !important;
}

/* grid 공통 */
.list-group-item.shadow{/* row active */
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05) !important;
}
.list-group-type-striped li:nth-child(odd){
    background-color: #f8faf9;
}
.list-group-type-striped li .border-bottom{
    border-color: #dee2e6 !important;
}
.list-group-item:hover{
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05) !important;
}

/* textarea 글자수 출력 */
.display-textarea-length {
    position: relative;
}
.display-textarea-length > textarea {
    position: relative;
}
.display-textarea-length > div {
    position: absolute;
    right: 0;
    bottom: 0;
}

/* table no-data 유형 추가 */
.table>tbody>tr>td.no-data{
    box-shadow: inset 0 0 0 9999px #fff;
    line-height: 9rem;
}
/* Grid No-Data */
.list-group-type-striped li.no-data{
    background-color: #fff;
    line-height: 9rem;
    border: none !important;
    cursor: default !important;
}
.list-group-type-striped li.no-data:hover{
    box-shadow: none !important;
}


/* button css 수정 */
.btn.disabled, .btn:disabled, fieldset:disabled .btn{
    opacity: .5;
    background-color: #ccd1d9;
}

/* loading */
.loading > div{
    position: relative;
    -webkit-animation: 2s linear infinite spinner-border;
    animation: 2s linear infinite spinner-border;
}
.loading > div::after{
    content: '';
    display: block;
    width: 58px;
    height: 39px;
    background: url(../img/loading-kf21.svg) no-repeat center / contain;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(90deg);
}

.counter{font-size: 0;}
.counter .btn:first-child{border-right: 0;}

/* 20220706 subin 임시 추가 */
.mainStdInfoUpdTb{
	table-layout: fixed;
}
.mainStdInfoUpdTb th:nth-child(2){width: 30%;}
.mainStdInfoUpdTb th:nth-child(3){width: 20%;}
.mainStdInfoUpdTb th:nth-child(4){width: 15%;}

.mainEarlyWarningTb{
    table-layout: fixed;
}
.mainEarlyWarningTb th:nth-child(2){width: 20%;}
.mainEarlyWarningTb th:nth-child(3){width: 20%;}
.mainEarlyWarningTb th:nth-child(4){width: 20%;}


/* 스크롤 테이블 추가*/
table.scroll{ width: 100%; table-layout: fixed;} 
table.scroll tbody tr, table.scroll thead tr { display: flex; width:100%; justify-content:space-between;} 
table.scroll tbody{ display: block; max-height: 720px; overflow: hidden; overflow-x: hidden; transition: all 0.2s ease;} 
table.scroll tbody td, table.scroll thead th{ flex: 1; padding: 15px;} 
table.scroll tbody td.kan2,table.scroll thead th.kan2{ flex: 2;} 
table.scroll tbody:hover{ overflow-y: auto;} 
table.scroll tbody::-webkit-scrollbar { width: 10px;}   
table.scroll tbody::-webkit-scrollbar-thumb { background-color: rgba( 102, 102, 102,0.4); border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;} 
table.scroll tbody::-webkit-scrollbar-thumb:hover{ background-color: rgba( 102, 102, 102, 0.6);} 
table.scroll tbody::-webkit-scrollbar-thumb:active{ background-color: rgba(102, 102, 102, 0.9);} 
table.scroll tbody::-webkit-scrollbar-track { background-color: fff;border-radius: 10px; box-shadow: inset 0px 0px 5px white;} 
.table-scroll{ min-height: 642px; max-height: 642px; overflow-y: scroll; overflow-x: visible; margin-bottom: 20px; table-layout: fixed; border-bottom: 1px solid #000;} 
.table-scroll thead{ position: sticky; top: 0; background-color: #fff; z-index: 20;} 
.table-scroll thead::before{ position: absolute;top: 0; left: 0; width: 100%; height: 0; content: ''; border-top: 2px solid #000;} 
.table-scroll thead::after{ position: absolute; bottom: 0; left: 0; width: 100%; height: 0; content: ''; border-bottom: 1px solid #000;} 
.table-scroll table thead tr { width: 100%;} 
.table-scroll::-webkit-scrollbar { width: 12px; height: 10px;} 
.table-scroll::-webkit-scrollbar-thumb { background-color: rgba( 102, 102, 102, 0.3); border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;} 
.table-scroll::-webkit-scrollbar-thumb:hover{ background-color: rgba( 102, 102, 102, 0.9);} 
.table-scroll::-webkit-scrollbar-thumb:active{ background-color: rgba( 102, 102, 102, 0.9);} 
.table-scroll::-webkit-scrollbar-track { background-color: #fff; border-radius: 10px; box-shadow: inset 0px 0px 5px white;} 
.table-scroll::-webkit-scrollbar-button:start{ height: 50px;} 
.table-scroll:hover::-webkit-scrollbar-thumb{ background-color: rgba( 102, 102, 102, 0.3);} 
.table-scroll:hover::-webkit-scrollbar-thumb:hover{ background-color: rgba( 102, 102, 102, 0.9);} 
.table-scroll:hover::-webkit-scrollbar-thumb:active{ background-color:rgba( 102, 102, 102, 0.9);} 
.table-scroll.type2{border-bottom-width: 0;}  


.table-scroll-type2{min-height: 642px; max-height: 642px; overflow-y: scroll; overflow-x: visible; margin-bottom: 20px; table-layout: fixed; border-bottom: 1px solid #000;}
.table-scroll-type2 tbody::-webkit-scrollbar { width: 10px;}   
.table-scroll-type2 tbody::-webkit-scrollbar-thumb { background-color: rgba( 102, 102, 102,0.4); border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;} 
.table-scroll-type2 tbody::-webkit-scrollbar-thumb:hover{ background-color: rgba( 102, 102, 102, 0.6);} 
.table-scroll-type2 tbody::-webkit-scrollbar-thumb:active{ background-color: rgba(102, 102, 102, 0.9);} 
.table-scroll-type2 tbody::-webkit-scrollbar-track { background-color: fff;border-radius: 10px; box-shadow: inset 0px 0px 5px white;} 


.table-scroll-type2::-webkit-scrollbar { width: 12px; height: 10px;} 
.table-scroll-type2::-webkit-scrollbar-thumb { background-color: rgba( 102, 102, 102, 0.3); border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;} 
.table-scroll-type2::-webkit-scrollbar-thumb:hover{ background-color: rgba( 102, 102, 102, 0.9);} 
.table-scroll-type2::-webkit-scrollbar-thumb:active{ background-color: rgba( 102, 102, 102, 0.9);} 
.table-scroll-type2::-webkit-scrollbar-track { background-color: #fff; border-radius: 10px; box-shadow: inset 0px 0px 5px white;} 
.table-scroll-type2::-webkit-scrollbar-button:start{ height: 50px;} 
.table-scroll-type2:hover::-webkit-scrollbar-thumb{ background-color: rgba( 102, 102, 102, 0.3);} 
.table-scroll-type2:hover::-webkit-scrollbar-thumb:hover{ background-color: rgba( 102, 102, 102, 0.9);} 
.table-scroll-type2:hover::-webkit-scrollbar-thumb:active{ background-color:rgba( 102, 102, 102, 0.9);} 


/* bot-step 1 */
.bot-step{position: absolute; top: 47px; right: 65px; width:40%;}
.bot-step ul{list-style: none; display: flex; justify-content: space-between;}
.bot-step ul li{width: 100%; height: 4px; background-color: #e5e5e5; font-size: 13px; position: relative;}

.bot-step ul li::after{content: ''; display: block; width: 0; height: 100%; position: absolute; }
.bot-step ul li.on::after{
    background: #e5e5e5;
    background: -moz-linear-gradient(left,  #000000 0%, #e5e5e5 100%); 
    background: -webkit-linear-gradient(left,  #000000 0%,#e5e5e5 100%); 
    background: linear-gradient(to right,  #000000 0%,#e5e5e5 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#e5e5e5',GradientType=1 );
    width: 100%; 
    animation-name: long;
    animation-duration: .5s;
    animation-direction: alternate-reverse;
}
.bot-step ul li.on.finish::after{
    animation:none;
    background: #000000;
    background: -moz-linear-gradient(left,  #000000 0%, #000000 100%); 
    background: -webkit-linear-gradient(left,  #000000 0%,#000000 100%); 
    background: linear-gradient(to right,  #000000 0%,#000000 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 );}

.bot-step ul li::before{
    content: ""; display: block; width: 13px; height: 13px;
    border: 1px solid #000;
    border-radius: 50%;
    position: absolute; top: -5px; left: 0;
    background-color: #fff; z-index: 9;}

.bot-step ul li.on.finish::after{background-color: #000 !important;}
.bot-step ul li.on::before{background-color: #000;}

.bot-step ul li span{display: block; padding-top: 12px; position: absolute; top: 0; left: -28px; white-space: nowrap ;}    
.bot-step ul li:first-child span{left: 0px;}
.bot-step ul li:last-child span{left:-60px;}
.bot-step ul li:last-child{width: 0;}


@keyframes long{
    to{width: 0;}
    from{width: 100%;}
   
}


/* 임시 버튼 유형 추가 */
.btn.type-square{padding: 4px 6px !important; margin-bottom: 10px; display: block; font-size: 2rem; line-height: 1;}