@charset "utf-8";

/* layout */
html, body {width:100%; height:100%; overflow-y:hidden;}
#wrap {position:relative; width:100%; height:100%; min-width:1600px; min-height:660px;}
#lnb {position:absolute; top:0; left:0; bottom:0; width:200px; min-height:100%; padding-right:20px; background-color:#52555c; overflow-x:hidden; overflow-y:auto;}
#contents {position:relative; margin-left:200px; height:100%; background:#f4f5f8; box-sizing:border-box;}
#contents .con-head {position:relative; height:70px; padding:0 90px; background:#f9fafb;}
/* 191011 수정 - 스크롤바 숨김처리 */
#contents .con-wrap {position:absolute; top:70px; left:0; bottom:0; right:0; padding:50px 90px; overflow-x:hidden; overflow-y:auto; -ms-overflow-style: none; }
#contents .con-wrap::-webkit-scrollbar {display:none;}
#contents .con-body {position:relative; padding:60px; background-color:#fff; border-radius:6px; box-sizing:border-box;}
#contents .con-body.type02 {background-color:#f9fafb;}
#contents .con-body.full_con {padding: 60px 0 !important;}
/* 191021 수정 - con-body 하단텍스트 추가 */
#contents .con-body .con_bottom_txt {position: absolute; bottom: -30px; left: 0; font-size: 13px; color: #999; letter-spacing: 0.12px;}
#contents .con-body .con_bottom_txt span {font-weight: 500; color: #555;}

/* lnb */
#lnb > div {min-height:calc(100% - 88px);}
#lnb h1 {position:absolute; top:0; left:0; height:64px; width:200px; padding:40px 0 35px; text-align:center;}
#lnb h1 a img {width:60px; height:60px; border-radius:25px;}
#lnb .gnb-menu {width:200px; padding:30px 20px 30px 0; text-align:center;}
#lnb .gnb-menu a {display:inline-block; width:28px; height:28px; text-indent:-999em; background:url('../images/gnb-menu.png') no-repeat 0 0;}
#lnb .gnb-menu a:hover {background-position:0 -28px;}
#lnb .gnb-menu a.close {background-position:-28px 0;}
#lnb .gnb-menu a.close:hover {background-position:-28px -28px;}

