@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

A:link {
	FONT-SIZE: 10pt; COLOR: #336699; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A:visited {
	FONT-SIZE: 10pt; COLOR: 336699; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A:active {
	FONT-SIZE: 10pt; COLOR: 336699; font-family: "Nanum Gothic", sans-serif;
}
A:hover {
	FONT-SIZE: 10pt; COLOR: 336699; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: underline
}

A.menu1:link {
	FONT-SIZE: 10pt; COLOR: #565656; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.menu1:visited {
	FONT-SIZE: 10pt; COLOR: #565656; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.menu1:active {
	FONT-SIZE: 10pt; COLOR: #FF0000; font-family: "Nanum Gothic", sans-serif;
}
A.menu1:hover {
	FONT-SIZE: 10pt; COLOR: #FF0000; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: underline
}

A.menu2:link {
	FONT-SIZE: 10pt; COLOR: #FFFFFF; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.menu2:visited {
	FONT-SIZE: 10pt; COLOR: #FFFFFF; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.menu2:active {
	FONT-SIZE: 10pt; COLOR: #E3E860; font-family: "Nanum Gothic", sans-serif;
}
A.menu2:hover {
	FONT-SIZE: 10pt; COLOR: #E3E860; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: underline
}


A.cate1:link {
	FONT-SIZE: 9pt; COLOR: #0000FF; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.cate1:visited {
	FONT-SIZE: 9pt; COLOR: #0000FF; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.cate1:active {
	FONT-SIZE: 9pt; COLOR: #FF0000; font-family: "Nanum Gothic", sans-serif; FONT-WEIGHT:BOLD
}
A.cate1:hover {
	FONT-SIZE: 9pt; COLOR: #FF0000; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: underline
}

A.cate2:link {
	FONT-SIZE: 10pt; COLOR: 1E820E; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.cate2:visited {
	FONT-SIZE: 10pt; COLOR: 1E820E; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.cate2:active {
	FONT-SIZE: 10pt; COLOR: #FF0000; font-family: "Nanum Gothic", sans-serif; FONT-WEIGHT:BOLD
}
A.cate2:hover {
	FONT-SIZE: 10pt; COLOR: #FF0000; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: underline
}

A.cate3:link {
	FONT-SIZE: 9pt; COLOR: 7D6C80; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.cate3:visited {
	FONT-SIZE: 9pt; COLOR: 7D6C80; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.cate3:active {
	FONT-SIZE: 9pt; COLOR: #FF0000; font-family: "Nanum Gothic", sans-serif; FONT-WEIGHT:BOLD
}
A.cate3:hover {
	FONT-SIZE: 9pt; COLOR: #FF0000; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: underline
}


BODY {
	SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 10pt; COLOR: #595959; SCROLLBAR-TRACK-COLOR: #f8f7f7; font-family: "Nanum Gothic", sans-serif; BACKGROUND-COLOR: #ffffff
}

P.breakhere {page-break-before: always} 

.title { FONT-SIZE: 10pt; COLOR: #FFFFFF; font-family: "Nanum Gothic", sans-serif; }
.title .menu2:hover { color: #FFF100}
.title .menu2 a { color: #fff; text-decoration: none}
.title .menu2 a:hover { color: #FFF100; }


td { FONT-SIZE: 10pt; COLOR: #191818; font-family: sans-serif; }

.versionfile {
	FONT-SIZE: 10pt; COLOR: #595959; FONT-FAMILY: Courier New;
}
.versionfilebox {
	FONT-SIZE: 10pt; COLOR: #595959; FONT-FAMILY: Courier New;
    BORDER-RIGHT: #CFCFCF 1px solid; BORDER-TOP: #CFCFCF 1px solid; BORDER-LEFT: #CFCFCF 1px solid; BORDER-BOTTOM: #CFCFCF 1px solid; BACKGROUND-COLOR: #ffffff
}

.mynote {
	FONT-SIZE: 9pt; COLOR: #FFFFFF; FONT-FAMILY: Courier New;
    BORDER-RIGHT: #804000 3px solid; BORDER-TOP: #804000 3px solid; BORDER-LEFT: #804000 3px solid; BORDER-BOTTOM: #804000 3px solid; BACKGROUND-COLOR: #367C89
}


.box { BORDER-RIGHT: #CFCFCF 1px solid; BORDER-TOP: #CFCFCF 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #CFCFCF 1px solid; BORDER-BOTTOM: #CFCFCF 1px solid; font-family: "Nanum Gothic", sans-serif; BACKGROUND-COLOR: #ffffff}
.supplykind{BORDER-RIGHT: #CFCFCF 1px solid; BORDER-TOP: #CFCFCF 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #CFCFCF 1px solid; BORDER-BOTTOM: #CFCFCF 1px solid; font-family: "Nanum Gothic", sans-serif; BACKGROUND-COLOR: #ffffff}
.button {BORDER-RIGHT:  1px solid; BORDER-TOP:  1px solid; FONT-SIZE: 9pt; BORDER-LEFT:  1px solid; BORDER-BOTTOM:  1px solid; font-family: "Nanum Gothic", sans-serif; }
.selectbox {BORDER-RIGHT: #CFCFCF 1px solid; BORDER-TOP: #CFCFCF 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #CFCFCF 1px solid; BORDER-BOTTOM: #CFCFCF 1px solid; font-family: "Nanum Gothic", sans-serif; BACKGROUND-COLOR: #ffffff}
.readonlybox {BORDER-RIGHT: #CFCFCF 1px solid; BORDER-TOP: #CFCFCF 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #CFCFCF 1px solid; BORDER-BOTTOM: #CFCFCF 1px solid; font-family: "Nanum Gothic", sans-serif; BACKGROUND-COLOR: #dcdcdc}
.editbox {BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; FONT-SIZE: 10pt; BORDER-LEFT: #999999 1px solid; BORDER-BOTTOM: #999999 1px solid; font-family: "Nanum Gothic", sans-serif; BACKGROUND-COLOR: #ffffff; height:23px;padding-top:3px;padding-left:2px}
.box1 {font-family: "Nanum Gothic", sans-serif; font-size: 9pt; background-color:#F0F0F0}
.box2 {FONT-SIZE: 9pt; font-family: "Nanum Gothic", sans-serif; FONT-COLOR: #434343; BACKGROUND-COLOR: #ffffff}

input[type=text].box { height: 22px;}


.search {
	FONT-SIZE: 10pt; COLOR: 000000; font-family: "Nanum Gothic", sans-serif;line-height:20px
}

A.search:link {
	FONT-SIZE: 10pt; COLOR: 0000CC; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: underline
}
A.search:visited {
	FONT-SIZE: 10pt; COLOR: 0000CC; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: underline
}
A.search:active {
	FONT-SIZE: 10pt; COLOR: 0000CC; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: underline
}
A.search:hover {
	FONT-SIZE: 10pt; COLOR: 0000CC; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: underline
}

A.search_link:link {
	FONT-SIZE: 10pt; COLOR: 218D44; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.search_link:visited {
	FONT-SIZE: 10pt; COLOR: 218D44; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.search_link:active {
	FONT-SIZE: 10pt; COLOR: 218D44; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.search_link:hover {
	FONT-SIZE: 10pt; COLOR: 218D44; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: underline
}

A.search_file:link {
	FONT-SIZE: 9pt; COLOR: 336699; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.search_file:visited {
	FONT-SIZE: 9pt; COLOR: 336699; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.search_file:active {
	FONT-SIZE: 9pt; COLOR: 336699; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: none
}
A.search_file:hover {
	FONT-SIZE: 9pt; COLOR: 336699; font-family: "Nanum Gothic", sans-serif; TEXT-DECORATION: underline
}

.form-radio-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px}
.form-radio-list span { display: flex; align-items: center; gap: 5px; width: 15%; white-space: nowrap}
.form-radio-list input { margin: 0}


/*--------------------
Top Nav
--------------------*/
.gnb { position: relative}
.gnb::after { content: ""; position: absolute; top: 25px; left: 0; right: 0; height: 75px; background: #e6f6ff; z-index: -1}

/*.top-nav { width: 1000px; height: 650px; background: #f5f5f5}*/
.top-nav { width: 1000px; height: 75px; background: #e6f6ff}
.top-nav .nav-menu { display: flex; flex-wrap: wrap; gap: 5px 8px; padding: 5px 10px}


/*---------------------------------------
Top Nav : New
---------------------------------------*/
.gnbmenu { position: relative; width: 1000px; height: 100px; background: #e6f6ff}
.gnbmenu ul { list-style: none; padding: 0; margin: 0}
.gnbmenu > ul { display: flex; justify-content: space-between; align-items: center; height: 25px; background: #2929B2; padding: 0 10px}

.gnbmenu > ul > li > a { font-size: 13px; color: #fff; font-weight: 700}
.gnbmenu > ul > li:hover > a { color: #FFF100; text-decoration: none}
.gnbmenu > ul > li.on > a { color: #FFF100}
.gnbmenu > ul > li.menu07 > a { color: #d62828 !important}

.gnbmenu ul.depth2 { position: absolute; left: 10px; right: 10px; top: 30px; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0 10px}
.gnbmenu ul.depth2 li { position: relative;}
.gnbmenu ul.depth2 li::before { content: ""; position: absolute; left: -10px; top: 50%; width: 2px; height: 10px; background: #2929b2; transform: translateY(-50%)}
.gnbmenu ul.depth2 li:first-child { margin-left: -10px}
.gnbmenu ul.depth2 li:first-child::before { content: none}
.gnbmenu ul.depth2 li a { font-size: 13px; color: #111; font-weight: 400}
.gnbmenu ul.depth2 li:hover a { color: #ff0000; text-decoration: none}
.gnbmenu ul.depth2 li.no-use a { color: #a52a2a}  /* brown */
.gnbmenu ul.depth2 li.no-use:hover a { color: #ff0000}  /* brown */
.gnbmenu ul.depth2 li.account a { color: #333; font-weight: 600}
.gnbmenu ul.depth2 li.account:hover a { color: #ff0000; font-weight: 600}
.gnbmenu ul.depth2 li.pkadmin a { color: #0000ff}  /* red */
.gnbmenu ul.depth2 li.pkadmin:hover a { color: #ff0000}  /* red */





/*--------------------
Index
--------------------*/
.btn-save { font-size: 13px; color: #db2828; font-weight: 700; border-radius: 4px; border: 1px solid #db2828; padding: 5px 15px; cursor: pointer;}


/*--------------------
Modal
--------------------*/
.modal-box { display: none; position: absolute; left: 0 !important; top: 0 !important; width: 1000px; height: 650px; z-index: 10}
/*.modal-box .inner { position: absolute; top: 51%; left: 41%; min-width: 280px; max-width: 700px; min-height: 15%; background:#9B111E; border-radius: 10px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); transform: translate(-50%, -50%)}*/
.modal-box .inner { position: absolute; top: 51%; left: 41%; min-width: 300px; max-width: 700px; min-height: 8%; background:#9B111E; border-radius: 5px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); transform: translate(-50%, -50%)}
.modal-box .modal-close { position: absolute; right: 0px; top: 0px; z-index: 11}
.modal-box .modal-close button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 0; background: #111; border: 0; cursor: pointer;}
.modal-box .modal-close button span { position: relative; display: block; width: 22px; height: 2px; background: transparent}
.modal-box .modal-close button span::before,
.modal-box .modal-close button span::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; background: #fff}
.modal-box .modal-close button span::before { transform: rotate(45deg)}
.modal-box .modal-close button span::after { transform: rotate(-45deg)}
.modal-box .modal-body { color: #111}

.b-modal { display: none !important; width: 1000px; height: 650px; opacity: 0.6 !important}

/*@media(min-width : 992px){
	.modal-box .inner { min-width: 320px; max-width: 700px; min-height: 15%;}
}
@media(max-width : 991px){
	.modal-box .inner { width: calc(60% - 40px)}
}
@media(max-width : 767px){
	.modal-box .inner { width: calc(75% - 40px)} 
}
@media(max-width : 575px){
	.modal-box .inner { width: calc(100% - 40px)} 
}*/


/*---------------------------------------
Modal : 경영지원팀 공지 필독
---------------------------------------*/
/*.read-text { padding: 30px; color: #FEFD48; font-size: 15px; font-weight:600; }*/
.read-text { padding: 5px 30px; color: #FEFD48; font-size: 15px; font-weight:600; text-align: center}


/*---------------------------------------
연차 관리
---------------------------------------*/
.monthbreak-top { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #ddd; padding: 0px 0px 4px 4px}
.monthbreak-top .text-inner { position: relative;}
.monthbreak-top .text-inner .txt { position: relative; width: 800px; border: 1px solid #ddd; padding: 3px; margin: 5px 0}
.monthbreak-top .text-inner .txt p { margin-bottom: 0}
.monthbreak-top .text-inner .txt .btn-edit { position: absolute; top: 0px; right: -20px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #fff; line-height: 1; background: #333; border: 0; padding: 0; cursor: pointer}
.monthbreak-top .text-inner .txt .btn-edit i { margin: 0}

.monthbreak-top .text-inner .team { position: relative; display: inline-flex; align-items: center; gap: 5px}
.monthbreak-top #breakrules { position: absolute; right: -50px; top: 14px; color: rgba(0,0,0,.87); background: #fff; border: 1px solid #333; padding: 10px; transform: translateX(100%); z-index: 10}
/*.monthbreak-top #breakrules::after { content: ''; position: absolute; left: -20px; top: 25px; border-top: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid skyblue;}*/

.monthbreak-top #breakrules .btn-edit { position: absolute; top: 0px; right: -24px; width: 24px; height: 24px; background: #333; color: #fff; line-height: 1; border: 0; cursor: pointer; padding: 0}
.monthbreak-top #breakrules .btn-edit i { margin: 0}
.monthbreak-top #breakrules p { margin-bottom: 0}
/*.monthbreak-top #breakrules .info { font-weight: 700; text-decoration: underline}*/


/*---------------------------------------
schedule
---------------------------------------*/
.wrap-cal { position: relative;}

.wrap-cal .cal-top { position: sticky; top: 0; display: flex; justify-content: center; background: #fff; padding-bottom: 5px; z-index: 10}
.wrap-cal .cal-con { position: relative; display: flex; flex-direction: column; align-items: center}
.wrap-cal .cal-con .cal-tbl-top { position: sticky; top: 35px; display: flex; justify-content: center; width: 100%; background: #fff; z-index: 10}

table tr.cal-thead-fix { position: sticky; top: 76px; z-index: 1}

.wrap-cal #breakrules { position: fixed; left: 50%; top: 29px; color: rgba(0,0,0,.87); background: #E6F6FF; border: 1px solid #333; padding: 10px; transform: translateX(-50%); z-index: 20}
.wrap-cal #breakrules .btn-edit { position: absolute; top: -24px; right: 0; width: 24px; height: 24px; background: #333; color: #fff; line-height: 1; border: 0; cursor: pointer; padding: 0}
.wrap-cal #breakrules .btn-edit i { margin: 0}
.wrap-cal #breakrules p { margin-bottom: 0}

table.day_column_tbl a { font-size: 13px; line-height: 1.0;}
table.day_column_tbl .room_txt_big { line-height: 1.2}
table.day_column_tbl .room_txt_small { line-height: 1.2}


/*---------------------------------------
일일보고서(달력)
---------------------------------------*/
.task-cal { position: relative; padding: 0 20px 0 5px}
.task-cal-top { position: sticky; top: 0; background: #fff; z-index: 10}

.task-cal-con { }
.task-cal-con #calendar { position: relative; top: 0; bottom: auto}
.task-cal-con .tui-view-46 { position: sticky; top: 71px; height: 34px !important; border-top: 2px solid #ff0000; border-bottom: 1px solid #e5e5e5; background: #fff; z-index: 1}
.task-cal-con .tui-view-36 { position: sticky; top: 71px; height: 34px !important; border-top: 2px solid #ff0000; border-bottom: 1px solid #e5e5e5; background: #fff; z-index: 1}


/*---------------------------------------
직원 관리(목록)
---------------------------------------*/
/* Common */
.top-title-bar { position: sticky; top: 0; background: #fff; padding-bottom: 10px}

.tbl-top-form { position: sticky; top: 40px; background: #fff; padding-bottom: 5px}
.tbl-style1 { width: 100%; border-spacing: 0; border-collapse: collapse}
.tbl-style1 th, .tbl-style1 td { border: 1px solid #444}
.tbl-style1 th { white-space: nowrap}

.tbl-style1.fs-12tbl th, .tbl-style1.fs-12tbl td { font-size: 12px}
.tbl-style1.fs-13tbl th, .tbl-style1.fs-13tbl td { font-size: 13px}
.tbl-style1.fs-14tbl th, .tbl-style1.fs-14tbl td { font-size: 14px}

.btnn-list { display: flex; align-items: center; justify-content: center; gap: 5px}
.btnn-list.left { justify-content: flex-start}
.btnn-list.right { justify-content: flex-end}

/* 직원 관리 */
.member-wrap .tbl-thead-fix { position: sticky; top: 68px}
.member-wrap .btnn-list + .btnn-list { padding-bottom: 20px; margin-top: 10px}


/*---------------------------------------
직원 관리(수정)
---------------------------------------*/
.teammove.tbl-style1 th { color: #191818; font-weight: normal}
.teammove.tbl-style1 th, 
.teammove.tbl-style1 td { border-color: #ccc; text-align: center}
.teammove.tbl-style1 td.left { text-align: left}
.teammove.tbl-style1 td.right { text-align: right}

.tbl-btn { display: inline-block; border: 1px solid #999; border-radius: 3px; padding: 2px 7px; cursor: pointer}
.tbl-btn.btn-del { margin-left: 3px}

.c-grey { color: #666 !important}
tr.c-grey td { color: #666 !important}

.p5 { padding: 5px !important}
.p10 { padding: 10px !important}


/*---------------------------------------
업무일지 : 등록
---------------------------------------*/
.tasklist-btn-icon i.icon { height: auto; font-size: 15px; transition: 0.1s ease-in}
.tasklist-btn-icon i.icon:hover { transform: scale(1.2)}


/*---------------------------------------
gnbmenu
---------------------------------------*/
.worktime-box { display: flex; margin: 25px 10px 0 10px}
.worktime-box .top-con { flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; background: #ff0000; padding: 3px 5px}
.worktime-box .top-con h3 { font-size: 13px; color: #fff; font-weight: 600; letter-spacing: -0.5px; margin: 0}
.worktime-box .top-con .total { font-size: 12px; color: #333; font-weight: 600; line-height: 1; text-align: center; background: #fff; border-radius: 3px; padding: 3px 5px 2px 5px}
.worktime-box .date-con { background: #fff; border: 1px solid #ff0000; padding: 2px 10px}
.worktime-box .date-con ul { display: flex; flex-wrap: wrap; gap: 3px 10px}
.worktime-box .date-con ul li a { font-size: 13px; color: #333; font-weight: 600}
.worktime-box .date-con ul li a:hover { color: #ff0000; text-decoration: none}


/*---------------------------------------
출장내용 및 여비청구서
---------------------------------------*/
.tbl-style1.blue-line th, .tbl-style1.blue-line td { border-color: #A0C5DA}

.admin-form-flex { display: flex; align-items: center; gap: 5px}
.admin-form-flex.stretch { align-items: stretch}
.admin-form-flex.jc-center { justify-content: center}