main > article > form > div {
    border-top:1px solid #000; margin-top: 1rem;
}


main div.form-group {
    display: grid; align-items:center;justify-content:center;
    grid-template-columns:150px 1fr;
    border-bottom: 1px solid #ebebeb;
}
main div.form-group > label { padding-left:1rem; font-size:.875rem; color:#333; font-weight:400; background: #f9f9f9; height:100%; display: flex; align-items: center;  gap: .25rem; }
main div.form-group > label > i { font-size:.5rem; color:red; }
main div.form-group > div {
    padding:.5rem 1rem;
}
div#privacy_agreement > h6 {
    padding:0 0 0 0; margin:2rem 0 1rem 0; font-size: .875rem;
}
div#privacy_agreement > div > span { font-size:.875rem; color:#333; }
div.privacy_agreement {
    padding:1rem 1rem;
    border: 1px solid #ebebeb;
    overflow: hidden; height:100px;
    overflow-y: scroll;
}
div.privacy_agreement > p { padding:0 0 0 0; margin:0 0 0 0; font-size:.75rem;}


.chk_box { display: table; position: relative; padding-left: 25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; top:0; font-size:.875rem; color:#666; }
.chk_box input[type="checkbox"] { display: none; }
.chk_box > .on { width: 18px; height: 18px; background: #ddd; position: absolute; bottom: 2px; left: 0;  border-radius:4px 4px;  }
.chk_box input[type="checkbox"]:checked + .on { background: #000; }
.chk_box > .on:after { content: ""; position: absolute; display: none; }
.chk_box input[type="checkbox"]:checked + .on:after { display: block; }
.chk_box > .on:after { width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 6px; top: 0; }
.chk_box:hover { color:#000; }


article.stnEstimateTbl {
    border-top:1px solid #000; margin-top:1rem;
}
article.stnEstimateTbl > div.stnEstimateTbl {
    display: grid; grid-template-columns:80px 2fr 100px 150px 100px; transition: all .3s;
}
article.stnEstimateTbl > div.stnEstimateTbl:hover {
    background: #f9f9f9;
}
article.stnEstimateTbl > div.stnEstimateTbl > div {
    font-size:.875rem; border-bottom:1px solid #ebebeb; padding:1rem 0; color:#666;
    display:flex;align-items:center;justify-content:center;
}
article.stnEstimateTbl > div.stnEstimateTbl > div.title {
    display: inline-block;
    cursor: pointer;
    justify-content:flex-start;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
article.stnEstimateTbl > div.stnEstimateTbl > div.date { font-size:.75rem; }
article.stnEstimateTbl > div.stnEstimateTbl > div.status > span.complete {
    background: #b21f2d; color: #FFF; font-size: .75rem; padding:.25rem .5rem; border-radius: .25rem .25rem;
}
article.stnEstimateTbl > div.stnEstimateTbl > div.status > span.ready {
    background: #6c757d; color: #FFF; font-size: .75rem; padding:.25rem .5rem; border-radius: .25rem .25rem;
}


article.stnEstimateView > div { border-top: 1px solid #000; margin-top: 1rem; font-size: .875rem; }

article.stnEstimateView > div > div.stnEstimateViewBtn { margin-top:2rem; }
article.stnEstimateView > div > div.stnEstimateViewBtn > button { width:200px; }



article.stnEstimateCommentWrap {
    margin-top: 2rem;
}
div.stnEstimateCommentBox {
    padding: 15px 15px;
    border: 1px solid #DDDFE1; border-radius: 10px;
    display: flex; flex-direction: column; gap: 1rem;
}
div.stnEstimateCommentBox > textarea,
div.stnEstimateCommentBox > textarea:focus { border-color: transparent !important; padding: 0 0 0 0 !important; overflow: hidden; overflow-y: hidden; transition: height 0.12s ease; border-radius:0 0 0 0 !important; }
div.stnEstimateCommentBox > span { font-size:13px; color:#666; }
div.stnEstimateCommentBox > span > strong { font-weight: 400; font-size:14px; color:#333; }

div.stnEstimateCommentViewBox {
    display: flex; flex-direction: column; gap: 1rem;
}
div.stnEstimateCommentView { display: flex; flex-direction: column; border-bottom:1px solid #eee; padding-bottom:1rem; }
div.stnEstimateCommentView button { font-size:12px; }
div.stnEstimateCommentView > div.header { font-size:14px; display: flex; flex-direction: row; align-items:center; justify-content:space-between; background: #f5f5f5; padding:.5rem 1rem; }
div.stnEstimateCommentView > div.header > div { display: flex; flex-direction: row; gap: 1rem; color: #333; align-items:center; }
div.stnEstimateCommentView > div.header > div > div.wDate { font-size: 12px; color:#666; }
div.stnEstimateCommentView > div.body {
    padding:1rem 1rem; font-size: .875rem;
}




/* Mobile */
@media (max-width: 599px) {
    article.stnEstimateTbl > div.stnEstimateTbl {
        display: grid; grid-template-columns:80px 50px 1fr 100px; transition: all .3s;
    }
    article.stnEstimateTbl > div.stnEstimateTbl > div { border-bottom:0; padding:.25rem 0;}
    article.stnEstimateTbl > div.stnEstimateTbl > div.num { order: 1 }
    article.stnEstimateTbl > div.stnEstimateTbl > div.name { order: 2; justify-content:flex-start; }
    article.stnEstimateTbl > div.stnEstimateTbl > div.date { order: 3;  justify-content:flex-start; }
    article.stnEstimateTbl > div.stnEstimateTbl > div.status { order: 4;  grid-row: span 2; grid-column: 4; border-bottom: 1px solid #ebebeb;  }
    article.stnEstimateTbl > div.stnEstimateTbl > div.title { order: 5;  grid-column: 1 / 4;  border-bottom: 1px solid #ebebeb; padding:0 .5rem .5rem .5rem;
    }
}

/* Fold / Flip */
@media (min-width: 600px) and (max-width: 767px) {
    article.stnEstimateTbl > div.stnEstimateTbl {
        display: grid; grid-template-columns:80px 50px 1fr 100px; transition: all .3s;
    }
    article.stnEstimateTbl > div.stnEstimateTbl > div { border-bottom:0; padding:.25rem 0;}
    article.stnEstimateTbl > div.stnEstimateTbl > div.num { order: 1 }
    article.stnEstimateTbl > div.stnEstimateTbl > div.name { order: 2; justify-content:flex-start; }
    article.stnEstimateTbl > div.stnEstimateTbl > div.date { order: 3;  justify-content:flex-start; }
    article.stnEstimateTbl > div.stnEstimateTbl > div.status { order: 4;  grid-row: span 2; grid-column: 4; border-bottom: 1px solid #ebebeb;  }
    article.stnEstimateTbl > div.stnEstimateTbl > div.title { order: 5;  grid-column: 1 / 4;  border-bottom: 1px solid #ebebeb; padding:0 .5rem .5rem .5rem; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {

}

/* Small Desktop / Laptop */
@media (min-width: 1025px) and (max-width: 1439px) {

}

/* Large Desktop / WQHD 이상 */
@media (min-width: 1440px) {

}