@charset "utf-8";



/* --------------------------------------------------------- Grid System ------------------------------------------------------------------ */
/* Horizontal Stack */
.h-stack,
dl.h-stack {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.h-stack > div,
dl.h-stack dt,
dl.h-stack dd {
    display: table-cell;
    vertical-align: middle;
}
.h-stack[data-align="top"] > div {vertical-align: top;}
.h-stack[data-align="bottom"] > div {vertical-align: bottom;}
.h-stack.center > div {text-align: center;}



/* Flex Stack */
.flex-stack {display: flex;}
.flex-stack.between,
.flex-stack[data-align="between"] {
	justify-content: space-between;
	align-items: center;
}



/* List Cell Area */
ul.cell-items {text-align: left; padding: 5px 10px 10px 10px;}
ul.cell-items li {display: inline-block; vertical-align: top; margin-top: 5px;}
ul.cell-items.col3 li {width: calc(33% - 5px);}
ul.cell-items.col4 li {width: calc(25% - 5px);}
ul.cell-items.col5 li {width: calc(20% - 5px);}
ul.cell-items.col6 li {width: calc(17% - 8px);}
/* --------------------------------------------------------- //Grid System ------------------------------------------------------------------ */





/* --------------------------------------------------------- 타이포그래피(Typography) ------------------------------------------------------------------ */
/* 제목 */
.title1 {font-size: 24px; font-weight: 400; color: #333; border-bottom: 1px solid #dbdbdb; padding-bottom: 10px;}

.tit2-area,
.title2 {margin: 40px 0 10px;}
.tit2-area:first-child,
.title2:first-child {margin-top: 0;}

.title2 {font-size: 18px; font-weight: 400; color: #333; position: relative;}
.title2::before {content: ""; display: block; width: 65px; height: 1px; background: #4ba9df; margin-bottom: 8px;}
.title2 small {font-size: 14px;}
.title2 .side-wrap {position: absolute; top: 1px; right: 0;}
.title2 .side-wrap2 {position: absolute; top: 11px; right: 0; font-size: 12px;}

.title3 {font-size: 16px; font-weight: 700; color: #999; position: relative; margin-bottom: 20px;}
.title3 .side-btn {
    position: absolute; right: 0; top: -5px; display: inline-block;
    font-size: 12px; color: #999; border: 1px solid #e1e3e4; border-radius: 15px; line-height: 26px; padding: 0 14px;
}
.title3 .side-text {
    position: absolute; right: 0px; top: 2px; display: inline-block;
    font-size: 12px; color: #999;
}
.title3 .side-btn:hover {background: #f2f2f2; color: #222; font-weight: 700;}

.title-typeC1 {font-size: 18px; font-weight: bold; line-height: 24px; text-align: center;}
.title-typeC2 {font-size: 22px; font-weight: bold; line-height: 28px; text-align: center;}

.item-title1 {font-size: 15px;}
.item-title2 {font-size: 13px; margin: 10px 0 5px; padding: 0 5px;}



/* 본문 */
.type-body {font-size: 14px; line-height: 26px;}

.memo-line-scroll-area {
	border: 1px solid #ddd;
	border-radius: 5px;
	max-height: 300px;
	overflow-y: auto;
	padding: 20px;
	font-size: 14px; line-height: 24px;
}



/* 캡션 */
.inline-caption,
.title2 small.inline-caption {font-size: 13px; line-height: 18px;}

.foot-caption {
    font-size: 13px;
    margin-top: 8px;
    padding-left: 10px;
}

.memo-caption {
    font-size: 13px;
    margin-top: 10px;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}
.memo-caption:empty {border: none; padding: 0;}
/* --------------------------------------------------------- //타이포그래피(Typography) ------------------------------------------------------------------ */



/* --------------------------------------------------------- 컬러(color) ------------------------------------------------------------------ */
/* 폰트 */
.text-black {color: #222222;}
.text-gray {color: #999999;}
.text-red {color: #e74c3c;}
.text-blue {color: #4ba9df;}
.text-green {color: #1fcf6d;}
/* --------------------------------------------------------- //컬러(color) ------------------------------------------------------------------ */



/* --------------------------------------------------------- 버튼(button) ------------------------------------------------------------------ */
/* 버튼 옵션 */
.btn-wrap {text-align: right; margin-top: 10px;}
.btn-wrap.center {text-align: center; margin-top: 20px;}
.btn-wrap.center .btn {font-size: 14px; min-width: 96px; padding: 4px 15px; box-sizing: border-box;}


.btn {
    display: inline-block; vertical-align: middle; color: #222; background-color: #f2f2f2; text-transform: uppercase; letter-spacing: 1px;
    font-size: 13px; font-weight: 700; padding: 0px 20px; margin: 2px 1px; line-height: 30px; white-space: nowrap;
    border: 1px solid #e1e3e4; border-color: rgba(0,0,0,0.1); border-bottom-width: 3px; border-radius: .25em; cursor: pointer;
    max-width: 100%;
}

.btn:hover {background-color: #e3e3e3;}
.btn:active {background-color: #ccc;}

.btn.white {background-color: #fff;}

.btn.black {background-color: #494949; border-color: rgba(0,0,0,0.2); text-shadow: 0 1px 0 rgba(0,0,0,0.2); color: #fff;}
.btn.black:hover {background-color: #222;}
.btn.black:active {background-color: #000;}

.btn.blue {background-color: #4ba9df; border-color: rgba(0,0,0,0.2); text-shadow: 0 1px 0 rgba(0,0,0,0.2); color: #fff;}
.btn.blue:hover {background-color: #4295c4;}
.btn.blue:active {background-color: #3981a9;}

.btn.red {background-color: #e74c3c; border-color: rgba(0,0,0,0.2); text-shadow: 0 1px 0 rgba(0,0,0,0.2); color: #fff;}
.btn.red:hover {background-color: #dc2f1d;}
.btn.red:active {background-color: #d21c09;}

.btn.green {background-color: #1fcf6d; border-color: rgba(0,0,0,0.2); text-shadow: 0 1px 0 rgba(0,0,0,0.2); color: #fff;}
.btn.green:hover {background-color: #1cb25e;}
.btn.green:active {background-color: #178e4b;}


/* 버튼 크기 */
.btn.sm {font-size: 11px; line-height: 25px; padding: 0 12px;}
.btn.vsm {font-size: 11px; line-height: 17px; padding: 0 4px;}
.btn.big {font-size: 14px; line-height: 40px; padding: 0 26px;}



/* 비활성화 */
.btn.disabled {opacity: .5; cursor: not-allowed;}
.btn.disabled:hover {background-color: #f2f2f2;}

.btn.disabled.black:hover {background-color: #494949;}
.btn.disabled.black:active {background-color: #494949;}

.btn.disabled.blue:hover {background-color: #4ba9df;}
.btn.disabled.blue:active {background-color: #4ba9df;}

.btn.disabled.red:hover {background-color: #e74c3c;}
.btn.disabled.red:active {background-color: #e74c3c;}

.btn.disabled.green:hover {background-color: #1fcf6d;}
.btn.disabled.green:active {background-color: #1fcf6d;}



/* material-icons (구글아이콘) */
.btn .material-icons {display: inline-block; vertical-align: middle; font-size: 22px; color: #555;}
.btn.blue .material-icons,
.btn.red .material-icons {
	color: #fff;
}
.btn.sm .material-icons {font-size: 19px; line-height: 26px;}

.material-icons.middle {vertical-align: middle;}
/* --------------------------------------------------------- //버튼(button) ------------------------------------------------------------------ */



/* --------------------------------------------------------- 테이블(table) ------------------------------------------------------------------ */
/* common */
table th.left,
table td.left {text-align: left !important;}
table th.center,
table td.center {text-align: center !important;}
table th.right,
table td.right {text-align: right !important;}
table a.link {color: #4ba9df; font-weight: 700; border-bottom: 1px solid #4ba9df; padding-bottom: 1px;}
table caption.title {font-size: 16px; font-weight: bold; line-height: 20px; margin: 20px 0 10px; padding-left: 20px; text-align: left;}


/* 테이블 옵션 (col) */
.table-col {width: 100%; border-spacing: 0px; border-collapse: collapse; font-size: 13px;}
.table-col > thead > tr > th {font-weight: 700; background: #dfdfdf; height: 30px; padding: 4px 10px; border: 1px solid #e1e3e4; text-align: center;}
.table-col > tbody > tr:nth-child(even) {background: #fbfbfb;}
.table-col > tbody > tr:nth-child(even):hover {background: #f5f5f5;}
.table-col > tbody > tr > td {height: 30px; padding: 4px 10px; border: 1px solid #e1e3e4;}
.table-col > tbody > tr.bg-gray > td {
	background-color: #eee;
}
.table-col > tbody > tr.bg-red > td {
	background-color: #ffcccc;
}
.table-col > tbody > tr:hover {background: #f5f5f5; border: 1px solid #4ba9df;}
.table-col.not-hover > tbody > tr:hover {background-color: transparent;}
.table-col.not-hover > tbody > tr:nth-child(even):hover {background-color: #fbfbfb;}
.table-col > tfoot > tr > td {font-weight: 700; background: #eee; height: 30px; padding: 4px 10px; border: 1px solid #e1e3e4; text-align: center;}

.table-col.left > tbody > tr > td {text-align: left;}
.table-col.center > tbody > tr > td {text-align: center;}
.table-col.right > tbody > tr > td {text-align: right;}

/* 테이블 옵션 (col) - 장대수대리 스타일 추가 */
table.jsgrid-table {font-size: 13px;}
table.jsgrid-table > thead > tr > th {font-weight: 700; background: #eee; padding: 10px 10px; border: 1px solid #e1e3e4; text-align: center;}
table.jsgrid-table > tbody > tr > th {font-weight: 700; background: #eee; padding: 10px 10px; border: 1px solid #e1e3e4; text-align: center;}
table.jsgrid-table > tbody > tr > td {padding: 10px 10px; border: 1px solid #e1e3e4;}
table.jsgrid-table > tfoot > tr > td {font-weight: 700; background: #eee; padding: 10px 10px; border: 1px solid #e1e3e4; text-align: center;}


/* 테이블 옵션 (row) */
.table-row {width: 100%; border-spacing: 0px; border-collapse: collapse; font-size: 13px;}
.table-row > tbody > tr > th {font-size: 13px; font-weight: 700; background: #eee; height: 30px; padding: 4px 20px; border: 1px solid #e1e3e4; text-align: left;}
.table-row > tbody > tr > td {font-size: 13px; height: 30px; padding: 4px 15px; border: 1px solid #e1e3e4;}

.table-row > tbody > tr > th.big-padding,
.table-row > tbody > tr > td.big-padding {padding-top: 15px; padding-bottom: 15px;}

.table-row td .info {display: inline-block; margin-left: 10px;}
.table-row td .info2 {margin-top: 5px; line-height: 20px;}


/* 테이블 가로 스크롤 */
#tblBackground {width: 100%; table-layout: fixed;}
#tblBackground .text-center {text-align: center;}
#tblBackground .text-left {text-align: left;}
#tblBackground .text-right {text-align: right;}
#divHeadScroll {
    /*안의 내용이 790보다 길게 적용이 되므로 overflow-x, overflow-y를 hidden을 걸어줘서 설정한 가로너비만큼만 화면에 보이도록 잡아줍니다.*/
    width: 100%; overflow-x: hidden; overflow-y: hidden;
}
#tblHead {
    /*
    *  Table의 필드명의 너비를 여기에서 지정합니다.
    *  필드명을 보여줄 테이블은 body보다 하나의 td를 더 가지며 마지막 td는 아무것도 입력하지 않고 크기만 잡아줍니다.
    *  이렇게 하는 이유는 데이터를 보여주는 테이블은 세로 스크롤의 가로두께만큼 더 이동하기 때문입니다.
    */
    table-layout: fixed; width: 1117px; border-collapse: collapse;
}
#tblHead th {text-align: center;}
#divBodyScroll {
    /*
    *  overflow-x, overflow-y는 scroll로 지정하고,
    *  height는 테이블의 데이터가 나올 기본 크기를 잡아줍니다.
    *  세로길이를 잡아주지 않으면 overflow-y가 걸리지 않습니다.
    */
    width: 100%; height: auto; max-height: 478px; overflow-x: scroll; overflow-y: scroll;
}
#tblBody {
    /* tblBody의 데이터는 필요한 열의 수만큼만 만드시고 헤더와 col의 width는 동일해야 합니다. */
    width: 1100px; table-layout: fixed;	border-collapse: collapse;
}



/* Table Caption */
.th-caption {
	font-size: 12px; line-height: 18px; color: #555;
	margin-top: 5px;
	word-break: keep-all;
}



/* Table Scroll */
.fixed-table-container {
    position: relative;							/*테이블 고정 container width와 height는 공용으로 사용하기 위해 html단에서 지정 */
    padding-top: 30px;							/* header-bg height값 */
}
.fixed-table-container.tfoot {padding-bottom: 40px;}

/*헤더(타이틀 영역)*/
.fixed-table-header-bg,
.fixed-table-container.tfoot::after {
    border-top: 1px solid #ddd; 
    border-bottom: 1px solid #ddd;
    text-align:center;
    color:#666;
    font-weight:bold;
    height: 30px;								/* header-bg height값 */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
.fixed-table-header-bg {background: #eee;}
.fixed-table-container.tfoot::after {
	content: ""; display: block; top: auto; bottom: 0; z-index: 2;
	height: 40px;
}

.fixed-table-wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 500px;
}
table.fixed-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 20px;
}
table.fixed-table td {
    border-bottom: 1px solid #DDD;
    height:30px; padding:3px 10px 2px;
    text-align:center;
    color:#666;
}
table.fixed-table td + td {
    border-left: 1px solid #DDD;
}
table.fixed-table th {
    padding: 0px; /* reset */

}
table.fixed-table thead .tit,
table.fixed-table tfoot .tit {
    position: absolute;
    top: 0;
    width: inherit;
    line-height: 30px;								/* header-bg height값 */
    border-left:1px solid;
    border-color:#3b3f2c #c4c4c4;
}
table.fixed-table tfoot .tit {top: auto; bottom: 3px; z-index: 9; border-color: #ddd;}
table.fixed-table tfoot th,
table.fixed-table tfoot td {padding: 3px 0;}

table.fixed-table thead th:first-child .tit,
table.fixed-table tfoot th:first-child .tit {
    border-left: none;
}
table.fixed-table tbody tr:last-child td {border-bottom:1px solid #ddd;} 
table.fixed-table tbody tr:nth-child(even) {background: #f6f6f6;}
/* --------------------------------------------------------- //테이블(table) ------------------------------------------------------------------ */



/* --------------------------------------------------------- 폼(form) ------------------------------------------------------------------ */
/* input placeholder all */
::-webkit-input-placeholder {color: #b7b7b7;}
         ::-moz-placeholder {color: #b7b7b7;} /* firefox 19+ */
     :-ms-input-placeholder {color: #b7b7b7;} /* ie */
     input:-moz-placeholder {color: #b7b7b7;}

input:focus, textarea:focus {border: 1px solid #4ba9df !important;}


/* 기본옵션 */
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], select {
    height: 34px; vertical-align: middle; min-width: 135px; margin: 2px 0;
    font-size: 13px; border: 1px solid #e1e3e4; border-radius: 3px; padding: 8px;
}
select {padding-right: 25px !important;}

input[type="file"] {height: auto; font-size: 13px; vertical-align: middle; margin: 2px 0; border: 1px solid #e1e3e4; background: #f2f2f2; padding: 4px;}
input[type="checkbox"], input[type="radio"] {display: inline-block; vertical-align: middle;}

label {font-size: 12px; vertical-align: middle;}
label span {display: inline-block; vertical-align: middle; cursor: pointer; margin-left: 3px; margin-right: 8px;}
.form-label label {margin-left: 3px; margin-right: 8px; cursor: pointer;}

textarea {font-size: 14px; line-height: 22px; border: 1px solid #e1e3e4; border-radius: 3px; padding: 12px;}


/* size */
input.wide, select.wide, textarea.wide {min-width: auto; width: 250px;}
input.small, select.small, textarea.small {min-width: auto; width: 80px;}


/* table form size */
table input[type="text"], table input[type="password"], table input[type="tel"], table input[type="number"], table select {
    height: 30px; font-size: 13px; padding: 6px 8px; min-width: auto;
}

/* width > input, select */
input.col1, select.col1 {width: 100%}
input.col2, select.col2 {width: 48%; width: calc(50% - 4px); display: inline-block; margin-left: 4px;}
input.col2:first-child, select.col2:first-child {margin-left: 0;}
input.col3, select.col3 {width: 31.5%; width: calc(33.3% - 6px); display: inline-block; margin-left: 4px;}
input.col3:first-child, select.col3:first-child {margin-left: 0;}
input.col3:first-child, select.col3:first-child {width: 32%; width: calc(33.3% - 4px);}



/* 비활성화 */
select:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="text"].readonly {
    cursor: not-allowed;
}

select:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled {
    background: #f0f0f0;
    border-color: #dadada;
    opacity: .5;
}

input.disabled,
select.disabled,
textarea.disabled {background: #e7e7e7 !important;}
input.disabled:hover,
select.disabled:hover,
textarea.disabled:hover {cursor: not-allowed;}



/* Tooltip */
.tooltip-area {position: relative;}
.tooltip-btn {
	display: inline-block;
    vertical-align: middle;
    background: none;
    border: none;
    padding: 4px;
    position: relative;
    font-size: 13px;
    cursor: pointer;
}
.tooltip-btn img,
.tooltip-btn strong {
	display: inline-block; vertical-align: middle;
}
.tooltip-btn::before {
	content: url("/images/admin/icon/tooltip.png");
	display: inline-block; vertical-align: middle; 
}

.tool-tip {
    display: none;
    position: absolute; top: 36px; left: -20px; z-index: 9;
    min-width: 300px;
    background: #fff;
    border: 1px solid #e1e3e4;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #ccc;
    padding: 10px;
    font-size: 12px; line-height: 20px; color: #333;
    text-align: left;
    word-break: keep-all;
    box-sizing: border-box;
}
.tool-tip::before {
    content: "";
    position: absolute; top: -16px; left: 24px; z-index: 2;
    width: 0px;
    height: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid #ddd;
    border-right: 8px solid transparent;
    border-left: 8px solid  transparent;
}
.tool-tip.bottom {left: auto;}
.tool-tip.bottom::before {
    top: -16px; right: 14px; left: auto;
    border-top: 8px solid transparent;
    border-bottom: 8px solid #ddd;
    border-right: 8px solid transparent;
    border-left: 8px solid  transparent;
}
.tool-tip.active,
.tooltip-btn:hover .tool-tip {
    display: block;
}
.tool-tip.width200 {width: 200px;}
.tool-tip.width220 {width: 220px;}
.tool-tip.width230 {width: 230px;}



/* File List */
ul.file-list {margin: 20px 0 10px;}
ul.file-list li {margin-top: 4px;}
ul.file-list li:first-child {margin-top: 0;}

.file-del-area .btn-file {background: none; border: none; margin-right: 4px;}
.file-del-area .file-name {display: inline-block; border: 1px solid #e1e3e4; box-sizing: border-box; padding: 6px 8px;}
/* --------------------------------------------------------- //폼(form) ------------------------------------------------------------------ */



/* --------------------------------------------------------- 페이징(paging) ------------------------------------------------------------------ */
/* 기본옵션 */
.paging-wrap {text-align: center; margin: 20px 0;}
.paging-wrap ul {display: inline-block;}
.paging-wrap ul li {
    float: left; margin-left: 3px; border: 1px solid #e1e3e4; border-radius: 3px;
    font-size: 13px;
}
.paging-wrap ul li, .paging-wrap ul li a {min-width: 28px; height: 28px; line-height: 28px; text-align: center;}

.paging-wrap ul li:first-child {margin-left: 0;}
.paging-wrap ul li.active {background: #4ba9df; color: #fff; font-weight: 700;}
.paging-wrap ul li a {color: #5f5f60; display: table-cell; vertical-align: middle;}
.paging-wrap ul li a:hover {color: #4ba9df; font-weight: 700;}

.paging-wrap ul li.first,
.paging-wrap ul li.prev,
.paging-wrap ul li.next,
.paging-wrap ul li.last {line-height: normal;}
.paging-wrap ul li.first a::after,
.paging-wrap ul li.prev a::after,
.paging-wrap ul li.next a::after,
.paging-wrap ul li.last a::after {display: inline-block; /*vertical-align: middle;*/}

.paging-wrap ul li.first a::after {content: url("/images/admin/paging/first.png");}
.paging-wrap ul li.prev a::after {content: url("/images/admin/paging/prev.png");}
.paging-wrap ul li.next a::after {content: url("/images/admin/paging/next.png");}
.paging-wrap ul li.last a::after {content: url("/images/admin/paging/last.png");}


/* 기본옵션 - 장대수대리 스타일 추가 */
div.jsgrid-pager-container {text-align: center; margin: 20px 0;}
div.jsgrid-pager {display: inline-block;}
div.jsgrid-pager span {
    float: left; margin-left: 3px; border: 1px solid #e1e3e4; border-radius: 3px;
    font-size: 13px;
}
div.jsgrid-pager span,
div.jsgrid-pager span a {min-width: 28px; height: 28px; line-height: 28px; text-align: center; padding: 0;}
div.jsgrid-pager span a {display: block;}

div.jsgrid-pager span:first-child {margin-left: 0;}
div.jsgrid-pager span.jsgrid-pager-current-page {background: #4ba9df; color: #fff; font-weight: 700;}
div.jsgrid-pager span a {color: #5f5f60; display: table-cell; vertical-align: middle;}
div.jsgrid-pager span a:hover {color: #4ba9df; font-weight: 700;}
/* --------------------------------------------------------- //페이징(paging) ------------------------------------------------------------------ */



/* --------------------------------------------------------- 라벨(label) ------------------------------------------------------------------ */
/* 기본옵션 */
.label {display: inline-block; margin: 0 2px; vertical-align: middle; font-size: 11px; font-weight: 700; background: #f2f2f2; color: #222; padding: 6px 10px; border-radius: .25em;}
.label.black {background: #494949; color: #fff;}
.label.blue {background: #4ba9df; color: #fff;}
.label.red {background: #e74c3c; color: #fff;}
.label.green {background: #1fcf6d; color: #fff;}


/* 버튼 크기 */
.label.big {font-size: 13px; padding: 10px 18px;}
.label.sm {font-size: 10px; font-weight: 400; padding: 3px 6px;}
/* --------------------------------------------------------- //라벨(label) ------------------------------------------------------------------ */



/* --------------------------------------------------------- 팝업(popup) ------------------------------------------------------------------ */
/* 레이어팝업 */
.lock-bg {position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: #333; opacity: .7; filter: alpha(opacity=70); z-index: 99;}

.layer-popup {
    position: absolute; left: 5%; right: 5%; top: 0; z-index: 100; display: none;
}
.layer-popup .content-wrap {
    width: 600px; margin: auto;
    background: #fff; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5); border: 1px solid #e1e3e4; border-radius: .3em; overflow: hidden;
}

.layer-popup .head {background: #f2f2f2; border-bottom: 1px solid #f2f2f2; padding: 20px; position: relative;}
.layer-popup .head .title {font-size: 16px; font-weight: 700; color: #2f2f2f;}
.layer-popup .head .close {position: absolute; right: 20px; top: 22px; border: none; background: transparent;}
.layer-popup .head .close2 {position: absolute; right: 20px; top: 22px; border: none; background: transparent;}

.layer-popup .main {padding: 30px 20px;}
.layer-popup .main .memo {font-size: 13px; color: #000000; text-align: center; line-height: 20px;}
.layer-popup .main .scroll {height: 300px; overflow-y: auto;}
.scroll-y {overflow-y: auto;}

.layer-popup .foot {padding: 10px 20px 20px; border-top: 1px solid #e1e3e4; text-align: right;}


/* 레이어팝업 > 크기 */
.layer-popup .content-wrap.sm {width: 400px;}
.layer-popup .content-wrap.big {width: 900px;}



/* Main Layer Popup */
.popup-wrap {position: fixed; left: 10px; top: 10px; z-index: 999; overflow: hidden;}
.popup-wrap .main-popup {float: left; margin-right: 10px; max-width: 100%;}
.popup-wrap .main-popup .ct-body img {display: block; max-width: 100%; top: 0;}
.popup-wrap .main-popup .ct-body .close {position: absolute; right: 10px; top: 10px;}
.popup-wrap .main-popup .ct-body .close2 {position: absolute; right: 10px; top: 10px;}
.popup-wrap .main-popup .today-close {background: #fff; padding: 5px; border: 1px solid #ccc; text-align: right; position: relative;}
.popup-wrap .main-popup .today-close label {
    position: absolute; left: 10px; z-index: 2;
    font-size: 12px;
}
.popup-wrap .main-popup .today-close a {font-size: 12px; color: #333;}

.popup-wrap .text-area {
	background: #f2f2f2; border: 1px solid #ccc; border-width: 1px 1px 0 1px; padding: 50px 35px;
	width: 350px; height: 400px;
	box-sizing: border-box;
}
.popup-wrap .text-area dl {max-height: 300px; overflow-y: auto;}
.popup-wrap .text-area dt {font-size: 18px; font-weight: bold; line-height: 26px; color: #333; margin-bottom: 30px;}
.popup-wrap .text-area dd {font-size: 15px; line-height: 22px; color: #777;}
/* --------------------------------------------------------- //팝업(popup) ------------------------------------------------------------------ */



/* --------------------------------------------------------- 네비게이션 ------------------------------------------------------------------ */
/* 탭패널 (nav tabs) */
.nav-tabs1 {margin: 10px 0;}
.nav-tabs1 .tabPanel {display: none; border-top: 1px solid #ccc;}
.nav-tabs1 .tabPanel .pd-wrap {padding: 20px; font-size: 14px; line-height: 22px;}
.nav-tabs1 .menu-wrap {position: relative; z-index: 2; margin-bottom: -1px;}
.nav-tabs1 ul.nav-menu {overflow: hidden;}
.nav-tabs1 ul.nav-menu li {float: left; border-right: 1px solid #eff1f6; border-top: 1px solid #eff1f6;}
.nav-tabs1 ul.nav-menu li:first-child {border-left: 1px solid #eff1f6;}
.nav-tabs1 ul.nav-menu li a {display: table-cell; height: 45px; vertical-align: middle; line-height: 1.3em; padding: 0 25px; font-size: 14px; color: #59607d; text-align: center;}
.nav-tabs1 ul.nav-menu li a span {color: #e74c3c;}
.nav-tabs1 ul.nav-menu li a span * {color: #e74c3c;}
.nav-tabs1 ul.nav-menu li.active {border: 1px solid #ccc; border-bottom: 1px solid #fff;}
.nav-tabs1 ul.nav-menu li.active a {color: #2a2b33; font-weight: 700;}
.nav-tabs1 ul.nav-menu li:hover {background: #f2f2f2;}
/* --------------------------------------------------------- //네비게이션 ------------------------------------------------------------------ */



/* --------------------------------------------------------- 리스트 스타일 ------------------------------------------------------------------ */
/* style1 */
ul.list-style1 {}
ul.list-style1 li {
    font-size: 14px; line-height: 22px; font-weight: 400; padding: 4px 0;
    background: url(../../images/admin/list/01.png) no-repeat left 14px; padding-left: 8px;
}
ul.list-style1 li.danger {color: #e74c3c; background-image: url("../../images/admin/list/02.png");}



ul.hyphen li,
ul.list-hyphen li {
    font-size: 1rem; line-height: 1.5rem;
    position: relative;
    padding-left: 12px;
    margin-top: 3px;
    word-break: keep-all;
}
ul.hyphen li:first-child,
ul.list-hyphen li:first-child {
	margin-top: 0;
}
ul.hyphen li::before,
ul.list-hyphen li::before {
	content: "-"; position: absolute; top: 0; left: 0;
}
/* --------------------------------------------------------- //리스트 스타일 ------------------------------------------------------------------ */



/* --------------------------------------------------------- Not Content ------------------------------------------------------------------ */
/* 콘텐츠 없을 시 (message) */
.not-msg {font-size: 12px; line-height: 18px; text-align: center; color: #59607d;}

/* 콘텐츠 없을 시 (content) */
.not-content {padding: 65px 20px; text-align: center; width: 100%; clear: both; float: none; box-sizing: border-box;}
.not-content.lineB {border-bottom: 1px solid #ddd;}
.not-content img {display: inline-block;}
.not-content .title {font-size: 24px; font-weight: bold; color: #3f3f3f; margin-top: 30px;}
.not-content .memo {font-size: 14px; font-weight: bold; color: #5f5f60; border-top: 1px solid #e1e3e4; margin-top: 15px; padding-top: 15px;}
.not-content .btn-wrap {margin-top: 70px;}

.not-content2 {padding: 65px 20px; text-align: center; width: 100%; clear: both; float: none; box-sizing: border-box;}
.not-content2 img {display: inline-block;}
.not-content2 .title {font-size: 24px; font-weight: bold; color: #3f3f3f; margin-top: 30px;}
.not-content2 .memo {font-size: 14px; font-weight: bold; color: #5f5f60; border-top: 1px solid #e1e3e4; margin-top: 15px; padding-top: 15px;}
.not-content2 .btn-wrap {margin-top: 70px;}
/* --------------------------------------------------------- //Not Content ------------------------------------------------------------------ */



/* --------------------------------------------------------- 아코디언(accordion) ------------------------------------------------------------------ */
/* 기본옵션 */
dl.accordion {border-top: 1px solid #e1e3e4;}
dl.accordion dt {border-bottom: 1px solid #e1e3e4; padding: 10px 20px; background: #f2f2f2;}
dl.accordion dt a {display: block; font-size: 15px;}
dl.accordion dt a:hover {font-weight: 700;}
dl.accordion dd {
    color: #5f5f60; font-size: 14px; line-height: 20px; padding: 20px; border: 1px solid #e1e3e4; border-top: none; display: none;
}
/* --------------------------------------------------------- //아코디언(accordion) ------------------------------------------------------------------ */



/* --------------------------------------------------------- 사진효과(photo effect) ------------------------------------------------------------------ */
/* 기본옵션 */
img.del {opacity: 0.4;}
/* --------------------------------------------------------- //사진효과(photo effect) ------------------------------------------------------------------ */



/* --------------------------------------------------------- Browser ------------------------------------------------------------------ */
/* IE 하위 브라우저용 */
.not-browser {width: 600px; margin: auto; padding: 150px 20px; text-align: center;}
.not-browser img.icon {display: inline-block;}

.not-browser .warning {text-align: center;}
.not-browser .warning span {
    display: inline-block; width: 82px; height: 71px;
    background-image: url("../../images/res/other/error.png");
    background-repeat: no-repeat;
    background-position: center;
}

.not-browser .error-title {
    font-size: 24px; line-height: 34px; font-weight: bold; color: #3f3f3f; margin-top: 30px;
    border-bottom: 1px solid #e1e3e4; margin-bottom: 20px; padding-bottom: 20px;
}
.not-browser .error-title .sub {display: block; text-align: center; font-size: 18px; line-height: 28px; color: #5f5f60;}

.not-browser .error-text {
    font-size: 14px; line-height: 24px; font-weight: bold; color: #5f5f60;
    padding: 0 40px;
}
.not-browser .button {margin-top: 70px;}
.not-browser .button a {display: inline-block; background: #5f5f60; color: #fff; font-size: 14px; line-height: 35px; padding: 0 15px; font-weight: 700;}
.not-browser .button a:hover {background: #3f3f3f;}
/* --------------------------------------------------------- //Browser ------------------------------------------------------------------ */





/* --------------------------------------------------------- Section Area, Box Area ------------------------------------------------------------------ */
/* Background Color */
section[data-bg-color="gray"],
div[data-bg-color="gray"] {
    background: #f2f2f2;
}
/* --------------------------------------------------------- //Section Area, Box Area ------------------------------------------------------------------ */










/* container */
.box-wrap {background: #fff; border: 1px solid #e1e3e4; padding: 10px;}
.box-wrap2 {background: #fff; border: 1px solid #e1e3e4; padding: 10px; margin-top: 10px;}







/* 본문 설명 */
.type-info {
    font-size: 13px; line-height: 20px; color: #5f5f60; margin-top: 15px;
    background: url("../images/icon/info2.png") no-repeat left 2px; background-size: 14px 14px; padding-left: 18px;
}



/* 본문 경고 정보 */
.alert-info {font-size: 12px; font-weight: 700; line-height: 20px; color: #fe5b35; border: 1px solid #eff1f6; padding: 15px 20px;}







/* 메뉴바 (nav) */
.nav1-wrap {position: relative;}
.nav1-wrap .grd-hide {
    position: absolute; top: 0; right: 0; width: 10px; height: 40px; background: #fff; z-index: 2;
    -webkit-box-shadow: -4px 0px 2px #e5e5e5; box-shadow: -4px 0px 2px #e5e5e5;
}
.nav1 {
    background: #fff; border-bottom: 1px solid #e1e3e4; text-align: center; height: 40px;
    overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.nav1 ul {display: inline-block;}
.nav1 ul li {float: left; position: relative;}
.nav1 ul li.active a {font-weight: 700;}
.nav1 ul li.active::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #37a0d3;}
.nav1 ul li a {display: block; font-size: 0.875em; color: #3b3c3d; padding: 0 14px; line-height: 40px; white-space: nowrap; position: relative;}















/* jquery ui */
.date-wrap {position: relative; display: inline-block; width: 125px;}
.date-wrap .datepicker {width: 100%; min-width: auto; font-size: 13px;}
img.ui-icker-trigger {position: absolute; right: 6px; top: 0px; z-index: 9;}
img.ui-datepicker-trigger {position: absolute; right: 10px; top: 10px; top: calc(50% - 8px); z-index: 9;}
.inline.datepicker {margin-right: 0;}



/* error page */
.error-wrap {width: 500px; margin: auto; padding: 100px 20px; text-align: center;}
.error-wrap img.icon {display: inline-block;}
.error-wrap .error-msg {font-size: 24px; font-weight: bold; color: #3f3f3f; margin-top: 30px;}
.error-wrap .error-text {font-size: 14px; font-weight: bold; color: #5f5f60; border-top: 1px solid #e1e3e4; margin-top: 15px; padding-top: 15px;}
.error-wrap .button {margin-top: 70px;}
.error-wrap .button a {display: inline-block; background: #5f5f60; color: #fff; font-size: 14px; line-height: 35px; padding: 0 15px; font-weight: 700;}
.error-wrap .button a:hover {background: #3f3f3f;}



/* 이용약관 */
.comm-rule {font-size: 12px;}
.comm-rule dt {font-size: 13px; font-weight: bold; margin: 20px 0 5px 0;}
.comm-rule dt:first-child {margin-top: 0;}
.comm-rule dd {white-space: pre-line; line-height: 20px;}