/* common */
.main-body { background: #F6F6F6; }
.btn { width: calc(100% - 18px); height: 47px; margin: 0 auto; border-radius: 7px; background: var(--Color-on, #4E8EED); display: flex; justify-content: center; align-items: center; color: #FFF; text-align: center; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 600; }
select { width: 100%; padding: 15px; margin-top: 15px; border-radius: 6px; border: 1px solid var(--input-line, #D5D7D9); color: var(--input-line, #AFAFAF); font-family: "Noto Sans CJK KR"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 100%; letter-spacing: -0.32px; }

/* login.html */
.login { position: relative; width: 100%; max-width: 1024px; height: 100vh; margin: 0 auto; background: #FFF; display: flex; justify-content: center; align-items: center; }
.long-in {width: 100%; }
.login-title { text-align: center; }
.login-title .login-title-top { color: #000; font-family: "Noto Sans CJK KR"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; letter-spacing: -0.6px; }
.login-title .login-title-top span { font-weight: 400; }
.login-title .login-title-btm { margin-top: 13px; margin-bottom: 51px; color: #4E8EED; font-family: "Noto Sans CJK KR"; font-size: 15px; font-style: normal; font-weight: 700; line-height: 100%; letter-spacing: -0.375px; }
.login-info { width: calc(100% - 20px); margin: 0 auto; margin-bottom: 18px; }
.login-info p { color: #3D3D3D; font-family: "Noto Sans CJK KR"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 100%; letter-spacing: -0.28px; }
.login-info input { width: calc(100% - 30px); padding: 15px; margin-top: 15px; border-radius: 7px; border: 1px solid var(--input-line, #D5D7D9); background: #FFF; font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 400; line-height: 100%; letter-spacing: -0.32px; }

/* ================ 관리자용 ================ */
/* as_list.html */
.main { position: relative; width: 100%; max-width: 1024px; height: 100vh; margin: 0 auto; }
.top { position: relative; display: flex; justify-content: baseline; align-items: center; background: #FFF; }
.top p { width: 33.333%; height: 50px; padding-top: 50px; display: flex; justify-content: center; align-items: center; border-bottom: 3px solid var(--Color-line, #E4E8EA); text-align: center; color: var(--Color-line, #E4E8EA); font-family: "Noto Sans CJK KR"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 100%; letter-spacing: -0.45px; }
.top .on { border-bottom: 3px solid var(--Color-line, #4E8EED); color: var(--Color-line, #4E8EED); }
.list { overflow: scroll; overflow-x: hidden; width: calc(100% - 15px); height: calc(100% - 195px); margin: 0 auto; margin-top: 15px; }
.list-in { width: calc(100% - 4px); border: 2px solid #FFF; height: auto; padding-top: 24px; margin-bottom: 10px; border-radius: 8px; background: #FFF; }
.list-inner { position: relative; width: calc(100% - 40px); min-height: 24px; margin: 0 auto; padding-bottom: 5px; display: flex; }
.list-inner .title { width: 100px; margin-top: 1.5px; color: var(--font-color, #A6AFB9); font-family: "Noto Sans KR"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; letter-spacing: -0.28px; }
.list-inner .value { width: calc(100% - 100px); color: #3D3D3D; font-family: "Noto Sans KR"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 120%; letter-spacing: -0.28px; }
.list-inner .value-err { width: calc(100% - 133px); }
.list-inner .status { position: absolute; right: 0; padding: 6px; border-radius: 4px; background: rgba(50, 219, 69, 0.10); color: #32DB45; font-family: "Noto Sans CJK KR"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; letter-spacing: -0.24px; }
.list-btn { margin-top: 14px; border-top: 1px solid #E4E8EA; height: 48px; display: flex; justify-content: center; align-items: center; color: #4E8EED; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 500; line-height: 100%; letter-spacing: -0.28px; }
.btm { position: absolute; bottom: 0; width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; border-top: 1px solid #EEF2F4; background: #FFF; }
.btm-in { width: 33.333%; text-align: center; }
.btm-in img { width: 24px; height: 24px; }
.btm-in p { margin-top: 4px; color: var(--font-color, #A6AFB9); text-align: center; font-family: Inter; font-size: 10px; font-style: normal; font-weight: 400; line-height: 100%; letter-spacing: -0.25px; }
.btm-on p { color: var(--Color-on, #4E8EED); }

/* as_driver.html */
.list-inner .driver-nm { color: #3D3D3D; font-family: "Noto Sans KR"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; letter-spacing: -0.32px; }
.list-inner .driver { font-size: 14px; }
.list-driver { height: calc(100% - 262px); }
.list-driver .list-in { padding-bottom: 12px; }
.list-on { width: calc(100% - 4px); border: 2px solid #4E8EED; }

/* as_time.html */
.list-time { overflow: inherit; }
.list-in-time { height: auto; height: calc(100% - 146px); }
.list-inner-time { width: calc(100% - 30px); height: calc(100% - 60px); overflow: scroll; }
.list-inner-time-wrap { width: 100%; }
.list-inner-time-wrapper { display: flex; width: 100%; }
.list-inner-time-wrapper p { width: calc(25% - 10px); height: 34px; margin: 0 auto; margin-bottom: 5px; display: flex; justify-content: center; align-items: center; border-radius: 8px; background: #F3F3F3; color: #919191; text-align: center; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; letter-spacing: -0.28px; }
.list-inner-time-wrapper .time-on { width: calc(25% - 14px); height: 30px; border: 2px solid #4E8EED; }

/* as_time_complete.html */
.long-in img { width: 92px; height: 92px; margin-bottom: 17px; }
.btn-back { position: absolute; bottom: 30px; margin-left: 8px; }

/* as_bcnc.html */
.top-bcnc { border-bottom: 1px solid var(--input-line, #D5D7D9); background: #FFF; }
.top-bcnc p { width: 100%; border-bottom: none; color: #3D3D3D; font-family: "Noto Sans CJK KR"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 100%; letter-spacing: -0.45px; }
.list-top { border-bottom: 1px solid var(--Color-line, #E4E8EA); margin-bottom: 26px; color: #3D3D3D; font-family: "Noto Sans KR"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 100%; letter-spacing: -0.28px; } 
.list-bcnc { height: calc(100% - 305px); }
.list-in-bcnc { padding-bottom: 19px; }

/* as_bcnc_add.html */
.bcnc-dtl { border-radius: 8px; background: #FFF; padding-top: 9px; padding-bottom: 24px; }
.bcnc-dtl-in { width: 95%; margin: 0 auto; padding-top: 15px; }
.bcnc-dtl-in .dtl-title { color: #3D3D3D; font-family: "Noto Sans CJK KR"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 100%; letter-spacing: -0.28px; }
.bcnc-dtl-in .dtl-title span { color: var(--Color-on, #4E8EED); margin-right: 4px; }

.bcnc-dtl-in input, .bcnc-dtl-in select { width: calc(100% - 30px); padding: 15px; margin-top: 15px; border-radius: 7px; border: 1px solid var(--input-line, #D5D7D9); background: #FFF; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; letter-spacing: -0.32px; }
.bcnc-dtl-in .addr-info { display: flex; justify-content: center; align-items: center; }
.bcnc-dtl-in .addr-info input { width: calc(100% - 105px); margin-right: 5px; }
.bcnc-dtl-in .addr-info p { display: flex; justify-content: center; align-items: center; width: 100px; height: 56px; margin-top: 15px; border-radius: 7px; background: var(--Color-line, #E4E8EA); color: var(--font-color, #A6AFB9); font-family: "Noto Sans CJK KR"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 100%; letter-spacing: -0.28px; }
.bcnc-dtl-in textarea { border: none; resize: none; padding: 15px; margin-top: 15px; width: calc(100% - 30px); height: 260px; border-radius: 7px; border: 1px solid #D5D7D9; color: #676767; font-family: "Noto Sans KR"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.5; }

.bcnc-dtl-in-g input { background: #ecedee; }
.bcnc-dtl-in-g textarea { background: #ecedee; }

.list .none-data { height: 100%; display: none; justify-content: center; align-items: center; }
.list .none-data-in { text-align: center; }
.list .none-data-in img { width: 92px; height: 92px; margin: 0 auto; }
.list .none-data-in p { color: #3D3D3D; text-align: center; font-family: Roboto; font-size: 15px; font-style: normal; font-weight: 500; }

.addr-wrap { display: flex; justify-content: center; align-items: center; }
.addr-wrap p { display: flex; justify-content: center; align-items: center; width: 95px; height: 52px; margin-top: 15px; border-radius: 7px; background: var(--Color-line, #E4E8EA); color: var(--font-color, #A6AFB9); font-family: "Noto Sans CJK KR"; font-size: 14px; font-style: normal; font-weight: 700; }

.btn-wrap { display: flex; justify-content: center; align-items: center; }



.background { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.3); z-index: 1000; z-index: -1; opacity: 0; }
.show-use { opacity: 1; z-index: 999; transition: all 0.5s; } 
.window { position: relative; width: 100%; height: 100%; }  
.popup { position: absolute; top: 10%; left: 50%; transform: translate(-50%, 0%); background-color: #ffffff; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); width: 90%; height:80vh; }
.popup-hd { position: relative; height: 62px; display: flex; align-items: end; }
.popup-hd p { margin-left: 17px; color: #000A12; font-family: normal; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; }
.popup-close { cursor: pointer; position: absolute; right: 19px; width: 19px; top: 19px; height: 19px; }


.pop-seelct { width: 95%; margin: 0 auto; padding-bottom: 20px; border-bottom: 1px solid #EBEBEB; }
.popup .pop-seelct .input-select { width: 100%; color: #3D3D3D; }
.popup .pop-seelct input { width: calc(100% - 32px); height: 18px; padding: 15px; margin-top: 5px; border-radius: 7px; border: 1px solid var(--input-line, #D5D7D9); background: #FFF; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; letter-spacing: -0.32px; }

.pop-list { width: 95%; margin: 0 auto; margin-top: 10px; height: calc(100% - 285px); overflow: scroll; }
.pop-list-in { width: calc(100% - 4px); border-radius: 7px; background: #F6F6F6; padding-top: 7.5px; padding-bottom: 7.5px; margin-bottom: 10px; border: 2px solid #F6F6F6; }
.pop-list-in .pop-info { width: 95%; height: 14px; margin: 0 auto; position: relative; display: flex; justify-content: center; padding-top: 7.5px; padding-bottom: 7.5px; }
.pop-list-in .pop-info .info-title { position: absolute; left: 0; color: #000; font-family: "Noto Sans CJK KR"; font-size: 14px; font-style: normal; font-weight: 400; }
.pop-list-in .pop-info .info-value { position: absolute; right: 0; font-family: "Noto Sans CJK KR"; font-size: 14px; font-style: normal; font-weight: 500; }
.pop-list-in-b { border: 2px solid #B0CEFA; }

.pop-list-in-item { width: calc(100% - 4px); border-radius: 7px; background: #F6F6F6; padding-top: 7.5px; padding-bottom: 7.5px; margin-bottom: 10px; border: 2px solid #F6F6F6; }
.pop-list-in-item .pop-info { width: 95%; height: 14px; margin: 0 auto; position: relative; display: flex; justify-content: center; padding-top: 7.5px; padding-bottom: 7.5px; }
.pop-list-in-item .pop-info .info-title { position: absolute; left: 0; color: #000; font-family: "Noto Sans CJK KR"; font-size: 14px; font-style: normal; font-weight: 400; }
.pop-list-in-item .pop-info .info-value { position: absolute; right: 0; font-family: "Noto Sans CJK KR"; font-size: 14px; font-style: normal; font-weight: 500; }
.pop-list-in-b-item { border: 2px solid #B0CEFA; }

.background-item { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.3); z-index: 1000; z-index: -1; opacity: 0; }
.show-use-item { opacity: 1; z-index: 999; transition: all 0.5s; } 
.window-item { position: relative; width: 100%; height: 100%; }  

/* ================ 기사용 ================ */
/* as_list.html */
.list-btn-div p { width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; } 
.list-btn-div p:nth-child(1) { border-right: 1px solid var(--Color-line, #E4E8EA); color: var(--font-color, #A6AFB9); }

/* as_process_list.html */
.list-btn-p p { color: #FD8934; }
.list-on-p { width: calc(100% - 4px); border: 2px solid #FD8934; }

/* as_assignment_list.html */
.list-btn-a p { color: var(--font-color, #A6AFB9); }

/* as_assignment_img.html */
.bcnc-dtl-in .dtl-status { border: 1px solid var(--input-line, #D5D7D9); height: 100px; }
.dtl-file { display: flex; align-items: center; position: relative; }
.input-file { display: none; }
.btn-file { position: absolute; right: 0; display: flex; justify-content: center; align-items: center; width: 66px; height: 23px; border-radius: 4px; border: 1px solid var(--Color-on, #4E8EED); color: var(--Color-on, #4E8EED); font-family: "Noto Sans CJK KR"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 100%; letter-spacing: -0.24px; }
.img-wrap { width: 100%; }
.img-wrap ul { width: 100%; display: flex; margin-top: 13px; justify-content: center; align-items: center; }
.img-wrap ul li { width: calc((100% / 3) - 5px); margin: 0 auto; display: flex; position: relative; }
.img-wrap ul li img { width: 100%; }  
.img-wrap ul li .img_del { width: 17px; height: 17px; position: absolute; right: 0; }