@charset "utf-8";

@font-face {
    font-family: 'Noto';
    font-style: normal;
    font-weight: 300;
    src: local('Noto Sans Light'), local('NotoSans-Light'), url('../font/notokr-light.eot');
    src: url('../font/notokr-light.eot?#iefix') format('embedded-opentype'),
         url('../font/NotoSansKR-Light.woff2') format('woff2'),
         url('../font/NotoSansKR-Light.woff') format('woff'),
         url('../font/NotoSansKR-Light.otf') format('otf');
}
@font-face {
    font-family: 'Noto';
    font-style: normal;
    font-weight: 500;
    src: local('Noto Sans Regular'), local('NotoSans-Regular'), url('../font/notokr-regular.eot');
    src: url('../font/notokr-regular.eot?#iefix') format('embedded-opentype'),
         url('../font/NotoSansKR-Regular.woff2') format('woff2'),
         url('../font/NotoSansKR-Regular.woff') format('woff'),
         url('../font/NotoSansKR-Regular.otf') format('otf');
}
@font-face {
    font-family: 'Noto';
    font-style: normal;
    font-weight: 600;
    src: local('Noto Sans Medium'), local('NotoSans-Medium'), url('../font/notokr-medium.eot');
    src: url('../font/notokr-medium.eot?#iefix') format('embedded-opentype'),
         url('../font/NotoSansKR-Medium.woff2') format('woff2'),
         url('../font/NotoSansKR-Medium.woff') format('woff'),
         url('../font/NotoSansKR-Medium.otf') format('otf');
}
@font-face {
    font-family: 'Noto';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('../font/notokr-bold.eot');
    src: url('../font/notokr-bold.eot?#iefix') format('embedded-opentype'),
         url('../font/NotoSansKR-Bold.woff2') format('woff2'),
         url('../font/NotoSansKR-Bold.woff') format('woff'),
         url('../font/NotoSansKR-Bold.otf') format('otf');
}

