@charset "utf-8";

/* noto-sans-kr-regular - korean */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/NotoSans-Light.woff2') format('woff2');
}

/* noto-sans-kr-regular - korean */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-kr-v36-korean-regular.woff2') format('woff2');
}

/* noto-sans-kr-500 - korean */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-sans-kr-v36-korean-500.woff2') format('woff2');
}

/* noto-sans-kr-700 - korean */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-kr-v36-korean-700.woff2') format('woff2');
}


/* google icon */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

*,
*:before,
*:after {margin:0; padding:0; box-sizing:border-box;}
:root {
	--gl-wht:#ffffff;
	--gl-navy:#0055a2; 
	--gl-dkgry:#333333;
	--gl-dkgry02:#888888;
	--gl-grn:#8dc21f;
	--gl-dgrn:#258d4c;
	--t-red:#e60012;
	--t-gry:#555555;
	--t-gry02:#cccccc;
	--bg-tbl01:#f6f6f6;
	--bd-tbl01:#dddddd;
	--btn-on:#4361ee;
	--btn-gry:#aaaaaa;
	--pop-wd:100px;

}

html {
  -moz-text-size-adjust:none;
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
}


html, body {height: 100%; width:100%;}
body {background-color:var(--gl-wht); font-family:'Noto Sans KR', sans-serif; line-height:1.3; color:var(--t-gry); font-size:16px}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section, fieldset {display:block;}
body,h1,h2,h3,h4,h5,h6,p,figure,dl,dd {margin-block-end:0;}
caption,legend {line-height:0; font-size:1px; overflow:hidden;}
h1,h2,h3,h4,h5,h6, button,input,label {line-height:1;}

