@charset "utf-8";
@import url('NotoSansKR.css');
@import url('Roboto.css');
@import url('fontawesome.css');
@import url('common_v3.css');


div.wrapper {position: relative;min-width: 1800px;}


/* 버튼 */
a,
input[type=submit],
input[type=button],
input[type=reset],
button {display:inline-block;vertical-align: top;border:0 none;cursor:pointer;text-decoration: none;outline:none;font-family: 'NotoSansKR Regular', sans-serif;box-sizing:border-box;color: inherit;}

.btn a,
.btn > span,
.btn input,
.btn button {position: relative;display:inline-block;text-decoration:none;cursor:pointer;height:35px;padding:0 15px 2px;font-size:14px;border-style:solid;border-width:1px;vertical-align:top;}

.btn a, .btn > span {height:auto;line-height: 19px;padding: 7px 15px;}

.btnSmall {height: 20px;padding: 0 10px;border-width: 1px;border-style: solid;font-size: 12px;text-align: center;border-radius: 3px;}
a.btnSmall  {height: auto;line-height: 17px;padding: 1px 10px 2px;}


.btn .btnBig {min-width: 200px;height: 50px;padding: 0 30px;font-size: 17px;text-align: center;font-family: 'NotoSansKR Medium', sans-serif;}
.btn a.btnBig  {height: auto;line-height: 48px;}

.btnArea {padding-top: 50px;text-align: center;font-size: 0;line-height: 0;}
.btnArea > * {margin-left: 8px;}
.btnArea > *:first-child {margin-left: 0;}

