@charset "UTF-8";
@import url('./reset.css');
@import url('https://fonts.googleapis.com/css2?&family=Noto+Sans+KR:wght@400&display=swap');


html, body {
    height: 100%;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    overflow-y: hidden;
    min-width: 980px;
}

/* inputs */
select, input, textarea { border: 1px solid #c0c0c0; padding: 6px 10px; background-color: white; color: #1b2b55; outline:0; box-sizing: border-box;}
select[disabled], input[disabled], textarea[disabled] { background-color: #F5F7F6; }
select { max-width: 180px; }


/* buttons */
.btnGroup   { text-align:right; margin-top:15px;}
button         { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; padding: 5px 12px; cursor: pointer; line-height: 1.42857143; border-radius: 4px; user-select: none; outline: none; }
.button        { padding:5px 15px; border-radius:4px; cursor: pointer; outline: none; background-color: #cccccc; color: #000; border-color: #acadab; }

button.small   { line-height: 1; }
button.search  , .button.search  { background-color: #8D8D8D; color: #fff; border-color: #8D8D8D; }
button.primary , .button.primary { background-color: #337ab7; color: #fff; border-color: #2e6da4; }
button.basic   , .button.basic   { background-color: #cccccc; color: #000; border-color: #acadab; }
button.success , .button.success { background-color: #5cb85c; color: #fff; border-color: #4cae4c; }
button.danger  , .button.danger  { background-color: #d9534f; color: #fff; border-color: #d43f3a; }
button.info    , .button.info    { background-color: #31b0d5; color: #fff; border-color: #269abc; }
button.warning , .button.warning { background-color: #f0ad4e; color: #fff; border-color: #eea236; }

/* table */
table { table-layout: fixed; word-wrap: break-word; margin-bottom: 0px; }
table.fit { width: 100%; }
table td, table th { background-clip: padding-box; border:1px solid #C8C8C0; padding: 7px 5px; vertical-align: middle; }
table th { background-color: #EBF6FE; text-align: center; }
table td { background-color: #FFF; }

a, a:visited   { color:blue; }
h2             { font-size: 45px; color: white; text-align:center; margin-bottom:30px;}


.text-left     { text-align: left;}
.text-center   { text-align: center;}
.text-right    { text-align: right;}
.text-ellipsis { text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

.float-l       { float: left;}
.float-r       { float: right;}

/*--- LAYOUT ------------------------------------------------------------------*/
.container        { padding: 10px;}

.row              { display: block; }
.row > text       { font-size:0px; }
.row .container   { display: inline-block; background-color: #000; float: left; }

.pd-0             { padding: 0px !important; }
.pd-t-0           { padding-top: 0px !important; }
.pd-b-0           { padding-bottom: 0px !important; }
.pd-l-0           { padding-left: 0px !important; }
.pd-r-0           { padding-right: 0px !important; }

.w100p            { width: 100%; }

.wrap             { width:100%; height: 100%; position: relative; top: 0px; margin-top: 0px; overflow-y:auto; }

/* top */
body> .top              { width: 100%; min-width: 980px; height: 50px; position: absolute; padding: 0px; background-color: #1b2b55; color: #f0f1ef;}
body> .top .row > div   { line-height: 50px; }

body> .top .logo        { position: static; float: left; padding: 0px 30px; font-size: 20px; font-weight: bold;}
body> .top .logo .title { cursor: pointer; }

body> .top .loginInfo            { position: absolute; right:0px; }
body> .top .loginInfo .name      { width:100px; display:inline-block; padding:0px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body> .top .loginInfo .buttons   { float: right; padding:0px 10px; }
body> .top .loginInfo .buttons a { color: #f0f1ef; }

/* MENU */
.gnb-menu ul                  { width: 240px; display: none; position: absolute; top: 100%; left: 0; background: #1b2b55; border: 1px solid #546196; z-index: 500;}
.gnb-menu a                   { display: block; padding: 0px 20px; font-size: 15px; color: white;}
.gnb-menu li                  { position: relative; float: left;}
.gnb-menu li:hover            { background: #f0f1ef;}
.gnb-menu li:hover > a        { color: #1b2b55; font-weight: bold; }
.gnb-menu ul ul               { left: 100%; top: 0;}
.gnb-menu ul > li             { float: none;}
.gnb-menu ul > li > a         { font-size: 13px; }
.gnb-menu ul li ul + a:after  { font: normal normal normal 12px/1 FontAwesome; content: ' \f054'; float: right; line-height: 50px; }

/* SEARCH */
.container.search { padding-bottom: 0px; }

.searchBox                    { position: relative; padding: 3px 70px 3px 10px; border-radius:5px; background-color:#f7f7f7; border:1px solid #e0e0e0; min-height: 39px; }
.searchBox.button2            { padding-right: 130px; }
.searchBox .row               { line-height: 40px; }
.searchBox .searchItem        { display: inline-block; }
.searchBox .searchItem *      { border-radius:3px; }
.searchBox .searchItem .label { min-width:80px; display: inline-block; text-align: right; font-weight: bold; padding-left: 8px; padding-right: 3px; }
.searchBox .searchItem .infoText { width:240px; display: inline-block; text-align: right; font-weight: 500; padding-left: 8px; color:red;}

.label[data-required=true]:after { font: normal normal normal 7px/1 FontAwesome; content: ' \f069'; color: red; }

.input.group                 { display: inline-table; }
/* .input.group > *             { vertical-align: middle; } */
.input.group > *:first-child { border-top-right-radius:0px; border-bottom-right-radius:0px; }
.input.group > *:last-child  { border-top-left-radius:0px; border-bottom-left-radius:0px; }
.input.group .addon          { border: 1px solid #c0c0c0; background-color:#eeefec; border-left: none; padding: 3px 10px 5px; cursor:pointer; }
.input.group button          { border: 1px solid #c0c0c0; background-color:#eeefec; border-left: none; padding: 4px 10px; cursor:pointer; }
.input.group.date input      { width: 90px; text-align: center; }

.searchBox .buttons        { position: absolute; top: 5px; right: 5px; bottom: 5px; }
.searchBox .buttons button { width: 60px; height: 100%; font-size: 15px;}

*:has(.gridBox) { position: relative; }

/* Index */
.wrap.index          { top:50px; height: calc(100% - 50px); }
.index .screenTabArea{ width: 100%; height: 40px; padding-top: 5px; }
.index .screenArea   { position: absolute; top: 45px; left:0px; right:0px; bottom:0px; }

/* TAB */
.container.tab { position: relative; height: 35px; padding-bottom: 0px; vertical-align: bottom; }
.container.tab .tabItem { display: inline-block; position: relative; height: 17px; border: 1px #C9CBCD solid; background-color:#E0E2E1; margin-right: 1px; margin-bottom: -1px; padding: 8px 15px; text-align: center; }
.container.tab .tabItem.active { border-bottom: 1px #FFF solid; background-color: #FFF; }
.container.tab .tabItem label { cursor: pointer; font-size: 15px; }
.container.tab .baseline { position: absolute; bottom:0px; height: 1px; width: calc(100% - 20px); background-color: #C9CBCD;  }

.container.tabArea { position: relative; border: solid #C9CBCD 1px; border-top: none; height: calc(100% - 20px); overflow-y: auto; }

/* LOGIN */
.loginBg             { width: 100%; height: 50%; background: #1b2b55;}
.loginArea           { width: 400px; margin: auto; margin-top: -205px;}

.login               { text-align: center; background: white; padding:20px;}
.login> ul           { padding: 0 0 33px;}
.login> ul li        { padding: 0 0 12px; text-align: left;}
.login> ul li input  { width: 100%; height: 46px; font-size: 16px; box-sizing: border-box; text-indent: 16px; outline:0;}
.login> ul li input::-webkit-input-placeholder    { font-size: 16px; color: #9fa19f;}
.login> ul li input[type="checkbox"]              { position: absolute; left: -3000%;}
.login> ul li input[type="checkbox"]+label        { height: 36px; line-height: 36px;}
.login> ul li input[type="checkbox"]+label:before { font: normal normal normal 17px/1 FontAwesome; content: ' \f096'; margin-top: 3px; vertical-align: -2px; margin-right: 5px; }
.login>ul li input[type="checkbox"]:checked+label:before { font: normal normal normal 17px/1 FontAwesome; content: ' \f046'; margin-right: 2.5px; }
.login button {width: 100%;height: 56px;background: #1b2b55;font-size: 18px;color: #fff;border: 0; margin-top:25px; }

/*--- POP UP ------------------------------------------------------------------------*/
.dim          { position: absolute; top:0; left: 0; right: 0; bottom: 0;  background:rgba(0,0,0,0.5); display:none; overflow: auto; text-align: center; z-index: 100; }
.pop-contents { display: inline-block; background:white; margin-top: 3%; text-align: left; }
/* .pop-contents { position: absolute; top:50% ;left: 50%; transform: translate(-50%, -50%); background:white; } */
.pop-title    { display:inline-block; width:85%; vertical-align:middle; line-height:30px; font-size: 16px; font-weight: bold; padding-left: 7px; }
.pop-close    { padding:0 10px; float:right;}
.pop-head     { padding:5px; color:white; border:1px solid white; background:#1b2b55; overflow:hidden; }

.pop td     { vertical-align:middle;}
.pop .title { font-size: 15px; font-weight: 600; border-bottom: 1px solid #eee; margin-bottom: 5px; line-height: 25px; text-align: left; }
.pop .content { margin-bottom: 15px; }
.pop .content table th { font-weight: bold; }

/*-- main --*/
.main .sum_board { border: solid 1px #505050; border-radius:4px; padding: 4px; background: white; }
.main .sum_board .sum_count { font-weight: bold; width: calc(100% - 2px); background: linear-gradient( to bottom , #EAF4FC, #CFE7FA ); border: solid 1px #B9BABC; border-radius:3px; padding-top: 7px; }
.main .sum_board .sum_count .sum_item { display: inline-block; padding-bottom: 7px; }
.main .sum_board .sum_count .title { color:#586D81; font-size: 31px; display: inline-block; line-height: 48px; margin-left: 30px; }
.main .sum_board .sum_count .content { font-size: 29px; line-height: 37px; height: 40px; background: white; border: solid 1px #B9BABC; display: inline-block; vertical-align: top; padding: 5px 10px; margin: 0px 10px; min-width: 90px; text-align: right; }

.main .project_area { width: 100%; margin-top: 15px; height: 50%; }
.main .project_area .title { color:#586D81; font-size: 21px; font-weight: bold; margin-bottom: 5px; }
.main .project_area .list { width: 50%; height: 100%; display: inline-block; vertical-align: top; }
.main .project_area .list .content { width: 100%; height: 100%; }
.main .project_area .chart { width: 50%; height:100%; display: inline-block; vertical-align: top; }


/*-- master - cust_upload.do --*/
.cust_upload .left_area   { width:20%; height: 100%; display: inline-block; }
.cust_upload .right_area  { width:calc(80% - 10px); height: 100%; margin-left: 10px; display: inline-block; }

/*-- manage - auth.do --*/
.container.auth { text-align: center; }
.auth .left_area   { width:300px; height: 100%; display: inline-block; }
.auth .right_area  { width:500px; height: 100%; margin-left: 10px; display: inline-block; }

/*-- manage - code.do --*/
.container.comm_code { text-align: center; }
.comm_code .left_area   { width:300px; height: 100%; display: inline-block; }
.comm_code .right_area  { width:500px; height: 100%; margin-left: 10px; display: inline-block; }

/*-- install - user_assign.do --*/
.user_assign .workerSearch, .user_assign .customerSearch { text-align: right; }
.user_assign .customerSearch .gridArea { height: calc(100%); }

.user_assign .settingButtonSet { border: 1px solid #e0e0e0; border-radius: 5px; padding-right: 10px; display: inline-block; margin-top: 8px; position: absolute; bottom: 0px; }
.user_assign .settingButtonSet .searchItem { margin-right: 30px; }
.user_assign .settingButtonSet .searchItem .label { padding-left: 0px; }
.user_assign .settingButtonSet button.info { height: 23px; width: 23px; text-align: center; padding: 0px; }
.user_assign .left_area   { width:350px; height: 100%; display: inline-block; vertical-align: top; position: relative;}
.user_assign .right_area  { width:calc(100% - 369px); height: 100%; display: inline-block; vertical-align: top;}

.user_assign .vertical_guide { width: 1px; height: 100%; background: lightgray; display: inline-block; margin: 3px 9px; vertical-align: middle; }

/* install - history_detail.do */
.pop .content.imageArea { border: 1px solid #E0E0E0; overflow-x: auto; }
.pop .content.imageArea .image { display:inline-block; margin: 5px 0px 10px 5px; text-align: center; cursor: pointer; vertical-align: top; }
.pop .content.imageArea .image img { width: 100px; height: 133.3px; display: block; }

/* Notice */
.pop .content.noticeWrite .fileUploadBtn { margin-top: 5px; padding: 2px 6px; font-size: 12px;  }
.pop .content.noticeWrite .fileItem { display: inline-block; padding:3px 10px; border: 1px solid #E0E0E0; border-radius:3px; margin: 3px; }
.pop .content.noticeWrite .fileItem .fileName { line-height: 21px; margin-right: 5px; }
.pop .content.noticeWrite .fileItem .fileDelete { padding: 0px 4px; }

/* as - reason_sum */
.asReasonSum .chart { height: 50%; position: relative; }
.asReasonSum .grid  { height: calc(50% - 20px); margin-top: 20px; }