html, body {display: block; height: 100%; width: 100%; line-height: 1.2em; font-family:'Noto','Malgun Gothic', sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing:antialiased;}
body, h1, h2, h3, h4, h5, h6, div, p, blockquote, pre, address, ul, ol, li, dl, dt, dd, table, caption, th, td, form, fieldset, legend, hr, label, button {margin:0; padding:0; font-size:16px; font-family:'Noto','Malgun Gothic', sans-serif; color: #454753; word-break:keep-all; font-weight: 500}
ul, ol, dl {list-style:none;}
table {width:100%; margin:0; padding:0; border-spacing:0; border:0; border-collapse:collapse; }
img, button, fieldset, abbr, acronym {border:0}
address, caption, cite, code, dfn, em, var {}
q:before, q:after {content:'';}
input, select, button {-webkit-appearance: none;-webkit-border-radius: 0; line-height: 1.2em; font-size: 16px;font-family:'Noto','Malgun Gothic',sans-serif;}
a, input, select, button, img, label, span, strong {vertical-align: baseline}

body.no_scroll { /*position: fixed;*/ overflow:hidden; }


::-webkit-input-placeholder {color:#b0b0b0}
:-moz-placeholder {color:#b0b0b0}
::-moz-placeholder {color:#b0b0b0}
:-ms-input-placeholder {color:#b0b0b0}


input[type=checkbox] {width:13px; height:13px}
input[type=radio] {width:13px; height:13px; margin-top:-1px}
label, button  {cursor: pointer; }

a {color:#257393; text-decoration:none;}
a:focus, a:hover, a:active {color:#00a4cb}

a.skip { position: fixed; left: -9999px; top: -9999px; display: block; line-height: 3em; background: #40b2cd; color: #fff; text-align: center;}
a.skip:hover,
a.skip:focus { position: static; left: 0; top: 0; }

.container { margin: 0 auto; position: relative; }
.container:after { display: block; content: ""; clear: both; }

/* commom */
.hidden,
.none { position: fixed; left: -9999px; }

.floatL { float: left }
.floatR { float: right }

/* table*/
div.table,
table.table {border-top: #515151 solid 1px;  position: relative; clear: both;}
td,th { font-weight: 500}
.table caption {}
.table thead th { background: #f6f6f6;padding:12px 6px; border:#ccc solid 1px ; border-top:none; line-height: 1.3em }
.table tbody th,
.table tbody td { border:#e1e1e0 solid 1px ; padding:0 8px 0 12px; background: #fff; line-height: 1.3em; border-top:none; height: 42px;}
.table tbody .th,
.table tbody th { background: #f9f9f9;}
.table tbody th,
.table tbody th label { color: #777}


/* 왼쪽 정렬인 테이블 */
.table10 tbody th,
.table10 tbody td,
.table td.title { text-align: left; }

/* 가운데 정렬인 테이블 */
.table20 tbody th,
.table20 tbody td { text-align: center;}


.textL{ text-align: left !important; }
.textR{ text-align: right !important; }
.textC{ text-align: center !important; }

.table th.check,
.table tbody td.check { width: 34px; padding-left:0; padding-right:0}

.pageNav { text-align: center; position: relative; min-height: 31px; padding: 15px 0; }
.pageNav .pageTotal { color: #aaa; line-height: 2em; position: absolute; left: 0; top: 0; }
.pageNav:after { display: block; content: ""; clear: both; }
.pageNav .paging { font-size: 17px; display: inline-block; }
.pageNav .paging a, .pageNav .paging strong { display: inline-block; min-width: 24px; height: 25px; padding: 5px 0 0 0; vertical-align: middle; opacity: 0.6; }
.pageNav .paging a.pageFirst, .pageNav .paging a.pageBefore, .pageNav .paging a.pageNext, .pageNav .paging a.pageLast, .pageNav .paging strong.pageFirst, .pageNav .paging strong.pageBefore, .pageNav .paging strong.pageNext, .pageNav .paging strong.pageLast { font-size: 0; background: url(../images/paging.png) no-repeat 3px center; }
.pageNav .paging a.pageBefore, .pageNav .paging strong.pageBefore { background-position: -39px center; }
.pageNav .paging a.pageNext, .pageNav .paging strong.pageNext { background-position: -74px center; }
.pageNav .paging a.pageLast, .pageNav .paging strong.pageLast { background-position: -107px center; }
.pageNav .paging a:hover, .pageNav .paging a:focus, .pageNav .paging a.on, .pageNav .paging strong { text-decoration: underline; opacity: 1; }

/* btn */

.btn {background: #777; color: #fff; border:none;  padding: 6px 10px; font-size: 16px; font-weight: 300;border-radius: 2px}
.btn:hover, .btn:focus {color: #fff; background-color: #666 }
.pri {background:#2989c6}
.pri:hover, .pri:focus {background-color:#2382be;}
.wrn {background:#ed8f14}
.wrn:hover, .wrn:focus {background-color:#dc8b22}
.dis { opacity: 0.5; cursor: default; }
.btn.del{background:#b52613;}

.btnArea { text-align: right; padding:10px 0 20px 0; clear: both; }
.btnArea .btn { padding:7px 18px; border-radius: 2px; display: inline-block; }


/* jsDiv */
article.jsDiv{ display: none; position: fixed; left: 0;top: 0; width: 100%; height: 100%; z-index: 1000; background: rgba(0, 0, 0, 0.3);}
article.jsDiv.on { display: block; }
.jsDivContent { width: 80%; max-height: 85%; min-height: 50%; padding: 10px; margin: 10% auto; background: #f9f9f9; border-radius: 2px; position: relative; overflow: hidden; overflow-y: auto; box-shadow: 0 3px 5px rgba(0,0,0,.2);}
.jsDivContent h3{ font-size: 16px;padding: 3px 0 10px 0; }
.jsDivContent input.btnClose, a.btnClose {right: 10px;top: 8px;}
.jsDivContent.jsDivS { min-width: 500px; width: 50%;}
.jsDivContent .content { border:solid 1px #ddd; padding: 10px;}

a.jsDivClose{ background: url(../images/btnPopupClose.gif) no-repeat center center; display: block; width: 21px;height:21px; padding: 0; position: absolute; right:10px;top: 10px; border: #bbb 1px solid; border-radius:2px; text-indent: -9999px;overflow: hidden; opacity: 0.8; font-size: 0;}
a.jsDivClose:hover,
a.jsDivClose:focus { opacity: 1; background-color: #ededed; }



/* checkbox / radio */

input[type="checkbox"],
input[type="radio"] {  outline: 0 none }
input[type="checkbox"] + label::before,
input[type="checkbox"]:checked + label::before { cursor: pointer; content:""; display:inline-block; width: 18px;height: 18px; background: url("../images/commonInput.png") no-repeat 0 -30px; margin: 0 6px 3px -20px; vertical-align: middle }

input[type="checkbox"]:hover + label::before,
input[type="checkbox"]:focus + label::before {background-position: 0 -60px}
input[type="checkbox"]:hover + label,
input[type="checkbox"]:focus + label { color: #2d71c4 }

input[type="checkbox"]:checked + label::before { background: url("../images/commonInput.png") no-repeat 0 0;  }
input[type="checkbox"]:checked + label { color: #2d71c4 }


input[type="radio"] + label::before,
input[type="radio"]:checked + label::before { cursor: pointer; content:""; display:inline-block; width: 19px;height: 19px;border-radius:50%; background: url("../images/commonInput.png") no-repeat -30px -30px; margin: 0 6px 3px -20px; vertical-align:middle  }

input[type="radio"]:hover + label::before,
input[type="radio"]:focus + label::before {background-position: -30px -60px;}
input[type="radio"]:hover + label,
input[type="radio"]:focus + label { color: #2d71c4 }


input[type="radio"]:checked + label::before { background: url("../images/commonInput.png") no-repeat -30px 0;  }
input[type="radio"]:checked + label { color: #2d71c4 }

label + input   { margin-left: 12px}
input + label   { margin-right: 12px}
/* label + input { margin-left: 15px} */



label.hiddenLabel {font-size: 0; margin: 0 0 0 0; }
input[type="checkbox"] + label.hiddenLabel:before { margin: 0 0 0 -20px}

/* select */



/* input */
.datepicker, .birthDatepicker {width: 130px;}
.ui-datepicker-trigger { margin: 1px 0 0 -30px}

input[type="button"] { cursor: pointer; }

input[type="text"], input[type="password"], select, .input, textarea
{ border: solid 1px #bcbcbc; border-radius: 2px; background: #fff; padding: 0 8px; margin: 2px; box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
input[type="text"], input[type="password"], select, .input { height: 30px; line-height: 1em}
textarea {overflow:auto; padding:10px; line-height: 1.3em;font-family:'Noto','Malgun Gothic',sans-serif; font-size: 16px}
.js-elasticArea {transition: all 0.3s ease 0.0s}

select {padding: 0 24px 0 5px;  background:#fff url("../images/selecetArrow.png") no-repeat right -1px }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	select {padding: 0  0 0 5px;}
}
select:hover,
select:focus { background-position: right -33px}
input[type="text"]:hover, input[type="password"]:hover, select:hover, .input:hover,
input[type="text"]:focus, input[type="password"]:focus, select:focus, .input:focus { border-color:#40b2cd; }

.input02, .width02 { width: 2% }
.input03, .width03 { width: 3% }
.input04, .width04 { width: 4% }
.input05, .width05 { width: 5% }
.input06, .width06 { width: 6% }
.input07, .width07 { width: 7% }
.input08, .width08 { width: 8% }
.input09, .width09 { width: 9% }
.input10, .width10 { width: 10% }
.input15, .width15 { width: 15% }
.input20, .width20 { width: 20% }
.input25, .width25 { width: 25% }
.input30, .width30 { width: 30% }
.input35, .width35 { width: 35% }
.input40, .width40 { width: 40% }
.input45, .width45 { width: 45% }
.input50, .width50 { width: 50% }
.input55, .width55 { width: 55% }
.input60, .width60 { width: 60% }
.input65, .width65 { width: 65% }
.input70, .width70 { width: 70% }
.input75, .width75 { width: 75% }
.input80, .width80 { width: 80% }
.input85, .width85 { width: 85% }
.input86, .width86 { width: 86% }
.input87, .width87 { width: 87% }
.input88, .width88 { width: 88% }
.input89, .width89 { width: 89% }
.input90, .width90 { width: 90% }
.input92, .width92 { width: 92% }
.input94, .width94 { width: 94% }
.input95, .width95 { width: 95% }
.input97, .width97 { width: 97% }
.input98, .width98 { width: 98% }
.input99, .width99 { width: 99% }
.input100, .width100 { width: 100% }

.fr{float: right;}
.fl{float: left;}


/* 서명 이미지 */
.signImg {
	width: auto; height: auto;
	max-width: 200px;
	max-height: 100px;
}

/* 첨부파일용 */
.fileLi li {
	margin: 10px 10px 10px 0px;
	text-align: left;
}