@import url('../../../../oxjs/addon.css');

/* common */
.ox_stt_o, .ox_stt_r, .ox_stt_b, .ox_stt_g, .ox_stt_y, .ox_stt_k {display:inline-block; min-width:3.8em; height:1.8em; padding:0 0.4em; background:#F96; font-size:0.9375em; color:#FFF; line-height:1.8em; text-align:center; vertical-align:middle; white-space:nowrap;}
.ox_stt_r {background:#F47;}
.ox_stt_b {background:#3BE;}
.ox_stt_g {background:#8B4;}
.ox_stt_y {background:#FC3; color:#000;}
.ox_stt_k {background:#E6E6E6; color:#000;}
.ox_stt_w {font-size:0.9375em;}

.ox_state {width:100%; max-width:900px; margin:30px auto;}
.ox_state ul {display:flex; justify-content:space-between; margin:0; padding:0; list-style:none;}
.ox_state li {flex-basis:100px; margin:0; padding:0 10px;}
.ox_state li a {display:block; height:100px; color:#000; line-height:50px; text-align:left; white-space:nowrap;}
.ox_state li em {display:block; margin-bottom:10px; font-style:normal; line-height:30px;}
.ox_state li b {margin-right:4px; font-weight:bold; font-size:45px; letter-spacing:-4px;}
.ox_state li a:hover {color:#000; text-decoration:none;}
.ox_state li a:hover b {border-bottom:1px solid #000;}
.ox_state li.off b {color:#999;}
.ox_state li.off a:hover b {border-bottom-color:#999;}

.ox_srch {margin-bottom:50px; padding:20px 30px; border-radius:3px; background:#F7F7F7;}
.ox_srch .kwd {width:30%; min-width:150px; max-width:300px;}
.ox_srch select {min-width:100px; max-width:60%;}
.ox_srch select.auto {min-width:auto;}
.btn_srch_opt {height:1.715em; margin:0 4px; padding:0; border:0; background:none; font-size:0.875rem; line-height:1.715em;}
.btn_srch_opt:before {float:left; margin-right:4px; font-size:12px; color:#333; content:'\25BC';}
.btn_srch_opt.on:before {content:'\25B2';}
.ox_srch .opt+.opt {margin-top:10px;}
.ox_srch .kwd_bar {text-align:center;}
.ox_srch .kwd_bar+.opt_bar {margin-top:20px; border-top:2px solid #DDD;}
.ox_srch .opt_bar .opt {margin:20px 0;}
.ox_srch .opt .lb,
.ox_srch .opt label:first-child,
.ox_srch .opt select+label,
.ox_srch .opt input[type="text"]+label,
.ox_srch .opt input[type="number"]+label {display:inline-block; min-width:6em; font-weight:600; color:#888; text-align:right; vertical-align:middle; white-space:nowrap;}
.ox_srch .opt .lb:after,
.ox_srch .opt label:first-child:after,
.ox_srch .opt select+label:after,
.ox_srch .opt input[type="text"]+label:after,
.ox_srch .opt input[type="number"]+label:after {font-weight:normal; content:'\0020\003A';}
.ox_srch .opt select+.lb,
.ox_srch .opt input[type="text"]+.lb,
.ox_srch .opt input[type="number"]+.lb,
.ox_srch .opt select+label,
.ox_srch .opt input[type="text"]+label,
.ox_srch .opt input[type="number"]+label {margin-left:10px;}
.ox_srch input:read-only {font-style:italic; color:#888;}
.ox_srch .sl {display:inline-block; width:1px; height:1em; margin:0 12px; background:#BBB; vertical-align:middle;}
.ox_srch .btns {margin:10px 0; text-align:center;}
.ox_srch .btns .btn_b {margin:0 2px;}

.ox_tbl_wrap {overflow:auto; overflow-y:hidden; overflow-x:auto;}
.ox_tbl_wrap>table {min-width:100%;}

.ox_tbl_list tr.go:hover {cursor:pointer;}
.ox_tbl_list tr.go a:hover {color:#000; text-decoration:none;}
.ox_tbl_list tr.go td[onclick] {cursor:default;}
.ox_tbl_list th.num {width:70px;}
.ox_tbl_list td.num {padding-left:5px; padding-right:5px; white-space:nowrap;}
.ox_tbl_list th.edit {width:20px; font-size:10px; letter-spacing:-10px; color:#F6F6F6;}
.ox_tbl_list .ok {width:50px;}
.ox_tbl_list tr.disable td, .ox_tbl_list tr.disable a, .ox_tbl_list tr.disable a:hover {color:#F00;}
.ox_tbl_list tr.disable .a_pop {border-bottom-color:#F00;}
.ox_tbl_list .b_rs_n, .ox_tbl_list .b_rs_w, .ox_tbl_list .b_rs_u, .ox_tbl_list .b_rs_r, .ox_tbl_list .b_rs_a {overflow:visible; position:relative; width:5.5em; height:2em; padding:0; border:0; border-radius:3px; background:#3BE; font-size:0.875rem; color:#FFF; line-height:2em; text-align:center; white-space:nowrap; -webkit-appearance:none;}
.ox_tbl_list .b_rs_n {background:#DDD; color:#000;}
.ox_tbl_list .b_rs_w {background:#F96;}
.ox_tbl_list .b_rs_u {background:#8B4;}
.ox_tbl_list .b_rs_r {background:#F47;}
.ox_tbl_list .b_rs_n .n, .ox_tbl_list .b_rs_w .n, .ox_tbl_list .b_rs_u .n, .ox_tbl_list .b_rs_r .n, .ox_tbl_list .b_rs_a .n {display:none;}
.ox_tbl_list .b_rs_n.m, .ox_tbl_list .b_rs_w.m, .ox_tbl_list .b_rs_u.m, .ox_tbl_list .b_rs_r.m, .ox_tbl_list .b_rs_a.m {width:1.5em;}
.ox_tbl_list .b_rs_n:hover, .ox_tbl_list .b_rs_w:hover, .ox_tbl_list .b_rs_u:hover, .ox_tbl_list .b_rs_r:hover, .ox_tbl_list .b_rs_a:hover {outline:2px solid #567; box-shadow:0 0 0 4px rgba(85,102,119,0.5); transition:0.3s all;}
.ox_tbl_list .b_rs {margin:-4px;}
.ox_tbl_list .b_rs button {margin:4px;}
.ox_tbl_list .stress:after {position:absolute; top:-2px; left:-2px; width:8px; height:8px; border-radius:50%; background:#F00; content:'';}
.ox_tbl_list .rs_r .upld {background:#F47;}

.ox_tbl_view .sub {padding:0;}
.ox_tbl_view .sub table {margin:-1px 0;}
.ox_tbl_view .sub td {border-left:1px solid #DDD;}
.ox_tbl_view .sub td:first-child {border-left-width:0;}
.ox_tbl_view .rs_n, .ox_tbl_view .rs_w, .ox_tbl_view .rs_u, .ox_tbl_view .rs_r, .ox_tbl_view .rs_a {display:block; width:5.5em; height:2em; margin:4px auto; border-radius:1em; background:#3BE; color:#FFF; line-height:2em; text-align:center; white-space:nowrap;}
.ox_tbl_view .rs_n {background:#DDD; color:#000;}
.ox_tbl_view .rs_w {background:#F96;}
.ox_tbl_view .rs_u {background:#8B4;}
.ox_tbl_view .rs_r {background:#F47;}
.ox_tbl_view .rs_n+button, .ox_tbl_view .rs_w+button, .ox_tbl_view .rs_u+button, .ox_tbl_view .rs_a+button {display:none;}
.ox_confirm .ox_tbl_view p.tip {margin:0.5em 0 0.5em 1em;}

.ox_tbl_grid tr.over td, .ox_tbl_grid td.over {background:#FFB;}
.ox_tbl_grid .rs_w .btn_s, .ox_tbl_grid .rs_u .btn_s, .ox_tbl_grid .rs_a .btn_s, .ox_tbl_grid .rs_n .v, .ox_tbl_grid .rs_r .v {display:none;}
.ox_tbl_grid .rs_r .btn_s {background:#F47;}
.ox_tbl_grid .n_rs_n, .ox_tbl_grid .n_rs_w, .ox_tbl_grid .n_rs_u, .ox_tbl_grid .n_rs_r, .ox_tbl_grid .n_rs_a {height:1.5em; margin:0; padding:0 0.5em; border:0; background:none; font-style:italic; color:#000; line-height:1.5em; white-space:nowrap;}
.ox_tbl_grid .n_rs_w, .ox_tbl_grid .n_rs_u, .ox_tbl_grid .n_rs_r, .ox_tbl_grid .n_rs_a {border-radius:0.75em; background:#3BE; font-weight:600; font-style:normal; color:#FFF;}
.ox_tbl_grid .n_rs_w {background:#F96;}
.ox_tbl_grid .n_rs_u {background:#8B4;}
.ox_tbl_grid .n_rs_r {background:#F47;}
.ox_tbl_grid .pct {position:relative; overflow:hidden; width:100%; height:20px; border-radius:10px; background:#F3F3F3;}
.ox_tbl_grid .pct .bar {height:20px; background:#6DF;}
.ox_tbl_grid .pct .v {position:absolute; top:0; left:0; width:100%; line-height:20px;}
.ox_tbl_grid .over .pct {background:#888;}
.ox_tbl_grid .over .pct .bar {background:#0CF; font-weight:600; color:#FFF;}

.ox_crd {margin:0; padding:0; border-top:4px solid #DDD; list-style:none;}
.ox_crd li {margin:0; padding:max(10px,2%) max(10px,2.5%); border:4px solid #DDD; border-top:0;}
.ox_crd dl, .ox_crd dt, .ox_crd dd {margin:0; padding:0;}
.ox_crd dt {margin-bottom:10px; font-weight:600; font-size:1.25em; line-height:1.4;}
.ox_crd dt b {display:inline-block; min-width:1.5em; margin-right:5px; padding:0 5px; height:1.5em; border-radius:0.75em; background:#000; font-size:0.9em; color:#FFF; line-height:1.5em; text-align:center; vertical-align:top; box-sizing:border-box;}
.ox_crd dd {padding:2px 0;}
.ox_crd .lb {display:inline-block; min-width:4em; margin-right:15px; color:#888; vertical-align:top; white-space:nowrap;}
.ox_crd .st_wrap {display:inline-block; overflow:auto; max-width:100%; margin:-2px; vertical-align:top;}
.ox_crd table {border:0; border-spacing:2px; border-collapse:separate;}
.ox_crd caption {display:none;}
.ox_crd th, .ox_crd td {padding:4px 15px; border:0; background:#F3F3F3; text-align:left;}
.ox_crd th {padding-right:2em; background:#369; color:#FFF; font-weight:normal; white-space:nowrap;}
.ox_crd tr:hover td {background:#DEF;}

.ox_debug_download {padding:30px 0; background:#F6F6F6; text-align:center;}
.ox_debug_download label {font-weight:600; color:#888;}
.ox_debug_download select {margin:0 7px;}

.ox_file {}
.ox_file+.ox_list {margin-top:8px;}
.ox_date {margin:0 5px; font-size:0.875em; color:#888; letter-spacing:-0.5px;}

.btn_ok {display:inline-block; position:relative; overflow:hidden; width:22px; height:22px; margin:0; padding:0; border:0; border-radius:0; background:none; line-height:999px; vertical-align:middle; -webkit-appearance:none;}
.btn_ok:before {position:absolute; top:4px; left:7px; width:7px; height:7px; border:3px solid #3AC; border-top:0; border-left:0; content:'';}
.btn_ok:after {position:absolute; top:8px; left:4px; width:0; height:1px; border:4px solid transparent; border-right:5px solid #3AC; border-left:0; content:'';}

.ox_confirm .note {position:relative;}
.btn_add_user, .btn_del_user {position:relative; overflow:hidden; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:#8B4; color:transparent; -webkit-appearance:none;}
.btn_del_user {position:absolute; top:10px; right:15px; background:#F47; transform:rotate(45deg);}
.btn_add_user:before, .btn_add_user:after, .btn_del_user:before, .btn_del_user:after {position:absolute; top:0; right:0; bottom:0; left:0; width:18px; height:2px; margin:auto; background:#FFF; content:'';}
.btn_add_user:after, .btn_del_user:after {width:2px; height:18px;}

.btn_unfold, .btn_fold {display:inline-block; height:2em; padding:0 0.5em; border:0; background:none; font-size:0.875em; line-height:2em; vertical-align:middle; -webkit-appearance:none;}
.btn_unfold:before, .btn_fold:before {margin-right:0.5em; font-size:12px; content:'\25BC';}
.btn_fold:before {content:'\25B2';}

.a_pop {border-bottom:1px solid #000; color:#000;}
.a_pop:hover {border-bottom:none; color:#000; text-decoration:none;}

/* popup */
.ox_srch2 {margin-bottom:30px; padding:max(10px,2%) max(10px,2.5%); background:#DEF;}
.ox_srch2 .ox_select {width:100%;}

.ox_profile {overflow:auto;}
.ox_profile .paper {min-width:700px;}
.ox_profile .num {margin-bottom:10px; text-align:right;}
.ox_profile h2 {font-size:2.25em; text-align:center; text-indent:0.75em; letter-spacing:0.75em;}
.ox_profile h3 {padding:5px 0; border:2px solid #000; border-bottom:0; font-size:1.125em; text-align:center;}
.ox_profile h2+h3 {margin-top:20px;}
.ox_profile table+h3, .ox_profile .note+h3 {border-top-width:0;}
.ox_profile h3.break {border-top-width:2px;}
.ox_profile table {width:100%; border:2px solid #000;}
.ox_profile caption {display:none;}
.ox_profile th, .ox_profile td {padding:2px 5px; border:1px solid #000; line-height:1.625;}
.ox_profile th {padding:5px; background:#F6F6F6; line-height:1.25; text-align:center;}
.ox_profile td {height:26px;}
.ox_profile .note {min-height:26px; padding:2px 5px; border:2px solid #000; line-height:1.625;}

.ox_cert {overflow:auto;}
.ox_cert .paper {position:relative; width:860px; height:1200px; margin:0 auto; padding:60px 50px; border:10px solid transparent; border-image:linear-gradient(to right,#CAA74C,#F0E68C,#CAA74C) 1; background:#FFF; font-family:'Nanum Myeongjo'; font-size:18px; box-sizing:border-box; box-shadow:0 0 10px rgba(0,0,0,0.2); z-index:0;}
.ox_cert .num {margin-bottom:10px; text-align:right;}
.ox_cert h2 {margin-bottom:40px; font-size:50px; text-align:center;}
.ox_cert table {width:100%; margin-bottom:40px; border:0;}
.ox_cert caption {display:none;}
.ox_cert th, .ox_cert td {padding:10px; border:0; border-bottom:1px solid #DDD; text-align:left; vertical-align:top;}
.ox_cert th {width:25%; white-space:nowrap;}
.ox_cert .note {margin-bottom:40px; font-size:22px; text-indent:1em;}
.ox_cert .btm {position:absolute; right:50px; bottom:60px; left:50px;}
.ox_cert .date {margin-bottom:20px; font-size:20px; text-align:right;}
.ox_cert .org {margin-bottom:20px; font-weight:600; font-size:24px; text-align:right;}
.ox_cert .sign {padding-right:50px; text-align:right;}
.ox_cert .sign .name {display:inline-block; font-weight:600; font-size:22px; vertical-align:middle;}
.ox_cert .sign .in {display:inline-block; position:relative; width:120px; height:120px; margin:0 -60px; vertical-align:middle;}
.ox_cert .sign .in img {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; opacity:0.9;}
.ox_cert .mark {position:absolute; top:350px; right:0; bottom:0; left:0; max-width:60%; height:auto; margin:auto; z-index:-1;}

.onlyprint {display:none;}

.pop_content.full {max-width:none;}

.ox_tbl_xls_wrap {overflow:auto; overflow-y:hidden; overflow-x:auto; padding-bottom:3px;}
.ox_tbl_xls_wrap::-webkit-scrollbar {height:18px;}
.ox_tbl_xls_wrap::-webkit-scrollbar-track {background:#EEE;}
.ox_tbl_xls_wrap::-webkit-scrollbar-thumb {border:1px solid #888; border-radius:0; background:#FFF;}
.ox_tbl_xls_wrap::-webkit-scrollbar-thumb:hover {background:#888;}
.ox_tbl_xls_wrap::-webkit-scrollbar-button {display:none;}
.ox_tbl_xls_wrap .ox_tbl_xls th, .ox_tbl_xls_wrap .ox_tbl_xls td {padding:3px 7px; white-space:nowrap;}
.ox_tbl_xls_wrap .ox_tbl_xls td {line-height:1.3; text-align:center;}
.ox_tbl_xls_wrap .ox_tbl_xls tr:hover td, .ox_tbl_xls_wrap .ox_tbl_xls td.over {background-color:#FFB;}
.ox_tbl_xls_wrap .ox_tbl_xls .d_l {border-left-width:3px; border-left-style:double;}
.ox_tbl_xls_wrap .ox_tbl_xls .d_r {border-right-width:3px; border-right-style:double;}

@media print {
    .pop_content {width:860px;} /* 출력물 모양을 보고 800px 전후 적당한 값을 선택 */

    .ox_profile,
    .ox_cert {overflow:visible;}
    .ox_cert .paper {margin:0;}

    .onlyprint {display:block;}
    span.onlyprint {display:inline;}
}

/* responsive */
@media screen and (max-width:800px) {
    .ox_srch {margin-bottom:30px; padding:5% 6%;}
    .ox_srch select {max-width:100%;}
    .ox_srch .kwd_bar {display:flex; flex-wrap:wrap; justify-content:right;}
    .ox_srch .kwd_bar select {min-width:auto; max-width:40%; margin-right:0.5em;}
    .ox_srch .kwd {flex-grow:1; min-width:auto; max-width:none;}
    .ox_srch .kwd_bar .btn_s {width:100%; margin:0.2666em 0; font-size:0.9375rem;}
    .ox_srch .kwd_bar .cate {display:flex; gap:0.5em; width:100%;}
    .ox_srch .kwd_bar .cate select {flex-grow:1; width:40%; min-width:auto; max-width:none; margin-right:0;}
    .ox_srch .sl {display:block; width:100%; height:1px; margin:10px 0;}
    .ox_srch .opt {word-break:keep-all;}
    .ox_srch .opt .lb,
    .ox_srch .opt label:first-child,
    .ox_srch .opt select+label,
    .ox_srch .opt input[type="text"]+label,
    .ox_srch .opt input[type="number"]+label {display:block; margin:20px 0 0 0; text-align:left;}
}
@media screen and (max-width:600px) {
    .ox_crd dd {padding-bottom:10px;}
    .ox_crd dd:last-child {padding-bottom:2px;}
    .ox_crd .lb {display:block;}
}

/* google chart */
.ox_chart {text-align:center;}
.ox_chart .item {display:inline-block; position:relative; width:590px; height:400px; vertical-align:top;}
.ox_chart .nodata {position:absolute; top:0; right:100px; bottom:0; left:100px; height:198px; margin:auto; border:1px solid #DDD; border-right:0; border-left:0; color:#888; line-height:200px; text-align:center;}