@charset "utf-8"; 

.tabs li:first-child .tabs-inner .tabs-title:before, .tabs-scroller-left, .tabs-scroller-right, .menus .list_favorite li.ui-sortable-helper:before, .layout_palette a:after, .lnb li ul li a:after { -webkit-font-smoothing:antialiased; font-family:"Font Awesome 5 Free"; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-variant:normal; text-rendering:auto; font-weight:900; line-height:1 }

/* hidden */
#u_skip,h1 span, .hambuger_navi, .hambuger_navi span { display:none }
/* hidden */

/* font */
body,pre,textarea,input,select,button { font-family:"Noto Sans KR", Malgun Gothic, sans-serif; font-size:13px }
.lnb a,h2,h3,h4 { font-family:"Noto Sans KR", Malgun Gothic, sans-serif }

.mCustomScrollBox { background-color:#d2dce8 }
.mCSB_inside > .mCSB_container { margin-right:19px }
.mCSB_scrollTools { width:18px }
.mCSB_draggerRail { width:17px !important; border-radius:0 !important; background-color:#d2dce8 !important }
.mCSB_dragger_bar { width:14px !important; border-radius:14px !important; background-color:#001d58 !important }

*::-webkit-scrollbar { width:10px; height:15px } /*스크롤바의 너비*/
*::-webkit-scrollbar-thumb { background-color:rgba(0, 0, 0, 0.1); border-radius:10px } /*스크롤바의 색상*/
*::-webkit-scrollbar-track { background-color:rgba(0, 0, 0, 0.1) } /*스크롤바 트랙 색상*/

/* layout-color 선언 */
/* 기본 */
:root { 
  --layout-color:rgba(43, 49, 57, 1); 
  --layout-color02:rgba(57, 66, 79, 1); 
  --layout-color03:#848a91; /* rgba(57, 66, 79, 0.6); */ 
  --layout-color04:rgba(57, 66, 79, 0.5); 
  --point-color:#19aa4b; 
  --point-color02:#74c043; 
  --font-color02:#ffffff;
 }

body { position:absolute; height:100%; top:0; right:0; bottom:0; left:0; min-width:340px }
body { -webkit-text-size-adjust:none }
body.outFrame { overflow:hidden }
body.main { background:#edecec }



#wrap { height:100% }

.header_wrap { display:flex; text-align:center; align-items:center }

header { position:relative; display:flex; align-items:center; z-index:998; width:100%; height:50px; background: var(--layout-color); box-shadow:0px 4px 4px rgba(0, 0, 0, 0.05) }
#header { width:100%; padding-top:1px }
header { display:none; justify-content:center; align-content:center }
#left_menu h1 { display:flex; justify-content:center; align-items:center; height:85px; padding-top:8px; background:var(--layout-color); border-bottom:1px solid rgba(0, 0, 0, 0.2) }
h1 a { display:block; width:240px; height:70px; background:url(../images/common/h1_logo.png) no-repeat 50% 50% }

.menu_line { border-top:1px solid rgba(255, 255, 255, 0.1); border-bottom:1px solid rgba(0, 0, 0, 0.2) }

#left_menu { width:240px; position:absolute; top:0px; bottom:0; overflow:visible; z-index:999; background:var(--layout-color) }

.back_leftMenu { display:none; position:absolute; z-index:999; top:0; right:0; bottom:0; left:0; height:100vh; background-color:rgba(0, 0, 0, 0.6) }

.menu_control { position:absolute; top:0; right:-25px; z-index:999; display:block; width:30px; height:85px; overflow:hidden }
.menu_control a { display:inline-flex; width:30px; height:70px; margin-top:15px; text-align:center; font-size:22px; color:rgba(255, 255, 255, 0.7); background:url(../images/common/bg_nav.png) 5px 50% no-repeat }
.menu_control a.btn_menu_open { padding-left:3px }
.menu_control a span, .menu_control a i.fa-bars { display:none }



.menus { z-index:998; color:#fff }
.menus input[type=text] { background:transparent url(../images/common/btn_search.png) 20px 50% no-repeat; padding:0; background-size:18px; border:0; padding:0 10px 0 58px; width:100%; display:block; height:46px; color:#fff; border-radius:0 }
.menus input[type=text]:focus { border:0 !important }
.menus input[type="text"]::placeholder { color:rgba(255, 255, 255, 0.7) }
.menus .btn_favorit { background:url(../images/common/icon_favorit_w.png) 20px 50% no-repeat; padding:11px 10px 11px 58px; display:block; font-size:16px }
.menus .list_favorite { display:none; background:var(--layout-color02); padding:5px 10px; border-radius:6px; margin:0 10px 10px 10px; overflow:hidden }
.menus .list_favorite li { display:flex; align-items:center; justify-content:space-between; padding:2px 0; counter-increment: count-favorite }
.menus .list_favorite li:hover { color:#ffee88 }
.menus .list_favorite li.ui-sortable-helper:before { content:"\f338"; display:inline-flex; width:18px; align-items:center; justify-content:center }

.menus .list_favorite li a { display:flex; padding:5px; width:calc(100% - 44px); text-overflow:ellipsis; white-space:nowrap }
.menus .list_favorite li a:before { display:inline-flex; width:20px; height:20px; margin-right:10px; font-size:10px; line-height:100%; align-items:center; justify-content:center; border-radius:20px; background:var(--point-color02); content: counter(count-favorite) }

.menus .list_favorite li i { display:flex; width:26px; height:26px; margin:0; align-items:center; justify-content:center; border-radius:5px; color:rgba(255, 255, 255, 0.5); cursor:pointer }
.menus .list_favorite li i.fa-times:hover { background:#fff; color:var(--point-color) }

.menus .list_favorite span { display:inline-block; padding:5px; font-size: 11px }

.menus .list_search { display:none; background:var(--layout-color02); padding:10px; border-radius:6px; font-size:14px; margin:0 10px 10px 10px; overflow:hidden }
.menus .list_search ul { max-height:279px; overflow-x:hidden; overflow-y:auto }
.menus .list_search li { display:flex; align-items:center; justify-content:space-between; padding:2px 0; border-bottom:1px solid #fff3 }
.menus .list_search li:last-child { border-bottom:0 }
.menus .list_search li:hover { color:#ffee88 }

.menus .list_search li a { display:flex; padding:5px; width:calc(100% - 44px); text-overflow:ellipsis; white-space:nowrap }
.menus .list_search li a:before { display:inline-flex; width:5px; height:5px; margin-top:9px; margin-right:10px; border-radius:20px; background:var(--point-color02) }
.menus .list_search li a:before { content:"" }

.menus .list_search li i { display:flex; width:26px; height:26px; margin:0; align-items:center; justify-content:center; border-radius:5px; color:rgba(255, 255, 255, 0.5); cursor:pointer }
.menus .list_search li i.fa-times:hover { background:#fff; color:var(--point-color) }

.menus .list_search span { display:inline-block; padding:5px }

.tnb { overflow:hidden; padding:10px 5px 0 5px; border-top:1px solid rgba(255, 255, 255, 0.1) }
.tnb ul { display:flex; width:100%; overflow:hidden }
.tnb li { margin-right:3px; width:100%; min-width:calc((100% - 12px) / 4) }
.tnb li:last-child { margin-right:0 }
.tnb li.tnb04 { position:absolute; margin-top:-50px; right:2px; width:55px }
.tnb li.tnb04 a{ border-radius:6px }
.tnb li a { width:100%;display:inline-block; background-color:var(--layout-color02); padding:8px 0; border-radius:6px 6px 0 0; color:#fff; font-weight:500; text-align:center; line-height:100%; white-space:nowrap }
.tnb li a:hover, .tnb li.on a { color:#fff; background:var(--point-color) !important }

.lnb { position:relative; overflow:auto; height:calc(100% - 335px); border-top:2px solid var(--point-color) }
.lnb { background:linear-gradient(to right, var(--layout-color), var(--layout-color) 58px, var(--layout-color02) 58px) }
.lnb > ul { display:block; height:100% }

.lnb a { color:#ffffff }
.lnb li { display:block; padding-bottom:2px }
.lnb .bgbt { display:flex; width:58px; height:69px; color:rgba(255, 255, 255, 0.7); font-size:14.5px; font-weight:500; letter-spacing:-0.5px; justify-content:center; align-items:center }
.lnb li:first-child .bgbt { height:79px }

.outFrame.A .lnb .bgbt, .outFrame.E .lnb .bgbt { height:49px; line-height:110% }
.outFrame.A .lnb li:first-child .bgbt, .outFrame.E .lnb li:first-child .bgbt { height:59px }

.lnb .bgbt span { display:flex; width:50px; text-align:center; justify-content:center; align-items:center }
.lnb .bgbt:hover, .lnb .bgbt:active, .lnb .bgbt:focus { background-color:var(--layout-color04); color:var(--font-color02)}
.lnb.m01 .m01 .bgbt, .lnb.m02 .m02 .bgbt, .lnb.m03 .m03 .bgbt, .lnb.m04 .m04 .bgbt, .lnb.m05 .m05 .bgbt,
.lnb.m06 .m06 .bgbt, .lnb.m07 .m07 .bgbt, .lnb.m08 .m08 .bgbt, .lnb.m09 .m09 .bgbt, .lnb.m10 .m10 .bgbt,
.lnb li.on >a.bgbt { background-color:var(--layout-color02); color:var(--font-color02)}

.lnb li ul { display:none; position:absolute; top:0; left:53px; bottom:0; right:0; padding-top:10px; overflow:visible }
.lnb li ul li { display:block; padding:0 10px }
.lnb li ul li a { display:block; position:relative; margin-bottom:1px; font-weight:400; letter-spacing:-0.5px; padding:10px 0 10px 15px; line-height:100%; font-size:14.5px }
.lnb li ul li a:after { display:none; content:"\f00c"; position:absolute; top:12px; left:-7px; margin-left:7px; color:var(--point-color02); font-size:10px }
.lnb li ul li:last-child a { border-bottom:0 }
.lnb>ul>li>a>ul { width:calc(100% - 90px) }

.lnb li ul li a:hover:after, .lnb li ul li a:focus:after, .lnb li ul li.on a:after { display:inline-flex }
.lnb li ul li a:hover span, .lnb li ul li a:focus span, .lnb li ul li.on a span { border-bottom:1px dotted var(--point-color02); color:#fcffcc; padding-right:3px }

.lnb.m01 .m01 ul, .lnb.m02 .m02 ul, .lnb.m03 .m03 ul, .lnb.m04 .m04 ul, .lnb.m05 .m05 ul,
.lnb.m06 .m06 ul, .lnb.m07 .m07 ul, .lnb.m08 .m08 ul, .lnb.m09 .m09 ul, .lnb.m10 .m10 ul,
.lnb.m11 .m11 ul, .lnb.m12 .m12 ul, .lnb.m13 .m13 ul, .lnb.m14 .m14 ul, .lnb.m15 .m15 ul{ display:block !important }
.lnb li.on ul { display:block }

.lnb li li ul { position:relative; left:0; top:0 }
.lnb li li ul li a { padding-left:40px }

.tnb02 .lnb .m05 ul li:nth-child(4), .tnb02 .lnb .m05 ul li:nth-child(8) { margin-bottom:20px }

.btn_logout { position:absolute; right:0px; bottom:0px; left:0px; z-index:999; height:45px; padding:10px; background-color:rgba(0, 0, 0, 0.2); color:rgba(255, 255, 255, 0.7); text-align:center; font-size:16px }

.access_info { position:absolute; bottom:45px; left:0px; padding:10px; color:rgba(255, 255, 255, 0.7); font-size:14px }
.access_info li { display:flex; align-items:baseline }
.access_info i { margin-right:10px !important }
.access_info .fa-bell { font-size:26px; margin:0 0 20px 10px; cursor:pointer }
.access_info .msg_cnt { position:absolute; display:flex; justify-content:center; align-items:center; line-height:8px; font-size:13px; font-weight:700; background:tomato; width:20px; height:20px; border-radius:20px; margin-left:25px }
.access_info .msg_cnt { display:none }
.access_info .fa-stopwatch { animation:fa-spin 10s infinite linear }
.access_info #remainSessionTime { display:inline-block; min-width:60px }
.access_info button { margin-left:10px; font-size:13px; font-weight:500; color:rgba(255, 255, 255, 0.7); line-height:100%; padding:5px 10px; border:0; background:var(--layout-color02) }

.access_info .alarm { display:none }

#content { position:relative; overflow:visible; background:#fff; margin:0 auto; margin-left:240px; box-sizing:border-box }

/* tabsFrame */
iframe.home, iframe.tabsFrame { margin:0; padding:0; width:100%; height:calc(100vh - 52px) }

.tabs-wrap, .tabs, .panel-body { width:100% !important }
.tabs-wrap { margin:0 !important }
.tabs-header, .tabs-scroller-left, .tabs-scroller-right, .tabs-tool, .tabs, .tabs-panels, .tabs li a.tabs-inner, .tabs li.tabs-selected a.tabs-inner, .tabs-header-bottom .tabs li.tabs-selected a.tabs-inner, .tabs-header-left .tabs li.tabs-selected a.tabs-inner, .tabs-header-right .tabs li.tabs-selected a.tabs-inner { border:0 }
.tabs-header { padding-top:0; background:none !important; padding-right:196px }
.tabs { position:relative; height:51px !important; background:#FFF; border-bottom:2px solid var(--point-color); padding-left:20px; padding-right:181px; overflow:visible; display:flex }
.tabs li { height:51px !important; margin:0 !important }

.tabs-selected .tabs-title { color:#3e444e }
.tabs li a.tabs-close { display:inline-block; width:20px; height:20px; background: url(../images/common/icon_tab_close.png) 50% 50% no-repeat; margin-top:-6px; margin-right:7px }
.tabs li a.tabs-close:hover { background: url(../images/common/icon_tab_close_r.png) 50% 50% no-repeat }
.tabs li a.tabs-close span { display:none }
.tabs li.tabs-selected a.tabs-close { background:#FFF url(../images/common/icon_tab_close_r.png) 50% 50% no-repeat }

.tabs-inner { display:inline-block; min-width:inherit; padding:10px 30px 0 15px !important; background:#edecec url(../images/common/bg_tabface.png) right bottom no-repeat !important; color:#9ea4ac !important; height:41px !important; line-height:18px !important; text-align:left !important; border-radius:0 !important; border:2px solid #e4e4e5 !important; border-bottom:0 !important; margin-top:8px !important; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }

.tabs-inner:not(.tabs li:first-child .tabs-inner):not(.tabs li.tabs-selected .tabs-inner) { border-left:2px solid #edecec !important }


.tabs li .tabs-icon { display:none }

.tabs li:hover .tabs-title { color:#3e444e }
.tabs li:hover.tabs-selected .tabs-title { color:#3e444e }

.tabs-title { display:flex; flex-direction:column; font-size:13px; letter-spacing:-1px }
.tabs-selected .tabs-inner { height:43px !important; background:#FFF url(../images/common/bg_tabface_on.png) right bottom no-repeat !important; border:2px solid var(--point-color) !important; border-bottom:0 !important }
.tabs-selected.loading_deco .tabs-inner { border-bottom:2px solid #7f7f7f !important }

.tabs-panels { border-top:2px solid var(--point-color); margin-top:-2px }

.tabs li.tabs-selected { border-bottom:1px solid #fff }

.tabs li:first-child .tabs-inner { min-width:auto; width:50px; padding:0 !important }
.tabs li:first-child .tabs-inner .tabs-title:before { content:"\f200"; width:100%; height:40px; font-size:24px }
.tabs li:first-child.tabs-selected { border-bottom:1px solid #edecec }
.tabs li:first-child.tabs-selected .tabs-inner .tabs-title:before { color:var(--point-color02) }

.tabs-scroller-left, .tabs-scroller-right { z-index:998; top:16px; left:auto }

.tabs-scroller-left { right:159px }
.tabs-scroller-left:before { content:"\f100" }

.tabs-scroller-right { right:128px }
.tabs-scroller-right:before { content:"\f101" }

.functionBtn { position:absolute; right:30px; top:16px; display:none }
.functionBtn a { display:inline-flex; align-items:center; justify-content:center; margin-left:2px }
.functionBtn a, .tabs-scroller-left, .tabs-scroller-right { width:26px !important; height:26px !important; border-radius:5px; background:var(--layout-color); font-size:16px; color:#fff }
.functionBtn a:hover, .functionBtn a:active, .functionBtn a:focus,
.tabs-scroller-left:hover, .tabs-scroller-right:hover,
.tabs-scroller-left:active, .tabs-scroller-right:active,
.tabs-scroller-left:focus, .tabs-scroller-right:focus { background:var(--layout-color); color:#ffff80 }

.content { position:relative; padding:2px 20px 20px 20px; background:#fff; box-sizing:border-box; overflow:hidden; min-height:calc(100vh - 80px) }
.content.intro { display:flex; padding:0px; min-height:100vh }
.content.inFrame { padding:0 20px 20px 20px }
.content.inFrame2 { padding:0}

.modal-content header { position:relative; margin-top:0; padding:0 20px; height:70px }
.modal-content .content { padding:20px 30px; overflow:auto; max-height:calc(100vh - 80px) }

/* Image Layer Popup */
#glayLayer { display:none; position:fixed; z-index:998; left:0; top:0; height:100%; width:100%; background:rgba(0,0,0,0.8) }
#overLayer { display:none; position:fixed; z-index:998; max-width:80%; padding:5px; background:#fff; border:3px solid #4d6df9; top:50%; left:50% }
#overLayer img { max-width:100% }
#overLayer .title { text-align:center; padding-top:5px; font-size:20px }