@charset "utf-8";

/* reset */
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
a {color: inherit; text-decoration: inherit;}
li {list-style: none;}
address, em, i {font-style: normal;}
mark {background-color: #ffe0e5; color: #2e2e2e; padding: 0 5px}
button {background: none; border: none; font-family: 'MinSans';}
img {vertical-align: middle;}
select::-ms-expand {display:none}

/* ----- 폰트 ----- */
/* font - MinSans */
@font-face {font-family: 'MinSans';font-weight: 300; src: url("../fonts/MinSans-Regular.woff2") format('woff2');}
@font-face {font-family: 'MinSans'; font-weight: normal; src: url("../fonts/MinSans-Medium.woff2") format('woff2');}
@font-face {font-family: 'MinSans'; font-weight: bold; src: url("../fonts/MinSans-Bold.woff2") format('woff2');}


/* font - NanumGothic */
@font-face { font-family: 'NanumGothic'; font-weight: normal; src: url("../fonts/NanumGothic.woff") format('woff');}
@font-face { font-family: 'NanumGothic'; font-weight: bold; src: url("../fonts/NanumGothicBold.woff") format('woff');}

/* font - icon */
@font-face { font-family: 'Material Symbols Outlined'; font-style: normal;  font-weight: 100 700;  src: url("../fonts/MaterialSymbolsOutlined.woff2") format('woff2');}
.material-symbols-outlined {font-family: 'Material Symbols Outlined'; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }

/* ----- 공통 ----- */

/* LayOut */
body {font-family: 'MinSans';}
.wrap {position:relative; width:100%; margin:0 auto; overflow: hidden; min-width: 1800px}

/* header */
header {height: 70px; line-height: 70px; background: #ffffff;  color: #000; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);  position: relative; z-index: 9999;}
header .logo {display: block; float: left; width: 210px; text-align: center;  position: relative; z-index: 10;}
header .logo img {width: 100px}
header .logo img:nth-child(2){display: none;}
header .gnb {float: left; display: flex; justify-content: space-between;}
header .gnb li a {display: block; padding: 0 35px; text-align: center; font-size: 17px; position: relative;z-index: 1;}
header .gnb li a:hover, header .gnb li a:focus,header .gnb li a.on { color: #4e89f0}
header .gnb li a:before {content: ''; width: 100%; height: 4px; background: #4e89f0; position: absolute; left:0;bottom: 0; z-index: -1; transition: 0.25s; opacity: 0}
header .gnb li a:hover:before,header .gnb li a:focus:before,header .gnb li a.on:before {opacity: 1}
header .gnb li a .new {background: #4e89f0; display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; font-size: 9px; border-radius: 100%; position:absolute; top: 20px; margin-left: 5px; color: #fff; font-weight: 300}
header .id {float: right; display: flex; justify-content: space-between; font-weight: normal; font-size: 12px; margin-right: 24px;}
header .id .img {width: 40px; height: 40px; line-height: 45px; border-radius: 100%; overflow: hidden; background: #273545; margin: 15px 15px 0 0; float: left}
header .id .img img {width: 100%;}
header .id ul {float: right; line-height: 1.4; position: relative; margin-top: 18px;font-weight: 300; display: flex; justify-content: space-between}
header .id ul .name {font-size: 12px; font-weight: 400; display: block;}
header .id ul .team {display: block}
header .id ul .sms {position: relative; margin-left: 15px}
header .id ul .sms a {display: block}
header .id ul .sms .material-symbols-outlined {font-size: 30px; font-weight: 300; color: #4e89f0}
header .id ul .sms .new {position:absolute; right:8px; top: 12px; width: 14px; height: 14px; line-height: 14px; text-align: center; font-size: 10px; border-radius: 100%; color: #4e89f0; font-weight: normal;    margin-right: 0;}


/* ----- 메인 페이지 ----- */

/* 왼쪽 오른쪽 레이아웃 */
section.left {float: left; padding: 30px 20px; box-sizing: border-box; width: 377px}
section.right {float: left; padding: 30px 20px 20px 0;box-sizing: border-box; width: 1250px}

/* box - 공통 */
.box {background: #fff; border-radius: 5px; box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.08); border: 1px solid #ededed; margin-bottom: 15px;}
.box .title {border-bottom: 1px solid #ededed; padding: 4px 7px 0 15px; height: 45px; line-height: 45px; overflow: hidden;}
.box .title h2 {font-size: 17px; color: #273545; float: left; font-weight: bold;}
.box .title a {display: block; font-size: 19px; font-weight: 400; float: right; color: #bfbfbf}
.box .title a:hover,.box .title a:focus {color: #5492ff}
.box .inner { padding: 18px 15px;}

/* toggleSwitch - 야간모드 */
.toggleSwitch {position: fixed;; z-index: 100; right: 30px;bottom: 25px;cursor: pointer;}
.toggleSwitch button {cursor: pointer; padding: 0 20px 0 40px; height: 50px; line-height: 50px;border-radius: 40px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); border: 1px solid #f0f0f0; font-size: 13px;color: #273545; position: relative; background:#fff}
.toggleSwitch button span {font-size: 20px; font-weight: 200; position: absolute; left: 15px; top: 51%; transform: translateY(-50%);}
.toggleSwitch button:hover {background: #333638; color: #dedede;}
.toggleSwitch button:hover span {color: #fbe303;}

/* profile - 프로필 */
.profile .inner {display: flex; justify-content: space-between; position: relative;}
.profile .img {width: 90px; height: 120px; border-radius: 5px; overflow: hidden; margin-right: 17px;position: relative}
.profile .img img {width: 100%; height: auto; position: absolute;left: 50%;top:50%; transform: translate(-50%,-50%);}
.profile .text {font-size: 14px; font-weight: 300}
.profile .text b {font-size: 18px; font-weight: normal; display: block; margin-bottom: 10px; color: #000}
.profile .btnBox {width: 200px; flex-wrap: nowrap; height: 30px; overflow: hidden}
.profile .btn { padding: 8px 10px; font-size: 11px; font-weight: 300; border: none;}
.profile .note {display: inline-block; position: absolute;; margin-left: 15px; right: 8px; top: 5px}
.profile .note .material-symbols-outlined {font-size: 30px; font-weight: 300; color: #ccc}
.profile .note .new {position:absolute; right:-2px; top: 2px; width: 14px; height: 14px; line-height: 14px; text-align: center; font-size: 10px; border-radius: 100%; color: #fff; font-weight: normal; margin-right: 0; border-radius: 100%; background: #ee3b3b;}

/* work - 근태관리 */
.work #nowtime {display: block; font-size: 34px; font-weight: bold; text-align: center; color: #4a4a4a;}
.work #nowdate {display: block; text-align: center; color: #a3a3a3; font-size: 15px; font-weight: 300}
.work ul {display: flex; justify-content: space-between; text-align: center; border-top: 1px solid #ededed; }
.work ul li {width:50%; padding: 15px 0; color: #a3a3a3; font-size: 14px; font-weight: 300; position: relative}
.work ul li span {font-size: 19px; color: #000; font-weight: normal;}
.work ul li:nth-child(1):after {content: ''; width: 1px; height: 60%; position: absolute; right: 0; top: 50%; transform: translateY(-50%);background:#ededed}
.work .btn {width: 93%; margin: 0 auto 12px; padding: 11px 0; font-size: 16px; background: rgba(78, 137, 240, 0.14); color: #4e89f0; font-weight: 300; display: block; border: 1px solid rgba(78, 137, 240, 0.55)}
.work .btn:hover,.work .btn:focus {background: linear-gradient(90deg, #3d7ff4 0%, rgb(65, 155, 255) 100%); color: #fff}

/* calendar - 일정관리 */
.calendar .inner {padding: 15px 10px;}
.calendar .ym {text-align: center; font-size: 20px;font-weight: bold; margin-bottom: 10px; color: #000}
.calendar table {display: block; width: 100%;}
.calendar table tbody {display: block;}
.calendar table tr {display: block; width: 100%; overflow: hidden}
.calendar table td {width:14%; display: block; float: left; padding: 8px 0; font-weight: 300; text-align: center; margin: 0; font-size: 14px; color: #888; position: relative; z-index: 2;}
.calendar table .th td {color: #000}
.calendar table td:nth-child(1) {color: #eb2c2c}
.calendar table td:nth-child(7) {color: #4e89f0}
.calendar table td.on {color: #fff}
.calendar table td.on:before {content: ''; width: 27px; height: 27px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #4e89f0; border-radius: 100%; z-index: -1}

/* urlBox - url 이동 */
.urlBox {display: flex;flex-wrap: wrap; padding: 5px;}
.urlBox a {display: block; width: 31%; margin: 1.16%; box-sizing: border-box; text-align: center;font-size: 13px; padding: 8px 0;background: #f2f2f2 !important; color: #314256; border: 1px solid #ececec;}
.urlBox a span {display: block; font-size: 23px; margin-bottom: 2px}
.urlBox a.color_a ,.urlBox a.color_b {background: #c0d6ff24 !important;color: #4e89f0;border: 1px solid rgba(78, 137, 240, 0.55);}

/* menu - 메뉴알림 */
.menu .inner {display: flex; padding: 12px;}
.menu .inner li {margin-right: 10px}
.menu .inner a {display: block; text-align: center; width: 100px; border-radius: 5px; padding: 8px 0; background: #ecf0f8; color: #273545; font-weight: 300; font-size: 15px; position: relative}
.menu .inner a .material-symbols-outlined {display: block; font-size: 34px; font-weight: 300; margin-bottom: 5px;}
.menu .inner a:hover,.menu .inner a:focus {background: #6c9bed; color: #fff;}
.menu .inner a .new {background: #4e89f0; position:absolute; right: 6px; top: 5px; width: 14px; height: 14px; line-height: 15px; text-align: center; font-size: 9px; border-radius: 2px; color: #fff;}


/* rightCon */
.rightCon {width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap}

/* tableBox - 공지사항 ~ 일정관리 */
.rightCon .tableBox {width: 49.1%; overflow: hidden;}
.rightCon .tableBox .inner {padding: 0}
.rightCon .tableBox .title { padding: 6px 10px 0 18px;}
.rightCon .tableBox table {width: 100%;table-layout: fixed;}
.rightCon .tableBox table tr:first-child td{padding-top:6px;}
.rightCon .tableBox table tr:last-child td{padding-bottom:6px;}
.rightCon .tableBox table tr:hover {background: #f5f5f5}
.rightCon .tableBox table td {font-weight: 300; padding:0 15px 0  20px; font-size: 15px}
.rightCon .tableBox table td:nth-child(2) {color: #808080; font-size: 13px; text-align: right}
.rightCon .tableBox table td a {display: block; padding: 8px 0; position: relative;}
.rightCon .tableBox table td font {font-size: 13px; margin-left: 3px}
.rightCon .tableBox table td:nth-child(1) {width: 450px}
.rightCon .tableBox table td .ellipsis{display: flex; justify-content: left;max-width:99%;font-size: 0;overflow: hidden;}
.rightCon .tableBox table td .ellipsis a{display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 15px;}
.newIco {background: #4e89f0;width: 14px !important; height: 14px; line-height: 15px; text-align: center; font-size: 9px; border-radius:2px; color: #fff; display: inline-block;      margin: 11px 7px 0 0; float: left;}

/* ----- 서브 페이지 ----- */

/* 로그인 */
.wrap.login {height: 100vh; background: #fafafa; min-width: 1000px;background: linear-gradient(90deg, rgba(99,173,255,1) 0%, rgb(40, 106, 224) 100%);}
.login .logo {z-index: 10; position: absolute; width: 100%; text-align: center; left: 0%; top: -24%; }
.login .box {position: absolute; left: 50%; top: 53%; transform: translate(-50%,-50%); color: #000; font-weight: 300; padding:45px 0 0; width: 380px; border-radius: 5px; box-sizing: border-box; box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.2); border: 1px solid #ffffff; }
.login .box .in{width: 80%; margin: 0 auto;}
.login .box h1 {color: #5f94f2; font-weight: normal; font-size: 29px; letter-spacing: -1px; margin-bottom: 25px}
.login .box .f_input {height: 50px; background: #fff; border: 1px solid #dddddd; border-radius: 0; margin: 0 0 10px; font-size: 15px;color: #4e89f0}
.login .box input.f_input::placeholder {color: #000}
.login .box .f_input:focus {background: #f9fbff; border: 1px solid #4e89f0; }
.login .checkBox {margin-top: 3px; padding: 0}
.login .checkBox label {display:inline;margin-right:20px; cursor: pointer}
.login .checkBox input[type=checkbox] + span {padding-left: 28px; font-size: 15px}
.login .checkBox input[type=checkbox] + span:before {content: '\f1fe';position: absolute;left: 0; top: 50%; transform: translateY(-50%); width: 25px; height: 22px;font-family: 'Material Symbols Outlined'; font-size: 22px; font-weight: 400;text-align: center; color: #d6d6d6; background: none; border: none}
.login .checkBox input[type=checkbox]:checked + span:before { color: #3f87f5;content: '\f1fe';  background: none; border: none}
.login .box .btn {width: 100%; font-size: 18px; padding: 15px 0; margin: 26px 0 38px; background: linear-gradient(90deg, rgba(99,173,255,1) 0%, rgba(48,118,241,1) 100%); font-weight: 300}
.login .box h2 {color: #b2b2b2; font-weight: normal; font-size: 12px;font-weight: 300; text-align: center; background: #fafafa; border-top: 1px solid #eee; padding: 20px 0;}
.login .box h2 b {font-weight: normal; color: #8b8b8b}



/* 서브 레이아웃  */
.sideBar {float: left; background: #fff; width: 210px;}
.layout-east {float: left;border-left: 1px solid #ededed;width: calc(100% - 214px); background: #fff; min-height: 100vh}

/* sideBar urlBox */
.sideBar .urlBox {position: fixed; left: 0px; bottom: 40px; border: none; box-shadow: none; margin-bottom: 0; padding: 0;box-sizing: border-box;overflow: hidden; width: 45px;  background: none;overflow: hidden}
.sideBar .urlBox a {display: block; width: 100%; margin: 0 0 4px; padding: 0;line-height: 34px; text-align: left; padding: 0 12px; transition: margin-bottom 0.2s;}
.sideBar .urlBox a:last-child {margin-bottom: 0}
.sideBar .urlBox a span {display: block;float: left;margin-bottom: 0;font-size: 21px;font-weight: 200;vertical-align: middle;margin-right: 7px}
.sideBar .urlBox a.open {position: fixed;bottom: 10px;left: 10px;width: 38px;padding: 0;margin-bottom: 0;text-align: center;background: linear-gradient(90deg, #6295ef 0%, rgb(92, 169, 255) 100%) !important;color: #fff;}
.sideBar .urlBox a.open span {font-weight: 300;display: inline-block;float: none;margin-right: 0;font-size: 28px;line-height: 38px;}
.sideBar .urlBox a.open span:nth-child(2) {display: none}
.sideBar .urlBox a.open.on span:nth-child(2) {display: block}
.sideBar .urlBox a.open.on span:nth-child(1) {display: none}
.sideBar .urlBox .in { display: flex; flex-wrap: wrap; overflow: hidden; width: 0; height: 0; background: #fff;}
/* sideBar urlBox - 열기 */
.sideBar .urlBox.on {width: 210px; z-index: 100;}
.sideBar .urlBox .in.on {width: auto; height: auto; padding: 11px;}
.sideBar .urlBox .in.on a{ width: 100%; margin-bottom: 6px; opacity: 1;}

/* sideBar - snb */
.snb > li > a {display: block; line-height: 52px; font-weight: bold; font-size: 17px; padding: 0 17px; margin: 11px 0 0; color: #333}
.snb .depth {padding: 0 12px;}
.snb .depth li a {display: block; font-weight: 300; font-size: 14px; padding: 0 18px; line-height: 40px; position: relative; margin-bottom: 3px}
.snb .depth li a .new {background: #4e89f0;width: 14px; height: 14px; line-height: 14px; text-align: center; font-size: 10px; border-radius: 100%; color: #fff; display: inline-block;margin-left: 2px; position: absolute; margin-left: 4px; top: 13px;}
.snb .depth li a.on {background: linear-gradient(90deg, #3d7ff4 0%, rgb(65, 155, 255) 100%); color: #fff; border-radius:5px;}
.snb .depth li a.on .new {background: #fff; color: #4e89f0;width: 13px; height: 13px; line-height: 13px; }

/* pageTitle */
.pageTitle {padding: 18px 25px 14px; border-bottom: 1px solid rgba(78, 137, 240, 0.56); background: #f4f8ff; color: #5693ff; font-weight: 300; font-size: 19px;}

/* contents */
.contents {padding:10px 18px 50px;}

/* ----- 폼 공통 ----- */

/* table */
.topTable {width: 100%; overflow: hidden}
.topTable .table {width: 100%; border-spacing: 0; background: #fff; border-radius: 5px; border: 1px solid #ededed; border-bottom: none;}
.topTable .table th {font-weight: 400;border-bottom: 1px solid #ededed; font-size: 15px; color: #000; padding: 8px; background: #f8f8f8; color: #000}
.topTable .table td {border-bottom: 1px solid #ededed; padding: 8px; font-weight: 300; font-size: 14px;}
.topTable .table td .semiTitle {font-size: 15px; color: #000; font-weight: 400; padding: 0 18px; position: relative; z-index: 2; margin-right: 5px;}
.topTable .table td .semiTitle:before {position: absolute; content: ''; width: 100%; height: 53px; top: -17px;  background: #f8f8f8; z-index: -1; left: 50%; transform: translateX(-50%);}

/* btn */
.btnBox {margin-top: 20px}
.btn { font-family: 'MinSans';background: #bcbcbc; color: #fff; padding: 7px 14px; border-radius: 3px; font-size: 12px; display: inline-block; cursor: pointer;font-weight: 300; border: 1px solid transparent; }
/* 넓이 고정 - btn */
.btn.width {padding: 7px 0; width: 70px;}
.btn.navy {background: #314256;}
.btn.white {background: #fff; color: #626262; border-color: #e2e2e2; font-weight: 400}
.btn.blue {background: #4e89f0;}
.btn.gray {background: #b8b8b8;}
.btn.red {background: #f53636;}
.btn.orange {background: #f08a4a}
.btn.black {background: #242424}
.btn.pink {background: #ff688b}
.btn.yellow {background: #f2ba01}
.btn.green {background: #6aba38}
.btn.purple {background: #b373d4}

/* ico */
.btn.ico {color: #aeaeae; padding: 2px 5px; background: #fff}
.btn.ico span {font-weight: 300; font-size: 20px;}
/* line */
.btn.blue.line {background: #fff; border: 1px solid #4e89f0; color: #4e89f0}
.btn.red.line {background: #fff; border: 1px solid #f53636; color: #f53636}

/* 검색버튼 공통 */
.btnBox.search {text-align: center; margin-top: 15px }
.btnBox.search .btn {background: #4e89f0; font-size: 13px;}

/* input */
.f_input {font-family: 'MinSans'; background: #f9f9f9; width: 100%;  box-sizing: border-box; border: 1px solid #e5e5e5;  outline: none; border-radius: 0;  height: 35px; line-height: 35px; padding: 0 12px; font-weight: 300; border-radius: 3px; font-size: 14px;font-family: 'MinSans';}
input.f_input::placeholder { color: #000; }
input.f_input:focus::placeholder {color: transparent}
.f_input:focus {background: #fff; border: 1px solid #4e89f0; }

/* textarea */
textarea.f_input {height: 100px; overflow: auto; resize: none;font-family: 'MinSans';}

/* select */
.selectBox {position: relative; display: inline-block;font-family: 'MinSans'; padding-right: 1px}
.selectBox .f_input  {width: 150px;padding-left: 10px; color: #000}
.selectBox .f_input option {background: #fff; font-weight: 300; font-size: 14px;color: #000}

/* radio */
.radioBox {padding: 5px 4px; display: inline-block;font-family: 'MinSans';}
.radioBox label {display:inline;margin-right:15px;}
.radioBox input[type=radio] {opacity: 0;position: absolute;z-index: 12;width: 18px;height: 18px;}
.radioBox input[type=radio] + span {position: relative;width: 30px; height: 30px; padding-left: 26px; font-weight: 300; font-size: 14px}
.radioBox input[type=radio] + span:before {content: '\e836';position: absolute;left: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; line-height: 22px;border-radius: 3px; font-family: 'Material Symbols Outlined'; font-size: 20px; font-weight: 500; color: #dddddd}
.radioBox input[type=radio]:checked + span:before { color: #4e89f0;content: '\e2e6';}

/* radioActiveBox */
div.radioActiveBox > label { cursor:pointer; }
.radioActiveBox {display: flex;font-family: 'MinSans'; flex-wrap: wrap; margin-top: 2px}
.radioActiveBox label {display: block; position: relative; padding: 7px 0; margin-top: -2px}
.radioActiveBox input[type=radio] {opacity: 0;position: absolute;}
.radioActiveBox input[type=radio] + span {font-weight: 300; font-size: 13px; padding: 8px 10px; border: 1px solid #ededed; margin-left: -1px; color: #000000}
.radioActiveBox label:first-child input[type=radio] + span {border-radius: 3px 0 0 3px}
.radioActiveBox label:last-child input[type=radio] + span {border-radius: 0 3px 3px 0}
.radioActiveBox input[type=radio]:checked + span { color: #2c79ff; background: #f1f6ff; border-color: #5291ff}
.radioActiveBox .active + label span {border-left-color: #5291ff}

/* checkBox */
.checkBox {padding: 2px 4px; display: inline-block;font-family: 'MinSans';}
.checkBox label {display:inline;margin-right:20px; cursor: pointer}
.checkBox input[type=checkbox] {opacity: 0;position: absolute;z-index: 12;width: 18px;height: 18px;}
.checkBox input[type=checkbox] + span {position: relative;width: 30px; height: 30px; padding-left: 28px; font-weight: 300; font-size: 14px}
.checkBox input[type=checkbox] + span:before {content: '\e876';position: absolute;left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; line-height: 20px;border-radius: 3px; font-family: 'Material Symbols Outlined'; font-size: 20px; font-weight: 500; background: #eee; color: #d5d5d5}
.checkBox input[type=checkbox]:checked + span:before { color: #fff;content: '\e876'; background: #4e89f0}

/* datepickerBox */
.datepickerBox .bar {font-weight: bold;color: #b7b7b7;}
.datepickerBox .bar:after {display: none;}
.datepickerBox .datepicker{width:150px;text-align:center;padding-left: 15px !important; font-size: 13px}
.datepickerBox span {position: relative; margin: 0 2px}
.datepickerBox span:after {content: '\ebcc';position: absolute;left: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; line-height: 22px; font-family: 'Material Symbols Outlined'; font-size: 22px; font-weight: 200; color: #659cff; z-index: 11}
.datepickerBox .btn {height: 35px; vertical-align: top}

/* radioActiveBox */
.btn-group {display: flex;font-family: 'MinSans'; flex-wrap: wrap; margin-top: 2px}
.btn-group li {display: block; position: relative; padding: 7px 0; margin-top: -2px}
.btn-group li {font-weight: 300; font-size: 13px; padding: 7px 10px; border: 1px solid #ededed; margin-left: -1px; color: #000000}
.btn-group .active { color: #2c79ff; background: #f1f6ff; border-color: #5291ff}
.btn-group .active + li {border-left-color: #5291ff}


@media screen and (max-width:1000px) {
.wrap.login {min-width: 100%}



}