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

/* **********************
	* 화면 layout
********************** */
#wrap{position:relative; width:100%; min-width:1366px;  height: 100%; box-sizing:border-box;}
.sub-container{position: relative;margin: 0 0;padding-right:16px; width:100%; height: auto; min-height: calc(100% - 50px); padding-left: 222px;-webkit-transition: all 0.3s;transition: all 0.3s;box-sizing:border-box;}

#header{position:relative; background: #ffffff; -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;}

/* **********************
	* header gnb menu
********************** */
.headermenu-wrap{position:relative; width:100%; display:flex; justify-content:space-between;}

.top-logo{float:left;width:250px;height:50px;padding: 0 0 0 20px; display: flex; align-items: center; box-sizing:border-box;}
.top-logo a{height:100%; display: flex; align-items: center;}
.top-logo a img{max-height:40px;}

/* sidebar scroll wrap 영역  */
.leftside-scroll{position:absolute; top:10px;left:0; width:100% ;height:calc(100% - 10px); box-sizing:border-box;}

#leftSideBar{position: absolute;top: 0;left: 0;bottom: 0;width: 200px; height:100%; background-color:#ffffff;-webkit-transition: all 0.3s;transition: all 0.3s;}
#leftBarOpenBtn{display: block; position: absolute; top: 50%; right: -24px; margin-top:-30px; width: 24px; height: 40px; 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: #ffffff;overflow:hidden;border-radius: 0;/*-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;}

