@charset "UTF-8";
/***** 공동 메인 (SKYVERSE) CSS *****/
body, html { width: 100%; height: 100%; }

#wrap { width: 100%; height: 100%; }

.topLineArea { display: block; width: 100%; height: 5px; background-color: #17529e; }

#leftMenuArea { float: left; height: calc(100% - 5px); -webkit-transition: width .08s; transition: width .08s; }

.leftMenuWrap { position: relative; width: 246px; height: 100%; background-color: var(--ui-skv-leftmenu-color1); -webkit-transition: opacity .5s; transition: opacity .5s; opacity: 1; }

.leftMenuWrap .logoArea { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 80px; padding: 0 15px; background: var(--ui-skv-leftmenu-color1) url(/resources/img/LKDC_SIMBOL_withtitle2.png) 15px center no-repeat; background-size: 210px auto; cursor: pointer; }

.mainMenuArea { position: relative; height: 56px; line-height: 56px; background: none; }

#WARNMenuArea { letter-spacing: -1px; }

.mainMenuArea h1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: 100%; padding-left: 15px; font-family: 'NotoSansKR'; font-weight: 500; font-size: 20px; color: #fff; cursor: pointer; }

.mainMenuArea h1 span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: 100%; color: #fff; }

.mainMenuArea h1 span:hover { color: #20cd8d; -webkit-transition: all .3s ease; transition: all .3s ease; }

.mainMenuArea h1 span:hover i { color: #20cd8d; }

.mainMenuArea h1 span i { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; top: 1px; width: 30px; height: 30px; margin-right: 8px; border-radius: 3px; font-size: 20px; -webkit-transition: all .3s ease; transition: all .3s ease; }

#menuNameArea { position: relative; margin-top: 10px; }

#menuNameArea:before { content: ''; position: absolute; top: -10px; left: 50%; width: 216px; height: 1px; background-color: #616566; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

#mainContentArea { float: left; position: relative; width: calc(100% - 246px); height: calc(100% - 5px); background-color: #f4f3ef; -webkit-transition: width .08s; transition: width .08s; }

#mainStatusArea { display: none; clear: both; position: relative; z-index: 11; height: 30px; background-color: #F9FAF7; }

#mainHistoryArea { position: relative; height: 80px; background-color: #f4f3ef; font-size: 0; }

#mainTitleArea { display: none; position: relative; height: 50px; border-bottom: 1px solid #EAEAEA; }

.mainContent { height: calc(100% - 80px); }

.mainGrid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; height: 100%; padding: 0 15px 15px 15px; -ms-grid-rows: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 15px; }

.mainGrid .contentArea { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; height: 100%; border-radius: 3px; background-color: #fff; -webkit-box-shadow: 0 0 4px 0.2px rgba(124, 107, 37, 0.2); box-shadow: 0 0 4px 0.2px rgba(124, 107, 37, 0.2); }

/* 2022.07.12 챠트 샘플 이미지 수정 */
.mainGrid .contentArea:nth-of-type(5) .contentBody { background-color: #fff; background-clip: content-box; }

.mainGrid .contentArea .contentHead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 0 20px 0 30px; border-bottom: 1px solid #eff0f2; }

.mainGrid .contentArea .contentHead > a { position: relative; width: 64px; height: 30px; line-height: 30px; padding: 0 10px; border-radius: 4px; background-color: #F1F1F3; font-size: 11px; color: #686868; }

.mainGrid .contentArea .contentHead > a:after { content: ''; position: absolute; right: 10px; }

.mainGrid .contentArea .contentHead > a i { position: absolute; top: 50%; right: 10px; font-size: 11px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }

.mainGrid .contentArea .contentHead h1 a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 500; font-size: 14px; color: #79A3DB; letter-spacing: -0.84px; }

.mainGrid .contentArea .contentHead h1 a > span { line-height: 1; margin-left: 5px; }

.mainGrid .contentArea .contentHead h1 a strong, .mainGrid .contentArea .contentHead h1 > strong { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 700; font-size: 18px; color: #4874B5; letter-spacing: -0.84px; }

.mainGrid .contentArea .contentHead h1 a, .mainGrid .contentArea .contentHead h1 a:hover { text-decoration: none; }

.contentArea .text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; padding: 10px; font-size: 30px; text-align: center; }

.contentArea .text.red { color: #da4453; }

.contentArea .text.black { color: #000; }

.mainContent div h1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; overflow: hidden; width: 100%; height: 74px; line-height: 26px; padding: 0 20px 0 0; }

.mainContent.scrollbar-inner > .scroll-element.scroll-y { width: 5px !important; height: calc(100% - 10px); margin-top: 5px; margin-bottom: 5px; }

.mainContent .scroll-element_track { background-color: transparent !important; }

.mainContent.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #E0E0E0 !important; }

.mainContent.scrollbar-inner > .scroll-element .scroll-bar { background-color: #666 !important; }

#mainHistoryArea .userInfo { display: inline-block; position: absolute; top: 50%; left: 20px; width: calc(100% - 20px); line-height: 32px; font-size: 14px; color: #686868; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }

#mainHistoryArea .userInfo strong { color: #295587; font-weight: 500; }

#mainHistoryArea .userInfo > a { display: inline-block; position: absolute; right: 85px; width: auto; height: 32px; line-height: 32px; padding: 0 10px; border-radius: 3px; background-color: #5D8AC5; font-size: 12px; color: #FFF; letter-spacing: -1px; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; }

#mainHistoryArea .userInfo2 { z-index: 100 !important; }

#mainHistoryArea .userInfo2 > a { right: 30px; z-index: 100 !important; }

#mainHistoryArea .userInfo2 > a i { padding-left: 5px; }

#mainHistoryArea .userInfo2 .snb { font-size: 12px; }

#mainHistoryArea .userInfo2 .snb > a { color: #666; text-decoration: none; }

#mainHistoryArea .userInfo2 .snb > a:first-child { padding-left: 20px; background: url(/resources/img/icon/ico_home.png) no-repeat left 2px; background-size: 16px; }

#mainHistoryArea .userInfo2 .user { position: absolute; right: 0; padding-right: 190px; color: #505050; }

#mainHistoryArea .userInfo1 { z-index: 200 !important; }

#mainHistoryArea .userInfo1 a { top: -16px; right: 115px; z-index: 200 !important; background-color: #EEF9F7; color: #223D67; text-align: center; }

.menu-trigger, .menu-trigger span { display: inline-block; -webkit-transition: all .2s; transition: all .2s; -webkit-box-sizing: border-box; box-sizing: border-box; }

.menu-trigger { position: relative; left: -46px; width: 46px; height: 80px; margin: 0; background: url(/resources/img/common/btn_trigger02.png) no-repeat; cursor: pointer; }

.menu-trigger span { display: none; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 4px; background-color: #666; }

/* 220712 반응형 처리 */
/*** PC Screen 1024 ***/
@media screen and (max-width: 1024px) { .mainGrid { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } }

/*** Tab Screen 800 ***/
@media screen and (max-width: 800px) { .mainGrid { -ms-grid-columns: 1fr !important; grid-template-columns: 1fr !important; } }