@charset "utf-8";
/*****************
	layout.css
	2025-11.12
******************/

/* **********************
	* 화면 layout
********************** */
#wrap{position:relative; width:100%; min-width:1440px;  height:auto; padding-bottom:10px; box-sizing:border-box;}
.sub-container{position: relative; margin:16px 0; padding-right:12px; width:100%; height:auto;/*height:calc(100% - 136px);*/ /*height:100%;*/ padding-left: 194px; -webkit-transition: all 0.3s; transition: all 0.3s; box-sizing:border-box;}
.sub-container.leftsidebar-none{padding-left: 20px !important;}/* side바 없는 컨테이너 */

#header{background: var(--white-color); -webkit-box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.1); box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.1); }
#headerInnerWrap{position:relative; width:100%; box-sizing:border-box; }
.headermenu-wrap{position:relative; /*display:flex; align-items:center;*/ height:56px; padding:0 20px; border-bottom:1px solid  var(--gray30-color);box-sizing:border-box; }
.header-util-wrap{position:relative; height:46px; padding:0 0 0 20px; border-bottom:1px solid  var(--gray30-color); box-sizing:border-box; }


/* **********************
	* header gnb menu
********************** */
.headermenu-wrap .top-logo{float:left; width:230px; padding:13px 0 0 5px;}
.headermenu-wrap .top-logo a{display: inline-block; height: 26px;}
.headermenu-wrap .top-logo a img{max-height : 26px;}

.gnbmenu{position:relative; float:left; padding:8px 0 0 0;}
.gnbmenu:after{content:"";display:block; clear:both;}
.gnbmenu ul li{float:left; position:relative;  display:flex; align-items: center; height:40px; padding:0 0 0 0; text-transform: uppercase; margin:0 24px; text-align:center; box-sizing:border-box; }
.gnbmenu ul li a{display:flex; align-items: center; width:100%; height:100%; color: var(--black-color); white-space: nowrap; font-size:15px; line-height: 1; font-weight: 700; vertical-align:middle; text-align:center;box-sizing:border-box;}
.gnbmenu ul li::before {
    content: '';
    position: absolute;
    bottom: 0%;
    left: 0px;
    width: 100%;
    height: 3px;
    background: var(--darkblue-color);
    display: block;
    /* -webkit-transform-origin: right top;
     -ms-transform-origin: right top;
     transform-origin: right top;*/
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transition: transform 0.3s cubic-bezier(1, 0, 0, 1);
    transition: transform 0.3s cubic-bezier(1, 0, 0, 1)
}
.gnbmenu ul li.active::before,
.gnbmenu ul li:hover::before {
    /*-webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;*/
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1)
}
.gnbmenu ul li.active a{font-weight:bold; color:var(--darkblue-color);}

.right-side-menu{position:absolute; top:50%; margin-top:-12px; right:20px;}
.right-side-menu .btn-all-menu{display:inline-block; width:24px; height:24px; border-radius:3px;}
.right-side-menu .btn-all-menu .ico-menu{width:24px; height:24px; display:block; background:url(../img/ico_allmenu.svg) center/contain no-repeat;}
.right-side-menu .btn-all-menu:hover{background: var(--grayblue20-color);}


/* ***************************
	* 헤더 로케이션 및 메뉴
*************************** */
.header-util-wrap .left-con{float:left;}
.header-util-wrap .right-con{float:right;}