/* 20191001 수정 - menulist height 수정 */
#lnb .menulist {padding:140px 0 0; margin-right:-20px;}
#lnb .menulist a {position:relative; display:block; height:55px; line-height:55px; padding-left:85px; color:#fff; font-size:14px; font-weight:300; opacity:0.5;}
#lnb .menulist > ul > li li > a {height:45px; line-height:45px;}
#lnb .menulist li li a {padding-left:40px;}
#lnb .menulist li a:hover,
#lnb .menulist li.active > a,
#lnb .menulist li.hover > a {font-weight:400; opacity:1;}
#lnb .menulist ul ul {border-top:1px solid #52555c; display:none;}
#lnb .menulist ul li.active {background-color:#5c6068;}
/*#lnb .menulist ul li.active ul {display:block;}*/
#lnb .menulist .ico {position:absolute; top:0; left:0; display:inline-block; width:85px; height:55px; background:url('') no-repeat center center;}
#lnb .menulist .menu01 .ico {background-image:url('../images/ico-menu01-off.png');}
#lnb .menulist .menu01:hover .ico,
#lnb .menulist .menu01.active .ico,
#lnb .menulist .menu01.hover .ico {background-image:url('../images/ico-menu01-on.png');}
#lnb .menulist .menu02 .ico {background-image:url('../images/ico-menu02-off.png');}
#lnb .menulist .menu02:hover .ico,
#lnb .menulist .menu02.active .ico,
#lnb .menulist .menu02.hover .ico {background-image:url('../images/ico-menu02-on.png');}
#lnb .menulist .menu03 .ico {background-image:url('../images/ico-menu03-off.png');}
#lnb .menulist .menu03:hover .ico,
#lnb .menulist .menu03.active .ico,
#lnb .menulist .menu03.hover .ico {background-image:url('../images/ico-menu03-on.png');}
#lnb .menulist .menu04 .ico {background-image:url('../images/ico-menu04-off.png');}
#lnb .menulist .menu04:hover .ico,
#lnb .menulist .menu04.active .ico,
#lnb .menulist .menu04.hover .ico {background-image:url('../images/ico-menu04-on.png');}
#lnb .menulist .menu05 .ico {background-image:url('../images/ico-menu05-off.png');}
#lnb .menulist .menu05:hover .ico,
#lnb .menulist .menu05.active .ico,
#lnb .menulist .menu05.hover .ico {background-image:url('../images/ico-menu05-on.png');}
#lnb .menulist .menu06 .ico {background-image:url('../images/ico-menu06-off.png');}
#lnb .menulist .menu06:hover .ico,
#lnb .menulist .menu06.active .ico,
#lnb .menulist .menu06.hover .ico {background-image:url('../images/ico-menu06-on.png');}
#lnb .menulist .menu07 .ico {background-image:url('../images/ico-menu07-off.png');}
#lnb .menulist .menu07:hover .ico,
#lnb .menulist .menu07.active .ico,
#lnb .menulist .menu07.hover .ico {background-image:url('../images/ico-menu07-on.png');}
#lnb .menulist .menu08 .ico {background-image:url('../images/ico-menu08-off.png');}
#lnb .menulist .menu08:hover .ico,
#lnb .menulist .menu08.active .ico,
#lnb .menulist .menu08.hover .ico {background-image:url('../images/ico-menu08-on.png');}
#lnb .menulist .menu09 .ico {background-image:url('../images/ico-menu09-off.png');}
#lnb .menulist .menu09:hover .ico,
#lnb .menulist .menu09.active .ico,
#lnb .menulist .menu09.hover .ico {background-image:url('../images/ico-menu09-on.png');}
#lnb .menulist .menu10 .ico {background-image:url('../images/ico-menu10-off.png');}
#lnb .menulist .menu10:hover .ico,
#lnb .menulist .menu10.active .ico,
#lnb .menulist .menu10.hover .ico {background-image:url('../images/ico-menu10-on.png');}

#contents .con-head .history-area {padding-top:26px;}
#contents .con-head .history-area li {position:relative; display:inline-block;}
#contents .con-head .history-area li:before {content:''; position:relative; display:inline-block;}
#contents .con-head .history-area li:first-child:before {top:-1px; width:6px; height:6px; margin-right:10px; background-color:#b6c4d4; border-radius:6px;}
#contents .con-head .history-area li + li:before {width:7px; height:11px; margin:0 10px; background:url('../images/ico-arrow01.png') no-repeat 0 0;}
#contents .con-head .util-area {position:absolute; top:25px; right:90px;}
#contents .con-head .util-area .name {font-size:14px;}
#contents .con-head .util-area .login {display:inline-block; margin:0 50px 0 10px; color:#999; text-decoration:underline;}
#contents .con-head .util-area .setting {display:inline-block; width:19px; height:19px; text-indent:-999em; background:url('../images/ico-settinggo.png') no-repeat 0 0;}


/* 로그인 */
#wrap.login {background:#52555c;}
#wrap.login .login-wrap {display:table; width:385px; height:100%; margin:0 auto;}
#wrap.login .login-wrap > div {display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center;}
#wrap.login .login-wrap ul {margin-top:60px;}
#wrap.login .login-wrap ul input[type="text"],
#wrap.login .login-wrap ul input[type="password"] {height:60px; color:#fff; background:transparent; border:none; border-bottom:1px solid #73767b; border-radius:0;}
#wrap.login .login-wrap ul ::-webkit-input-placeholder {
    color:#fff; font-weight:300;
}
#wrap.login .login-wrap ul :-moz-placeholder {
    color:#fff; font-weight:300;
}
#wrap.login .login-wrap ul ::-moz-placeholder {
    color:#fff; font-weight:300;
}
#wrap.login .login-wrap ul :-ms-input-placeholder {
    color:#fff; font-weight:300;
}
#wrap.login .login-wrap .btn {margin-top:40px;}
#wrap.login .login-wrap .btn a {display:block; width:100%; height:60px; line-height:60px; color:#000; font-size:16px; font-weight:500; text-align:center; background-color:#fff; box-shadow:0 5px 15px 0 rgba(0, 0, 0, 0.1); border-radius:9px;}

