@charset "utf-8";
/* CSS Document */
.paging {margin:25px 0 50px;}
.process-img {margin-bottom:25px;}
.process-img ul li { position: relative;float:left; text-align: center;width:calc(20% - 2%); margin-right: 2.5%;}
.process-img ul li:after {position: absolute; content: ''; width:20%; height:1px; background:#5283e0; top:25%; right:-17%;}
.process-img ul li:nth-child(5) {margin-right:0;}
.process-img ul li:nth-child(5):after {display: none;}
.process-img ul li h4 {font-size: 1.4rem; letter-spacing: -0.1em; color:#666; padding-top:5px;}
.process-img ul li p { font-size:1.3rem; word-break: keep-all; color:#9d9d9d; letter-spacing: -0.08em; line-height: 15px; padding-top:5px;}

.mypage-list-wrap { margin: 20px; }
.mypage-list-wrap .title-area { font-size: 1.6rem; color: #2d2d2d; margin-bottom: 10px; }
.mypage-list-wrap .list-table { border-top: 3px solid #5283e0; }
.mypage-list-wrap table { width: 100%; }
.mypage-list-wrap .list-table table thead { background: #f8f8f8; }
.mypage-list-wrap .list-table table thead tr th { padding:10px 5px; font-weight: bold; font-size: 1.3rem; color: #2d2d2d; text-align: center; letter-spacing: -0.12em}
.mypage-list-wrap .list-table table tbody tr td { padding: 10px 5px; text-align: center; background: #fff; color: #434343; border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; font-size: 1.3rem; letter-spacing: -0.075em; word-break: keep-all}
.mypage-list-wrap .order-list-table table tbody tr td .cancel-btn { color: #c83f3f; border: 1px solid #d37b7c; border-radius: 2px; height: 23px; background: #fff; font-size: 12px; cursor: pointer; padding: 0 5px; line-height: 21px; margin-left: 5px; outline: 0; }
.mypage-list-wrap .order-list-table table tbody tr td .cancel-btn:hover { background: #c83f3f; color: #fff; border-color: #c83f3f; }

.myorder-list .list-box {margin-bottom:20px; border:1px solid #ebeff5;}
.myorder-list .list-box > p {padding: 20px; background:#fff; color:#404040; font-weight: 500; letter-spacing: -0.05em; border-bottom:1px solid #e8e8e8; position: relative;}
.myorder-list .list-box > p span {font-size:1.3rem; border-radius: 3px; padding:1px 5px; display: inline-block; position: absolute; top:20px; right:20px;}
.myorder-list .list-box > p span.red {color:#c83f3f; border: 1px solid #c83f3f;}
.myorder-list .list-box > p span.blue {color:#5283e0; border: 1px solid #5283e0;}
.myorder-list .list-box > ul {padding:20px; background: #fff; font-size:1.4rem; color:#666;}
.myorder-list .list-box > ul li {padding-bottom:5px;}
.myorder-list .list-box > ul li:last-child {margin-bottom:0;}
.myorder-list .list-box > ul li button.cancel-btn {border: 0; width:100%; height: 35px; color: #fff; background:#c83f3f; margin-top:15px;}


.credit-error-notice-wrap { border-top: 3px solid #5283e0; background: #fbfbfb; }
.credit-error-notice-wrap .credit-error-notice { border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; padding: 20px; }
.credit-error-notice-wrap .credit-error-notice .title-area { font-size: 1.6rem; font-weight: bold; color: #555; padding-bottom: 20px; border-bottom: 1px solid #e8e8e8; }
.credit-error-notice-wrap .credit-error-notice .title-area i { font-size:1.4rem; margin-right:3px; color:#5283e0; }
.credit-error-notice-wrap .credit-error-notice .txt-area { margin-top: 20px; font-size: 1.3rem; }
.credit-error-notice-wrap .credit-error-notice .input-area { background: #fff; border-radius: 3px; margin-top: 20px; position: relative; }
.credit-error-notice-wrap .credit-error-notice .input-area input { height:45px; width: 100%; padding: 0 15px; font-size: 1.3rem; outline: 0; border:0;border:1px solid #dcdcdc; border-bottom:0;}
.credit-error-notice-wrap .credit-error-notice .input-area button {height: 45px; width:100%; padding: 0 10px; background: #5283e0; border: none; color: #fff; font-size: 1.5rem; outline: 0; border:1px solid #5283e0;}



/* 주문내역 */
.detail-box {display:none; position: relative;}
.detail-box.on {display:block;}
.detail-box .detail {position: relative; padding: 20px; background: #fff; border-top:1px dashed #e8e8e8;}
.detail-box .detail div > .subject {font-size: 1.4rem; font-weight: 600; color:#5283E0; margin-bottom:10px;}
.detail-box .detail .info table {border-top: 1px solid #5283e0; width: 100%;}
.detail-box .detail .info table tr th {font-weight: 500; font-size: 1.3rem; background: #F8F8F8; padding: 8px 10px; letter-spacing: -0.05em;border-bottom:1px solid #eaeaea; width: 100px;}
.detail-box .detail .info table tr td { font-size: 1.3rem; background: #fff; padding: 8px 10px; letter-spacing: -0.05em;border-bottom:1px solid #eaeaea;}
.detail-box .progress-status {margin-top: 20px;}
.detail-box .progress-status .comment {background:#f8f8f8; border-top:2px solid #eaeaea; text-align: center; font-size: 1.3rem; font-weight: 500; padding:10px 0; margin-top:20px; color:#666; }
.detail-box .progress-status .progress { position: relative; height: 82px; margin-top:20px;}
.detail-box .progress-status .progress ul {position: absolute; top:0; left: 50%; width: 260px; -webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);}
.detail-box .progress-status .progress ul li {position: relative; float: left; width: 80px; text-align: center; border-radius: 50%; border: 1px solid #5283E0; line-height: 80px; font-size: 1.3rem; font-weight: 500; color: #5283E0;}
.detail-box .progress-status .progress ul li:after {content: ''; position: absolute; top:50%; left: 100%; width: 11px; border-top: 1px solid #c0c9dc;}
.detail-box .progress-status .progress ul li:nth-child(3):after {width: 0;}
.detail-box .progress-status .progress ul li.disabled {border: 1px solid #C0C8D5; color: #C0C8D5;}
.detail-box .progress-status .progress  ul li:nth-child(2) {margin:0 10px;}
.detail-box .progress-status .btn-wrap {margin-top: 20px;}
.detail-box .progress-status .btn-wrap button {width: 50%; float: left; height: 40px; border: 0; color: #fff; font-size: 1.3rem; }
.detail-box .progress-status .btn-wrap button.application-view {background: #0F203D; color: #fff; }
.detail-box .progress-status .btn-wrap button.receive {background: #5283E0; }
.detail-box .progress-status .btn-wrap button.disabled { opacity: 0.5; }

/* 레이어팝업 */
.detail-box .open-block {position: absolute; top:0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2;}
.detail-box .open-block .block-layer { border-radius: 3px; width: 85%; height: auto; text-align: center; background: #fff; position: absolute; padding:40px 20px; top:50%; left:50%; -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.detail-box .open-block .block-layer p {font-weight: 600; font-size: 1.3rem; color:#555; padding-top:10px;}
.detail-box .open-block .block-layer .ico {padding: 20px; border: 2px solid #5283e0; width:75px; height: 75px; border-radius: 50%; display: inline-block;}
.detail-box .open-block .block-layer .ico img {position: relative; top: 5px;}
.detail-box .open-block .block-layer .btn-wrap {margin-top: 20px;}
.detail-box .open-block .block-layer .btn-wrap button { height:40px; width: 50%; float: left; border:0; color: #fff;}
.detail-box .open-block .block-layer .btn-wrap .confirm-btn {width:100%; background:#0f203d; }
.detail-box .open-block .block-layer .btn-wrap .application-view {background: #0F203D; }
.detail-box .open-block .block-layer .btn-wrap .credit-progress {background: #5283E0; }