@charset "utf-8";

/* ============================================================================================================ */

/* lay-out */

body { background: #f5f5f8;}
.wrap { height: 100%; }
header, main, footer { width:100%; }
.header-wrap, .main-wrap, .footer-wrap { max-width: 30rem; margin:0 auto; }
.main-wrap::after { display: block; content: ''; clear: both; overflow: hidden;}


/* ============================================================================================================ */

/* 10.12.0 웹 방문신청 */

.header-wrap { padding:0.7rem 0; margin-bottom: 1rem; }
.header-wrap .top-back { display: none; }
.header-wrap > p { font-size: 0.8rem; color: rgba(0, 0, 10, 0.4); line-height: 1.5; font-weight: 600; margin-bottom: 3rem;} 
.main-wrap > h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 1rem;}
.main-wrap > div > h1 { font-size: 1.8rem; font-weight: 800; }
.main-wrap > p { font-size: 0.8rem; color: rgba(0, 0, 10, 0.4); line-height: 1.5; font-weight: 600; margin-bottom: 3rem;} 

.main-wrap section { margin-bottom: 3rem;} 
section > h2 { font-size: 0.9rem; font-weight: 800; padding-bottom: 0.5rem; border-bottom: 2px solid #000;}
.section-body { max-height: 12rem; overflow: auto; }
.section-body > h3 { font-size: 0.75rem; color: rgba(0, 0, 10, 0.4); font-weight: 800; padding:2rem 0 0.8rem; }
.section-body > h4 { font-size: 0.7rem; color: rgba(0, 0, 10, 0.4); font-weight: 600; line-height: 1.5; padding:0.5rem 0; }
.section-body > p { font-size: 0.7rem; color: rgba(0, 0, 10, 0.4); font-weight: 600; line-height: 1.5; }
.section-body > p.accent { font-weight:800;text-decoration: underline}

.check-box-long-w { margin:1rem 0; display: flex; gap:0.5rem; align-items: flex-start; }
.check-box-long-w .chkbox-text { font-size: 0.7rem; font-weight: 700; line-height: 1.5; }

.bottom-btn-wrap { display: flex; width:100%; justify-content: center;  gap:0.5rem; }
.bottom-btn-wrap button { flex:1; }

/* 10.12.0 웹 방문신청 방문자용2 */

.section-body.no-scroll { max-height: unset; display: flex; flex-direction: column; overflow: hidden; }
h3.title { font-size: 0.8rem; font-weight: 700; color: #292929; }

/* ============================================================================================================ */

/* table-wrap */

.table-wrap { border-top: 1px solid rgba(0, 0, 10, 0.5); margin-top:2rem; }
.header-tr { display: flex; border-bottom: 1px solid rgba(0, 0, 10, 0.1); padding: 0.8rem 0; align-items: center;}
.header-tr.a1 { padding: 0.5rem 0; }
.header-tr .header-th { flex:1; font-size: 1rem; font-weight: 600; text-align: center; word-break: keep-all; line-height: 1.5; color: rgba(0, 0, 10, 0.6); }
.header-tr.a1 .header-th { font-size: 0.65rem; }

.body-tr {  border-bottom: 1px solid rgba(0, 0, 10, 0.1); display: flex; align-items: center;}

.body-tr .body-td { font-size: 0.65rem; font-weight: 600; flex:1; text-align: center; padding: 0.8rem 0; }

.body-tr .body-td.data-none { text-align: center; font-size: 0.7rem; font-weight: 600; color: rgba(0, 0, 10, 0.4); padding: 1.2rem 0; }

.body-tr .body-td .td-data { display: flex; flex-direction: column; align-items: center; padding: 0 3px; }
.body-tr .body-td .td-data span { padding:0.2rem 0; }

.body-tr .body-td .th-title { display: none; }

.body-tr .body-td.flex13,
.header-tr .header-th.flex13 { flex:1.3 !important; }

.body-tr .body-td.flex15,
.header-tr .header-th.flex15 { flex:1.5 !important; }

.body-tr .body-td.flex20,
.header-tr .header-th.flex20 { flex:2 !important; }

.body-tr .body-td.flex05,
.header-tr .header-th.flex05 { flex:0.5 !important; }

.Enrollment { padding:0.3rem 0.7rem 0.2rem; border:1px solid rgba(0, 0, 10, 0.2); border-radius: 1rem; }

.del { width: 1rem; height: 1rem; background: url('../images/visit/icon-bin.png') no-repeat center / 100% auto; }

/* ============================================================================================================ */

/* 방제실용 */

header.control-room { background: #7a66fc; margin-bottom: 3rem; }
header.control-room .header-wrap { max-width: unset; width:100%; }
header.control-room .header-wrap h1 { font-size: 1.8rem; color:#fff; font-weight: 500; padding: 1rem 2.4rem; }

main.control-room .main-wrap { max-width: calc(100% - 4rem); }
main.control-room .main-wrap time { display: inline-block; width:100%; text-align: center; font-size: 1.8rem; font-weight: 700; }
main.control-room .main-wrap time:before { content: ''; display: inline-block; width:2.1rem; height: 2.1rem; 
    background: url('../images/visit/ico-calendar.png') no-repeat center / 100% auto; vertical-align: bottom; margin-right: 0.5rem; }

main.control-room section { background: #fff; margin-top: 3rem; }

.table-wrap.control-room { border-top: 0; margin-top:0;  min-width: 70rem; overflow: auto;}
.table-wrap.control-room .header-tr { background: #00000a; border-bottom: 0; 
    /* scrollbar-gutter: stable both-edges;  */
    scrollbar-gutter: stable;
    overflow: hidden; 
}
.table-wrap.control-room .header-tr .header-th { color:#fff; }
.body-tr .body-td .td-data span.v-time { padding:0.4rem 1rem; background: rgba(122, 102, 252,0.1); border-radius: 1rem; color:#7a66fc; }

.table-wrap.control-room .body-tr .body-td .td-data.row { flex-direction: row; justify-content: center; gap:1rem; }

.table-wrap.control-room .body-tr.disabled .body-td:nth-of-type(3),
.table-wrap.control-room .body-tr.disabled .body-td:nth-of-type(4),
.table-wrap.control-room .body-tr.disabled .body-td:nth-of-type(5),
.table-wrap.control-room .body-tr.disabled .body-td:nth-of-type(6),
.table-wrap.control-room .body-tr.disabled .body-td:nth-of-type(7),
.table-wrap.control-room .body-tr.disabled .body-td:nth-of-type(8),
.table-wrap.control-room .body-tr.disabled .body-td:nth-of-type(9) { color:#ccc; pointer-events: none;}

.table-wrap.control-room .body-tr.disabled .body-td:nth-of-type(9) button.print { background: #ccc; border:1px solid #ccc; }

.complet { padding:0.3rem 1rem 0.5em; border:1px solid rgba(0, 0, 10, 0.2); border-radius: 1rem; }
.complet:before { content: ''; display: inline-block; width:1rem; height: 1rem; background: url('../images/visit/g-chk.png') no-repeat center / 100% auto; vertical-align:bottom; margin-right:0.3rem; }
.print { padding:0.3rem 1rem 0.5em; background: #7a66fc; border-radius: 1rem; color:#fff; border:1px solid #7a66fc; }
.print:before { content: ''; display: inline-block; width:1rem; height: 1rem; background: url('../images/visit/g-print.png') no-repeat center / 100% auto; vertical-align:bottom; margin-right:0.3rem; }

.dot-red:before { content: ''; display: inline-block; width:0.5rem; height: 0.5rem; border-radius: 0.5rem; background: #ff453a; margin-right: 0.3rem; }
.dot-green:before { content: ''; display: inline-block; width:0.5rem; height: 0.5rem; border-radius: 0.5rem; background: #27c53f; margin-right: 0.3rem; }
.dot-purple:before { content: ''; display: inline-block; width:0.5rem; height: 0.5rem; border-radius: 0.5rem; background: #7a66fc; margin-right: 0.3rem; }

.body-wrap { height: calc( 100vh - 21rem ); overflow: auto; 
    /* scrollbar-gutter: auto;  */
    scrollbar-gutter: stable;
    /* scrollbar-gutter: stable both-edges; */
}

.table-wrap.control-room .body-tr .body-td { font-size: 0.9rem; font-weight: 600; flex:1; text-align: center; padding: 0.8rem 0; }

main.control-room .main-wrap h1 { display: none;}
.header-title-moblie { display: none; }

.table-wrap.control-room .header-tr .header-th .tablet-only { display: none; }
.table-wrap.control-room .body-tr .body-td .tablet-only { display: none; }

.table-wrap.control-room .header-tr .header-th.mobile-only { display: none; }
.table-wrap.control-room .body-tr .body-td.mobile-only { display: none; }

.table-wrap.control-room .body-tr .body-td .td-data .mobile-only { display: none; }

/* ============================================================================================================ */

/* 일일주차 현황 조회 */

section.tablet-parking { display: none;}

/* ============================================================================================================ */

/* 10.1.0 온보딩 로그인 */

.wrap.login { width:100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}

h1.logo-type { display: inline-block; width: 5rem; height: 1rem; background: url('../images/visit/general-logo.png') no-repeat center / 100% auto;
    margin-bottom: 2.5rem ; }
h1.logo-type a { font-size: 0; opacity: 0; }

.footer-btn-wrap { display: flex; width:100%; justify-content: center;  gap:0.5rem; }
.footer-btn-wrap button { flex:1; }

/* 10.9.0 온보딩 등록완료 */

.wrap.completion { width:100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}

.comp-icon { display: block; width:3.5rem; height: 3.5rem; background: url('../images/visit/icon-process.png') no-repeat center / 100% auto; margin:0 auto 1.5rem; }


/* ============================================================================================================ */

/* 에러메세지 */

.error-message { text-align: center; padding:0.5rem 1rem; background: rgba(0, 0, 10, 0.6); border-radius: 2rem; margin: 0 auto 2rem; width:20rem; }
.error-message span { font-size: 0.7rem; color:#fff; }


/* pop-up */

.dim { position: fixed; top:0; left:0; right:0; bottom: 0; background: rgba(0,0,0,0.5); 
    z-index: 5000; display: flex; justify-content: center; align-items: center; }

.pop { maX-width: 26.5rem;  width:70%; height:calc(100% - 7rem); background: #fff; position: relative; z-index: 5001; padding:1.2rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 25rem;}
.pop-header { display: flex; justify-content: space-between; align-items: center; }
.pop-header h2 { font-size: 1.1rem; font-weight: 700;}
.pop-header .close { display: block; width:1rem; height: 1rem; background: url(../images/visit/btn-pop-close.png) no-repeat center / 100% auto;}
.pop-body { width:100%; height: calc(100% - 8rem); overflow: auto;}
.pop-body h3 { font-size: 0.8rem; font-weight: 700; margin: 1.5rem 0;}
.pop-body p { font-size: 0.7rem; line-height: 1.5;}
/* .pop-bottom { padding-top:1.5rem; } */

/* ============================================================================================================ */

/* 랩탑/OA신청 */

.labtop-box-wrap { display: flex; gap:0 1rem; }
.labtop-box-wrap .labtop-item { flex:1; margin-top: 2rem; display: flex; flex-direction: column;}
.labtop-box-wrap .labtop-item .labtop-box { background: #fff; padding:1rem;  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; height: 100%; }
.labtop-box-scroll { max-height: 13.5rem; overflow: auto; }
.labtop-box img { width:100%; height: auto; max-height: 10rem; object-fit: contain; }
.b-line { font-size: 0.7rem; padding: 0.5rem 0; border-bottom: 1px solid #dadada; line-height: 1.5; font-weight: 600; }
.b-line:last-of-type { border-bottom: 0;}

video { width:100%; }























.modal.fade { }
.modal.fade .modal-dialog { max-width: none; margin:0; }
.modal-new { position: relative; top:50%; left:50%; transform: translate(-50%, -50%) !important; width:70%; }
.modal-new.modal-small { width:50%; }
.modal-new.modal-small-02 { width:30%; }
.modal-small-03 { position: relative; width:9.5rem !important; }
.modal-content {
  height: 100%; border-radius: 0; border:none;
  border-radius: 5px; box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.09);
}
.w270 { width:13.5rem !important} .w300 { width:15.0rem !important} .w350 { width:17.5rem !important} .w380 { width:19.0rem !important}
.w450 { width:22.5rem !important} .w600 { width:30rem !important}
.modal-header { position: relative; display: inline-block; }
.modal-header.dark { color: #fff; background: #414158; padding: 0.5rem;}
.modal-header.default { color: #000; background: #fff; padding: 0.5rem;}

.modal-header .close {
  display: inline-block; width:1rem; height:1rem; position: absolute; margin:0 0.5rem 0 0; padding:0;
  background: url(../images/btn-list-close.png) no-repeat center / 100% auto;
}
.modal-header .close.s-size { width :0.6rem; height: 0.6rem; background: url(../images/btn-list-close-white.png) no-repeat center / 100% auto; margin:0; }
.modal-header .close:focus, .modal-header .close:active { border: 0; outline: 0; }
.modal-body { height: 100%; margin:0; padding: 0;}
.modal-body section { margin:0; padding: 0.25rem 1rem;}
.modal-footer { margin:0; padding:0.25rem 0 1rem 0; border: none; }
.modal-footer.dark { border-top:1px solid #ccc; padding: 0.5rem; }

.box-row-nwr.flex-center-middle.search-input-title.ng-star-inserted {
    padding: 0.25rem 0.5rem !important;
    margin-bottom: 2px !important;
    text-align: left;
    height: 2.3rem;
    line-height: 1.2rem;
    font-size: 0.7rem;
    color: #9393a4;
    background: #f8f8f8;
  }

/* new pop-up */

.ep-pop { background: #fff; border-radius: 0.5rem; border: 1px solid #c0d4ec; }
.ep-pop-head { width:100%; height: 3rem; background: #c0d4ec; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; padding: 0.85rem 1rem; position: relative; }
.ep-pop-head h2 { font-size: 0.9rem; font-weight: 700; }
.close {
  background: url(../images/btn-list-close.png) no-repeat center; background-size: 80% auto; outline: 0 !important;
  position: absolute; top:50%; transform: translateY(-50%); right:1rem; cursor: pointer;  width:1rem; height: 1rem;
}
.ep-pop-body { width:100%; padding-left:0.5rem; padding-right:0.5rem; padding-top: 0; padding-bottom: 0}
.ep-pop-bottom { width:100%; padding-left:0.5rem; padding-right:0.5rem; padding-top: 0.5rem; padding-bottom: 0.1rem; border-top: 1px solid #eee;}


/*바사 section-body css 속성*/
.section-body2.harf { min-height: 4rem;}
.section-body2 { max-height: 12rem; overflow: auto; min-height: 8rem;}
.section-body2 > h3 { font-size: 0.75rem; color: #666666; font-weight: 800; padding:2rem 0 0.8rem; }
.section-body2 > h4 { font-size: 0.7rem; color: #666666; font-weight: 600; line-height: 1.5; padding:0.5rem 0; }
.section-body2 > p { font-size: 0.7rem; color: #666666; font-weight: 600; line-height: 1.5; }
.section-body2.no-scroll { max-height: unset; display: flex; flex-direction: column; overflow: hidden; }