/* main */
.search-area .employees-number { line-height:70px; font-size:15px; color:#555; }
.main .btn-refresh { background-color:transparent; vertical-align:middle; margin-left:13px;}

.main { background-color:#f00; }
.main .table-chart { width:49.5%; height:700px; position:relative; padding:60px; box-sizing:border-box; background-color:#fff; border-radius:4px; float:left; }
.main .table-chart.chart01 { margin-right:1%; }
.main h4 { font-size:18px; font-weight:900; margin-bottom:10px; }
.main .chart-time { font-size:13px; color:#999; }
.main .table-chart .chart01 { width:250px; margin:90px auto 0;}
.main .table-chart .chart02 { width:100%; margin:45px auto 0;}
.main .table-chart .total { text-align:center; position:absolute; left:50%; top:48%; transform:translate(-50%,-50%) }
.main .table-chart .total span { display:block; font-size:15px; color:#999;  }
.main .table-chart .total strong { display:block; font-size:35px; color:#52555c; margin-top:-5px; }
.main .table-chart .result { width:430px; position:absolute; left:50%; bottom:112px; transform: translateX(-50%); }
.main .table-chart .result li {  width:25%; float:left; font-size:16px; color:#999; text-align:center; }
.main .table-chart .result li:before { display:inline-block; width:11px; height:11px; content:" "; border-radius:50%; margin-right:3px; }
.main .table-chart .result li.work:before { background-color:#9399ac; }
.main .table-chart .result li.vacation:before { background-color:#627cff; }
.main .table-chart .result li.notwork:before { background-color:#e28787; }
.main .table-chart .result li.tardy:before { background-color:#f9da0a; }
.main .table-chart .result li strong { font-size:14px; color:#555; letter-spacing:1.08px; vertical-align:1px; margin-left:5px;}
.main .chart02 .chart-body { width:93%; height:350px; }
.main .chart02 .chart-body li { width:16.6%; height:100%; float:left; position:relative; }
.main .chart02 .chart-body li:nth-child(odd) { background-color:#f9fafb; }
.main .chart02 .chart-body li:nth-child(even) { background-color:#f4f5f8; }
.main .chart02 .chart-body li div { width:20px; height:0; overflow:hidden; position:absolute; left: 50%; bottom:0; transform:translateX(-50%); }
.main .chart02 .chart-body li div p { width:100%; position:absolute; left:0; bottom:0; background-color:#627cff; }
.main .chart02 .chart-body li:last-child div p { background-color:#e28787; }
.main .chart02 .chart-right { position:absolute; right:60px; top:143px; }
.main .chart02 .chart-right span { display:block; line-height:43px; font-size:13px; color:#999; font-weight:normal; }
.main .chart02 .chart-bottom { width:96%; text-align:center; margin-top:20px; }
.main .chart02 .chart-bottom li{ width:16.6%; float:left;  }
.main .chart02 .chart-bottom li span { display:block; font-size:13px; color:#999; font-weight:normal; }
.main .chart02 .chart-bottom li span:after { display:inline-block; margin-left:4px; content:""; width:0px; height:0px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid #627cff;}
.main .chart02 .chart-bottom li:last-child span:after { border-bottom: 7px solid #e28787; border-top:none; }
.main .chart02 .chart-bottom li strong { display:block; margin-top:10px; font-size:14px; color:#555; letter-spacing:1.08px; }



/* 출/퇴근관리 */
.table-type01.monthly table th {font-weight:400;}
.table-type01.monthly table td {padding:7px 0 10px; vertical-align:top;}
.table-type01.monthly table td + td {border-left:1px solid #f4f5f8;}
.table-type01.monthly table td > p {height:43px; color:#555; font-size:12px;}
.table-type01.monthly table td > p span.no {display:block; line-height:37px;}
.table-type01.monthly table td:first-child {padding-left:25px; vertical-align:middle;}
.table-type01.monthly table td .ico-badge.big {margin:0 auto;}
.table-type01.monthly table .sat {color:#627cff;}
.table-type01.monthly table .sun {color:#ff8282;}

.commuting-info {padding-top:28px; margin-top:25px; border-top:1px solid #f4f5f8;}
.commuting-info:after {content:''; display:block; clear:both;}
.commuting-info .date {color:#000; font-size:18px; font-weight:500;}
.commuting-info > div {float:left; width:48%;}
.commuting-info > div table th {vertical-align:middle;}
/* 191017 수정 - selectbox 넓이 수정 */
.commuting-info > div .select-type02,
.commuting-info > div .design-select-box {width:200px; min-width: 200px;}
.commuting-info > div.map-box {float:right;}
.commuting-info > div.map-box > img {width:100%;}

/* 휴가관리 */
.table-type01.vacation .vacation-box {position:relative;}
.table-type01.vacation .vacation-box > p {position:relative; width:40px; height:36px; line-height:36px; margin:0 auto; text-align:center; border-radius:6px; background-color:#f4f5f8;}
.table-type01.vacation .vacation-box > p.is-vacation {color:#627cff; background-color:rgba(98,124,255,0.15);}
.table-type01.vacation .vacation-box > p.is-report {background-color:#fcfcfc;}
.table-type01.vacation .vacation-box > p em {position:absolute; top:-10px; right:-10px;}
.table-type01.vacation .vacation-box .pop-vacation {position:absolute; bottom:35px; left:50%; width:185px; margin-left:-92px; padding-bottom:8px; text-align:left; box-sizing:border-box; display:none;}
.table-type01.vacation .vacation-box .pop-vacation:after {content:''; display:block; width:100%; height:15px; background:url('../images/arr-down.png') no-repeat bottom center;}
.table-type01.vacation .vacation-box .pop-vacation ul {padding:20px; background-color:#fff; box-shadow:0 10px 15px 0 rgba(0, 0, 0, 0.1); border-radius:6px;}
.table-type01.vacation .vacation-box .pop-vacation li {position:relative; color:#555; font-size:13px; line-height:20px; z-index:10;}
.table-type01.vacation .vacation-box > p:hover + .pop-vacation {display:block;}

/* 휴가 추가하기 툴팁 (210126) */
.board-view02.vacation .vacation-box {position:relative;}
.board-view02.vacation .vacation-box .pop-vacation {position:absolute; bottom:30px; left:50%; width:185px; margin-left:-78px; padding-bottom:5px; text-align:left; box-sizing:border-box; display:none;}
.board-view02.vacation .vacation-box .pop-vacation:after {content:''; display:block; width:100%; height:15px; background:url('../images/arr-down.png') no-repeat bottom center;}
.board-view02.vacation .vacation-box .pop-vacation ul {padding:20px; background-color:#fff; box-shadow:0 10px 15px 0 rgba(0, 0, 0, 0.1); border-radius:6px;}
.board-view02.vacation .vacation-box .pop-vacation li {position:relative; color:#555; font-size:13px; line-height:20px; z-index:10;}

.vacation-view {overflow-y:hidden;}
.vacation-view .profile-info .btn-box {position:absolute; top:50px; right:60px;}
/* 210126 수정 - max-height값 */
.vacation-view .board-view01 {float:left; width:64%; max-height:550px; padding:60px; background:#fff; border-radius:6px; box-sizing:border-box;}
.vacation-view .board-view01 .txt-type01 {display:inline-block; width:calc(100% - 70px);}
.vacation-view .board-view01 .ico-badge {float:right;}
/* 191114 수정 - width값 */
.vacation-view .board-view02 {float: left; width: 64%; max-height: 528px; padding: 60px; background: #fff; border-radius: 6px; box-sizing: border-box;}
/* 191114 수정 - width값 */
.vacation-view .vacation-list {float:right; width:34%; height:528px; overflow:hidden; overflow-y:auto;}
.vacation-view .vacation-list ul {padding:0 30px 0 13px;}
.vacation-view .vacation-list ul li > a {position:relative; display:block; height:108px; padding:23px 30px 0; border-radius:6px; border:solid 1px #e4e4e4; background-color:#fcfcfc; box-sizing:border-box;}
.vacation-view .vacation-list ul li.active > a,
.vacation-view .vacation-list ul li:hover > a {border-color:#627cff; background-color:#fff;}
.vacation-view .vacation-list ul li.active > a:before {content:''; position:absolute; top:45px; left:-5px; display:inline-block; padding:4px; border:solid #627cff; border-width:0 1px 1px 0; background-color:#fff; transform:rotate(135deg); -webkit-transform:rotate(135deg); z-index:999;}
.vacation-view .vacation-list ul li + li {margin-top:10px;}
.vacation-view .vacation-list ul li .ico-badge {position:absolute; top:30px; right:30px;}
.vacation-view .vacation-list ul li dl {overflow:hidden;}
.vacation-view .vacation-list ul li dl dt {float:left; width:60px; color:#999; font-style:14px; line-height:30px;}
.vacation-view .vacation-list ul li dl dd {float:left; width:calc(100% - 60px); font-style:14px; line-height:30px;}


/* 리포트 */
.table-type01.report-monthly table .sat {color:#627cff;}
.table-type01.report-monthly table .sun {color:#ff8282;}
.table-type01.report-monthly table th {padding:16px 30px; text-align:center;}
.table-type01.report-monthly table tr:hover td {background-color:#fcfcfc;}
.table-type01.report-monthly table tr td:hover {background-color:#fff;}
.table-type01.report-monthly table td {padding:0; height:130px; text-align:right; border-top:10px solid #f4f5f8;}
.table-type01.report-monthly table td + td {border-left:10px solid #f4f5f8;}
.table-type01.report-monthly table td > div {position:relative; padding:29px 30px 25px;}
.table-type01.report-monthly table td > div .date {position:absolute; top:15px; left:15px; width:35px; height:35px; line-height:35px; font-weight:500; border-radius:35px; background-color:#f4f5f8; text-align:center;}
.table-type01.report-monthly table td > div .date.disabled {opacity:0.5;}
.table-type01.report-monthly table td > div ul {display:inline-block;}
.table-type01.report-monthly table td > div ul li {width:65px; line-height:23px; text-align:left;}
.table-type01.report-monthly table td > div ul li strong {float:right;}
.table-type01.report-monthly table td > div ul li.state01 {color:#555;}
.table-type01.report-monthly table td > div ul li.state02 {color:#bfa355;}
.table-type01.report-monthly table td > div ul li.state03 {color:#627cff;}
.table-type01.report-monthly table td > div ul li.state04 {color:#e28787;}

/******************************************
	관리
*******************************************/
/* 일반 */
.logobox {position: relative; display: block;top: 0; left: 0; width: 140px; height: 140px; margin-top: 30px; overflow: hidden; border: 0.5px solid #ddd; box-sizing: border-box;}
.logobox img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 140px;}

/* 의견 */
.attach_box {overflow: hidden;}
.attach_box li {float: left;}
.attach_box li + li {margin-left: 10px;}
.attach_box li a {display: block;}
.attach_box li .attach_list {position: relative; display: block; top: 0; left: 0; width: 140px; height: 140px; overflow: hidden;}
.attach_box li .attach_list > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; }
.tr_attach th, .tr_attach td {padding: 32px 0 8px !important;}

.pop-con.pop_type02 {padding: 0; display: block; width: 737px; height: 795px;}
.pop-con.pop_type02 img {position: absolute; left: 50%; top: 50%; max-width: 100%; max-height: 100%; margin: auto; transform: translate(-50%, -50%);}

/* 191114 수정 - width값 */
@media screen and (max-width:1800px) {
    .vacation-view .board-view01 {width: 57%;}
    .vacation-view .vacation-list {width: 41%;}
    .vacation-view .board-view02 {width: 57%;}
}