/* 회색 */						.btn .btnGrey {background-color:#494c4e !important;border-color:#494c4e !important;color:#fff !important;}
/* border + 회색 */			.btn .btnBdGrey {background-color:#fff !important;border-color:#494c4e !important;color:#494c4e !important;}

/* 기본 버튼*/
.btn .btnDef {color: #fff;}
div#resident .btnDef {background-color: #008f88;border-color: #008f88;}
div#supervisor .btnDef {background-color: #317fb6;border-color: #317fb6;}
div#chief .btnDef {background-color: #0d3a6c;border-color: #0d3a6c;}
div#admin .btnDef {background-color: #333c4f;border-color: #333c4f;}


/* 기본 버튼 + border*/
.btn .btnBdDef {background-color: #fff;}
div#resident .btnBdDef {color: #008f88;border-color: #008f88;}
div#supervisor .btnBdDef {color: #317fb6;border-color: #317fb6;}
div#chief .btnBdDef {color: #0d3a6c;border-color: #0d3a6c;}
div#admin .btnBdDef {color: #333c4f;border-color: #333c4f;}


.btnBlack {background-color: #3e3e3e;border-color: #3e3e3e;color: #fff;}
.btnGreen {background-color: #008f88;border-color: #008f88;color: #fff;}
.btnOrg {background-color: #ff6c14;border-color: #ff6c14;color: #fff;}
.btnRed {background-color: #dd3747;border-color: #dd3747;color: #fff;}
.btnBlue {background-color: #2850b6;border-color: #2850b6;color: #fff;}

.btnBdBlack {background-color: #fff;border-color: #3e3e3e;color: #3e3e3e;}
.btnBdRed {background-color: #fff;border-color: #dd3747;color: #dd3747;}
.btnBdBlue {background-color: #fff;border-color: #2850b6;color: #2850b6;}


.btn .excel {border-color: #006631;background-color: #006631;color: #fff;}
.btn .excel img {display: inline-block;vertical-align: top;}


/* table */
table, thead, tbody, tfoot, tr, th, td {margin:0;padding:0;border:0 none;}

table {width:100%; border:0; border-collapse:separate; border-spacing:0;}
.ie7 table {border-collapse:collapse;}
th, td {font-weight:normal;word-break:normal;background-color: #fff;}

table.ac > * > tr > * {text-align: center !important;}


div#headerWrap {position: relative;height: 48px;padding-top: 90px;}
div#headerWrap:after {position: absolute;left: 0;bottom: 0;width: 100%;height: 48px;content: "";}
div#resident div#headerWrap:after {background-color: #008f88;}
div#supervisor div#headerWrap:after {background-color: #317fb6;}
div#chief div#headerWrap:after {background-color: #0d3a6c;}
div#admin div#headerWrap:after {background-color: #333c4f;}

div#headerWrap h1 {position: absolute;left: 50px;top: 20px;margin: 0;}
div#headerWrap h1 a {display: block;font-size: 26px;line-height: 49px;font-weight: normal;font-family: 'NotoSansKR Medium', sans-serif;text-decoration: none;}
div#resident div#headerWrap h1 a {color: #008f88;}
div#supervisor div#headerWrap h1 a {color: #317fb6;}
div#chief div#headerWrap h1 a {color: #0d3a6c;}
div#admin div#headerWrap h1 a {color: #333c4f;}

div#headerWrap h1 img {display: inline-block;vertical-align: top;padding-right: 30px;}


ul.headerUtil, ul.headerUtil li, ul.headerUtil a {margin: 0;padding: 0;list-style:none;text-decoration: none;}
ul.headerUtil {position: absolute;right: 50px;top: 35px;}
ul.headerUtil li {position: relative;display: inline-block;vertical-align: top;padding-left: 20px;}
ul.headerUtil li:before {position: absolute;left: 9px;top: 50%;width: 2px;height: 2px;margin-top: -1px;content: "";background-color: #5b5b5b;}
ul.headerUtil li:first-child {padding-left: 0;}
ul.headerUtil li:first-child:before {display: none;}

ul.headerUtil a {font-size: 14px;line-height: 20px;color: #5b5b5b;font-family: 'NotoSansKR Medium', sans-serif;}
ul.headerUtil li:last-child a {color: #008f88;}


ul#gnb, ul#gnb ul, ul#gnb li, ul#gnb a {margin: 0;padding: 0;list-style:none;text-decoration: none;}
ul#gnb {z-index: 10;position: relative;width: calc(100% - 100px);margin: 0 auto;text-align: center;font-size: 0;line-height: 0;}
ul#gnb li {display: inline-block;vertical-align: top;border-left: 1px solid rgba(255,255,255,.3);}
ul#gnb li:first-child {border-left: 0 none;}
ul#gnb a {display: table-cell;width: 700px;height: 48px;vertical-align: middle;text-align: center;color: #fff;font-size: 16px;line-height: 18px;font-family: 'NotoSansKR Regular', sans-serif;}
ul#gnb .on a {background-color: rgba(0,0,0,.2);}


div#container {position: relative;padding: 30px 50px 50px;box-sizing:border-box;}
div#container:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}

ul.lnb, ul.lnb li, ul.lnb a {margin: 0;padding: 0;list-style:none;text-decoration: none;}
ul.lnb {margin-bottom: 30px;text-align: center;font-size: 0;line-height: 0;}
ul.lnb li {display: inline-block;vertical-align: top;}
ul.lnb a {display: table-cell;width: 350px;height: 50px;text-align: center;vertical-align: middle;border-left: 1px solid #c4c4c4;color: #737373;font-size: 17px;line-height: 20px;background-color: #eaeaea;}
ul.lnb li:first-child a {border-left: 0 none;}

ul.lnb .on a {color: #fff;}
div#resident ul.lnb .on a {background-color: #2384b6;border-color: #2384b6;}
div#supervisor ul.lnb .on a {background-color: #174090;border-color: #174090;}
div#chief ul.lnb .on a {background-color: #6652a0;border-color: #6652a0;}
div#admin ul.lnb .on a {background-color: #56678d;border-color: #56678d;}


ul.subMenu, ul.subMenu li, ul.subMenu a {margin: 0;padding: 0;list-style:none;text-decoration: none;}
ul.subMenu {background-color: #eaeaea;}
ul.subMenu:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}

ul.subMenu > li {float: left;border-left: 1px solid #c4c4c4;box-sizing:border-box;}
ul.subMenu li:first-child {border-left: 0 none;}
ul.subMenu a {display: table-cell;width: 700px;height: 48px;vertical-align: middle;text-align: center;color: #737373;font-size: 16px;line-height: 18px;font-family: 'NotoSansKR Regular', sans-serif;}
ul.subMenu .on a {color: #fff;}
div#resident ul.subMenu .on a {background-color: #2384b6;border-color: #2384b6;}
div#supervisor ul.subMenu .on a {background-color: #174090;border-color: #174090;}
div#chief ul.subMenu .on a {background-color: #6652a0;border-color: #6652a0;}
div#admin ul.subMenu .on a {background-color: #56678d;border-color: #56678d;}

ul.menu, ul.menu li, ul.menu a {margin: 0;padding: 0;list-style:none;text-decoration: none;}
ul.menu {}
ul.menu:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
ul.menu > li {position: relative;float: left;padding-left: 30px;}
ul.menu > li:before {position: absolute;left: 15px;top: 50%;transform:translateY(-50%);content: "";width: 1px;height: 12px;background-color: #d2d2d2;}
ul.menu > li:first-child {padding-left: 0;}
ul.menu > li:first-child:before {display: none;}

ul.menu a {position: relative;display: block;padding: 0 5px;color: #6e6e6e;font-size: 17px;line-height: 20px;font-family: 'NotoSansKR Regular', sans-serif;}
div#resident ul.menu .on a {color: #2384b6;}
div#supervisor ul.menu .on a {color: #174090;}
div#chief ul.menu .on a {color: #6652a0;}
div#admin ul.menu .on a {color: #56678d;}

ul.menu .on a:after {position: absolute;left: 0;bottom: 0;width: 100%;height: 10px;opacity: .1;content: "";}
div#resident ul.menu .on a:after  {background-color: #2384b6;}
div#supervisor ul.menu .on a:after  {background-color: #174090;}
div#chief ul.menu .on a:after  {background-color: #6652a0;}
div#admin ul.menu .on a:after  {background-color: #56678d;}

ul.col4ea > li {width: 25%;}


p#goTop {z-index: 50;position: absolute;right: 70px;top: 560px;width:45px;}
p#goTop a {display: block;width: 45px;height: 45px;border-radius: 50%;font-size: 0;line-height: 0;background: url('../image/goTop.png') center center no-repeat;box-shadow:0 3px 7px rgba(0,0,0,.35);}
div#resident p#goTop a {background-color: #008f88;}
div#supervisor p#goTop a {background-color: #317fb6;}
div#chief p#goTop a {background-color: #0d3a6c;}
div#admin p#goTop a {background-color: #333c4f;}

div#footerWrap {padding: 40px 0;background-color: #393c43;}
div#footerWrap dl, div#footerWrap dt, div#footerWrap dd, div#footerWrap p, div#footerWrap ul, div#footerWrap li, div#footerWrap address, div#footerWrap a {margin: 0;padding: 0;list-style:none;text-decoration: none;font-style: normal;}
div#footerWrap, div#footerWrap a {font-size: 15px;line-height: 20px;font-family: 'NotoSansKR Regular', sans-serif;}

div#footerWrap dl {position: relative;margin: 0 auto;width: 1320px;padding-left: 230px;box-sizing:border-box;}
div#footerWrap dt {position: absolute;left: 0;top: 50%;transform:translateY(-50%);}
div#footerWrap dt img {display: block;}
div#footerWrap dd,
div#footerWrap dd a {color: #8c8f97;letter-spacing:-1px;}
div#footerWrap ul {overflow: hidden;}
div#footerWrap li {position: relative;float: left;padding-left: 28px;}
div#footerWrap li:before {position: absolute;left: 14px;top: 50%;transform:translateY(-50%);width: 2px;height: 11px;content: "";background-color: #8c8f97;}
div#footerWrap li:first-child {padding-left: 0;}
div#footerWrap li:first-child:before {display: none;}

div#footerWrap ul.footerMenu li,
div#footerWrap ul.footerMenu a {color: #fff;font-family: 'NotoSansKR Medium', sans-serif;}
div#footerWrap ul.footerMenu li:before {background-color: #fff;}


div.layerPopup {z-index: 100;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.5);}
div.layerPopup > div.popupWrap {position: absolute;left: 50%;top: 50%;transform:translate(-50%, -50%);}
div.popupWrap {background-color: #fff;font-family: 'NotoSansKR Regular', sans-serif;}
div.popupWrap div.close {}
div.popupWrap div.close a.close {display: block;width: 140px;height: 40px;margin: 0 auto;text-decoration: none;color: #fff;font-size: 15px;line-height: 40px;background-color: #414141;font-family: 'NotoSansKR Medium', sans-serif;text-align: center;}


/* 관리자 팝업 > 기록보기 */
div.popupRecord {position: relative;width: 1400px;height: 750px;background-color: #fff;box-sizing:border-box;}
div.popupRecord div.popupCon {overflow-x: hidden;overflow-y: auto;height: 750px;padding: 30px;box-sizing:border-box;}
div.popupRecord div.popupCon::-webkit-scrollbar {width: 8px;height: 8px;background-color: #d5d5d5;}
div.popupRecord div.popupCon::-webkit-scrollbar-thumb {background-color: #666;}

div.popupRecord h1 {display: none;}
div.popupRecord div.close {position: absolute;}

div.popupRecord ul.subMenu {margin: 30px 0 20px;}
div.popupRecord ul.menu {margin-bottom: 30px;}

div.viewArea {position: relative;padding-left: 500px;}
div.viewArea:before {position: absolute;left: 0;top: 0;width: 470px;height: 100%;content: "";background-color: #f9f9f9;}

div.viewArea div.aside {position: absolute;left: 30px;top: 30px;width: 410px;padding: 0;}

div.viewArea div.scrollArea {overflow-x: hidden;overflow-y: auto;height: 371px;margin-top: 10px;}

div.scrollArea::-webkit-scrollbar {width: 8px;height: 8px;background-color: #d5d5d5;}
div.scrollArea::-webkit-scrollbar-thumb {background-color: #666;}

div.viewArea ul.pager {padding-bottom: 0;}


div.SearchArea {position: relative;width:99%;}
div.SearchArea div.aside {position: absolute;left: 10px;top: 10px;width: 310px;padding: 0;}
div.SearchArea div.scrollArea {overflow-x: hidden;overflow-y: auto;height: 371px;margin-top: 10px;}
div.SearchArea ul.pager {padding-bottom: 0;}


div.popupRecord div.upload {margin: 0;}

/* ========================================================================================================== */
/* =================================================== 서브레이아웃 ================================================= */
/* ========================================================================================================== */

div.contents {font-size: 16px;line-height: 25px;color: #444;font-family: 'NotoSansKR Regular', sans-serif;}

strong {font-family: 'NotoSansKR Bold', sans-serif !important;}

.infoArea, .bdArea {border-width: 1px;border-style: solid;padding: 20px 40px;}
.infoArea:after, .bdArea:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
div#resident .infoArea, div#resident .bdArea {background-color: #f2f9fa;border-color: #d7f3f7;}
div#supervisor .infoArea, div#supervisor .bdArea {background-color: #f5f8fa;border-color: #e6f1f8;}
div#chief .infoArea, div#chief .bdArea {background-color: #f7f6ff;border-color: #d4d0f4;}
div#admin .infoArea, div#admin .bdArea {background-color: #f8f8f8;border-color: #eaeaea;}

.infoArea table {}
.infoArea th, .infoArea td,
.bdArea th, .bdArea td {color: #222 !important;}
div#resident .infoArea table, div#resident .infoArea th, div#resident .infoArea td,
div#resident .bdArea table, div#resident .bdArea th, div#resident .bdArea td {border-color: #aac6cb;}
div#resident .infoArea th,
div#resident .bdArea th {background-color: #d8ebee;}

div#supervisor .infoArea table, div#supervisor .infoArea th, div#supervisor .infoArea td,
div#supervisor .bdArea table, div#supervisor .bdArea th, div#supervisor .bdArea td {border-color: #aac6cb;}
div#supervisor .infoArea th,
div#supervisor .bdArea th {background-color: #deeef9;}

div#chief .infoArea table, div#chief .infoArea th, div#chief .infoArea td,
div#chief .bdArea table, div#chief .bdArea th, div#chief .bdArea td {border-color: #a8a5bc;}
div#chief .infoArea th,
div#chief .bdArea th {background-color: #e2e0f0;}

div#admin .infoArea table, div#admin .infoArea th, div#admin .infoArea td,
div#admin .bdArea table, div#admin .bdArea th, div#admin .bdArea td {border-color: #afafaf;}
div#admin .infoArea th,
div#admin .bdArea th {background-color: #e7e7e7;}


ul.noBl, ul.noBl > li {margin: 0;padding: 0;list-style:none;}

ul.listBar, ul.listBar > li {margin: 0;padding: 0;list-style:none;}
ul.listBar > li {position: relative;padding-left: 15px;}
ul.listBar > li:before {position: absolute;left: 0;top: 0;content: "-";}

ul.listStar, ul.listStar > li {margin: 0;padding: 0;list-style:none;}
ul.listStar > li {position: relative;padding-left: 15px;}
ul.listStar > li:before {position: absolute;left: 0;top: 0;content: "*";}


/* 등록 */
div.upload {margin: 20px 0 55px;}
div.upload div.btnArea {padding-top: 30px;}


input[type='text'],
input[type='password'],
input[type='file'],
select,
textarea {width: 100%;height: 35px;font-family: 'NotoSansKR Regular', sans-serif;outline:none;}

input[type='radio'],
input[type='checkbox'] {display: inline-block;vertical-align: top;margin: 11px 10px 0 0;}

table.inputTbl label,
table.inputTbl span {display: inline-block;vertical-align: top;line-height: 35px;}

table {border-top-width: 2px;border-top-style: solid;}
div#resident table {border-top-color: #008f88;}
div#supervisor table {border-top-color: #317fb6;}
div#chief table {border-top-color: #0d3a6c;}
div#admin table {border-top-color: #333c4f;}


table th,
table td {padding: 5px;border-left: 1px solid #d1dcdb;border-bottom: 1px solid #d1dcdb;text-align: center;color: #444;font-size: 16px;line-height: 25px;font-family: 'NotoSansKR Regular', sans-serif;}
table th:first-child,
table td:first-child {border-left: 0 none;}

table .bdLeft {border-left: 1px solid #d1dcdb !important;}

div#resident table th {color: #008f88;background-color: #e9f5f4;}
div#supervisor table th {color: #317fb6;background-color: #f1f9ff;}
div#chief table th {color: #0d3a6c;background-color: #e7edf4;}
div#admin table th {color: #333c4f;background-color: #f7f7f8;}


/* Form */
table.inputTbl > * > tr > td {text-align: left;}

.essen:before {display: none;}
.essen:after {display: inline-block;vertical-align: top;padding-left: 5px;color: #f00;content: "*";}

div.formArea .plugArea {padding: 0;}

div.formArea .note {color: #e91919;font-family: 'NotoSansKR Regular', sans-serif;}

div.agreeCon {margin-top: 30px;border: 2px solid #ddd;padding: 20px;text-align: center;background-color: #f8f8f8;}
div.agree {padding: 10px 0 50px;text-align: center;}
div.agree input[type=checkbox] {margin: 5px 5px 0 0;}

select.wide,
input.wide {width: 100% !important;}
select,
textarea,
input[type=text] {font-family: 'NotoSansKR Medium', sans-serif;color: #393939;}

div.formArea span.label {display: inline-block;vertical-align: top;line-height: 40px;}


table.inputTbl .multi > *,
div.formArea .name > *,
div.formArea .dayInfo > *,
div.formArea .phone > *,
div.formArea .birth > * {float: left;margin: 0;}
table.inputTbl .multi > * {margin-left: 5px;}
table.inputTbl .multi > *:first-child {margin-left: 0;}


div.formArea .multi label,
div.formArea .multi span {line-height: 35px;}
div.formArea .multi input[type=radio],
div.formArea .multi input[type=checkbox] {margin: 9px 5px 0 40px;}

div.formArea .multi > *:first-child,
div.formArea .multi .clear {margin-left: 0 !important;}

div.formArea .withBtn {}
div.formArea .withBtn:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
div.formArea .withBtn > *  {float: left;}
div.formArea .withBtn input[type=text] {max-width: calc(100% - 115px) !important;height: 40px;}
div.formArea .withBtn a {width: 115px;padding: 8px 0;color: #fff;background-color: #393939;text-align: center;font-size: 15px;line-height: 24px;font-family: 'NotoSansKR Regular', sans-serif;}
div.formArea .withBtn + div.note {line-height: 40px;}

div.formArea .birth {}
div.formArea .birth > * {float: left;}
div.formArea .birth select {width: calc(35% - 5px);margin-left: 5px;}
div.formArea .birth select:first-child {width: 30%;margin-left: 0;}


div.formArea .address {}
div.formArea .address:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
div.formArea .address > * {float: left;}
div.formArea .address > *:first-child,
div.formArea .address > *.clear {margin-left: 0;}
div.formArea .address input[type=text] {width: 570px;margin: 5px 0 0 5px;box-sizing:border-box;}
div.formArea .address input[type=text]:first-child {width: 120px;margin-top: 0;}
div.formArea .address input[type=text].clear {width: calc(100% - 580px);}
div.formArea .address a {width: 115px;padding: 5px 0;color: #fff;background-color: #393939;text-align: center;font-size: 14px;line-height: 25px;font-family: 'NotoSansKR Regular', sans-serif;}
div.formArea .address span.note {clear: both;line-height: 25px;}

div.formArea .phone {}
div.formArea .phone:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
div.formArea .phone > * {float: left;	}
div.formArea .phone input[type=text] {width: calc(50% - 90px);max-width:150px;}
div.formArea .phone > select {width: 120px;}
div.formArea .phone span {width: 30px;text-align: center;}

div.formArea .email {}
div.formArea .email:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
div.formArea .email > * {float: left;}
div.formArea .email input[type=text] {width: calc(50% - 115px);}
div.formArea .email select {width: 200px;}
div.formArea .email input[type=text] + span {width: 25px;text-align: center;}
div.formArea .email select {margin-left: 5px;}

div.formArea .date {}
div.formArea .date input[type=text] {width: 150px;padding-right: 30px;}
div.formArea .date input[type=image] {margin-left: -35px;}

ul.dateInfo, ul.dateInfo > li {margin: 0;padding: 0;list-style:none;}
ul.dateInfo > li {border-top: 1px solid #cdcdcd;padding: 5px;}
ul.dateInfo > li:first-child {border-top: 0 none;}
ul.dateInfo > li > * {float: left;}
ul.dateInfo > li:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
ul.dateInfo > li span {width: 30px;line-height: 40px;text-align: center;}


ul.option_multi, ul.option_multi li {margin: 0;padding: 0;list-style:none;}
ul.option_multi {}
ul.option_multi:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
ul.option_multi > li {float: left;margin-left: 20px;}

table.inputTbl td > ul.option_multi {margin-left: -20px !important;}

div.formArea ul.dateInfo input[type=text] {width: 150px;}
div.formArea ul.dateInfo input[type=text].txt {width: calc(100% - 335px);margin-left: 5px;}

/* 사진선택 */
div.photo {}
div.photo > span {}
div.photo span.thumb {display: block;width: 120px;height: 140px;margin: 0 auto 10px;border: 1px solid #ccc;background-color: #fff;}
div.photo input[type=text] {display: inline-block;vertical-align: top;width: calc(100% - 44px) !important;}
div.photo span.search {position: relative;display: inline-block;vertical-align: top;width:35px;height:35px;background-color:#393939;color:#fff;text-align: center;}
div.photo span.search i {position: absolute;left: 50%;top: 50%;font-size: 20px;transform:translate(-50%, -50%);}
div.photo span.search .opacity0 {position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 0 none;padding: 0;opacity: 0;}


/* 파일선택  */
div.selectFile {position: relative;padding-right: 75px;}
div.selectFile span {display: block;}
div.selectFile input[type=text] {width: 100% !important;height:35px;}

div.selectFile span.search {position: absolute;right: 0;top: 0;width:66px;height:35px;background-color:#393939;background-image: none;font-size:14px;line-height:35px;color:#fff;text-align: center;}
div.selectFile .opacity0 {z-index: 10;position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 0 none;padding: 0;opacity: 0;cursor:pointer;}

/* 파일 선택 버튼 */
span.selectFile {position: relative;display: inline-block;vertical-align: top;width: 100px;background-color:#393939;font-size:14px;line-height:35px;color:#fff;font-family: 'NotoSansKR Regular', sans-serif;text-align: center;}
span.selectFile input[type=file] {position: absolute;left: 0;top: 0;width: 100%;height: 100%;padding: 0;border: 0 none;opacity: 0;}

/* 키워드 등록, 검색 */
div.withBtn {position: relative;padding-right: 110px;}
div.withBtn input[type=text] {width: 100%;}
div.withBtn a {position: absolute;right: 0;top: 0;width: 100px;height: 100%;text-decoration: none;color: #fff;font-size: 15px;line-height: 35px;background-color: #414141;font-family: 'NotoSansKR Regular', sans-serif;text-align: center;}

div.uploadItem {padding-top: 5px;}
div.uploadItem span {position: relative;display: inline-block;vertical-align: top;border-radius: 5px;padding: 0 45px 4px 20px;color: #fff;font-size: 15px;line-height: 22px;background-color: #293c5a;}
div.uploadItem span + span {margin-left: 4px;}
div.uploadItem span a {position: absolute;right: 10px;top: 50%;transform:translateY(-50%);}

/* 기간 */
table.inputTbl .term > * {float: left;}
table.inputTbl .term input[type=text] {width: calc(50% - 15px);}
table.inputTbl .term span {width: 30px;text-align: center;}

/* 캘린더로 입력 */
table.inputTbl .date > * {float: left;margin-left: 5px;}
table.inputTbl .date > *:first-child {margin-left: 0;}
table.inputTbl .date label,
table.inputTbl .date span {width: auto;line-height: 40px;}
table.inputTbl .date select {width: 80px;}
table.inputTbl .date select:first-child {width: 120px;}

table.inputTbl .date input[type=text] {width: 120px;padding-right: 30px;}
table.inputTbl .date input[type=image] {width: 16px;margin: 12px 0 0 -25px;}


/* 년도와 시간 */
table.inputTbl .period:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
table.inputTbl .period > *,
table.inputTbl .period > .clear > *,
table.inputTbl .period span > * {float: left;margin-left: 10px;}
table.inputTbl .period *:first-child,
table.inputTbl .period > .clear,
table.inputTbl .period > .clear >*:first-child {margin-left: 0;}
table.inputTbl .period input[type=radio], table.inputTbl td.period input[type=checkbox] {margin: 11px 0 0 20px;}
table.inputTbl .period input[type=text] {width: 100px;}
table.inputTbl .period label,
table.inputTbl .period span {line-height: 40px;}
table.inputTbl .period span {margin-left: 0;text-align: center;}
table.inputTbl .period select + span {min-width: 30px;}
table.inputTbl .period span > span:first-child {padding-left: 10px;}
table.inputTbl .period span + * {margin-left: 0;}
table.inputTbl .period input[type=text]:first-child,
table.inputTbl .period span + input[type=text] {width: 200px;}
table.inputTbl .period span + input[type=text] {margin-left: 10px;}

table.inputTbl .period select {width: 120px;min-width:120px;}


ul.uploadType, ul.uploadType li {margin: 0;padding: 0;list-style:none;}
ul.uploadType {width: 215px;margin-bottom: 10px;border: 1px solid #b1b1b1;text-align: center;font-size: 0;line-height: 0;background-color: #f4f4f4;}
ul.uploadType li,
ul.uploadType input,
ul.uploadType label {display: inline-block;vertical-align: top;}
ul.uploadType li {padding-left: 20px;}
ul.uploadType li:first-child {padding-left: 0;}
ul.uploadType label {font-size: 14px;line-height: 35px;color: #222;}


.noData {padding: 100px 0;text-align: center;color: #008f88;font-size: 34px;line-height: 40px;font-family: 'NotoSansKR Medium', sans-serif;}
.noData img {display: block;margin: 0 auto;}


/* 리스트 테이블 */
table.listTbl th, table.listTbl td,
table.result th, table.result td {font-size: .9em;}

table.result > tbody > tr > th {background-color: #fff !important;color: #444 !important;}

div.resultBrief {padding-bottom: 10px;}
div.resultBrief:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}

ul.sort, ul.sort > li {margin: 0;padding: 0;list-style:none;}
ul.sort {margin-bottom: 10px;}
ul.sort:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
ul.sort > li {float: left;margin-left: 5px;}
ul.sort > li:first-child {margin-left: 0;}
ul.sort a {display: block;min-width: 80px;height: 30px;padding: 0 20px;border: 1px solid #273a5f;color: #273a5f;background-color: #fff;font-size: 14px;line-height: 27px;box-sizing:border-box;text-align: center;}
ul.sort .on a {color: #fff;background-color: #273a5f;}

div.brief {float: left;line-height: 30px;}

div.resultBrief div.btn {float: right;}
div.resultBrief div.btn a {font-size: 14px;line-height: 14px;}
div.resultBrief .excel {width: 110px;padding: 6px 0 8px;height: 30px;text-align: center;}
div.resultBrief .excel img {padding-right: 5px;}

span.checkNote {display: block !important;line-height: 1.2 !important;}


/* 페이징 */
ul.pager {clear: both;margin: 0;padding:30px 0;text-align:center;}
ul.pager li {display:inline-block;vertical-align: top;list-style:none;}
ul.pager li {margin-left:2px;}
ul.pager li:first-child {margin-left:0;}
ul.pager img {display: inline-block;vertical-align: top;width: 30px;}

ul.pager a {display: inline-block;width: 30px;border:0 none;padding: 4px 0 6px;vertical-align: top;text-decoration: none;color: #808080;font-size: 14px;line-height:20px;}
ul.pager .first a,
ul.pager .prev a,
ul.pager .next a,
ul.pager .last a {display:inline-block;padding:0;}

ul.pager a.on {background-color: #a3a3a3;color: #fff;text-align: center;}
ul.pager a img {width: 30px;}



/* ========================================================================================================== */
/* =================================================== 로그인 ================================================= */
/* ========================================================================================================== */

div.loginWrap {position: relative;min-width: 1320px;background: url('../image/login_bg.png') center top no-repeat;}

div.goHome {position: absolute;right: 110px;top: 40px;}
div.goHome a {display: block;width: 170px;text-decoration: none;text-align: center;color: #fff;font-size: 15px;line-height: 32px;font-family: 'NotoSansKR Regular', sans-serif;background-color: #008f88;}

div.loginArea {position: absolute;left: 0;top: 50%;width: 100%;transform:translateY(-50%);}

div.loginWrap h1 {margin: 0;padding-bottom: 80px;}
div.loginWrap h1 img {display: block;margin: 0 auto;}


ul.loginType, ul.loginType li, ul.loginType a {margin: 0;padding: 0;list-style:none;text-decoration: none;}
ul.loginType {text-align: center;font-size: 0;line-height: 0;}
ul.loginType li {display: inline-block;vertical-align: top;background-position: 0 0;background-repeat: no-repeat;}
ul.loginType li:nth-child(even) {margin-top: 50px;}

ul.loginType a,
ul.loginType img {display: block;}

ul.loginType li:nth-child(1) {background-image: url('../image/login_a_on.png');}
ul.loginType li:nth-child(2) {background-image: url('../image/login_b_on.png');}
ul.loginType li:nth-child(3) {background-image: url('../image/login_c_on.png');}
ul.loginType li:nth-child(4) {background-image: url('../image/login_d_on.png');}

ul.loginType a {position: relative;}
ul.loginType a:hover img {opacity: 0;}





div#popupLogin {width: 758px;padding: 56px 115px;background-color: #fff;box-sizing:border-box;text-align: center;}
div#popupLogin h1 {position: relative;margin: 0;padding:0 0 15px;color: #222;font-size: 28px;line-height: 30px;font-family: 'NotoSansKR Bold', sans-serif;font-weight: normal;text-align: center;}

div#popupLogin ul {margin: 0;padding: 0;}
div#popupLogin li {margin: 0;list-style:none;text-align: left;color: #6d6d6d;font-size: 16px;line-height: 24px;font-family: 'NotoSansKR Regular', sans-serif;}

div#popupLogin div.formArea {position: relative;margin-top: 35px;padding-right: 118px;}
div#popupLogin dl {margin: 0;}
div#popupLogin dt {position: absolute;left: 20px;top: 56px;width: 22px;height: 50px;background: url('../image/login_pwd.png') left center no-repeat;}
div#popupLogin dt:first-child {top: 0;background-image: url('../image/login_id.png')}
div#popupLogin dt label {font-size: 0;line-height: 0;}

div#popupLogin dd {height: 50px;padding:0 20px 0 50px;margin:0 0 6px;background-color: #f3f3f3;}
div#popupLogin dd input {width: 100%;height: 50px;padding: 0;border: 0 none;font-size: 14px;font-family: 'NotoSansKR Regular', sans-serif;background-color: #f3f3f3;}
div#popupLogin dd input::placeholder {color: #c9c9c9;}

div#popupLogin .btn {padding-top: 10px;text-align: left;}
div#popupLogin .btn input {position: absolute;right: 0;top: 0;display: block;width: 108px;height: 106px;border: 0 none;background-color: transparent;color: #fff;font-size: 17px;font-family: 'NotoSansKR Bold', sans-serif;text-align: center;background-color: #008f88;}
div#popupLogin .btn a {display: inline-block;vertical-align: top;width: 170px;text-decoration: none;text-align: center;color: #fff;background-color: #0c416e;font-size: 15px;line-height: 32px;font-family: 'NotoSansKR Medium', sans-serif;}

div#popupLogin div.close {position: absolute;right: 30px;top: 30px;}
div#popupLogin div.close a,
div#popupLogin div.close img {display: block;}



/* ========================================================================================================== */
/* =================================================== Main ================================================= */
/* ========================================================================================================== */

div#container.main {padding: 0;}
div.main {}
div.main:before {position: absolute;left: 0;top: 0;width: 630px;height: 100%;content: "";background: #fff url('../image/main_bg.png') left bottom no-repeat;}

div#resident div.main {background-color: #e4f1f3;}
div#supervisor div.main {background-color: #eef6ff;}
div#chief div.main {background-color: #eef6ff;}
div#admin div.main {background-color: #f7f7f7;}


div.main div.contents {padding: 50px 50px 50px 690px;box-sizing:border-box;}

div.myInfo dl, div.myInfo dt, div.myInfo dd, div.myInfo ul, div.myInfo li, div.myInfo a {margin: 0;padding: 0;list-style:none;text-decoration: none;}
div.myInfo {position: absolute;left: 0;top: 0;width: 630px;padding: 50px 60px 0 50px;box-sizing:border-box;}

div.myInfo dl.profile {position: relative;padding: 10px 20px 10px 145px;background-color: #f5f5f5;}
dl.profile > dt {display: table-cell;width: 520px;height: 110px;vertical-align: middle;color: #222;font-size: 17px;line-height: 25px;font-family: 'NotoSansKR Medium', sans-serif;}
dl.profile dt span {position: absolute;left: 10px;top: 10px;width: 115px;height: 150px;background-color: #e5e5e5;}
dl.profile dt img {display: block;width: 100%;height: 100%;}
dl.profile dd {position: relative;border-radius: 5px;background-color: #134196;}
dl.profile dd:before {position: absolute;left: 40%;top: 50%;transform:translate(-50%, -50%);content: "";width: 1px;height: 10px;background-color: #fff;opacity: .45;}
dl.profile dd:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
dl.profile dd a {float: left;display: block;width: 40%;text-align: center;color: #fff;font-size: 14px;line-height: 40px;font-family: 'NotoSansKR Regular', sans-serif;}
dl.profile dd a + a {width: 60%;}
dl.profile dd img {display: inline-block;vertical-align: top;padding: 12px 5px 0 0;}

div.myInfo > ul {padding: 24px 0 30px;}
div.myInfo > ul:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
div.myInfo > ul li {float: left;width: calc(50% - 3px);margin:6px 0 0 6px;}
div.myInfo > ul li:nth-child(1) {width: 100%;}

div.myInfo > ul li:nth-child(1),
div.myInfo > ul li:nth-child(even) {clear: both;margin-left: 0;}
div.myInfo > ul a {display: block;text-align: center;color: #fff;font-size: 16px;line-height: 50px;font-family: 'NotoSansKR Regular', sans-serif;background-color: #37435c;}
div#chief div.myInfo > ul a {background-color: #375678;}
div#admin div.myInfo > ul a {background-color: #646b78;}


ul.intro, ul.intro li, ul.intro a {margin: 0;padding: 0;list-style:none;}
ul.intro {}
ul.intro:after {clear: both;display: block;height: 0;line-height: 0;font-size: 0;content: "";}
ul.intro > li {float: left;width: calc(33% - 14px);margin: 20px 0 0 20px;box-shadow:0 0 18px rgba(0,0,0,.03);background-color: #fff;}
ul.intro > li:nth-child(3n+1) {clear: both;margin-left: 0;}
ul.intro > li:nth-child(-n+3) {margin-top: 0;}
ul.intro a {display: table-cell;width: 600px;height: 160px;text-align: center;vertical-align: middle;color: #222;font-size: 19px;line-height: 20px;font-family: 'NotoSansKR Medium', sans-serif;}
ul.intro img {display: block;margin: 0 auto 10px;}




/* ========================================================================================================== */
/* =================================================== Sub ================================================= */
/* ========================================================================================================== */




/* 좌측 메뉴 */
div#container.leftMenu {padding: 0;}
div.leftMenu {}
div.leftMenu:before {z-index: -1;position: absolute;left: 0;top: 0;width: 630px;height: 100%;content: "";background-color: #f9f9f9;}

div.aside {float: left;width: 630px;padding: 30px 50px;box-sizing:border-box;}

div.aside + div.contents {float: left;width: calc(100% - 630px);padding: 30px 50px;box-sizing:border-box;}

ul.conMenu, ul.conMenu li, ul.conMenu a {margin: 0;padding: 0;list-style:none;text-decoration: none;}
ul.conMenu {overflow-x: hidden;overflow: auto;height: 100%;}
ul.conMenu::-webkit-scrollbar {width: 8px;background-color: #e8e8e8;}
ul.conMenu::-webkit-scrollbar-thumb {background-color: #c4c4c4;}

ul.conMenu > li {padding-bottom: 5px;}
ul.conMenu > li:last-child {padding-bottom: 0;}
ul.conMenu a {display: table-cell;width: 630px;height: 68px;padding: 0 60px 0 30px;border: 1px solid #b8cde1;color: #444;font-size: 17px;line-height: 20px;vertical-align: middle;font-family: 'NotoSansKR Regular', sans-serif;background: #fff url('../image/menu_arr.png') right 30px center no-repeat;}
ul.conMenu .on a {height: 66px;border: 2px solid #84abce;color: #273a5f;font-family: 'NotoSansKR Medium', sans-serif;background: #e5eff8 url('../image/menu_arr_on.png') right 30px center no-repeat;}


div.aside div.scrollArea {height: calc(100% - 40px);padding-right: 10px;}

ul.memberList, ul.memberList li, ul.memberList a {margin: 0;padding: 0;list-style:none;text-decoration: none;}
ul.memberList {}
ul.memberList > li {padding-bottom: 5px;}
ul.memberList a {position: relative;display: table-cell;width: 630px;height: 88px;padding: 0 180px 0 30px;border: 1px solid #b8cde1;color: #444;font-size: 16px;line-height: 23px;vertical-align: middle;font-family: 'NotoSansKR Regular', sans-serif;background-color: #fff;}
ul.memberList .on a {height: 86px;border: 2px solid #84abce;color: #273a5f;font-family: 'NotoSansKR Medium', sans-serif;background-color: #e5eff8;}

ul.memberList a > span {position: absolute;right: 30px;top: 50%;transform:translateY(-50%);width: 130px;height: 40px;text-align: center;color: #fff;background-color: #f0283f;font-size: 16px;line-height: 40px;}
ul.memberList a > span span {font-family: 'NotoSansKR Medium', sans-serif;}


/* 인적사항 */
dl.agreeCon, dl.agreeCon dt, dl.agreeCon dd {margin: 0;padding: 0;}
dl.agreeCon {padding: 30px 40px;}
dl.agreeCon > dt {padding-bottom: 5px;font-size: 17px;font-family: 'NotoSansKR Medium', sans-serif;}
dl.agreeCon > dd.ac {padding-top: 30px;line-height: 32px;}


/* 팝업 > 반려사유 보기 */
div#popupReject {width: 500px;padding: 10px;border: 1px solid #f2f2f2;background-color: #f9f9f9;font-family: 'NotoSansKR Regular', sans-serif;}
div#popupReject h1 {margin: 0;padding: 0 0 10px;border-bottom: 1px solid #b7b7b7;color: #222;font-size: 17px;line-height: 25px;font-weight: normal;background-color: #f9f9f9;}
div#popupReject h1 span {display: inline-block;vertical-align: top;padding-left: 10px;color: #3d2fc6;font-family: 'NotoSansKR Medium', sans-serif;}

div#popupReject div.scrollArea {margin: 10px 0;max-height:140px;padding: 15px;background-color: #fff;color: #444;font-size: 15px;line-height: 20px;}



/* 팝업 > 엑셀 업로드 */
div#popupUpload {width: 800px;padding: 30px;}

dl.uploadNote, dl.uploadNote dt, dl.uploadNote dd {margin: 0;padding: 0;}
dl.uploadNote {float: left;width:calc(100% - 540px);}
dl.uploadNote > dt {padding-bottom: 10px;color: #222;font-size: 17px;line-height: 25px;font-weight: normal;font-family: 'NotoSansKR Medium', sans-serif;}
dl.uploadNote > dd {color: #444;font-size: 16px;line-height: 30px;font-family: 'NotoSansKR Regular', sans-serif;}

dl.uploadNote + table.tblDef {float: right;width: 500px;}
dl.uploadNote + table.tblDef th,
dl.uploadNote + table.tblDef td {font-size: .9em;line-height: 1.2;}

div#popupUpload div.formArea {margin-top: 30px;}

div#popupUpload div.scrollArea {overflow: auto;max-height:250px;border-bottom: 1px solid #d1dcdb;}

div#popupUpload table.inputTbl th,
div#popupUpload table.inputTbl td {padding: 5px;font-size: .9em;}
div#popupUpload table.inputTbl > colgroup + tbody > tr:first-child > * {border-top-color: #00a0e9;}


div#popupUpload table.inputTbl + table.inputTbl {border-top: 0 none;}

div#popupUpload a.del {display: inline-block;vertical-align: top;width: 50px;margin-left: 10px !important;text-align: center;color: #fff;background-color: #393939;font-size: 14px;}

div#popupUpload th {line-height: 1.2;}


/* 팝업 > 핵심역량 결과보기 */
div#popupCore {width: 1300px;padding: 30px;}
div#popupCore h1 {margin: 0;padding: 10px 0 30px;text-align: center;color: #444;font-weight: normal;font-size: 32px;line-height: 32px;font-family: 'NotoSansKR Bold', sans-serif;}
div#popupCore div.popupCon {padding: 0;color: #444;}
div#popupCore div.close {position: absolute;right: 30px;top: 30px;}

div.goal dl, div.goal dt, div.goal dd {margin: 0;padding: 0;}
div.goal {padding: 20px 25px;margin-bottom: 35px;background-color: #f6f6f6;}
div.goal > dl {overflow: hidden;font-size: 15px;line-height: 20px;font-family: 'NotoSansKR Light', sans-serif;}
div.goal > dl > dt {float: left;padding-right: 10px;font-family: 'NotoSansKR Medium', sans-serif;}


dl.coreType, dl.coreType dt, dl.coreType dd {margin: 0;padding: 0;}
dl.coreType {float: right;width: calc(50% - 15px);margin-bottom: 35px;}
dl.coreType:first-of-type {float: left;}
dl.coreType.clear {clear: both;float: none;width: 100%;margin-bottom: 0;}
dl.coreType > dt {padding-bottom: 12px;color: #000;font-size: 22px;line-height: 22px;font-family: 'NotoSansKR Bold', sans-serif;}

ul.grade, ul.grade li {margin: 0;padding: 0;list-style: none;}
ul.grade {}
ul.grade li {margin-top: 12px;background-position: right 15px center;background-repeat: no-repeat;}
ul.grade li:first-child {margin-top: 0;}
ul.grade li.pass {background-image: url('../image/pass.png');}
ul.grade li.fail {background-image: url('../image/fail.png');}
ul.grade div {position: relative;display: table-cell;width: 1000px;height: 50px;border-radius: 15px;padding: 15px 170px 15px 15px;border: 1px solid #e9e9e9;vertical-align: middle;font-size: 16px;line-height: 22px;box-shadow:0 0 5px rgba(0,0,0,.2);}


ul.summary, ul.summary li {margin: 0;padding: 0;list-style: none;}
ul.summary {display: grid;grid-template-columns: 1fr 1fr 1fr;column-gap: 35px;}
ul.summary div {display: table-cell;width: 1000px;height: 90px;border-radius: 15px;padding: 15px 25px;border: 1px solid #e9e9e9;vertical-align: middle;text-align: center;box-shadow:0 0 5px rgba(0,0,0,.2);}

ul.summary span.tit {display: inline-block;padding: 0 3px;margin-bottom: 20px;color: #111;font-size: 16px;line-height: 20px;font-family: 'NotoSansKR Medium', sans-serif;box-shadow: inset 0 -10px 0 rgba(84,144,226,.2);}

ul.summary span.count {display: block;font-size: 40px;line-height: 30px;color: #3f64c2;font-family: 'Roboto-Bold', sans-serif;letter-spacing:-1px;}
ul.summary span.count:after {display: inline-block;vertical-align: bottom;content: "건";padding-left: 10px;font-size: 18px;line-height: 20px;color: #111;font-family: 'NotoSansKR Medium', sans-serif;}

ul.summary span.graph,
ul.summary span.graphBar {display: block;height: 18px;border-radius: 9px;}
ul.summary span.graph {position: relative;margin-right: 55px;background-color: #e6eaf4;}
ul.summary span.graph::after {position: absolute;right: -55px;top: 50%;transform:translateY(-50%);content: attr(data-num);font-size: 20px;line-height: 20px;color: #3f64c2;font-family: 'Roboto-Bold', sans-serif;}
ul.summary span.graphBar {float: left;background-color: #3f64c2;}


/* 팝업 > 핵심역량 평가하기 */
div.coreCategory {padding-right: 55px;margin-bottom: 25px;}
div.coreCategory select {height: 38px;}

ul.grade label {font-size: 0;line-height: 0;}
ul.grade input[type=radio] {appearance:none;position: absolute;top: 50%;transform:translateY(-50%);width: 67px;height: 32px;margin: 0;border-radius: 16px;background-color: #eaeaea;text-align: center;color: #505050;font-size: 15px;line-height: 32px;}
ul.grade input[type=radio]:before {position: absolute;left: 0;top: 0;width: 100%;height: 32px;font-family: 'Roboto-Medium', sans-serif;}

ul.grade input[type=radio].pass {right: 88px;content: "PASS";}
ul.grade input[type=radio].fail {right: 15px;content: "FAIL";}

ul.grade input[type=radio].pass:before {content: "PASS";}
ul.grade input[type=radio].fail:before {content: "FAIL";}

ul.grade input[type="radio"].pass:checked {color: #3f64c2;background-color: #e6eaf4;}
ul.grade input[type="radio"].fail:checked {color: #c23f3f;background-color: #f4e6e6;}

ul.summary input[type=text] {display: inline-block;vertical-align: top;width: 230px;height: 35px;border: 1px solid #d8d8d8;padding: 0 10px;}
ul.summary input[type=text] + span {display: inline-block;vertical-align: top;padding-left: 10px;color: #111;font-size: 18px;line-height: 35px;font-family: 'NotoSansKR Medium', sans-serif;}