.header-util-wrap .location{padding:12px 0 0 5px;}
.header-util-wrap .location span{display:inline-block; font-size:12px; color: var(--black-color);}
.header-util-wrap .location span:after{content:"\e93f"; display:inline-block; padding:0 1px; color:#999; font-size:13px; font-family:xeicon; vertical-align:middle;}
.header-util-wrap .location span:last-child:after{display:none;}

.header-util-wrap .header-util-menu{ position:relative;}
.header-util-wrap .header-util-menu ul:after{content:""; display:block; clear:both;}
.header-util-wrap .header-util-menu ul li{position:relative; float:left; display:flex; align-items:center; font-size:13px; padding:0 14px; height:46px;border-left:1px solid var(--gray20-color); }
.header-util-wrap .header-util-menu ul li a{position:relative; cursor:pointer}
.header-util-wrap .header-util-menu ul li a:hover{ opacity:0.85;}
.header-util-wrap .header-util-menu ul li .ico-approval{display:inline-block; width:16px; height:16px; background: url(../img/ico_approval.png) 50% no-repeat; background-size:16px; vertical-align:middle; margin-top:-1px; margin-right:3px;}
.header-util-wrap .header-util-menu ul li .ico-approval02{display:inline-block; width:16px; height:16px; background: url(../img/ico_approval02.png) 50% no-repeat; background-size:13px; vertical-align:middle; margin-top:-1px; margin-right:3px;}
.header-util-wrap .header-util-menu ul li .ico-people{display:inline-block; width:16px; height:16px; background: url(../img/ico_people.svg) no-repeat; background-size:16px 16px; vertical-align:middle; margin-top:-2px; margin-right:1px;}
.header-util-wrap .header-util-menu ul li .ico-my-arrow{display:inline-block; width:16px; height:16px; background: url(../img/ico_arrow_bold_right.png) 50% 3px no-repeat; background-size:6px; vertical-align:middle;}
.header-util-wrap .header-util-menu ul li.approval-btn{padding:2px 18px 0;}
.header-util-wrap .header-util-menu ul li.approval-btn .r-count{position:absolute; top:-10px; left:-10px; width:18px; height:18px; line-height: 18px;border-radius:18px; background: var(--red-color); color: var(--white-color); font-size:11px; text-align:center; font-weight:500;}
/* 24.04.04 지출결의서작성버튼 추가*/
.header-util-wrap .header-util-menu ul li.approval-btn02{padding: 3px 18px 0;background:#EFF5FF;border-bottom: 1px solid var(--gray30-color);}
.header-util-wrap .header-util-menu ul li.approval-btn02:hover{background:#f3f7ff;}

/* 2025.01.17 지출결의서 드롭다운메뉴 추가 */
@keyframes btn-dropdown {
    0%   {opacity:0; transform:translate(0, -20%);}
    100% {opacity:1; transform:translate(0, 0);}
}
.header-util-wrap .header-util-menu ul li.approval-btn02-dropdown .btn-dropdown-menu {position: absolute;	top: 100%;	right: 0; width:100%; background: #fff; border: 1px solid #ddd;	box-shadow: 0 4px 6px rgba(0,0,0,.1); border-radius: 5px;padding: 10px;display: none;z-index: 150;
    transition: all 0.3s;
    -webkit-transform: all 0.3s;
    animation: btn-dropdown 0.4s ease-in-out forwards;
    -webkit-animation: btn-dropdown 0.4s ease-in-out forwards;
}
.header-util-wrap .header-util-menu ul li.approval-btn02-dropdown:hover .btn-dropdown-menu {display: block; height:auto;}
.header-util-wrap .header-util-menu ul li.approval-btn02-dropdown .btn-dropdown-menu li {display:block; list-style: none; font-size: 13px; white-space: nowrap; height:auto; border:none; padding:0; margin:0; float:none;}
.header-util-wrap .header-util-menu ul li.approval-btn02-dropdown .btn-dropdown-menu li a {position:relative; display:block; padding: 7px 10px 5px; text-decoration: none; color: #333; font-size:13px; font-weight:400;}
.header-util-wrap .header-util-menu ul li.approval-btn02-dropdown .btn-dropdown-menu li a:hover{color: var(--darkblue-color); background: #f3f7ff; border-radius: 3px; border-radius:5px;}
.header-util-wrap .header-util-menu ul li.approval-btn02-dropdown .btn-dropdown-menu li a:before{content:"\e93f";position:absolute; right:0; top:5px; font-family:xeicon;}
.header-util-wrap .header-util-menu ul li.approval-btn02-dropdown{position:relative;padding: 3px 18px 0;background:#EFF5FF;border-bottom: 1px solid var(--gray30-color);}
.header-util-wrap .header-util-menu ul li.approval-btn02-dropdown:hover{background:#f3f7ff;}


/* header 영역 상세검색 버튼/show,hide 컨텐츠 */
.headermenu-toggle{display:inline-block; vertical-align:middle; color: var(--black-color); font-weight:bold; font-size:13px; margin-top:-1px;}
.headermenu-toggle:before{content:" 메뉴 닫기";}
.headermenu-toggle i{font-size:18px; color: var(--black-color); vertical-align:middle; margin-top:-2px; transition: 0.2s;}

.headermenu-toggle.close{display:inline-block;font-size: 13px;opacity: 1;}
.headermenu-toggle.close:before{content:"메뉴 열기";}
.headermenu-toggle.close i{transform: rotate(180deg);transition: 0.2s;}


/* **********************
	* 컨텐츠 영역 (공통)
********************** */
/* right 컨텐츠*/
#rightcontents{position:relative; width: 100%; height:auto;  min-height:775px; background:#fff; border-radius:10px; -webkit-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.1); box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.1); box-sizing:border-box;}
.sub-con-inner{position:relative; padding:20px 20px 40px 20px; height:auto; box-sizing:border-box;}


/* **********************
	* 사이드바 영역
********************** */
#leftSideBar{position: absolute; top: 0; left: 12px; bottom: 0; width: 170px; height:100%;  background-color:#f7f7f7 ; -webkit-transition: all 0.3s; transition: all 0.3s; }
#leftBarOpenBtn{display: block; position: absolute; top: 50%; right: -24px; margin-top:-30px; width: 24px; height: 60px; background-color: #fff; -webkit-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; -webkit-box-shadow: 2px 4px 5px 0 rgba(0,0,0,0.2); box-shadow: 2px 4px 5px 0 rgba(0,0,0,0.2); z-index: 1;}
#leftBarOpenBtn:before{display: block; content: '\e93c'; font-size: 18px; color: #001648;}
#leftBarOpenBtn:hover{ opacity:0.8;}

.left-sidebar-inner{width: 100%; height: 100%; background: var(--white-color); overflow:hidden; border-radius:10px;-webkit-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.08); box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.08); box-sizing:border-box;}
.left-sidebar-title{height: 62px; padding: 0 20px; background: var(--darkblue-color); text-align:center; display: flex; align-items: center; justify-content: center;}
.left-sidebar-title .title{position:relative; color:#fff;font-weight: 700; font-size:18px;line-height:1;}

/* sidebar scroll wrap 영역  */
.leftside-scroll{position:absolute; top:62px;left:0; width:100% ;height:calc(100% - 62px); box-sizing:border-box;}
/* gnb */
.side-nav-con{ margin-top:12px; width:100%; height:calc(100% - 12px); max-height:100%; overflow-y: auto; overflow-x:hidden; box-sizing:border-box; }
.side-nav-con ul{ padding:0 6px;box-sizing:border-box;}
.side-nav-con .nav-item{position: relative; margin-bottom:8px;}
.side-nav-con .nav-item > a:not(.close-ver-btn){position:relative;display: block;padding: 6px 30px 6px 12px;height: 32px;width: 100%; border:1px solid var(--grayblue30-color);border-radius: 26px;box-sizing: border-box;-webkit-transition: all 0.3s;transition: all 0.3s;}
.side-nav-con .nav-item > .close-ver-btn{position: absolute; top: 0; left: 0; display: block; height: 57px; width: 100%; box-sizing: border-box; -webkit-transition: all 0s; transition: all 0s; visibility: hidden; opacity: 0; transition-delay:0s;}

.side-nav-con .nav-item > a:before{ font-family: xeicon;}
.nav-2dep-list li a:before{font-family: xeicon; }
.nav-3dep-list li a:before{font-family: xeicon; }
.side-nav-con .nav-item > a:before:hover{font-weight:normal;}
.nav-2dep-list li a:before:hover{ font-weight:normal;}
.nav-3dep-list li a:before:hover{ font-weight:normal;}

.side-nav-con .nav-item > a:before{position:absolute; top: 50%; margin-top: -13px; right: 8px; font-size: 18px; content:"\e945"; color: #888; transform: rotate(90deg); transition:0.2s;}
.side-nav-con .nav-item > a > span{width: 100%; color: var(--gray80-color); font-size: 13px; font-weight:700;}
.side-nav-con .nav-item > a > i{position: absolute; top: 50%; margin-top: -12px; left: 20px; font-size: 21px; color: #fff;}
.side-nav-con .nav-item > a > span,
.side-nav-con .nav-item > a:before{opacity: 1; -webkit-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s;}

/* on 사용*/
.side-nav-con .nav-item.on > a:before{content:"\e945"; color: var(--darkblue-color);  transform: rotate(180deg); transition:0.2s;}
.side-nav-con .nav-item.on > a{background: var(--grayblue30-color); }
.side-nav-con .nav-item.on > a span{color: var(--darkblue-color); position:relative; font-weight:700;}

/* 2depth */
.nav-2dep-list{display: none;}
.nav-2dep-list li{padding:3px 0 0;}
.nav-2dep-list li a{position:relative; visibility: visible; width: 100%; padding: 3px 22px 3px 8px; display: block; font-size: 13px; line-height: 1.4; color: #333 ; word-break:normal;  -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s; opacity: 1;}

/* hover */
.nav-2dep-list li > a:before{position:absolute; top: 50%; margin-top: -13px; right: 3px; font-size: 18px; content:"\e945"; color: #888; transform: rotate(180deg); transition:0.2s;}
.nav-2dep-list li.on > a:before{content:"\e945";color: var(--darkblue-color); transform: rotate(0deg); transition:0.2s;}
.nav-2dep-list li a:hover span,
.nav-2dep-list li.on a span{color: var(--darkblue-color);font-weight:700;}

/* 3depth */
.nav-3dep-list{display: none;}
.nav-2dep-list li .nav-3dep-list li{padding:0 0 0;}
.nav-3dep-list li a{position:relative; visibility: visible; width: 100%; padding: 3px 8px; display: block; font-size: 12px; line-height: 1.4;word-break:normal;  -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s; opacity: 1;}
.nav-3dep-list li a span{ color: #666 !important;}
.nav-3dep-list li a span:before{content:"-"; padding-right:3px; font-weight:normal !important; color: var(--gray60-color);}
.nav-3dep-list li.on a span{color: var(--darkblue-color) !important;}

.nav-3dep-list li a:hover span{color: var(--darkblue-color) !important; }
.nav-3dep-list li.on a,
.nav-3dep-list li a:hover{background:#f7f7f7 !important; border-radius:30px !important;}
.nav-2dep-list li .nav-3dep-list li.on a span{color: var(--darkblue-color) !important; /*font-weight:normal !important;*/}

/*#gnb > ul li.noDepth a {background-image: none !important;}*/
#gnb > ul li.noDepth a:before{display:none;  content:"";}

/* 1depth 하위메뉴 없는 경우 아이콘 강제로 넣기 -2024.01.16 추후에 수정해야함  */
#gnb > ul li.noDepth a.ico-arrow{position:relative;display:block;}
#gnb > ul li.on.noDepth a.ico-arrow:after{content:"\e945"!important; font-family: xeicon; position: absolute; top: 50%; margin-top: -13px; right: 14px; font-size: 18px; color: var(--darkblue-color); transform: rotate(90deg) !important;}
#gnb > ul li.noDepth a.ico-arrow:after{content:"\e945"!important; font-family: xeicon; position: absolute; top: 50%; margin-top: -13px; right: 14px; font-size: 18px; color: #888; transform: rotate(90deg);}


/* 사이드바 닫혔을 경우 */
.sub-container.menuclose{padding-left: 28px; width:100%;}
.sub-container.menuclose #leftBarOpenBtn:before{transform: rotate(180deg);transition: 0.2s;}
#leftSideBar.menuclose{left:0; width: 0; }

#leftSideBar.menuclose .left-sidebar-title{display:none; padding: 0 17px; background:none;}
#leftSideBar.menuclose .left-sidebar-title .title{padding-top: 80px;}
/*#leftSideBar.menuclose .left-sidebar-title .title a{width: 29px; height: 32px; background: url("../images/common/logo_s.png") 0 0 no-repeat;}*/

#leftSideBar.menuclose .side-nav-con .nav-item > a{position: absolute; top: 0; left: 0; visibility: hidden; opacity: 0;}
#leftSideBar.menuclose .side-nav-con .nav-item > .close-ver-btn{position: relative; visibility: visible; opacity: 1; transition-delay:0s;}
#leftSideBar.menuclose .side-nav-con .nav-item > a:before{display: none;}
#leftSideBar.menuclose .side-nav-con .nav-item > a > span,
#leftSideBar.menuclose .side-nav-con .nav-item > a:before{opacity: 0; transition-delay:0.3s;}
#leftSideBar.menuclose .nav-2dep-list{display: none !important;}
#leftSideBar.menuclose .nav-2dep-list li a{visibility: hidden; opacity: 0; transition-delay:0.3s;}
#leftSideBar.menuclose .side-nav-con .nav-item{display:none;}
#leftSideBar.menuclose .nav-3dep-list{display: none !important;}
#leftSideBar.menuclose .nav-3dep-list li a{visibility: hidden; opacity: 0; transition-delay:0.3s;}

/**********************************************
			 윈도우 새창 팝업 
**********************************************/
#win-popup-wrap{position:relative; width:100%; height:auto; box-sizing:border-box;}
.body-bg-white{ background: var(--white-color);}
/* popup header */
.win-popup-header {position:relative; width:100%; padding:0; text-align:center; border-bottom:1px solid var(--gray20-color); background: var(--white-color); -webkit-box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.08); box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.08); }
.win-popup-header .layer-close-btn{position: absolute; right:20px; top:16px; width:24px; height:24px; background:url(../img/btn_close.png) center/contain; cursor:pointer;}
.win-popup-header .poptitle{position:relative; height:54px; margin:0;padding:13px 0 0px 24px; text-align:left; border-bottom:1px solid #E5ECF1; color: var(--black-color); box-sizing:border-box;}
.win-popup-header .poptitle span.title{position:relative; display:inline-block; font-size:20px; font-weight:700; padding-left:13px; padding-right:6px; }
.win-popup-header .poptitle span.title:before{content:""; width:5px; height:21px; position:absolute; top:3px; left:0; background: url(../img/ico_titlebar_l.png) no-repeat;}

.win-popup-header .poptitle .explain-txt{display:inline-block; font-size:14px; }
.win-popup-header .poptitle .bar:before{content:"│"; color: var(--gray40-color); padding-right:8px;}

.win-popup-container{position:relative; width: 100%; height:auto; padding:20px 24px;}
.win-popup-container .inner-contents01 {position:relative; margin:0 auto; width:780px; height:auto;/* padding:20px; background:#fff; border-radius:10px; -webkit-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.1); box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.1); box-sizing:border-box;*/}
.win-popup-container .inner-contents02 {position:relative; margin:0 auto; max-width:1260px; min-width:1100px; height:auto;/* padding:20px; background:#fff; border-radius:10px; -webkit-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.1); box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.1); box-sizing:border-box;*/}
.win-popup-container .inner-contents03 {position:relative; margin:0 auto; width:100%; height:auto;}
.win-popup-container .inner-contents04 {position:relative; margin:0 auto; width:100%; max-width:900px; height:auto;}


/* 서브화면 - 컨텐츠 사이즈 small*/
.conts-width-small{position:relative; max-width:1200px;}



/**********************************************
			  footer 24.02.07
**********************************************/
#footer-wrap{position:relative; width:100%; margin:10px 0 0; border-top:1px solid #E0E2EB;}
.footer-inner{position:relative; /*display:flex; justify-content: space-between;*/ max-width:1400px; margin:20px auto;}
.footer-inner .right-con{position:absolute; right:0; top:0; text-align:right; display: flex; align-items: center;} /* 25.02.13 수정*/

.foot-menu{margin-bottom:18px;}
.foot-menu ul li{display:inline-block;}
.foot-menu ul li:after{ margin-right:8px; }
.foot-menu ul li:after{content:'│'; color:rgba(184, 185, 187, 0.9); margin-left:10px;}
.foot-menu ul li:last-child:after{display:none;}
.foot-menu ul li a{ font-size:13px; font-weight:bold; display:inline-block;}

.addresstext{position:relative; margin-top:10px; font-size:13px; }
.copyright{position: relative; margin-top:10px;}

.addresstext p {margin-bottom: 3px; color: var(--gray60-color); font-weight:400;}
.addresstext p span{margin-right:12px;}
.addresstext p span:after{content:'│'; color:rgba(143, 144, 149, 0.5); margin-left:12px;}
.addresstext p span:last-child:after{display:none;}

/* footer-right 25.02.13 수정*/
.sns-icon-con {display: flex; align-items: center; margin-right:16px; vertical-align:middle;} /* 25.02.13수정 */
.sns-icon-con .sns-icon{position:relative; display:inline-block; width:36px; height:36px; margin:0 3px; background:var(--darkblue-color); border-radius:20px; box-sizing:border-box;} /* 25.02.13수정 */
.sns-icon-con .sns-icon:hover{background: var(--darkblue-active-color);}
.sns-icon-con .sns-icon a{width:100%; height:100%; display:flex; align-items:center; justify-content: center;}
.sns-icon-con .sns-icon img{max-width:100%; max-height:100%;}
.family-site{width:210px; height:38px; border:1px solid #f7f7f7; border-radius:24px; padding-left:12px; padding-right:40px; background-position: right 5px top 50%; vertical-align:middle;}