/*
	template_main.css
*/

@font-face {
	font-family: 'nanumSquareR';
    src: url('/air-bid/_font/NanumSquareR.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nanumSquareB';
    src: url('/air-bid/_font/NanumSquareB.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nanumSquareEB';
    src: url('/air-bid/_font/NanumSquareEB.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nanumSquareR_OTF';
    src: url('/air-bid/_font/NanumSquareB.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nanumSquareB_OTF';
    src: url('/air-bid/_font/NanumSquareB.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nanumSquareEB_OTF';
    src: url('/air-bid/_font/NanumSquareB.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --side-width: 280px;
    --main-width: calc(100% - var(--side-width));

    --login-div-height: 100px;
    --side-session-div-height: 40px;
    --nav-div-height: calc(100% - var(--login-div-height) - var(--side-session-div-height));

          /* mainContainer */
    --top-img-height: 180px;
    --header-height: 100px;
    --footer-height: 100px;
    --main-height: calc(100vh - var(--header-height) - var(--footer-height));
}

* {margin: 0; padding: 0; position: relative; list-style: none; text-decoration: none; box-sizing: border-box; font-family: 'nanumSquareB_OTF', sans-serif; color: black;}
#wrap {width: 100%; min-width: 1440px; min-height: 100vh; display: flex; background-color: #EFF6FF;}


/* 나눔스퀘어 폰트 password *(asterisk)이(가) 안보임;; 따로 sans-serif로 설정. */
input[type=password] {font-family: sans-serif;}
input[type=password]::placeholder {font-family: 'nanumSquareB_OTF', sans-serif;}

input[type=radio],
input[type=checkbox],
label:has(input[type=radio]),
label:has(input[type=checkbox]) {cursor: pointer;}


/* Scroll Bar */
/* ::-webkit-scrollbar {width: 12px; height: 12px;} */
/* ::-webkit-scrollbar-thumb {width: 8xp; height: 8px; border-radius: 6px; background-color: blue;} */
/* ::-webkit-scrollbar-track {background-color: #2f3542;} */
/* ::-webkit-scrollbar-thumb { */
/*   background-color: #2f3542; */
/*   border-radius: 10px; */
/*   background-clip: padding-box; */
/*   border: 2px solid transparent; */
/* } */


/* #wrap > #sideBar.opened (사이드바 열고닫기) */
#wrap #sideBar #sideBarToggleBtnDiv {width: 38px; height: 56px; position: absolute; right: -38px; top: 22px; overflow: hidden; display: flex; align-items: center;}
#wrap #sideBar #sideBarToggleBtn {width: 32px; height: 44px; display: flex; justify-content: center; align-items: center; color: white; font-size: 24px; font-weight: bold; border-top-right-radius: 12px; border-bottom-right-radius: 12px;}
#wrap #sideBar #sideBarToggleBtn {box-shadow: 0 0 6px #55f; background-color: #005bb0; cursor: pointer; background-repeat: no-repeat; background-size: 80% 80%; background-position: center;}
#wrap #sideBar #sideBarToggleBtn {background-image: url(/air-bid/_images_new/chevron-left-white.svg);}
#wrap #sideBar.side-bar-closed #sideBarToggleBtn {background-image: url(/air-bid/_images_new/chevron-right-white.svg);}
#wrap #sideBar.side-bar-closed {top: 0; left: calc(0px - var(--side-width));}
#wrap #mainContainer.side-bar-closed {width: 100%; margin-left: 0;}
#mainContainer header.side-bar-closed {width: 100%;}


/* #wrap > #sideBar (사이드바 - 메뉴 타이틀, 로그인버튼, 메뉴) */
#sideBar {width: var(--side-width); height: 100%; box-shadow: 0 0 6px #999; z-index: 100; position: fixed; background-color: white;}
#sideBar #sideBarTitleDiv {width: 100%; height: 100px; background-color: #1c96d5; background-image: url(/air-bid/_images_new/side-bar-title-background.png); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; color: white; font-size: 28px; font-weight: bold;}
#sideBar #loginDiv {width: 100%; height: var(--login-div-height); display: flex; justify-content: center; align-items: center;}
#sideBar #loginDiv button,
#sideBar #loginDiv a {width: 120px; color: white; border: none; margin: 0 4px; padding: 8px; font-size: 16px; cursor: pointer; text-align: center;}
#sideBar #loginDiv button#loginModalBtn {background-color: black;}
#sideBar #loginDiv a#bizRegistBtn {background-color: green;}
/* Navigator(Menu) */
#sideBar nav {width: 100%; height: var(--nav-div-height); padding: 16px 0; overflow: auto; overflow-x: hidden;}
#sideBar nav .nav-list {padding: 5px 0;}
#sideBar nav .nav-separate {width: calc(100% - 24px); height: 1px; margin: 0 auto; background-color: #ccc;}
#sideBar nav .nav-separate2 {width: calc(100% - 64px); height: 1px; margin: 4px 32px; background-color: #ccc;}
/* depth3 */
#sideBar nav .depth3 {width: 100%; padding: 0 20px 0 44px; display: flex; justify-content: space-between; align-items: center; color: #222; font-size: 14px; cursor: pointer;}
#sideBar nav .depth3:hover {background: #eee;}
#sideBar nav .depth3.checked {background-color: #f2f2ff; color: #00f;}
#sideBar nav .depth3 .depth3-title {padding: 9px 0;}
#sideBar nav .depth3 .depth3-title::before {content: "- "}
#sideBar nav .depth3 .depth3-count {display: block; font-weight: bold;}
#sideBar nav .depth3-ul {display: none; transition: .15s;}
#sideBar nav .depth3-ul.opened {display: block;}
/* depth2 */
#sideBar nav .depth2 {width: 100%; padding: 0 20px 0 32px; display: flex; justify-content: space-between; align-items: center; color: #222; font-size: 14px; font-weight: bold; cursor: pointer;}
#sideBar nav .depth2:hover {background: #eee;}
#sideBar nav .depth2.checked {background-color: #e2e2ff; color: #00f;}
#sideBar nav .depth2:not(.checked):hover {background: #eee;}
#sideBar nav .depth2 .depth2-title {padding: 9px 0;}
#sideBar nav .depth2 .depth2-count {display: block; font-weight: bold;}
#sideBar nav .depth2 .depth2-img {width: 32px; height: 32px; background-position: center; background-repeat: no-repeat; background-size: 60%;}
#sideBar nav .depth2 .depth2-img.opened {background-image: url(/air-bid/_images_new/dash.svg);}
#sideBar nav .depth2 .depth2-img:not(.opened) {background-image: url(/air-bid/_images_new/chevron-down.svg);}
#sideBar nav .depth2-ul {display: none; transition: .15s;}
#sideBar nav .depth2-ul.opened {display: block;}
/* depth1 */
#sideBar nav .depth1 {width: 100%; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
#sideBar nav .depth1 .depth1-title {width: 100%; height: 100%; padding: 12px 0; font-size: 18px; font-weight: bold;}
#sideBar nav .depth1.checked {background-color: #005BB0;}
#sideBar nav .depth1.checked .depth1-title {color: white;}
#sideBar nav .depth1 .depth1-img {width: 36px; height: 36px; background-position: center; background-repeat: no-repeat; background-size: 60%;}
#sideBar nav .depth1 .depth1-img.opened {background-image: url(/air-bid/_images_new/dash.svg);}
#sideBar nav .depth1 .depth1-img:not(.opened) {background-image: url(/air-bid/_images_new/chevron-down.svg);}
#sideBar nav .depth1.checked .depth1-img.opened {background-image: url(/air-bid/_images_new/dash-white.svg);}
#sideBar nav .depth1.checked .depth1-img:not(.opened) {background-image: url(/air-bid/_images_new/chevron-down-white.svg);}
#sideBar nav .depth1:not(.checked):hover {background: #eee;}

/* #sideSessionDiv */
#sideBar #sideSessionDiv {width: 100%; height: var(--side-session-div-height); display: flex; justify-content: center; align-items: center;}

/* 사이드바 shortCut Ul */
#shortCutUl {padding: 12px 24px;}
#shortCutUl li {width: 100%; height: 40px;}
#shortCutUl li:not(:first-child) {margin-top: 12px;}
#shortCutUl li a {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 8px; box-shadow: 0 0 4px #999;}
#shortCutUl li span {font-size: 14px; font-weight: bold;}


/* #wrap > #mainContainer > header (헤더 - 로고, 로그인정보, 로그아웃) */
/* #mainContainer {width: var(--main-width); height: 100%; overflow: auto; overflow-x: hidden; background-color: #EFF6FF;} */
#mainContainer {width: var(--main-width); height: 100%; margin-left: var(--side-width);}

#mainContainer header {width: var(--main-width); min-width: 900px; height: var(--header-height); position: fixed; z-index: 20; display: flex; justify-content: space-between;}
#mainContainer header #mainTopImg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -10; background: url(/air-bid/_images_new/main-top-image-3.jpg) no-repeat; background-size: 100%;}
#mainContainer header #headerLogo {margin-left: 60px; display: flex; align-items: center;}

#mainContainer header #loginInfoDiv {display: flex; justify-content: center; align-items: center;}
#mainContainer header #loginInfoDiv #chgHelpDeskBtn {padding: 0 24px; color: white; font-size: 16px;display:none;}
#mainContainer header #loginInfoDiv #loginNameDiv {padding: 0 24px; color: white; font-size: 16px;}
#mainContainer header #loginInfoDiv #realTimeCurDateTime {padding: 4px 12px; border-radius: 8px; background-color: #999b; color: black; font-size: 14px;}

#mainContainer header #loginInfoBtnDiv {padding: 0 24px; display: flex; justify-content: center; align-items: center;}
#mainContainer header #loginInfoBtnDiv a#myInfoBtn {padding: 8px 16px; display: block; border: none; background-color: #041d45; color: white; font-size: 14px; font-weight: bold; cursor: pointer;}
#mainContainer header #loginInfoBtnDiv button#logoutBtn {margin: 0 24px; padding: 4px 8px; border: none; background-color: #0000; color: red; font-size: 14px; font-weight: bold; cursor: pointer;}
#mainContainer header #loginInfoBtnDiv button#logoutBtn:hover {color: blue;}
#mainContainer header .aboveDiv{width:100%; display: flex; justify-content: space-between;}
#mainContainer header .aboveDiv .blankDiv{width: 1px;}


/* #wrap > #mainContainer > main (CONTENT_PATH) */
/* 메인 페이지만 */
#mainContainer main {width: 100%; min-height: var(--main-height); margin-top: var(--header-height); z-index: 10;}
/* 나머지 페이지 */
#mainContainer main #mainCommonDiv {width: 100%; min-height: var(--main-height);}
#mainContainer main #mainCommonDiv > div {width: 100%; height: 100%; background-color: white;}


/* #wrap > #mainContainer > footer (하단 사이트정보) */
#mainContainer footer {width: 100%; height: var(--footer-height); padding: 0 32px; display: flex; align-items: center; background-color: #EFF6FF;}
#mainContainer footer .footer-separate {width: 1px; height: 50%; margin: 0 24px; background-color: #ccc;}
#mainContainer footer #footerInfoDiv {font-size: 12px; line-height: 160%;}
#mainContainer footer #footerInfoDiv a {color: black; font-weight: bold;}
#mainContainer footer #footerInfoDiv a:hover {color: #33f;}

/*첨부 및 주의사항(※)*/
.content-table-div .attention {width: 100%; margin-top: 10px; display: flex; justify-content: flex-end;}


/* Tippy.js Custom - 툴팁 */
.tooltip-btn {display: inline-block; width: 16px; height: 16px; cursor: pointer;}
.tooltip-btn {background-image: url(/air-bid/_images_new/button/circle-question-regular.svg); background-repeat: no-repeat; background-size: 80%;}
.tooltip-btn.tooltip-btn-gray {background-image: url(/air-bid/_images_new/button/circle-question-regular-gray.svg);}
.tooltip-btn.tooltip-btn-white {background-image: url(/air-bid/_images_new/button/circle-question-regular-white.svg);}
.tooltip-btn.tooltip-btn-red {background-image: url(/air-bid/_images_new/button/circle-question-regular-red.svg);}
.tooltip-btn.tooltip-btn-blue {background-image: url(/air-bid/_images_new/button/circle-question-regular-blue.svg);}
/* 툴팁박스 Custom */
.tippy-box{background-color: white;}
.tippy-arrow{color: white;}


/* EasyUI Custom - (datagrid, popupModal) */
/* dataGrid = .datagrid-wrap */
/* popupModal = 나머지 */
.panel.window.panel-htop:has(:not(.datagrid-wrap)) {background-color: white; border: 1px solid #ccc;}
.panel-title {padding: 4px 0; color: black;}
.panel-body:not(.datagrid-wrap) {padding: 8px;}

.dialog-button {background-color: white;}

.dialog-button .l-btn-left {background-color: #68d1da; color: white;}
.dialog-button .l-btn-left:hover {background-color: #48b1ba;}
.dialog-button .l-btn-left .l-btn-text {font-size: 13px; font-weight: bold;}