@charset "utf-8";
* {box-sizing: border-box;line-height:1em; font-weight: 400;}
html {height:100%;}
body {font-family:var(--font, Pretendard,'AppleSDGothicNeo','Malgun Gothic',sans-serif) !important;font-size: 14px;color: #222;word-break: keep-all;}
a {text-decoration:none;}
button {font-family:var(--font, Pretendard,'Noto Sans Korean',sans-serif);border:none;cursor:pointer;}
input,textarea,select {font-family:var(--font, Pretendard,'AppleSDGothicNeo','Malgun Gothic',sans-serif) !important;font-weight:400;}
li a:focus:not(:focus-visible) { outline: none; }/* 크롬 브라우저 :focust-visible 업데이트로 인해 추가된 코드 */
/* padding, margin */
.mr-0 {margin-right:0 !important;}
.mr-10 {margin-right:10px !important;}
.mr-20 {margin-right:20px !important;}
.mr-30 {margin-right:30px !important;}
.mr-40 {margin-right:40px !important;}
.mr-50 {margin-right:50px !important;}
.mr-80 {margin-right:80px !important;}
.mr-100 {margin-right:100px !important;}
.mb-0 {margin-bottom:0 !important;}
.mb-10 {margin-bottom:10px !important;}
.mb-20 {margin-bottom:20px !important;}
.mb-30 {margin-bottom:30px !important;}
.mb-40 {margin-bottom:40px !important;}
.mb-50 {margin-bottom:50px !important;}
.mb-80 {margin-bottom:80px !important;}
.mb-100 {margin-bottom:100px !important;}
.mb-150 {margin-bottom:150px !important;}
.mb-200 {margin-bottom:200px !important;}
.ml-0 {margin-left:0 !important;}
.ml-10 {margin-left:10px !important;}
.ml-20 {margin-left:20px !important;}
.ml-30 {margin-left:30px !important;}
.ml-40 {margin-left:40px !important;}
.ml-50 {margin-left:50px !important;}
.ml-80 {margin-left:80px !important;}
.ml-100 {margin-left:100px !important;}
.mt-0 {margin-top:0 !important;}
.mt-10 {margin-top:10px !important;}
.mt-20 {margin-top:20px !important;}
.mt-30 {margin-top:30px !important;}
.mt-40 {margin-top:40px !important;}
.mt-50 {margin-top:50px !important;}
.mt-80 {margin-top:80px !important;}
.mt-100 {margin-top:100px !important;}
.p-10 {padding:10px !important;}
.p-20 {padding:20px !important;}
.p-30 {padding:30px !important;}
.m-10 {margin:10px !important;}
.m-20 {margin:20px !important;}
.m-30 {margin:30px !important;}
.pt-0 {padding-top:0 !important;}
.pt-8 {padding-top:8px !important;}
.pt-10 {padding-top:10px !important;}
.pt-20 {padding-top:20px !important;}
.pt-30 {padding-top:30px !important;}
.pt-40 {padding-top:40px !important;}
.pt-50 {padding-top:50px !important;}
.pt-80 {padding-top:80px !important;}
.pt-100 {padding-top:100px !important;}
.pb-0 {padding-bottom:0 !important;}
.pb-10 {padding-bottom:10px !important;}
.pb-20 {padding-bottom:20px !important;}
.pb-30 {padding-bottom:30px !important;}
.pb-40 {padding-bottom:40px !important;}
.pb-50 {padding-bottom:50px !important;}
.pb-80 {padding-bottom:80px !important;}
.pb-100 {padding-bottom:100px !important;}
.pl-0 {padding-left:0 !important;}
.pl-10 {padding-left:10px !important;}
.pl-20 {padding-left:20px !important;}
.pl-30 {padding-left:30px !important;}
.pl-40 {padding-left:40px !important;}
.pl-50 {padding-left:50px !important;}
.pl-80 {padding-left:80px !important;}
.pl-100 {padding-left:100px !important;}
.pr-0 {padding-right:0 !important;}
.pr-10 {padding-right:10px !important;}
.pr-20 {padding-right:20px !important;}
.pr-30 {padding-right:30px !important;}
.pr-40 {padding-right:40px !important;}
.pr-50 {padding-right:50px !important;}
.pr-80 {padding-right:80px !important;}
.pr-100 {padding-right:100px !important;}
.px-0 {padding-left:0 !important;padding-right:0 !important;}
.py-0 {padding-top:0 !important;padding-bottom:0 !important;}
.mx-0 {margin-left:0 !important;margin-right:0 !important;}
.my-0 {margin-top:0 !important;margin-bottom:0 !important;}
.px-16 {padding-left:16px !important;padding-right:16px !important;}
.py-16 {padding-top:16px !important;padding-bottom:16px !important;}
.mx-16 {margin-left:16px !important;margin-right:16px !important;}
.my-16 {margin-top:16px !important;margin-bottom:16px !important;}
.pr-4 {padding-right:4px !important;}
.pl-4 {padding-left:4px !important;}
.pr-8 {padding-right:8px !important;}
.pl-8 {padding-left:8px !important;}
.ml-3 {margin-left:3px !important;}
.mr-3 {margin-right:3px !important;}
.mt-3 {margin-top:3px !important;}
.mb-3 {margin-bottom:3px !important;}
.ml-4 {margin-left:4px !important;}
.mr-4 {margin-right:4px !important;}
.mt-4 {margin-top:4px !important;}
.mb-4 {margin-bottom:4px !important;}
.ml-8 {margin-left:8px !important;}
.mr-8 {margin-right:8px !important;}
.mt-8 {margin-top:8px !important;}
.mb-8 {margin-bottom:8px !important;}
.mt-16 {margin-top:16px !important;}
.mr-16 {margin-right:16px !important;}
.mb-16 {margin-bottom:16px !important;}
.ml-16 {margin-left:16px !important;}
.mt-24 {margin-top:24px !important;}
.mr-24 {margin-right:24px !important;}
.mb-24 {margin-bottom:24px !important;}
.ml-24 {margin-left:24px !important;}
.mt-32 {margin-top:32px !important;}
.mr-32 {margin-right:32px !important;}
.mb-32 {margin-bottom:32px !important;}
.ml-32 {margin-left:32px !important;}
.mt-42 {margin-top:42px !important;}
.mr-42 {margin-right:42px !important;}
.mb-42 {margin-bottom:42px !important;}
.ml-42 {margin-left:42px !important;}
.mt-48 {margin-top:48px !important;}
.mb-48 {margin-bottom:48px !important;}
.text-left {text-align:left !important;}
.text-center {text-align:center !important;}
.text-right {text-align:right !important;}
.relative {position:relative;}
/*.row {display:flex;margin-left:-5px;margin-right:-5px;}*/
.d-flex {display:flex;}
.align-center {align-items:center;}
.justify-content-center {justify-content: center;}
.flex-wrap {flex-wrap:wrap;}
.justify-between {justify-content:space-between;}
/*.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-55 {padding-left:5px;padding-right:5px;}*/
.col-1 {flex: 0 0 auto;width: 8.3333333333%;}
.col-2 {flex: 0 0 auto;width: 16.6666666667%;}
.col-3 {flex: 0 0 auto;width: 25%;}
.col-4 {flex: 0 0 auto;width: 33.3333333333%;}
.col-5 {flex: 0 0 auto;width: 41.6666666667%;}
.col-6 {flex: 0 0 auto;width: 50%;}
.col-7 {flex: 0 0 auto;width: 58.3333333333%;}
.col-8 {flex: 0 0 auto;width: 66.6666666667%;}
.col-9 {flex: 0 0 auto;width: 75%;}
.col-10 {flex: 0 0 auto;width: 83.3333333333%;}
.col-11 {flex: 0 0 auto;width: 91.6666666667%;}
.col-12 {flex: 0 0 auto;width: 100%;}
.col-55 {flex: 0 0 auto;width: 20%;}
/* text align */
.text-left {text-align:left !important;}
.text-center {text-align:center !important;}
.text-right {text-align:right !important;}
/* text-color */
.text-danger {color:#ff5354 !important;}
.text-info {color:#108ccf !important;}
.text-warning {color:#ffdf00;}
em.unit.disabled {display:inline-block;flex:0 0 30px;width:30px;color:#999;}
/* padding */
/*.noPadding {padding:0 !important;}*/
/*. {border:none;border-top:1px solid #252e34;}*/
/* layout */
.data-area-body .divide-wrap{display:flex;height:746px;}
.divide {flex:0 0 10px;width:40px;height:100vh;}
.divide-hauto {flex:0 0 40px;width:40px;height: auto !important;background:url('../images/bg_divide.png') repeat-y center;}
.divide-h100 {flex:0 0 40px;width:40px;height: 100% !important;background:url('../images/bg_divide.png') repeat-y center;}
.two-divide {flex:0 0 calc((100% - 40px) / 2);width:calc((100% - 40px) / 2);padding-top:4px;}
.form-divide_1600 {flex:0 0 calc(100% - 40px - 1600px);width:calc(100% - 40px - 1600px);min-width:0;padding-top:4px;}
.form-divide_1600.form {flex:0 0 1600px;width:1600px;padding-top:4px;}
.form-divide_1550 {flex:0 0 calc(100% - 40px - 1550px);width:calc(100% - 40px - 1550px);min-width:0;padding-top:4px;}
.form-divide_1550.form {flex:0 0 1550px;width:1550px;padding-top:4px;}
.form-divide_1540 {flex:0 0 calc(100% - 40px - 1540px);width:calc(100% - 40px - 1540px);min-width:0;padding-top:4px;}
.form-divide_1540.form {flex:0 0 1540px;width:1540px;padding-top:4px;}
.form-divide_1530 {flex:0 0 calc(100% - 40px - 1530px);width:calc(100% - 40px - 1530px);min-width:0;padding-top:4px;}
.form-divide_1530.form {flex:0 0 1530px;width:1530px;padding-top:4px;}
.form-divide_1500 {flex:0 0 calc(100% - 40px - 1500px);width:calc(100% - 40px - 1500px);min-width:0;padding-top:4px;}
.form-divide_1500.form {flex:0 0 1500px;width:1500px;padding-top:4px;}
.form-divide_1330 {flex:0 0 calc(100% - 40px - 1330px);width:calc(100% - 40px - 1330px);min-width:0;padding-top:4px;}
.form-divide_1330.form {flex:0 0 1330px;width:1330px;padding-top:4px;}
.form-divide_1300 {flex:0 0 calc(100% - 40px - 1300px);width:calc(100% - 40px - 1300px);min-width:0;padding-top:4px;}
.form-divide_1300.form {flex:0 0 1300px;width:1300px;padding-top:4px;}
.form-divide_1280 {flex:0 0 calc(100% - 40px - 1280px);width:calc(100% - 40px - 1280px);min-width:0;padding-top:4px;}
.form-divide_1280.form {flex:0 0 1280px;width:1280px;padding-top:4px;}
.form-divide_1200 {flex:0 0 calc(100% - 40px - 1200px);width:calc(100% - 40px - 1200px);min-width:0;padding-top:4px;}
.form-divide_1200.form {flex:0 0 1200px;width:1200px;padding-top:4px;}
.form-divide_1024 {flex:0 0 calc(100% - 40px - 1024px);width:calc(100% - 40px - 1024px);min-width:0;padding-top:4px;}
.form-divide_1024.form {flex:0 0 1024px;width:1024px;padding-top:4px;}
.form-divide_960 {flex:0 0 calc(100% - 40px - 960px);width:calc(100% - 40px - 960px);min-width:0;padding-top:4px;}
.form-divide_960.form {flex:0 0 960px;width:960px;padding-top:4px;}
.form-divide_940 {flex:0 0 calc(100% - 40px - 940px);width:calc(100% - 40px - 940px);min-width:0;padding-top:4px;}
.form-divide_940.form {flex:0 0 940px;width:940px;padding-top:4px;}
.form-divide_920 {flex:0 0 calc(100% - 40px - 920px);width:calc(100% - 40px - 920px);min-width:0;padding-top:4px;}
.form-divide_920.form {flex:0 0 920px;width:920px;padding-top:4px;}
.form-divide_910 {flex:0 0 calc(100% - 40px - 910px);width:calc(100% - 40px - 910px);min-width:0;padding-top:4px;}
.form-divide_910.form {flex:0 0 910px;width:910px;padding-top:4px;}
.form-divide_900 {flex: 0 0 calc(100% - 40px - 900px);width: calc(100% - 40px - 900px);min-width: 0;padding-top: 4px;}
.form-divide_900.form {flex:0 0 900px;width:900px;padding-top:4px;}
.form-divide_300 {flex: 0 0 calc(100% - 40px - 300px);width: calc(100% - 40px - 300px);min-width: 0;padding-top: 4px;}
.form-divide_300.form {flex:0 0 300px;width:300px;padding-top:4px;}
.form-divide_280 {flex: 0 0 calc(100% - 40px - 280px);width: calc(100% - 40px - 280px);min-width: 0;padding-top: 4px;}
.form-divide_280.form {flex:0 0 280px;width:280px;padding-top:4px;}
.form-divide_250 {flex: 0 0 calc(100% - 40px - 250px);width: calc(100% - 40px - 250px);min-width: 0;padding-top: 4px;}
.form-divide_250.form {flex:0 0 250px;width:250px;padding-top:4px;}
.form-divide_890 {flex:0 0 calc(100% - 40px - 890px);width:calc(100% - 40px - 890px);min-width:0;padding-top:4px;}
.form-divide_890.form {flex:0 0 890px;width:890px;padding-top:4px;}
.form-divide_850 {flex:0 0 calc(100% - 40px - 850px);width:calc(100% - 40px - 850px);min-width:0;padding-top:4px;}
.form-divide_850.form {flex:0 0 850px;width:850px;padding-top:4px;}
.form-divide_793 {flex:0 0 calc(100% - 40px - 793px);width:calc(100% - 40px - 793px);min-width:0;padding-top:4px;}
.form-divide_793.form {flex:0 0 793px;width:793px;padding-top:4px;}
.form-divide_750 {flex:0 0 calc(100% - 40px - 750px);width:calc(100% - 40px - 750px);min-width:0;padding-top:4px;}
.form-divide_750.form {flex:0 0 750px;width:750px;padding-top:4px;}
.form-divide_700 {flex:0 0 calc(100% - 40px - 700px);width:calc(100% - 40px - 750px);min-width:0;padding-top:4px;}
.form-divide_700.form {flex:0 0 700px;width:700px;padding-top:4px;}
.form-divide_650 {flex:0 0 calc(100% - 40px - 650px);width:calc(100% - 40px - 650px);min-width:0;padding-top:4px;}
.form-divide_650.form {flex:0 0 650px;width:650px;padding-top:4px;}
.form-divide_600 {flex:0 0 calc(100% - 40px - 600px);width:calc(100% - 40px - 600px);min-width:0;padding-top:4px;}
.form-divide_600.form {flex:0 0 600px;width:600px;padding-top:4px;}
.three-one-divide {flex:0 0 calc(((100% - 40px) / 2) * 1);width:calc(((100% - 40px) / 2) * 1);padding-top:4px;}
.three-two-divide {flex:0 0 calc(((100% - 40px) / 4) * 2);width:calc(((100% - 40px) / 4) * 2);padding-top:4px;}
.three-one-2divide {flex:0 0 calc(((100% - 40px - 40px) / 3) * 1);width:calc(((100% - 40px - 40px) / 3) * 1);padding-top:4px;}
.three-two-2divide {flex:0 0 calc(((100% - 40px - 40px) / 3) * 1);width:calc(((100% - 40px - 40px) / 3) * 1);padding-top:4px;}
.three-three-2divide {flex:0 0 calc(((100% - 40px - 40px) / 3) * 1);width:calc(((100% - 40px - 40px) / 3) * 1);padding-top:4px;}
.four-one-divide {flex:0 0 calc(((100% - 40px) / 4) * 1);width:calc(((100% - 40px) / 4) * 1);padding-top:4px;}
.four-two-divide {flex:0 0 calc(((100% - 40px) / 4) * 2);width:calc(((100% - 40px) / 4) * 2);padding-top:4px;}
.four-three-divide {flex:0 0 calc(((100% - 40px) / 4) * 3);width:calc(((100% - 40px) / 4) * 3);padding-top:4px;}
.five-two-divide {flex:0 0 calc(((100% - 40px) / 5) * 2);width:calc(((100% - 40px) / 5) * 2);padding-top:4px;}
.five-three-divide {flex:0 0 calc(((100% - 40px) / 5) * 3);width:calc(((100% - 40px) / 5) * 3);padding-top:4px;}
.five-one-2divide {flex:0 0 calc(((100% - 40px - 40px) / 5) * 1);width:calc(((100% - 40px - 40px) / 5) * 1);padding-top:4px;}
.five-two-2divide {flex:0 0 calc(((100% - 40px - 40px) / 5) * 2);width:calc(((100% - 40px - 40px) / 5) * 2);padding-top:4px;}
.five-three-2divide {flex:0 0 calc(((100% - 40px - 40px) / 5) * 3);width:calc(((100% - 40px - 40px) / 5) * 3);padding-top:4px;}
.five-four-2divide {flex:0 0 calc(((100% - 40px - 40px) / 5) * 4);width:calc(((100% - 40px - 40px) / 5) * 4);padding-top:4px;}
.box {border:1px solid #ccc;}
.image-100p img {width:100% !important;}
.table-height {overflow-y:auto;}
.input-unit {display:flex;align-items:center;justify-content:flex-end;width:100%;color:#999;}
.input-unit .zform-control {width:calc(100% - 16px);margin-right:4px;}
.input-tel-num {display:flex;align-items:center;}
.input-tel-num span {display:inline-block;margin:0 3px;color:#ddd;}
.input-calendar {position:relative; display: flex;}
.input-calendar a {position:absolute;right:5px;top:50%;transform:translateY(-50%);}
.input-calendar a i {display:inline-block;width:11px;height:12px;background:url('../images/icon_calendar.png') no-repeat center;}
.zform-control {display:flex;align-items:center;width:100%;height:24px;border:1px solid #ddd;padding:0 5px;font-size:12px;color:#4F4F4F;}
.zform-control:hover {border:1px solid #333;}
.zform-control[disabled] {color:#999;background:#f1f1f1;}
.zform-control[disabled]:hover {border:1px solid #ddd;}
select.disabled {color:#999;background:#f1f1f1 !important;}
textarea.zform-control {min-height:30px;height:auto;padding:5px;}
textarea.zform-control::placeholder {color:#999;}
/* table */
table.noBorderTop {border-top:none !important;}
.table-horizontal {width:100%;table-layout:fixed;border-collapse:collapse;border-top:1px solid #999;}
.table-horizontal th,.table-horizontal td {padding:3px;font-size:11px;border-bottom:1px solid #f1f1f1;}
.table-horizontal tr:last-child th,.table-horizontal tr:last-child td {border-bottom-color:#c6c6c6;}
.table-horizontal th {color:#666;background:#fafafa;text-align:left;border-left:1px solid #ddd;padding:3px 0 3px 5px;}
.table-horizontal th.disabled {color:#999;}
.table-grid {width:100%;table-layout:fixed;border-collapse:collapse;border:1px solid #c6c6c6;}
.table-grid th {height:26px;background:#f1f1f1;border-bottom:1px solid #c6c6c6;border-right:1px solid #ddd;vertical-align:middle;font-size:12px;font-weight:300;}
.table-grid th:first-child {border-right-color:#c6c6c6;}
.table-grid th:last-child {border-right-color:#c6c6c6;}
.table-grid td {height:31px;background:#fff;border-bottom:1px solid #c6c6c6;border-right:1px dotted #ddd;vertical-align:middle;letter-spacing:-.03em;
font-size:12px;font-weight:300;text-align:center;padding:0 10px;color:#333;}
.table-grid tr:nth-child(even) td {background:#fafafa;}
.table-grid tr.on th {position:relative;}
/*.table-grid tr.on th:before {position:absolute;left:0;top:-1px;content:'';width:100%;height:1px;background:#137bb7;}*/
.table-grid tr.on th:after {position:absolute;left:0;right:0;top:0;bottom:0;content:'';border:2px solid #137bb7;margin:-1px;}
.table-grid tr.on td {position:relative;border-bottom:1px solid #137bb7;background:#e7f2f8;}
.table-grid tr.on td:after {position:absolute;left:0;top:-1px;content:'';width:100%;height:1px;background:#137bb7;}
.table-grid tr.on:first-child th {position:relative;border-top:1px solid #c6c6c6;border-bottom:1px solid #137bb7;}
.table-grid tr.on:first-child td {border-top:1px solid #c6c6c6;border-bottom:1px solid #137bb7;background:#e7f2f8;}
.table-grid tr.within-3m td {color:#137bb7;}
.table-grid tr.within-1m td {color:#eea11a;}
.table-grid tr.past-details td {color:#ff5354;}
.table-grid tfoot th {background:#e1e4e8;border-top:1px solid #666;border-bottom:1px solid #c6c6c6;border-right:1px solid #c6c6c6;font-weight:500;}
.table-grid tfoot td {background:#e1e4e8;border-top:1px solid #666;border-bottom:1px solid #c6c6c6;border-right:1px dotted #c6c6c6;font-weight:500;}
.table-vertical {width:100%;table-layout:fixed;border-collapse:collapse;border-top:1px solid #0A2f49;border-bottom:1px solid #666;}
.table-vertical th {height:39px;vertical-align:middle;background:#f1f1f1;border-bottom:1px solid #c6c6c6;font-weight:500;font-size:14px;color:#666;text-align:center;}
.table-vertical th:nth-child(1) {border-right:1px solid #c6c6c6;}
.table-vertical th:nth-child(1) {border-right:1px solid #ddd;}
.table-vertical td {height:39px;vertical-align:middle;background:#fff;border-bottom:1px solid #f1f1f1;font-weight:300;font-size:14px;color:#333;text-align:center;padding:0 16px;}
.table-vertical td:nth-child(1) {color:#999;font-weight:500;border-right:1px solid #c6c6c6;}
.table-vertical td:nth-child(2) {color:#999;font-weight:500;border-right:1px solid #eee;}
.table-vertical tr:last-child td {border-bottom:none;}
/* button */
button.icon-square {flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ddd;margin-left:4px;border-radius:4px;}
.option_input_bg .select2-container--default .select2-selection--single { border-radius: 4px 0 0 4px !important; }
.option_input_bg button.icon-square { margin-left: 0 !important; border-left: none !important; border-radius: 0 4px 4px 0 !important; }
button.icon-square.disabled {background-color:#f1f1f1 !important;}
button.icon-square.home { background: #fff; }
button.icon-square.search { background: #fff; }
button.icon-square.lock { background: #fff; }
button.icon-square.refresh { background: #fff; }
button.icon-square.print { background: #fff; }
button.icon-square.download { background: #fff; }
button.icon-square::before { font-family: 'Font Awesome 5 Pro'; font-weight: 900; font-size: 12px; color: var(--t2); }
button.icon-square.home::before { content: '\f015'; }
button.icon-square.search::before { content: '\1F50D'; font-family: initial; }
button.icon-square.lock::before { content: '\1F512'; font-family: initial; }
button.icon-square.refresh::before { content: '\f021'; }
button.icon-square.print::before { content: '\f02f'; }
button.icon-square.download::before { content: '\f019'; }
button i {display:inline-block;width:12px;height:12px;margin-right:4px;}
button i.icon-zoom {background:url('../images/icon_zoom.png') no-repeat center;}
button i.icon-plus {background:url('../images/icon_plus_white.png') no-repeat center;}
button i.icon-minus {background:url('../images/icon_minus_white.png') no-repeat center;}
button i.icon-invoice {background:url('../images/icon_invoice.png') no-repeat center;}
button i.icon-download {background:url('../images/icon_download.png') no-repeat center;}
button i.icon-print {background:url('../images/icon_printer.png') no-repeat center;}
button i.icon-check {background:url('../images/icon_check.png') no-repeat center;}
button i.icon-check-white {background:url('../images/icon_check_white.png') no-repeat center;}
button i.icon-expend {background:url('../images/icon_expend.png') no-repeat center;}
button i.icon-change {background:url('../images/icon_change_white.png') no-repeat center;}
button i.icon-excel-upload {background:url('../images/icon_excel_upload.png') no-repeat center;}
button i.icon-excel-download {background:url('../images/icon_excel_download.png') no-repeat center;}
button i.icon-gear {background:url('../images/icon_gear.png') no-repeat center;}
/*새 디자인 아이콘*/
button i.addnew_black {background:url('../images/addnew_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.addnew2_black {background:url('../images/addnew2_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.copy_black {background:url('../images/copy_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.change_black {background:url('../images/change_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.edit_black {background:url('../images/edit_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.undo_black {background:url('../images/undo_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.undo_white {background:url('../images/undo_white_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.trashcan_black {background:url('../images/trashcan_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.save_black {background:url('../images/save_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.save_sns_black {background:url('../images/.save_sns_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.save_disk_black {background:url('../images/save_disk_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.close_box_black {background:url('../images/close_box_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.close_circle_black {background:url('../images/close_circle_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.find_black {background:url('../images/find_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.search_black {background:url('../images/search_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.search_doc_black {background:url('../images/search_doc_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.load_black {background:url('../images/load_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.start_black {background:url('../images/start_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.start_white {background:url('../images/start_white_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.execute_black {background:url('../images/execute_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.execute_white {background:url('../images/execute_white_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.gear_black {background:url('../images/gear_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.complete_black {background:url('../images/complete_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.calc_black {background:url('../images/calc_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.reset_black {background:url('../images/reset_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.reset_passw_black {background:url('../images/reset_passw_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.reset_clock {background:url('../images/reset_clock_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.print_black {background:url('../images/print_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.print_white {background:url('../images/print_white_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.issue_black {background:url('../images/issue_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.issue2_black {background:url('../images/issue2_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.email_black {background:url('../images/email_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.email2_black {background:url('../images/email2_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.sms_black {background:url('../images/sms_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.naver_document {background:url('../images/naver_document.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.sms2_black {background:url('../images/sms2_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.send_black {background:url('../images/send_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.send2_black {background:url('../images/send2_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.upload_black {background:url('../images/upload_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.download_black {background:url('../images/download_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.cloud_upload_black {background:url('../images/cloud_upload_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.cloud_download_black {background:url('../images/cloud_download_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.report_certi_black {background:url('../images/report_certi_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.report_black {background:url('../images/report_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.excel_file_black {background:url('../images/excel_file_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.excel2_black {background:url('../images/excel2_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.excel3_black {background:url('../images/excel3_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.excel_upload_black {background:url('../images/excel_upload_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.excel_download_black {background:url('../images/excel_download_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.pdf_black {background:url('../images/pdf_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.link_black {background:url('../images/link_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.link2_black {background:url('../images/link2_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.lock_black {background:url('../images/lock_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.lock_white {background:url('../images/lock_white_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.unlock_black {background:url('../images/unlock_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.unlock_white {background:url('../images/unlock_white_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.merge_black {background:url('../images/merge_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.seperator_black {background:url('../images/select_all_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.select_all_black {background:url('../images/select_all_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.eraser_black {background:url('../images/eraser_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.mail_black {background:url('../images/mail_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.calendar_black {background:url('../images/calendar_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.clock_black {background:url('../images/clock_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.clip_black {background:url('../images/clip_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.view_black {background:url('../images/view_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.gear_black {background:url('../images/gear_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.qrcode_black {background:url('../images/qrcode_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.chart_black {background:url('../images/chart_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.building_black {background:url('../images/building_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.location_black {background:url('../images/location_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.car_black {background:url('../images/car_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.power-black {background:url('../images/power-black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.on-off_black {background:url('../images/on-off_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.alarm_black {background:url('../images/alarm_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.alert_black {background:url('../images/alert_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.photo_black {background:url('../images/photo_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.layer_black {background:url('../images/layer_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.space_black {background:url('../images/space_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.more_black {background:url('../images/more_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.message_black {background:url('../images/message_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.initial_black {background:url('../images/initial_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
button i.separator_black {background:url('../images/separator_black_18x18.png') no-repeat center; width: 13px; height: 13px; background-size: 13px; vertical-align: middle;}
/* tabs */
.tabs {display:flex;align-items:center;width:100%;height:26px;border-bottom:1px solid #999;margin-bottom:3px;}
.tabs li {display:flex;align-items:center;}
.tabs li a {position:relative;display:flex;align-items:center;height:26px;border:1px solid #c6c6c6;border-bottom-color:#999;color:#999;font-size:12px;background:#fafafa;padding:0 8px;margin-left:-1px;z-index:1; cursor: pointer; font-family: var(--font, 'AppleSDGothicNeo-SB') !important; font-weight: 600; }
.tabs li.on a {border:1px solid #999;border-bottom-color:#fff;color:#333;background:#fff;z-index:2;}
.tabs.lg a {width:120px;justify-content:center;}
/* checkbox */
span.checkbox {display:inline-block;width:16px;height:16px;background:url('../images/checkbox_off.png') no-repeat center;}
span.checkbox.on {display:inline-block;width:16px;height:16px;background:url('../images/checkbox_on.png') no-repeat center;}
/* radio */
span.radio {display:inline-block;width:16px;height:16px;background:url('../images/checkbox_off.png') no-repeat center;}
span.radio.on {display:inline-block;width:16px;height:16px;background:url('../images/checkbox_on.png') no-repeat center;}
/* paginate */
.paginate {display:flex;align-items:center;justify-content:center;margin:32px 0 16px;}
.paginate a {display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:0 3px;font-size:14px;color:#333;font-family:'Roboto','Noto Sans Korean', sans-serif;border:1px solid #ddd;font-weight:300;}
.paginate a.forward {border:none;background:url('/resources/renewal/images/page_forward.png') no-repeat center;}
.paginate a.prev {border:none;background:url('/resources/renewal/images/page_prev.png') no-repeat center;margin-right:13px;}
.paginate a.next {border:none;background:url('/resources/renewal/images/page_next.png') no-repeat center;margin-left:13px;}
.paginate a.backward {border:none;background:url('/resources/renewal/images/page_backward.png') no-repeat center;}
.paginate a.disabled {opacity:.3;}
.paginate span {display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:0 3px;font-size:14px;color:#fff;font-family:'Roboto','Noto Sans Korean', sans-serif;border:none;font-weight:500;background:#000;}
/* tab(large) */
.tabs.large {position:relative;display:flex;align-items:center;height:40px;border-bottom:1px solid #0a2f49;}
.tabs.large li a {display:flex;align-items:center;justify-content:center;width:96px;height:41px;font-size:14px;}
.tabs.large li.on a {color:#333;border-color:#0a2f49;border-bottom-color:#fff;}
.list-board {border-bottom:1px solid #c6c6c6;}
.list-board li {display:flex;align-items:center;height:44px;border-bottom:1px solid #f1f1f1;}
.list-board li:last-child {border-bottom:none;}
.list-board li strong {width:72px;font-size:14px;color:#999;text-align:center;font-family:'Roboto','Noto Sans Korean', sans-serif;}
.list-board li p {width:calc(100% - 72px);font-size:14px;color:#333;font-weight:300;}
/* 모든 스크롤바를 거의 안 보이게 */
::-webkit-scrollbar {
width: 8px; /* 아주 얇게 */
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent; /* 트랙은 완전 투명 */
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.05); /* 거의 투명 */
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.1); /* 마우스 올리면 약간 보이게 */
}
/* Firefox */
.scroll-container {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
/* Center the loader */
#formLoadImgId2 {
position: absolute;
left: 50%;
top: 48%;
z-index: 1;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
/* ============================================================
레이아웃 유틸리티 (신규 템플릿 전용 — 순수 flex 기반)
▣ 가로 분할 (horizontal split) — 부모는 flex 컨테이너
· .split-wrap = display:flex 컨테이너
· .split-fill = 나머지 폭 전부 차지
· .split-fixed = 고정폭 (style="--w:793px;")
· .split-ratio = 비율로 폭 차지 (style="--r:2;", 기본 1)
· .split-divider = 가로 분할 구분선 (.divide 대체)
.divide 는 height:100vh 고정이라 중첩에서 오동작하지만,
.split-divider 는 부모 align-items:stretch 로 형제 높이 자동 맞춤
▣ 세로 스택 (vertical stack) — 부모는 flex-column
· .stack-wrap = display:flex + flex-direction:column + min-height:0
· .stack-auto = 콘텐츠 크기만큼만 차지 (프리폼/제목 등)
· .stack-fill = 남은 높이 전부 차지 (그리드 등)
· .stack-ratio = 비율로 높이 차지 (style="--r:2;", 기본 1)
▣ 사용 전제
· .data-area-body 에 .stack-wrap 을 붙여 flex 체인을 루트부터 시작하면,
.height-one / .height-two.first / .height-three.first 같은
JS 픽셀 계산 클래스 없이 순수 CSS 로 높이 분배 가능.
· 기존 JS 높이 계산 로직(common.js)은 건드리지 않음 — 레거시 화면은 그대로.
▣ 레거시 매핑
· form-divide_NNN → split-fixed (style="--w:NNNpx;")
· three-one-divide (1) → split-ratio (기본 --r:1) 또는 split-fill
· three-two-divide (2) → split-ratio (style="--r:2;")
· four-one-divide (1) → split-ratio --r:1
· four-three-divide (3) → split-ratio --r:3
· five-two-divide (2) → split-ratio --r:2
· five-three-divide (3) → split-ratio --r:3
· two-divide → split-ratio (--r:1 양쪽) 또는 split-fill × 2
· height-one → stack-fill
· height-two.first + height-two → stack-ratio × 2
· height-three.first + height-three × 2 → stack-ratio × 3
· table-height height-one (이중 래퍼) → stack-fill 하나로 축소
· .divide → .split-divider
============================================================ */
.split-wrap { display:flex;}
.split-fill { flex:1 1 0; min-width:0; }
.split-fixed { flex:0 0 var(--w); width:var(--w); }
.split-ratio { flex: var(--r,1) 1 0; min-width:0;}
.split-divider { flex:0 0 10px; width:40px; align-self:stretch;}
.stack-wrap { display:flex; flex-direction:column; min-height:0;}
.stack-auto { flex:0 0 auto;}
.stack-fill { flex:1 1 0; min-height:0; }
.stack-ratio { flex: var(--r,1) 1 0; min-height:0; }
/* 컨텐츠 영역 하단 여백 — 개별 유틸에 margin-bottom 을 주면 여러 개일 때 누적됨.
data-area-body 에 한 번만 padding-bottom 으로 처리. */
/*.data-area-body { padding-bottom:10px; }*/
/* ============================================================
섹션 타이틀 (기존 .section h2 descendant 셀렉터 대체)
- 기존: ...
→ .section 래퍼 강제
- 신규: ...
→ 래퍼 의존성 제거
- .section 래퍼를 걷어내고 h2 에 직접 .section-title 부여
============================================================ */
.section-title { display:flex; align-items:center; justify-content:flex-start; height:34px; font-size:12px; padding: 0 14px; margin: 0; color: var(--t1); background: #FAFBFC;
border-radius: 10px 10px 0 0;
/* search-area 와 동일한 테두리: 얇은 --border + 위쪽 2px --primary 강조선, 아래는 없음(그리드가 붙음). */
border: 1px solid var(--border);
border-bottom: none;
background: #FAFBFC;}
.section-title::before { content: ""; display: inline-block; width: 3px; height: 13px; background: var(--accent); border-radius: 2px; flex-shrink: 0; margin-right: 8px;}
.section-title.mb-m1 { margin-bottom:-1px; }
.section-title label { display:flex; align-items:center; line-height:1; }
.section-title label strong { display:inline-flex; align-items:center; margin-right:20px; font-size:12px; color:#666; }
.section-title label strong:last-child { margin-right:0; }
.section-title label strong:first-child { margin-left:10px; }
.section-title label .legend { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; }
.section-title label .legend.legend-primary { background:#137bb7; }
.section-title label .legend.legend-warning { background:#eea11a; }
.section-title label .legend.legend-danger { background:#ff5354; }
.section-title .btn-wrap { display:flex; }
div:has(> .tabs) + .section-title,
div:has(> .tabs) ~ div > .section-title,
div:has(> .tabs) ~ div > .split-ratio > .section-title,
div:has(> .tabs) ~ div > .split-wrap > .split-ratio > .section-title,
div:has(> .tabs) ~ div.split-wrap > .split-ratio > .section-title,
div:has(> .tabs) ~ div > div:first-child > .section-title,
.section-title:has(+ div > .tabs)
{ border-radius: 0; }
/* ============================================================
상세 박스 내부 소제목 (기존 .section-second h3 descendant 셀렉터 대체)
- 기존: ...
- 신규: ...
→ .section-second 래퍼 불필요
============================================================ */
.detail_box h3 { margin-bottom:6px; font-size:12px; font-family:var(--font, 'AppleSDGothicNeo','Malgun Gothic') !important; font-weight:800; }
.section-body {background: #FFFFFF; border-radius: 0 0 10px 10px;}