@charset "utf-8";

/*
@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: url('/font/Pretendard-Black.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: url('../font/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: url('../font/Pretendard-Bold.woff') format('woff');
}



@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: url('../font/Pretendard-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: url('../font/Pretendard-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: url('/font/Pretendard-Light.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: url('/font/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: url('/font/Pretendard-Thin.woff') format('woff');
}
	
*/
@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: url('/font/Pretendard-Light.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: url('/font/Pretendard-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: url('/font/Pretendard-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: url('/font/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: url('/font/Pretendard-Bold.woff') format('woff');
}

html, body {display: block; height: 100%; width: 100%; line-height: 1; font-family: "Pretendard", 'Malgun Gothic', sans-serif; letter-spacing: -0.05em; -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, figure {margin:0; padding:0; font-size:17px; font-family: "Pretendard", 'Malgun Gothic', sans-serif; color: #454753; font-weight: 400; word-break: keep-all;}
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:'';}
/* a, input, select, button, img, label, span, strong {vertical-align: middle;} */

body.no_scroll { position: fixed;}

/* 스크롤바 커스텀 */
html * {scrollbar-width: thin;}
html { scrollbar-width: thin; scrollbar-arrow-color: #efefef; scrollbar-Track-Color: #efefef; scrollbar-base-color: #dfdfdf; scrollbar-Face-Color: #dfdfdf; scrollbar-3dLight-Color: #dfdfdf; scrollbar-DarkShadow-Color: #dfdfdf; scrollbar-Highlight-Color: #dfdfdf; scrollbar-Shadow-Color: #dfdfdf; }


/* Chrome, Safari용 스크롤 바 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-button:start:decrement,

/*::-webkit-scrollbar-button:end:increment {display: none; width: 12px;height: 12px; background: url() rgba(0,0,0,.05);}*/
::-webkit-scrollbar-button:end:increment {display: none; width: 12px;height: 12px; background: rgba(0,0,0,.05);}

::-webkit-scrollbar-track { background: rgb(255,255,255); background: #ededed; }
::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0,0,0,.2); }
:hover::-webkit-scrollbar-thumb {background: rgba(0,0,0,.3)}
​
::-webkit-input-placeholder {color:#b0b0b0}
:-moz-placeholder {color:#b0b0b0}
::-moz-placeholder {color:#b0b0b0}
:-ms-input-placeholder {color:#b0b0b0}

::-webkit-input-placeholder {color:#b0b0b0}
:-moz-placeholder {color:#b0b0b0}
::-moz-placeholder {color:#b0b0b0}
:-ms-input-placeholder {color:#b0b0b0}


/* input */
input[type=checkbox] {width:13px; height:13px}
input[type=radio] {width:13px; height:13px; margin-top:-1px}
label, button  {cursor: pointer; }

a {color:#3e94cb; text-decoration:none; transition: color 0.15s ease 0s;}
a:focus, a:hover, a:active {color:#0070b0; }

a.skip { position: fixed; left: -9999px; top: -9999px; display: block; line-height: 3em; background: #40b2cd; color: #000; 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;}
.table caption {}
.table thead th { background: rgba(0,0,0,0.1);padding:12px 10px; border:#ccc solid 1px ; border-top:none; line-height: 1.3em ;text-align: center;}
.table .th { background: rgba(0,0,0,0.1); }
.table tbody th { background: #f5f5f5}
.table tbody th,
.table tbody td,
.table tfoot th,
.table tfoot td { border:rgba(0,0,0,0.075) solid 1px ; padding:10px; background: #fff; line-height: 1.3em; border-top:none;}
.table tfoot th { background: #f5f5f5}
.table tbody th,
.table tbody th label { background:#fafafa;}
/* .table tbody td[rowspan] {border-left:rgba(0,0,0,0.075) solid 1px} */
.table tr > :first-child { border-left: 0 none;}
.table tr > :last-child { border-right: 0 none;}

/* 왼쪽 정렬인 테이블 */
.table.left tbody th,
.table.left tbody td,
.table.left tfoot th,
.table.left tfoot td,
.table td.title,
.table td.left { text-align: left; }

.table.left_all tbody th,
.table.left_all tbody td,
.table.left_all tfoot th,
.table.left_all tfoot td,
.table td.title { text-align: left; }

/* 오른쪽 정렬인 테이블 */
.table.right tbody th,
.table.right tbody td,
.table.right tfoot th,
.table.right tfoot td { text-align: right; }

.table.right_all tbody th,
.table.right_all tbody td,
.table.right_all tfoot th,
.table.right_all tfoot td { text-align: right; }

/* 가운데 정렬인 테이블 */
.table.center tbody th,
.table.center tbody td,
.table.center tfoot th,
.table.center tfoot td { text-align: center;}
.table.center td.title,
.table.center td.left {text-align: left;}


.left{ text-align: left }
.left{ text-align: right }
.left{ text-align: center }

.table th.check,
.table tbody td.check { width: 34px; padding-left:0; padding-right:0}

.table.hover tbody tr:hover th,
.table.hover tbody tr:hover td { background-color: rgba(0,0,0,0.02);}

.table.hover tbody tr.noti:hover th,
.table.hover tbody tr.noti:hover td { background-color: rgba(15, 169, 255, .075);}

.pageNav { text-align: center; position: relative; min-height: 31px; padding: 20px 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: 0; display: inline-block; }
.pageNav .paging a, .pageNav .paging strong { display: inline-block; min-width: 16px; height: 25px; padding: 5px 4px 0 4px; opacity: 0.7; color: #000 }
.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; }
.total_cnt {position: absolute;left:0; color: #777;top:10px;}

/* btn */
.btn {background: #fff; color: #3e3c4f;  border:1px solid #7d8696; padding: 6px 10px 7px 10px; border-radius: 2px;transition: background-color 0.1s ease 0s;font-size: 14px; font-weight: 700; line-height: 1;}
a.btn { display: inline-block; padding: 8px 10px}
input.btn {padding: 8px 10px 9px 10px; }
.btn:hover, .btn:focus { color: #333; background-color: #ededed }
.pri {background:#1d86d7; color: #fff; border-color:#0674ca}
.pri:hover, .pri:focus {background-color:#0674ca;border-color:#0674ca; color: #fff}

/*
.wrn {background:#ed8f14}
.wrn:hover, .wrn:focus {background-color:#dc8b22}
*/
.dis { opacity: 0.5; cursor: default; }

table + .btn_wrap {padding-top: 16px;}

.btn_wrap { padding:24px 0; clear: both; }
.btn_wrap.right{ text-align: right;}
.btn_wrap.center{ text-align: center;}


.btn_wrap .btn { padding:10px 30px; display: inline-block; }
.btn_wrapR {text-align: right; padding:25px 0;}


.btn_wrapC {text-align: center; padding:20px 0 0 0; height: 40px; clear: both; }

label + input   { margin-left: 12px}
/* label + input { margin-left: 15px} */



label.hiddenLabel {font-size: 0 !important}
input[type="checkbox"] + label.hiddenLabel:before { margin: 0 0 0 -20px}

/* select */



/* input */
input[type="button"] { cursor: pointer; }
input[type="text"], input[type="password"], input[type="date"], 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"], input[type="date"], select, .input { height: 32px; line-height: 1em; }
textarea {overflow:auto; padding:10px; line-height: 1.3em;font-family:'Malgun Gothic',sans-serif; font-size: 13px}
.js-elasticArea {transition: all 0.3s ease 0.0s}

select {padding: 0 4px;  /* background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12' fill='rgba(173,184,194,1)'%3E%3Cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'%3E%3C/path%3E%3C/svg%3E") 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% }
.input17, .width17 { width: 17% }
.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% }

.right {text-align: right}
.center {text-align: center}
.left {text-align: left}

.fr{float: right;}
.fl{float: left;}

/* 로딩 이미지 */
.loadingWrap { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 1000; text-align: center;}
.loadingWrap p { margin-top: 15px; font-weight: 300; font-size: 38px; opacity: .8; color: #fff; letter-spacing: 0;}
.loadingWrap #loading { margin-top: 800px;}
#loading { display: inline-block; width: 70px; height: 70px; border: 8px solid rgba(102, 169, 232, 0.534); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite;}
#loading p { font-size: 24px; font-weight: 700;}

@keyframes spin {
    to { -webkit-transform: rotate(360deg);}
}
@-webkit-keyframes spin {
    to {-webkit-transform: rotate(360deg);}
}