@charset "utf-8";
/* CSS Document */

/* 레이어팝업 */
.pop-wrap {position: fixed; width: 100%; height: 100%;  z-index: 9999;}
.pop-wrap.bg-block { background: rgba(0,0,0,0.4); }
.pop-wrap .pop-area { position: absolute; top:50%; left: 50%; width: 500px; height: auto; max-height: 95vh; background: #fff; border-radius: 10px; box-shadow: 9px 11px 20px 0px rgba(51, 51, 51, 0.2);
	-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.pop-wrap .pop-area .head { position: relative; padding: 15px; border-bottom: 1px solid #dee3eb; }
.pop-wrap .pop-area .head p { font-size:1.4rem; font-weight: 600; }
.pop-wrap .pop-area .head img { width: 12px; position: absolute; top:20px; right: 20px; cursor: pointer; }
.pop-wrap .pop-area .head img:hover { opacity: .7; }
.pop-wrap .pop-area .cont {padding: 15px; text-align: center; border-bottom: 1px solid #dee3eb; overflow-y: auto; max-height: calc(100vh - 190px);}
.pop-wrap .pop-area .cont h3 {font-size: 1.4rem; margin-bottom: 15px;}
.pop-wrap .pop-area .cont p.account { padding:15px 15px 6px; background: #f4f4f4; }
.pop-wrap .pop-area .cont p.account img {width: 90px; margin-right: 10px; position: relative; top:2px}
.pop-wrap .pop-area .cont p.account span { font-size: 1.8rem; font-weight: 500;}
.pop-wrap .pop-area .cont p.account-holder {padding: 0 15px 15px; background: #f4f4f4; font-size: 1.3rem; }
.pop-wrap .pop-area .cont table.vertic-table { margin-top: 0; }
.pop-wrap .pop-area .cont table.vertic-table tbody tr th { width:auto; max-width: 150px; font-size: 1.2rem; }
.pop-wrap .pop-area .cont table.vertic-table .selectbox { margin: 1px; }
.pop-wrap .pop-area .cont table.vertic-table input[type="text"].text-input { margin: 1px; }
.pop-wrap .pop-area .cont table.normal-table { margin-top: 10px; }
.pop-wrap .pop-area .cont table.normal-table thead tr th { font-size: 1.2rem; position: sticky; top: 0; height: 30px; }
.pop-wrap .pop-area .cont table.normal-table tbody tr td { font-size: 1.2rem; height: 30px;}
.pop-wrap .pop-area .cont table.select-table tbody tr:not(.select):hover { background: #f2f2f2; cursor: pointer;}
.pop-wrap .pop-area .cont table.select-table tbody tr.select { background: #c9deff; }
.pop-wrap .pop-area .cont .search-wrap { text-align: left; }
.pop-wrap .pop-area .cont .result-wrap .result-total { text-align: left; }

.pop-wrap.md-width .pop-area { width: 800px; }
.pop-wrap.lg-width .pop-area { width: 1100px; }

/* 로딩레이어 */
.loading-pop-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; min-width: 960px; background-color: rgba(255, 255, 255, 0.6);}
.loading-pop-wrap .loading-pop-area { position: relative; width: 100%; height: 100%;}
.loading-pop-wrap .loading-pop-area > .loading.type01 { width: 45px; height: 45px; position: absolute; left: 50%; margin-left: -22.5px; top: 50%; margin-top: -22.5px;}
.loading-pop-wrap .loading-pop-area > .loading.type01 .loading-bar { border-top: 6px solid transparent; border-bottom: 6px solid #5496ff; border-left: 6px solid #5496ff; border-right: 6px solid transparent; border-radius: 80px; width: 45px; height: 45px; display: block; animation: type01 0.8s cubic-bezier(0.4, 0.18, 0.63, 0.86) 0.2s infinite;}
.loading-pop-wrap.full { position: fixed;}
.loading-pop-wrap.black { background-color: rgba(0, 0, 0, 0.6);}

@keyframes type01 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* 버튼 */
.btn-wrap {position: relative; margin-top: 20px; text-align: center;}
.btn-wrap.right { text-align: right; }
.btn-wrap.inline { margin-top: 0; display: inline-block; }
.btn-wrap .btn-right {float:right;}
.btn-wrap .btn-left {float:left;}
.btn-wrap .btn-center {display: inline-block; margin-bottom: 20px;}
.btn-wrap .btn-center button {margin-right: 5px;}
.btn-wrap .btn-center button:last-child {margin-right:0;}
.btn-wrap button {border:0; background:#aeaeae; color:#fff; height: 40px;padding:0 15px; min-width: 150px; font-size: 1.3rem; font-weight: 600; -webkit-transition: background .3s;-moz-transition: background .3s;-ms-transition: background .3s; -o-transition: background .3s;transition: background .3s; cursor: pointer; float: left; }

.btn-wrap button.s-btn { font-size: 1.1rem; height: 25px; min-width: 100px;}
.btn-wrap button.sky-btn {background:#5496ff;}
.btn-wrap button:not(:disabled).sky-btn:hover {background:#2b75ea;}
.btn-wrap button.blue-btn {background:#1952ad;}
.btn-wrap button:not(:disabled).blue-btn:hover {background:#103d86;}
.btn-wrap button.dgray-btn {background:#071c3e;}
.btn-wrap button:not(:disabled).dgray-btn:hover {background:#00112d;}
.btn-wrap button.white-btn {background:#fff; border: 1px solid #ddd; color: #999;}
.btn-wrap button:not(:disabled).white-btn:hover {background:#eee;}
.btn-wrap button.bd-sky-btn {background:#fff; border: 1px solid #5496ff; color: #5496ff;}
.btn-wrap button:disabled { opacity: .5 !important; cursor: no-drop !important; }


.date-td { display: inline-block; }
.date-td.disabled { opacity: 0.6;}
.date-td.disabled .date-select-wrap .date-select { cursor: no-drop;}
.date-td.disabled .date-select-wrap .date-select input[type="text"] { background-color: #f3f3f3; border: 1px solid #ccc;opacity: 0.7; pointer-events: none;}
.date-td.disabled .date-select-wrap .select-box select { pointer-events: none; border-right: 1px solid #cacaca;}

.table-btn.btn-wrap { margin-top: 0; position: absolute; top: -40px; right: 0; }
.table-btn.btn-wrap button { background: #fff; font-size: 1rem; font-weight: 600; color: #666; min-width: auto; border: 1px solid #b5b9bf; border-radius: 3px; margin: 0 2px; }
.table-btn.btn-wrap button i { font-size: 10px; position: relative; top: -1px; }
.table-btn.btn-wrap button:not(:disabled):hover { box-shadow: 1px 2px 0 #e3e3e3; }
.in-title.table-btn.btn-wrap { top: 10px;}

.print-btn { position: absolute; top: 30px; right: 12px;}
.print-btn.top { top: 0;}
.print-btn.top-80 { top: 80px;}
.print-btn.top-120 { top: 120px;}
.print-btn .btn-wrap button.print { display: flex; align-items: center; gap: 3px; background: #fff; font-size: 1rem; font-weight: 600; color: #666; min-width: auto; border: 1px solid #b5b9bf; border-radius: 3px; margin: 0 2px; height: 25px; padding: 0 12px; box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.18);}
.print-btn .btn-wrap button.print img { width: 18px; height: 18px;}


.spinner { position: relative; display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(0, 0, 0, .1); border-radius: 50%; border-left-color: #09f; animation: spin 1s  linear infinite;}
.unit { color: #888; float: left; line-height: 35px; font-size: 1.2rem; font-weight: 600; margin-right: 5px; }

@keyframes spin {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}

/* vertical table */
table.vertic-table {border-top:1px solid #777; margin-top: 20px; width: 100%;}
table.vertic-table tbody tr th { width:250px; background:#f8f8f8; padding:5px; text-align: center; font-size: 1.3rem; font-weight: 600; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; height: 45px; word-break: keep-all;}
table.vertic-table tbody tr th .imp {font-size: 1.5rem; position: relative; top:4px; left:3px; color: #d80b0b;}
table.vertic-table tbody tr td { padding:5px 15px;font-size: 1.3rem; border-bottom: 1px solid #e5e5e5; height: 45px;word-break: keep-all;}
table.vertic-table .btn-wrap { vertical-align: middle; }

.contact-wrap.flex {  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;}
.contact-wrap .date-select { margin-right: 5px;}
.contact-wrap .date-td .date-select-wrap { display: flex;}

/* normal table */
table.normal-table {border-top:1px solid #777; margin-top: 20px; width: 100%; table-layout: fixed;}
table.normal-table thead tr th { background:#f8f8f8; padding:5px; text-align: center; font-size: 1.3rem; font-weight: 600; border-bottom: 1px solid #e5e5e5; height: 45px; word-break: break-all;}
table.normal-table thead tr th.num {width: 50px;}
table.normal-table tbody tr td { padding:3px;font-size: 1.3rem; border-bottom: 1px solid #e5e5e5; height: 45px;word-break: break-all; text-align: center;}
table.normal-table .btn-wrap { vertical-align: middle; }
.imp {font-size: 1.5rem; position: relative; top:4px; left:3px; color: #d80b0b;}

/* 검색 테이블 */
.search-wrap .vertic-table .selectbox { margin: 1px; }
.search-wrap .vertic-table .eq-search { display: flex; gap: 3px; flex-wrap: wrap; }
.search-wrap .vertic-table .eq-search .btn-wrap.inline { vertical-align: middle; }
.search-wrap .vertic-table .eq-search .btn-wrap button { height: 35px; }

@media all and (max-width: 768px) {
	.search-wrap .vertic-table .eq-search .btn-wrap,
	.search-wrap .vertic-table .eq-search input[type="text"].text-input { width: 100% !important; }
}

.scroll-x { position: relative; overflow-x: auto; }
.scroll-x table { min-width: 1024px; }
.scroll-x table.w-770px { min-width: 770px; }
.scroll-y { position: relative; overflow-y: auto; max-height: 500px; }

/* 셀렉트박스 */
.select-box {width: 150px; height:35px; position: relative; display: inline-block; float: left;}
.select-box select {border:1px solid #cacaca;border-right: 0; width: 100%; height: 100%; padding: 0 10px; padding-right: 20px; font-size: 1.3rem;background: url(../../img/sub/common/bread_arrow.svg) 95%; background-repeat: no-repeat; background-size: 7px;}
.select-box select:hover {border-color: #a8a8a8;}

/* 인풋 텍스트 */
input[type="text"].text-input { height: 35px; border:1px solid #cacaca; width: 250px; display: inline-block; font-size: 1.2rem; padding:0 10px;}
input[type="text"].text-input:read-only { background: #f2f2f2; cursor: default; }
input[type="text"].text-input.s-width { width:100px;}
input[type="text"].text-input.l-width { width:50%;}
input[type="text"].text-input.w-100pct { width:100%;}
input[type="text"]:hover {border-color: #a8a8a8;}

/* textarea */
textarea {width: 100%; resize: none; padding:10px; font-size: 1.2rem; min-height: 200px;border:1px solid #cacaca;}
textarea:hover {border-color: #a8a8a8;}

/*파일인풋*/
.file-input { display: inline-block; text-align: left; width: 400px; position: relative; padding-left: 10px; font-size: 1.2rem; line-height: 31px; vertical-align: middle; background-color: #fff; cursor: pointer; border: 1px solid #cacaca; font-weight: 400; }
.file-input > input[type='file'] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 301; cursor: pointer; }
.file-input > input[type='file']:hover {border-color: #a8a8a8;}
.file-input > .button { display: inline-block; padding: 0; font-size: 1.2rem; vertical-align: top; background-color: #1952ad; cursor: pointer; border: 1px solid #1952ad; border-bottom-color: #1952ad; border-radius: 2px; font-weight: 400; color: #fff; height: 33px; border-top-left-radius: 0; border-bottom-left-radius: 0; position: absolute; z-index: 2; top: -1px; right: -1px; transition: all 0.3s ease; width: 70px; text-align: center; line-height: 31px; }
.file-input:hover > .button { background: #103d86; color: #fff; border-color: #103d86; }
.file-input > .label { color: #333; white-space: nowrap; opacity: .5; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right: 55px; display: block;}
.file-input.-chosen > .label { opacity: 1; }
.file-row { margin: 5px 0; }
.file-row .add-wrap { display: inline-block; margin-left: 10px; position: relative; top:7px;}
.file-row .add-wrap button { border-style: none; background: transparent; width: 20px; height: 20px; margin-right: 3px; }
.file-row .add-wrap button img {opacity: .7; cursor: pointer;}
.file-row .add-wrap button:hover img {opacity: 1;}

/* 탭메뉴 */
.tab-menu { position: relative; margin-bottom: 20px;}
.tab-menu ul li {float: left; width: 20%; height: 50px; }
.tab-menu ul li a {display: block; width: 100%; height: 100%; text-align: center; line-height: 50px; border:1px solid #e5e5e5; border-right: 0; border-top:0; font-size: 1.3rem;}
.tab-menu ul li:nth-child(-n+6) a {border-top:1px solid #e5e5e5}
.tab-menu ul li a:hover {background: #fafafa;}
.tab-menu ul li.select:hover a,
.tab-menu ul li.select a {color: #fff;border:1px solid #5496ff; background: #5496ff;}
.tab-menu ul li:nth-of-type(5n) a {border-right: 1px solid #e5e5e5;}
.tab-menu ul li.empty-menu a,
.tab-menu ul li.empty-menu:hover a  {background: #f8f8f8; cursor: context-menu; }

/* 페이징 */
.paging { text-align: center; margin-top: 20px;}
.paging ul {display: inline-block;}
.paging ul li {float: left; height: 35px; line-height: 33px; width:35px; text-align: center; margin:0 2px;}
.paging ul li:hover a {background:#f1f1f1;}
.paging ul li.select:hover a,
.paging ul li.select a {background:#5496ff; color:#fff; border-bottom-color: #5496ff;}
.paging ul li a {display: block; width: 100%; height: 100%; border:1px solid #e5e5e5;}
.paging ul li img { height: 9px; }

/* 인풋 라디오 커스텀 */
input[type=radio]:not(old) { margin:0; padding:0; opacity:0; background:url("../../img/common/radio_box_off.png") no-repeat 0 9px; width:0; } 
input[type=checkbox]:not(old) { margin:0; padding:0; opacity:0; background:url("../../img/common/check_box_off.png") no-repeat 0 9px; width:0; } 
input[type=radio]:not(old) + label { display: inline-block; text-align: left; padding-left: 20px; background: url("../../img/common/radio_box_off.png") no-repeat 0 9px;  position: relative; top:0; line-height: 32px; margin-right: 10px;}
input[type=checkbox]:not(old) + label { display: inline-block; text-align: left; padding-left: 20px; background: url("../../img/common/check_box_off.png") no-repeat 0 9px; position: relative; top:0;  line-height: 32px;margin-right: 10px;}
input[type=radio]:not(old):checked + label { background: url("../../img/common/radio_box_on.png") no-repeat 0 9px; position: relative; top:0; margin-right: 10px;}
input[type=checkbox]:not(old):checked + label { background: url("../../img/common/check_box_on.png") no-repeat 0 9px; position: relative; top:0; margin-right: 10px;}

/* datepicker UI */
.date-select-wrap { display: inline-block; }
.date-select-wrap .date-select { display: inline-block; position: relative; cursor: pointer; }
.date-select-wrap .date-select .input-group { position: relative; display: inline-block; }
.date-select-wrap .date-select .input-group input[type=text].text-input { cursor: default; width: 130px; }
.date-select-wrap .date-select .input-group .calendar-btn { position: absolute; display: block; top: 7px; right: 10px; opacity: 0.5; z-index: 1; transition: opacity 0.2s ease; font-size: 13px; }
.date-select-wrap .date-select .input-group .calendar-btn:hover { opacity: 1; }
.date-select-wrap span.unit { font-size: 1.2rem; padding: 0 5px; font-weight: 500; color: #999; position: relative; }
.date-select-wrap input[type=checkbox]:not(old) + label { margin-left: 10px; }

/* selectbox */
.selectbox { position: relative; width: 250px;}
.selectbox:after { content: ""; position: absolute; top: 48%; right: 10px; width: 7px; height: 4px; background: url(../../img/sub/common/bread_arrow.svg) 95%; background-repeat: no-repeat; background-size: cover; }
.selectbox select { position: relative; overflow: hidden; white-space: nowrap; display: inline-block; vertical-align: middle; width: 100%;  height: 35px; padding: 0 25px 0 10px; border: 1px solid #cacaca; font-size: 1.2rem; }

/* diplay */
.inline { display: inline-block !important; }

/* flex layout */
.flex-group { display: flex; }
.flex-group.between { justify-content: space-between; }

/* ********** percentage width ********** */
.w-30pct { width: 31% !important; }
.w-40pct { width: 40% !important; }
.w-50pct { width: 50% !important; }
.w-100pct { width: 100% !important; }

/* ********** px width ********** */
.w-40px { width: 40px !important; }
.w-50px { width: 50px !important; }
.w-60px { width: 60px !important; }
.w-100px { width: 100px !important; }
.w-150px { width: 150px !important; }
.w-200px { width: 200px !important; }
.w-300px { width: 300px !important; }
.w-400px { width: 400px !important; }

@media (max-width: 550px) {
	table .w-100px,
	table .w-150px,
	table .w-200px,
	table .w-300px,
	table .w-400px { width: 100% !important; }
}

/* ********** height ********** */
.h-22px { height: 22px !important; }
.h-25px { height: 25px !important; }



/* input 찾기 UI  */
.find-input { display: flex; gap: 3px; flex-wrap: wrap; }
.find-input .btn-wrap.inline { vertical-align: middle; }
.find-input .btn-wrap button { height: 35px; min-width: auto; }


/* 파일 다운로드 UI */
.file-down { display: inline-block; position: relative; padding-left: 15px; font-size: 1.2rem; text-align: left; }
.file-down:after { content: ''; width: 10px; height: 13px; background-image: url(../../img/sub/community/file_icon.svg); background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; top: 4px; left: 0; }
.file-down:not(:last-child) { margin-bottom: 7px; }
.file-down:hover { text-decoration: underline; }


.drag-txt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); color: #fff; opacity: 0; transition: opacity .3s; z-index: -1;}
.drag-txt p { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.2px; }
.drag-txt p i { display: block; text-align: center; font-size: 20px; margin-bottom: 5px; }



@media all and (max-width: 1200px) {
	/* 레이어팝업 */
	.pop-wrap.lg-width .pop-area { width: calc(100% - 30px); }
}

@media all and (max-width: 1024px) {
	.drag-txt { opacity: 1; z-index: 1; }
	.drag-txt.on,
	div:hover > .drag-txt { opacity: 0; z-index: -1; }
}

@media all and (max-width: 890px) {
	/* datepicker */
	.date-select-wrap,
	.date-select-wrap .date-select,
	.date-select-wrap .date-select .input-group { display: block; }
	.date-select-wrap .date-select:not(:last-child) { margin-bottom: 8px; }
	.date-select-wrap .date-select .input-group input[type=text].text-input { width: 100% !important; }
	.date-select-wrap .date-select .selectbox { width: 100% !important; margin-top: 3px;}
	.date-select-wrap span.unit { display: none; }
	.unit { display: none;}
	/* 레이어팝업 */
	.pop-wrap.md-width .pop-area { width: calc(100% - 30px); }
}

	@media all and (max-width: 768px) {
	/* 셀렉트박스 */
	.select-box {width: 130px;}
	
	/* vertical table */
	table.vertic-table tbody tr th {width: 170px;}
	
	/* 인풋텍스트 */
	input[type="text"].text-input { width: calc(100% - 130px); }
	input[type="text"].text-input.l-width { width:100%;}
	
	/*탭메뉴*/
	.tab-menu ul li { width: 25%;} 
	.tab-menu ul li:nth-of-type(5n) a {border-right: 0;}
	.tab-menu ul li:nth-of-type(4n) a {border-right: 1px solid #e5e5e5;}

	/* input 찾기 UI  */
	.find-input .btn-wrap,
	.find-input input[type="text"].text-input { width: 100% !important; }

	/* 타이틀 내부 버튼 */
  .in-title.table-btn.btn-wrap { position: static; margin: 20px 0 0; }
  .in-title.table-btn.btn-wrap:after {content: ''; display: block; clear: both;}
  .in-title.table-btn.btn-wrap > div { float: none;}
  .in-title.table-btn.btn-wrap button { margin: 2px; }
}
@media all and (max-width: 680px) {
	
	/* 탭메뉴 */
	.tab-menu ul li a {font-size: 1.2rem;}
}
@media all and (max-width: 580px) {
	/* 페이징 */
	.paging ul li {height: 25px; line-height: 23px; width: 25px; margin: 0 1px; font-size: 1.3rem;}
	.paging ul li:first-child,
	.paging ul li:last-child {display: none;}
	.paging ul li img {width: auto; height: 7px;}
	
	/* 레이어팝업 */
	.pop-wrap .pop-area {width: 90%;}
	
	/*탭메뉴*/
	.tab-menu ul li { width: 33.3%;} 
	.tab-menu ul li:nth-of-type(4n) a {border-right: 0;}
	.tab-menu ul li:nth-of-type(3n) a {border-right: 1px solid #e5e5e5;}
}
@media all and (max-width: 500px) {
	/* 페이징 */
	.paging ul {width: 100%;}
	.paging ul li {margin:0; width: 8.3%;}
	.paging ul li a {border: 0;}
	
	/* 셀렉트박스 */
	.select-box {width: 110px;} 
	.select-box select { font-size: 1.2rem; background-position: 90%; background-size: 6px;}
	
	/* 인풋텍스트 */
	input[type="text"].text-input { width: calc(100% - 110px); }
	
	/* vertical table */
	table.vertic-table tbody tr th {width: 100px; font-size: 1.3rem;}
	
	/* button*/
	.btn-wrap button { min-width: auto; font-size: 1.2rem; }
	.btn-wrap .btn-center button { min-width: auto; font-size: 1.2rem; font-weight: 400; font-size: 1.2rem; padding:0 10px; letter-spacing: -1px;}
}
@media all and (max-width: 340px) {
	/* button*/
	.btn-wrap .btn-center button { margin: 0 2px; font-size: 1.1rem; }
}