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


/* 버튼 */
.btn-wrap {position: relative; margin-top: 30px; text-align: center;}
.btn-wrap:after { clear: both; display: block; content: ''; }
.btn-wrap .btn-right {float:right;}
.btn-wrap .btn-left {float:left;}
.btn-wrap .btn-center {display: inline-block; margin-bottom: 20px;}
.btn-wrap button {margin-right: 10px; border-radius: 5px;}
.btn-wrap button:last-child {margin-right:0;}
.btn-wrap button {border:0; background:#aeaeae; color:#fff; height: 35px;padding:0 15px; min-width: 100px; font-size: 1.3rem; font-weight: 400; -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.small-btn { height: 25px; padding: 0 15px; min-width: auto; font-size: 12px; }
.btn-wrap button.blue-btn {background:#005cd9;}
.btn-wrap button.blue-btn:hover {background:#0051C0;}
.btn-wrap button.dblue-btn {background:#001b58;}
.btn-wrap button.dblue-btn:hover {background:#011646;}
.btn-wrap button.dgray-btn {background:#041e38;}
.btn-wrap button.dgray-btn:hover {background:#000913;}
.btn-wrap button.green-btn {background:#499a0c;}
.btn-wrap button.green-btn:hover {background:#4B8321;}
.btn-wrap button.white-btn {background:#fff; border: 1px solid #ddd; color: #999;}
.btn-wrap button.white-btn:hover {background:#eee;}
.btn-wrap button.red-btn {background:#B52B2B; color: #fff;}
.btn-wrap button.red-btn:hover {background:#9C2525;}
.btn-wrap button.bd-blue-btn {background:#fff; border: 1px solid #005cd9; color: #005cd9;}
.btn-wrap button.excel-btn {background:#059646; border: 1px solid #059646; color: #fff;}
.btn-wrap button.excel-btn:hover {background:#177C44; border: 1px solid #177C44; }
.btn-wrap button.pdf-btn {background:#b71313; border: 1px solid #b71313; color: #fff;}
.btn-wrap button.pdf-btn:hover {background:#a41414; border: 1px solid #a41414; }

/* vertical table */
table.vertic-table {border-top:1px solid #777; margin-top: 10px; width: 100%;}
table.vertic-table tbody tr th { width:120px; background:#e4e4e4; padding:7px; text-align: center; font-size: 1.2rem; font-weight: 600; border-bottom: 1px solid #cecece; border-right: 1px solid #cecece; 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:7px 15px; font-size: 1.2rem; border-bottom: 1px solid #e5e5e5; word-break: keep-all; background: #fff;}
table.vertic-table tbody tr td a { color: #0084d2; }
table.vertic-table tbody tr td a:hover {text-decoration: underline;}

/* normal table */
table.normal-table {border-top:1px solid #777; margin-top: 10px; width: 100%; table-layout: fixed;}
table.normal-table thead tr th { padding:7px 15px; background:#e4e4e4; padding:5px; text-align: center; font-size: 1.2rem; font-weight: 600; border-bottom: 1px solid #cecece; border-right:1px solid #cecece; word-break: break-all;}
table.normal-table thead tr th.num {width: 50px;}
table.normal-table tbody tr td {padding:7px 15px; font-size: 1.2rem; border-bottom: 1px solid #e5e5e5; word-break: break-all; text-align: center; border-right:1px solid #e5e5e5; background: #fff;}
table.normal-table tbody tr td a { color: #0084d2; }
table.normal-table tbody tr td a:hover {text-decoration: underline;}
table.normal-table tbody tr td.txt-left {text-align: left;}
table.normal-table thead tr th:last-child,
table.normal-table tbody tr td:last-child {border-right:0;}

/* board table PC */
table.board-table {border-top:1px solid #777; width: 100%; table-layout: fixed;}
table.board-table thead tr th { padding:5px; text-align: center; font-size: 1.4rem; font-weight: 600; border-bottom: 1px solid #e5e5e5; height: 50px; word-break: break-all;}
table.board-table tbody tr:hover { background: #f8f8f8; }
table.board-table tbody tr td { padding:3px;font-size: 1.4rem; border-bottom: 1px solid #e5e5e5; height: 50px;word-break: break-all; text-align: center; word-break: keep-all; }
table.board-table tbody tr td.txt-left {text-align: left;}
table.board-table tbody tr td.ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
table.board-table tbody tr td a:hover {text-decoration: underline;}
table.board-table tbody tr td span.fixed { display: inline-block; font-size: 1.1rem; padding: 1px 10px; background: #333; border-radius: 3px; color: #fff; }

/* board table Mobile */
.board-table-mo {display: none;}
.board-table-mo {width: 100%; border-top: 1px solid #666;}
.board-table-mo .box {position: relative; width: 100%; padding: 15px 0; border-bottom: 1px solid #e5e5e5; }
.board-table-mo .box .title a {font-size: 1.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;}
.board-table-mo .box.fixed .title a { font-weight: 500;}
.board-table-mo .box.fixed .title a span {display: inline-block; font-size: 1.2rem; padding: 1px 10px; background: #333; border-radius: 3px; color: #fff; margin-right: 7px;}
.board-table-mo .box ul {margin-top: 7px;}
.board-table-mo .box ul li {float: left; padding-right: 15px; font-size:1.2rem; color:#999;}
.board-table-mo .box ul li:last-child {padding-right: 0;}
.board-table-mo .box ul li img { width: 10px; position: relative; top: 3px;}

/* board detail */
.board-detail { position: relative; }
.board-detail .head { padding:30px 0; border-top: 1px solid #333; border-bottom:1px solid #e5e5e5; }
.board-detail .head h3 {font-size: 2.5rem; font-weight: 500; margin-bottom: 15px;}
.board-detail .head ul li {display: inline-block; font-size: 1.4rem; margin-right: 15px; color: #333}
.board-detail .head ul li span {font-weight: 500; display: inline-block; margin-right: 5px}
.board-detail .text {padding: 30px 0; font-size: 1.4rem; border-bottom: 1px solid #e5e5e5}
.board-detail .text img {max-width: 100%;}
.board-detail .file { background: #f2f2f2; border-bottom: 1px solid #e5e5e5; padding:10px;}
.board-detail .file span {font-weight: 600; display: inline-block; padding-right: 50px;}
.board-detail .file a:hover {text-decoration: underline;}

/* 인풋 텍스트 */
input[type="text"].text-input { display: block; width: 250px; border: none; border-bottom: 1px solid #afafaf; height: 40px; outline: 0; -webkit-transition: background .5s; -o-transition: background .5s; transition: background .5s; letter-spacing: 0; font-size: 13px; padding: 0 10px; -webkit-transition: border-color .5s ease,background .5s ease; -o-transition: border-color .5s ease,background .5s ease; transition: border-color .5s ease,background .5s ease; background: #f8f8f8;}
input[type="text"].text-input:focus,
input[type="text"].text-input:focus { border-bottom: 1px solid #005cd9; }
input[type="text"].text-input:active,
input[type="text"].text-input:active { border-bottom: 1px solid #005cd9; }
input[type="text"].text-input.edit-input {height: 30px;}
input[type="text"].text-input.s-width { width:100px;}
input[type="text"].text-input.m-width { width:50%;}
input[type="text"].text-input.l-width { width:100%;}
input[type="text"]:hover { background: #efefef; }

/* 인풋 패스워드 */
input[type="password"].text-input { display: block; width: 250px; border: none; border-bottom: 1px solid #afafaf; height: 40px; outline: 0; -webkit-transition: background .5s; -o-transition: background .5s; transition: background .5s; letter-spacing: 0; font-size: 15px; padding: 0 5px; -webkit-transition: border-color .5s ease,background .5s ease; -o-transition: border-color .5s ease,background .5s ease; transition: border-color .5s ease,background .5s ease; background: #f8f8f8;}
input[type="password"].text-input:focus,
input[type="password"].text-input:focus { border-bottom: 1px solid #005cd9; }
input[type="password"].text-input:active,
input[type="password"].text-input:active { border-bottom: 1px solid #005cd9; }
input[type="password"].text-input.s-width { width:100px;}
input[type="password"].text-input.l-width { width:100%;}
input[type="password"]:hover { background: #efefef; }

/* 검색 (셀렉트+인풋+검색버튼) */
.search-wrap { float: left;}
.search-wrap:after {clear: both; content: ''; display: block;}
.search-wrap .input-box {float: left;}
.search-wrap .input-box input[type="text"].text-input {background: #fff; border: 1px solid #cacaca;}
.search-wrap .input-box input[type="text"].text-input:hover {border-color: #a8a8a8;}
.search-wrap .btn-box {float: left; margin-top: 0;}
.search-wrap .btn-box button {height: 40px;}

/* 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: auto; position: relative; padding: 0 15px 0 35px; font-size: 1.2rem; line-height: 31px; vertical-align: middle; background-color: #fff; cursor: pointer; border: 1px solid #bdbdbd; border-radius: 4px; font-weight: 500; }
.file-input:hover {box-shadow: 1px 1px 3px rgba(0,0,0,0.1);}
.file-input input[type='file'] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 301; cursor: pointer; }
.file-input .label { color: #999; white-space: nowrap; opacity: 1; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block;}
.file-input .label img {width: 14px; height: 16px; position: absolute; top: 8px; left: 10px; }
.file-input.file-added {background: #f2f2f2; border-color: #e5e5e5; cursor: unset; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 250px;}
.file-input.file-added:hover {box-shadow: none;}
.file-input.file-added .added {color: #999; white-space: nowrap; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block;}
.file-input.file-added .added img {width: 17px; position: absolute; top: 7px; left: 10px; }
.file-input.file-added.download { cursor: pointer; background: #fff; border:1px solid #bdbdbd; color: #999; margin: 1.5px 0;}
.file-input.file-added.download:hover {box-shadow: 1px 1px 3px rgba(0,0,0,0.1);}
.file-set {display: inline-block; position: relative; top: 5px; margin-left: 5px;}
.file-set span img {width: 15px; height: 15px; cursor: pointer; margin-left: 5px; opacity: .8}
.file-set span img:hover {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: 30px; line-height: 28px; width:30px; 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:#333; color:#fff; border-bottom-color: #333;}
.paging ul li a {display: block; width: 100%; height: 100%; border:1px solid #e5e5e5;}
.paging ul li img { height: 9px; margin-top: 9px;}
.paging ul li.rotate img { transform: rotate(180deg);}

/* 인풋 라디오 커스텀 */
input[type=radio]:not(old) { margin:0; padding:0; opacity:0; background:url("../../img/common/radio_box_off.png") no-repeat 0 3px; width:0; } 
input[type=checkbox]:not(old) { margin:0; padding:0; opacity:0; background:url("../../img/common/check_box_off.png") no-repeat 0 3px; 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 3px;  position: relative; top:0; 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 3px; position: relative; top:0; margin-right: 10px;}
input[type=radio]:not(old):checked + label { background: url("../../img/common/radio_box_on.png") no-repeat 0 3px; 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 3px; position: relative; top:0; margin-right: 10px;}


/* 토글 css */
.normal-toggle-btn { display: inline-block; height: 28px; }
.normal-toggle-btn input[type=checkbox] { display: none; }
.normal-toggle-btn .toggle-label { letter-spacing: -0.5px; color: #999; font-size: 11px; padding-left: 35px; position: relative; height: 28px; line-height: 28px; transition: color 0.3s ease; background: none;}
.normal-toggle-btn .toggle-label:before { position: absolute; content:''; background: #dcdcdc; width: 30px; height: 6px; left: 0; top: 50%; margin-top: -3px; border-radius: 3px; z-index: 1; }
.normal-toggle-btn .toggle-label:after { position: absolute; content:''; width: 12px; height: 12px; border-radius: 50%; left: 0; top: 50%; margin-top: -6px; z-index: 2; transition: left 0.3s ease,background 0.3s ease; background: #8A8A8A; }
.normal-toggle-btn input[type=checkbox]:checked + .toggle-label { color: #5496ff; font-weight: 600; background: none;}
.normal-toggle-btn input[type=checkbox]:checked + .toggle-label:after { left: 18px; background: #5496ff; }

/* 셀렉트박스 */
.select-box {width: 130px; height:40px; position: relative; display: inline-block; float: left;}
.select-box select {border:1px solid #cacaca; border-radius: 0; border-right: 0; width: 100%; height: 100%; padding: 0 10px; padding-right: 20px; font-size: 1.3rem;background: url(../../img/common/select_arrow.png) 93%; background-repeat: no-repeat; background-size: 8px 5px; padding-right: 40px;}
.select-box select:hover {border-color: #a8a8a8;}

/* 검색 (셀렉트+인풋+검색버튼) */
.search-wrap {margin-bottom: 30px; float: right;}
.search-wrap:after {clear: both; content: ''; display: block;}
.search-wrap .input-box {float: left;}
.search-wrap .input-box input[type="text"].text-input {background: #fff; border: 1px solid #cacaca;}
.search-wrap .input-box input[type="text"].text-input:hover {border-color: #a8a8a8;}
.search-wrap .btn-wrap {float: left; margin-top: 0;}
.search-wrap .btn-wrap button {height: 40px; border-radius: 0;}