.side-nav-con{padding-top: 16px; width:100%; height:100%;max-height:100%;overflow-y: auto;overflow-x:hidden;box-sizing:border-box;}
.side-nav-con ul{padding: 0 10px; box-sizing: border-box;}
.side-nav-con .nav-item{position: relative;}
.side-nav-con .nav-item + .nav-item{margin-top: 10px;}
.side-nav-con .nav-item > a:not(.close-ver-btn){position:relative; display: block; padding: 8px 38px 8px 8px;height: 36px;width: 100%; border-radius: 8px; width: 100%; 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; width:36px; height: 36px; padding:0 2px;border-radius: 8px; 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{position:absolute; top: 50%; margin-top: -8px; right:8px; font-size: 18px; content:"\e945"; color: #888; transform: rotate(90deg); transition:0.2s;}
.side-nav-con .nav-item > a > span{position: absolute;top: 6px;left: 35px;display: block;width: 100%;color: #333;font-size: 15px;line-height: 24px;font-weight: 600;letter-spacing: 0;}
.side-nav-con .nav-item > a > i{position: absolute; top: 50%; margin-top: -12px; left: 8px; font-size: 21px; color: #333;}
.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;}

.side-nav-con .nav-item > a:hover{background:#f7f7f7;}

.side-nav-con .nav-item > a.icon-none:before{display:none !important;} /* 우측화살표 없음*/

/* 왼쪽메뉴 아이콘 */
.side-nav-con .nav-item .left-icon01{width:20px; height:20px; background: url(../img/icon_leftmenu01.svg) no-repeat; position: absolute; top: 50%; margin-top: -12px; left: 8px;}
.side-nav-con .nav-item.active > a .left-icon01{background-position: 0 -20px;}

.side-nav-con .nav-item .left-icon02{width:20px; height:20px; background: url(../img/icon_leftmenu02.svg) no-repeat; position: absolute; top: 50%; margin-top: -12px; left: 8px;}
.side-nav-con .nav-item.active > a .left-icon02{background-position: 0 -20px;}

.side-nav-con .nav-item .left-icon03{width:20px; height:20px; background: url(../img/icon_leftmenu03.svg) no-repeat; position: absolute; top: 50%; margin-top: -12px; left: 8px;}
.side-nav-con .nav-item.active > a .left-icon03{background-position: 0 -20px;}

.side-nav-con .nav-item .left-icon04{width:20px; height:20px; background: url(../img/icon_leftmenu04.svg) no-repeat; position: absolute; top: 50%; margin-top: -12px; left: 8px;}
.side-nav-con .nav-item.active > a .left-icon04{background-position: 0 -20px;}

/* gnb active */
.side-nav-con .nav-item.active{}
.side-nav-con .nav-item.active > a{background-color: #2F58A4;}
.side-nav-con .nav-item.active > a:before{content:"\e945"; color: #fff;  transform: rotate(180deg); transition:0.2s;}

.side-nav-con .nav-item.active > a > span{color:#fff;}
.side-nav-con .nav-item.active > a > i{color:#fff;}

.nav-2dep-list{margin-top:6px;padding: 15px 0; display: none;}
/*.side-nav-con .nav-item.active .nav-2dep-list{display: block;} */
.nav-2dep-list ul{padding:0;}
.nav-2dep-list li{}
.nav-2dep-list li a{width: 160px; border-radius:5px; padding: 4px 14px 4px 26px; display: block; font-size: 14px; line-height: 1.4; color: #666; visibility: visible; -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 */
/*.side-nav-con .nav-item.on > a:before{color: #333;}*/
.nav-2dep-list li a:hover{color: #2F58A4; background:#f7f7f7} 
.nav-2dep-list li.on a{color: #2F58A4; font-weight:700;}

/* 사이드바 닫혔을 경우 */
#container.close{padding-left: 76px; width:100%;}
#container.close #leftBarOpenBtn:before{content: '\e93f';}
#leftSideBar.close{width:56px;}

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

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



/* ***************************
	* 헤더 로케이션 및 메뉴
*************************** */
.header-util-menu{float:right; position:relative;}
.header-util-menu ul:after{content:""; display:block; clear:both;}
.header-util-menu ul {display:flex; align-items:center; height:50px;}
.header-util-menu ul li{position:relative;  font-size:13px; margin:0 20px;}
.header-util-menu ul li a{position:relative; cursor:pointer; opacity:1;  display:flex; align-items:center; padding:3px 0;}
.header-util-menu ul li a:hover{ opacity:0.85; color:#2F58A4;}

.header-util-menu ul li i{position:relative;}
.header-util-menu ul li .ico-notice1{display:inline-block; width:24px; height:24px; background: url(../img/ico_bell.svg) 0 0 no-repeat; background-size:24px; vertical-align:middle; margin-top:-2px; margin-right:1px;}
.header-util-menu ul li .ico-notice2{display:inline-block; width:24px; height:24px; background: url(../img/ico_notice.svg) 0 0 no-repeat; background-size:24px; vertical-align:middle; margin-top:-2px; margin-right:1px;}
.header-util-menu ul li .ico-mypage{display:inline-block; width:24px; height:24px; background: url(../img/ico_mypage.svg) 0 0 no-repeat; background-size:24px; vertical-align:middle; margin-top:-2px; margin-right:1px;}
.header-util-menu ul li .ico-my-arrow{display:inline-block; width:20px; height:20px; background: url(../img/ico_mypage_arrow_down.svg) 0 0 no-repeat; background-size:20px; vertical-align:middle;}
.header-util-menu ul li .ico-my-arrow:before{content:"";}

.header-util-menu ul li.util-menu-btn .r-count{position:absolute; top:0; right:0; width:12px; height:12px; border-radius:14px; background: #EC372C; color: #fff; font-size:9px; text-align:center; }

@keyframes btn-dropdown {
    0%   {opacity:0; transform:translate(0, -20%);}
	100% {opacity:1; transform:translate(0, 0);}
}
.header-util-menu .mypage-dropdown-menu .btn-dropdown-menu {
	display: none; 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; z-index: 150;
	transition: all 0.3s;
	-webkit-transform: all 0.3s;
	animation: btn-dropdown 0.3s ease-in-out forwards;
	-webkit-animation: btn-dropdown 0.3s ease-in-out forwards;
}
.header-util-menu .mypage-dropdown-menu:hover .btn-dropdown-menu {display: block; height:auto; width:160px;}
.header-util-menu .mypage-dropdown-menu .btn-dropdown-menu li {display:block; list-style: none; font-size: 13px; white-space: nowrap; height:auto; border:none; padding:0 0; margin:4px 0; float:none;}
.header-util-menu .mypage-dropdown-menu .btn-dropdown-menu li a {position:relative; display:block; padding: 3px 10px; text-decoration: none; color: #333; font-size:13px; font-weight:400;}
.header-util-menu .mypage-dropdown-menu .btn-dropdown-menu li a .ico-pwreset{display:inline-block; width:24px; height:24px; background: url(../img/ico_pw_reset.svg) 0 0 no-repeat; background-size:24px; vertical-align:middle;margin-top:-2px; margin-right:2px;}
.header-util-menu .mypage-dropdown-menu .btn-dropdown-menu li a:hover{color:#2F58A4; background: #EFF6FB; border-radius: 3px; border-radius:5px;}
.header-util-menu .mypage-dropdown-menu .btn-dropdown-menu li a .ico-logout{display:inline-block; width:24px; height:24px; background: url(../img/ico_logout.svg) 0 0 no-repeat; background-size:24px; vertical-align:middle;margin-top:-2px; margin-right:2px;}
.header-util-menu .mypage-dropdown-menu:hover{color:#2F58A4;}
.header-util-menu .mypage-dropdown-menu .btn-dropdown-menu li a .ico-mypagelink{display:inline-block; width:24px; height:24px; background: url(../img/ico_mypage2.svg) 0 0 no-repeat; background-size:24px; vertical-align:middle;margin-top:-2px; margin-right:2px;}


/* **********************
	* 컨텐츠 영역 (공통)
********************** */
/* right 컨텐츠*/
#rightcontents{position:relative; width: 100%; height:100%; padding:16px 0;}
.sub-con-inner{position: relative; width: 100%;  height: auto; padding: 10px 24px 30px 24px; box-sizing: border-box;}

.right-conts-inner-box{width: 100%;  height: auto; min-height: 830px; background:#ffffff; border-radius:10px; -webkit-box-shadow: 1px 1px 12px 0 rgba(0,0,0,0.15); box-shadow: 1px 1px 12px 0 rgba(0,0,0,0.15); box-sizing:border-box;}
@media all and ( max-height: 768px ){
	.right-conts-inner-box{min-height: 680px;}
}

/******* 수집요청페이지 레이아웃 *******/
.sub-con-inner02{position: relative; width: 100%;  height: auto; padding: 0 24px; box-sizing: border-box;}

.layout-style02{display:flex;align-items: stretch; justify-content: space-between;}

.right-conts-inner-box02{position:relative; width: calc(74.5% - 24px);  height: auto; min-height: 830px; margin-right:24px; background:#ffffff; border-radius:10px; -webkit-box-shadow: 1px 1px 12px 0 rgba(0,0,0,0.15); box-shadow: 1px 1px 12px 0 rgba(0,0,0,0.15); box-sizing:border-box;}
.right-conts-inner-box03{position:relative; width:25.5%;  height: auto; min-height: 830px; background:#ffffff;display:flex;align-items: stretch; flex-direction: column; border-radius:10px; -webkit-box-shadow: 1px 1px 12px 0 rgba(0,0,0,0.15); box-shadow: 1px 1px 12px 0 rgba(0,0,0,0.15); box-sizing:border-box;}

@media all and ( max-width: 1680px ){
	.right-conts-inner-box02{width: calc(70% - 24px);}
	.right-conts-inner-box03{ width:30%;}
}
@media all and ( max-height: 768px ){
	.right-conts-inner-box02,
	.right-conts-inner-box03{min-height: 680px;}
}