ul,ol,li {list-style-type:none;}
a {color:inherit; text-decoration:none; }
a:hover, a:focus {text-decoration:underline; color:var(--gl-navy)}
img {display:inlin-block; max-width:100%; border:0 none; vertical-align:top;}
button {border:0 none; background-color:transparent; font:inherit; cursor:pointer;}
i, em, address {font-style:normal}
input, button, textarea, select {font:inherit;}
mark {background-color:transparent; font:inherit;}
fieldset {border:0; background-color:transparent; font:inherit;}
input:disabled {background-color:var(--bg-tbl01);}
input:read-only {color:var(--gl-dkgry02)}
input::placeholder,
textarea::placeholder{color:var(--t-gry02); letter-spacing:-0.5px; font-size:14px}
textarea {width:100%; min-height:50px; letter-spacing:-0.5px; border:1px solid var(--bd-tbl01); border-radius:3px; padding:10px}
select {letter-spacing:-0.5px; cursor:pointer; border:1px solid var(--bd-tbl01); border-radius:3px; background-color:var(--gl-wht); padding:2px 5px; font-size:16px; min-width:50px; min-height:32px; color:#666666; font-weight:400}
input[type="text"],
input[type="password"],
input[type="file"] {border:1px solid var(--bd-tbl01); border-radius:3px; padding:5px; height:32px; font-size:14px}
input[type="checkbox"] + label,
input[type="radio"] + label {margin-left:5px; font-size:14px; vertical-align: middle;}
label + input[type="checkbox"],
label + input[type="radio"] {display:inline-block; margin:0 0 0 10px; vertical-align:middle;}
table {width:100%; border-spacing:0; border-collapse:collapse; table-layout:fixed;}

input[type="checkbox"],
input[type="radio"] {appearance:none; width:18px; height:18px; background-color:var(--gl-wht); border:1px solid var(--bd-tbl01); position:relative; vertical-align:middle}
input[type="checkbox"] {border-radius:3px}
input[type="radio"]:checked {border-color:var(--btn-on); }
input[type="radio"]:checked:after {display:block; content:""; position:absolute; left:calc(50% - 4px); top:calc(50% - 4px); width:8px; height:8px; background-color:var(--btn-on); border-radius:100%;}
input[type="checkbox"]:checked:after {display:block; content:""; position:absolute; left:-1px; top:0; width:18px; height:18px; background:url(../img/ico_check.png) 50% -24px no-repeat;}
input[type="checkbox"]:disabled:after {display:block; content:""; position:absolute; left:0px; top:0; width:18px; height:18px; background:url(../img/ico_check.png) 50% 0 no-repeat;}
input[type="radio"] {border-radius:100%;}

.attch-box {display:flex; justify-content:space-between; align-items:center; }
.attch-box:not(:last-of-type) {margin-bottom:10px}
.att_file {position:relative}
.att_file input[type="file"] {opacity:0; width:500px; position:relative; z-index:10; cursor:pointer}
.att_file .quack {position:absolute; top:0; left:0; width:500px; height:32px; display:flex; justify-content:space-between; align-items:center; z-index:1; font-size:14px }
.att_file.short input[type="file"],
.att_file.short .quack {min-width:100px; width:100%; max-width:300px}
.att_file .quack input {border:0; border:1px solid var(--bd-tbl01); border-radius:3px; padding:5px; width:calc(100% - 90px); min-height:100%}
.att_file .quack em {display:block; height:100%; line-height:28px; min-width:80px; text-align:center; font-size:16px; white-space:nowrap}

.att_file.short .quack input {width:calc(100% - 40px)}
.att_file.short .quack em {min-width:auto; width:30px; height:30px; text-align:center; background:var(--gl-navy) url(../img/ico_clip.svg) 50% 50% no-repeat; border-radius:3px;}

.sel_cont {width:200px; min-height:30px; position:relative}
.select_wrapper {width:200px; position:absolute; left:0; top: 0px;}
.select, .options li {display:flex; cursor:pointer; align-items:center; font-size:14px; }
.select{height:32px; padding:0 5px 0 10px; border:1px solid #ddd; border-radius:3px; justify-content:space-between;}
.opt-box{display:none; background:#ffffff; margin-top:5px; padding:0 0 15px; border-radius:10px;}
.active .opt-box {display:block;}
.opt-box .search-box{position:relative;}
.opt-box .search-box .material-icons{left:5px; top:2px; line-height:30px; position:absolute;}
.opt-box .search-box input {height:30px; width:100%; outline:none; padding:0 5px 0 30px; border:1px solid #ddd; border-radius:5px;}
.opt-box .options {margin-top:5px; max-height:200px; overflow-y:auto; border:1px solid #ddd; border-radius:5px;}
.options::-webkit-scrollbar-track{backgound:#f1f1f1; border-radius:25px;}
.options::-webkit-scrollbar-thumb{backgound:#ccc; border-radius:25px;}
.options li {height:35px; padding:0 13px; border-radius:0px;}
.options li:hover{background:#f2f2f2;}

h2.tit {background:url(../img/ico_tit.png) 0 0 no-repeat; padding-left:20px; font-size:20px; margin-bottom:20px}
h2.tit span {font-size:16px; color:var(--gl-dkgry02); font-weight:400}
h3.tit {font-size:20px; color:var(--t-gry); font-weight:400}
h3.tit:before {display:inline-block; content:""; background:#ddd; width:6px; height:6px; vertical-align:middle; margin-right:7px}
h3.tit + .noti_rq {margin-top:-30px; margin-bottom:10px}
h2.tit .t_opt {vertical-align:top; margin-top:-3px; margin-left:10px}

.htxt_nv {color:var(--gl-navy)}
.htxt_rd {color:var(--t-red)}

a.att_link {color:var(--gl-navy); text-decoration: underline;}
.ir, .hide {position:absolute; overflow:hidden; width:1px; height:1px; margin:-1px; clip:rect(0, 0, 0, 0); font-size:1px;}
:target {scroll-margin-block:5px;}
.al_l {text-align: left !important}
.al_c {text-align: center !important}
.al_r {text-align: right !important}
.btm_c {margin-top:30px; text-align:center}
.btm_c button {margin-left:5px; margin-right:5px}
.btm_r {margin-top:10px;display:flex; justify-content:end; gap:0 10px}
.btm_c + h3.tit,
.btm_r + h3.tit {margin-top:30px;}
.noti_rq {text-align:right; margin-bottom:5px; font-size:14px}
.noti_rq mark {background:transparent; color:var(--t-red); font-weight:700; vertical-align:middle;}
.noti_gn {color:var(--t-red); font-size:14px; font-weight:400}
.rq {display:inline-block; color:var(--t-red); font-size:14px; margin:0px 3px -3px 0; vertical-align:middle; font-size:18px}

.inp_w_80 {width:80px !important}
.inp_w_100 {width:100px}
.inp_w_150 {width:150px}
.inp_w_240 {width:240px}
.inp_w_300 {width:300px}
.inp_w_450 {width:450px}

.inp_w_20 {width:calc(20% - 20px)}
.inp_w_25 {width:25%}
.inp_w_30 {width:30%}
.inp_w_50 {width:50%}
.inp_w_70 {width:70%}
.inp_w_full {width:100%}

.mgl10 {margin-left:10px}
.mgb10 {margin-bottom:10px}
.mgb15 {margin-bottom:15px}
.mgb20 {margin-bottom:20px}
.mgb30 {margin-bottom:30px}
.mgb40 {margin-bottom:40px}

.pdb10 {padding-bottom:10px}
.pdb20 {padding-bottom:20px}
.pdb30 {padding-bottom:30px}
.pdb40 {padding-bottom:40px}

.btn_s {min-width:80px; height:32px; border-radius:3px; padding:0 15px; font-weight:500; white-space:nowrap}
.btn_xs {min-width:30px; height:30px; border-radius:3px; padding:0 10px; font-weight:500;}
.btn_w {font-size:20px; font-weight:700; height:50px; line-height:45px; border-radius:5px; padding-left:20px; padding-right:20px}
[class*="btn_"].navy {background:var(--gl-navy); border:1px solid var(--gl-navy); color:var(--gl-wht); }
[class*="btn_"].wht {background:var(--gl-wht); border:1px solid var(--bd-tbl01); color:var(--gl-navy);}
[class*="btn_"].gry {background:var(--btn-gry); border:0; color:var(--gl-wht);}
[class*="btn_"].dkgry {background:var(--t-gry); border:1px solid var(--t-gry); color:var(--gl-wht);}
[class*="btn_"].grn {background:var(--gl-grn); border:1px solid var(gl-grn); color:var(--gl-wht);}
[class*="btn_"].dgrn {background:var(--gl-dgrn); border:1px solid var(--gl-dgrn); color:var(--gl-wht);}
[class*="btn_"].wb {background:var(--gl-wht); border:2px solid var(--gl-navy); color:var(--gl-navy);}

[class*="btn_"].down {border:3px solid var(--gl-navy); background-color:#fff; color:var(--gl-navy); font-weight:700} 
[class*="btn_"].down span:after {display:inline-block; content:""; width:23px; height:23px; background:url(../img/ico_down.png) 0 0 no-repeat; vertical-align:middle; margin-left:7px}
[class*="btn_"].stt1 {background-color:var(--gl-grn); width:80px; color:var(--gl-wht)}
[class*="btn_"].stt2 {background-color:#d8182a; width:80px; color:var(--gl-wht)}
[class*="btn_"].tmsg {background:#0055a2; color:var(--gl-wht); }
[class*="btn_"].tmsg span:after {display:inline-block; content:""; width:23px; height:23px; background:url(../img/ico_msg.png) 0 0 no-repeat; vertical-align:middle; margin-left:7px}
[class*="btn_"].slink {width:200px; border:3px solid var(--gl-navy); background-color:#cee8ff; color:var(--gl-navy); font-weight:700}
[class*="btn_"].xsl {background-color:#258d4c;  color:var(--gl-wht); width:240px}
[class*="btn_"].xsl span:before {display:inline-block; content:""; width:23px; height:23px; background:url(../img/ico_xsl.png) 0 0 no-repeat; vertical-align:middle; margin-right:3px}
.btn_text {font-weight:700;}

.btn_ico {width:24px; height:24px; background-repeat:no-repeat; margin:0 2px}
.btn_ico.del {background-image:url(../img/ico_attch.png); background-position:0 0}
.btn_ico.add {background-image:url(../img/ico_attch.png); background-position:-32px 0}

.tbl {border-top:1px solid var(--bd-tbl01); color:var(--t-gry)}
.tbl th {background-color:var(--bg-tbl01); font-weight:600; color:var(--t-gry);}
.tbl.row th,
.tbl.row td {border-bottom:1px solid var(--bd-tbl01); padding:12px 10px;}
.tbl.row td .int_grp {display:flex; justify-content:flex-start; align-items:center; gap:0 0; position:relative}
.tbl.row td .int_grp > input {width:100%; flex:0 1 120px; }
.tbl.row td .int_grp > span {width:10px; flex:0 0 10px; text-align:center }
.tbl.col th,
.tbl.col td {border-left:1px solid var(--bd-tbl01);  border-bottom:1px solid var(--bd-tbl01); padding:10px 10px; text-align:center}
.tbl.col th:first-child,
.tbl.col td:first-child {border-left:0}
.tbl.col td.tit {text-align:left; padding-left:10px; font-weight:normal}
.tbl.col td.tit a {display:inline-block; max-width:98%; text-overflow:ellipsis; overflow: hidden; white-space:nowrap;}
.tbl.col tr:hover td {background-color:#f8fcff}
.tbl + h3.tit {margin-top:50px}
.tbl .ing,
.tbl .ing a {color:var(--gl-grn); font-weight:700}
.tbl .con_h {background-color:#efefef; font-weight:700}
.tbl .con_b {padding:15px 20px !important; text-align:left !important}
.tbl td:first-child[rowspan] {border-right:1px solid #ddd}
.tbl tr.em th {background-color:#cccccc}
.tbl tr.em td {background-color:#efefef}
.tbl .shortn {display:inline-block; max-width:80%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tbl p.nodata {height:200px; background:url(../img/bico_data.png) 50% 40px no-repeat; padding-top:130px;}

.table.table-bordered {border:1px solid #ddd}
.table.table-bordered th,
.table.table-bordered td {border:1px solid #ddd; padding:10px}
.table.table-bordered th {background-color:#f6f6f6}

.noti_tbl {background:url(../img/ico_star.png) 0 7px no-repeat; padding-left:12px; margin-bottom:10px}
.ico_attc {display:inline-block; width:23px; height:23px; background:url(../img/ico_file.png) 50% 0 no-repeat}

.bullet.inln {display:flex; justify-content:flex-start; gap:0 30px;}
.bullet span {display:flex; justify-content:flex-start; align-items:center}
.bullet span:before {display:inline-block; content:""; width:4px; height:4px; background-color:var(--bd-tbl01); margin-right:7px; vertical-align:middle}

.pagination {margin: 30px 0; text-align: center}
.pagination > ul {display: inline-block}
.pagination > ul > li {float:left; width:25px; height:25px; line-height:21px; text-align:center; border:1px solid var(--t-gry02); background-color:#eaeaea; margin-right:8px; font-size:14px}
.pagination > ul > li > a {display:block; width:100%; height:100%; color:#aaaaaa;}
.pagination > ul > li.on {background-color:var(--gl-navy);}
.pagination > ul > li.on a {color: #fff}
.pagination > ul > li:last-child {margin-right: 0}
.pagination > ul > li.first {background:url(../img/ico_page.png) 5px 5px no-repeat;}
.pagination > ul > li.prev {background:url(../img/ico_page.png) -31px 5px no-repeat;}
.pagination > ul > li.last {background:url(../img/ico_page.png) -26px -13px no-repeat;}
.pagination > ul > li.next {background:url(../img/ico_page.png) 9px -13px no-repeat;}
