/* 메뉴 */
.menu_slide {  position: absolute; width: 84%; height: 100vh; right: -84%; z-index: 99999; background: #fff; transition: all .3s; }
.menu_slide.on{ right: 0; }
.menu_slide .login_status { padding: 0 6%; height: 8.4vh; background:#00adef; position: relative; }
.menu_slide .login_status span { color: #fff; font-size:1em; line-height: 8.4vh; display: flex; align-items: center; } /* 221123 해상도 디버깅 */
.menu_slide .login_status span em.user_cate { font-size: .7em; background: #0060aa; margin-right: 6px; display: inline-block; height: 22px; line-height: 20px; padding: 0 6px; border-radius: 15px;  }
.menu_slide .login_status .close { position:absolute; width: 5%; background: url('../images/btn_x_w.gif') no-repeat center; background-size: contain; top: 50%; right: 5%; transform: translateY(-50%); }
.menu_slide .menuarea { height: 83.5vh; overflow-y : scroll; }

.menu_slide .menuarea ul.dpt1 > li > a{ position:relative; }

.menu_slide .menuarea ul.dpt1 > li > a:before { content: ''; display: inline-block; position: absolute; top: 50%; left: 18px; transform: translateY(-50%); }
.menu_slide .menuarea ul.dpt1 > li.ic_order > a:before { top: 49%; width: 17px; height: 17px; background: url(../images/menu_1dpt_ico1.gif) no-repeat center; background-size: contain; }
.menu_slide .menuarea ul.dpt1 > li.ic_direction > a:before { width: 20px; height: 20px; background: url(../images/menu_1dpt_ico2.gif) no-repeat center; background-size: contain; }
.menu_slide .menuarea ul.dpt1 > li.ic_ws > a:before { top: 52%; width: 20px; height: 20px; background: url(../images/menu_1dpt_ico3.gif) no-repeat center; background-size: contain; }
.menu_slide .menuarea ul.dpt1 > li.ic_ssg > a:before { top: 51%; width: 20px; height: 20px; background: url(../images/menu_1dpt_ico4.gif) no-repeat center; background-size: contain; }
.menu_slide .menuarea ul.dpt1 > li.ic_wscomp > a:before { top: 52%; width: 20px; height: 18px; background: url(../images/menu_1dpt_ico5.gif) no-repeat center; background-size: contain; }
.menu_slide .menuarea ul.dpt1 > li.ic_confirm > a:before { width: 19px; height: 17px; background: url(../images/menu_1dpt_ico6.gif) no-repeat center; background-size: contain; }
.menu_slide .menuarea ul.dpt1 > li.ic_jungsan > a:before { top: 48%; width: 19px; height: 18px; background: url(../images/menu_1dpt_ico7.gif) no-repeat center; background-size: contain; }
.menu_slide .menuarea ul.dpt1 > li.ic_graph > a:before { width: 17px; height: 15px; background: url(../images/menu_1dpt_ico8.gif) no-repeat center; background-size: contain; }
.menu_slide .menuarea ul.dpt1 > li.ic_wsassign > a:before { width: 20px; height: 20px; background: url(../images/menu_1dpt_ico9.gif) no-repeat center; background-size: contain; }

.menu_slide .menuarea ul.dpt1 li > a { width: 76%; line-height: 7.5vh; padding-left: 15%; display: block; background-size:4%; font-size:1.1em; }
.menu_slide .menuarea ul.dpt1 li.on > a:after { transform: rotate(180deg); top: 42%; }
.menu_slide .menuarea ul.dpt1 li ul.dpt2 { height: 0; overflow: hidden; background: #f2f4f5; transition: all .3s; }
.menu_slide .menuarea ul.dpt1 li.on ul.dpt2{ background: #f2f4f5; padding: 15px 0; overflow: visible; height: auto; }
.menu_slide .menuarea ul.dpt1 li ul.dpt2 li {  }
.menu_slide .menuarea ul.dpt1 li ul.dpt2 li a{ height: 5vh; line-height: 5vh; background: none; }
.menu_slide .menuarea ul.dpt1 li ul.dpt2 li:first-child { padding-top: 10px; }
.menu_slide .menuarea ul.dpt1 li ul.dpt2 li:last-child { padding-bottom: 10px; }
.menu_slide .menuarea ul.dpt2 li a { padding: 0 6% 0 12%; }

.menu_slide .menuarea_btm { height: 8vh;  align-items: center; position: relative; }
.menu_slide .menuarea_btm button.logout { text-indent: 0; font-size: 1em; color:#555; background: #eee; display: block; width: 100%; height: 100%; font-weight: bold; }




/* 알람 로그 슬라이더 메뉴 */
.alarm_slide {  position: absolute; width: 100%; height: 100vh; right: -100%; z-index: 99999; background: #fff; transition: all .3s; }
.alarm_slide.on{ right: 0; }
.alarm_slide .login_status { padding: 0 6%; height: 8.4vh; background:#00adef; position: relative; }
.alarm_slide .login_status span { color: #fff; font-size:1em; line-height: 8.4vh; display: flex; align-items: center; } /* 221123 해상도 디버깅 */
.alarm_slide .login_status span em.user_cate { font-size: .7em; background: #0060aa; margin-right: 6px; display: inline-block; height: 22px; line-height: 20px; padding: 0 6px; border-radius: 15px;  }
.alarm_slide .login_status .close { position:absolute; width: 5%; background: url('../images/btn_x_w.gif') no-repeat center; background-size: contain; top: 50%; right: 5%; transform: translateY(-50%); }
.alarm_slide .menuarea { height: 83.5vh; overflow-y : scroll; }

.alarm_slide .menuarea ul.dpt1 > li > a{ position:relative; }

.alarm_slide .menuarea ul.dpt1 > li > a:before { content: ''; display: inline-block; position: absolute; top: 50%; left: 18px; transform: translateY(-50%); }
.alarm_slide .menuarea ul.dpt1 > li.ic_order > a:before { top: 49%; width: 17px; height: 17px; background: url(../images/menu_1dpt_ico1.gif) no-repeat center; background-size: contain; }
.alarm_slide .menuarea ul.dpt1 > li.ic_direction > a:before { width: 20px; height: 20px; background: url(../images/menu_1dpt_ico2.gif) no-repeat center; background-size: contain; }
.alarm_slide .menuarea ul.dpt1 > li.ic_ws > a:before { top: 52%; width: 20px; height: 20px; background: url(../images/menu_1dpt_ico3.gif) no-repeat center; background-size: contain; }
.alarm_slide .menuarea ul.dpt1 > li.ic_ssg > a:before { top: 51%; width: 20px; height: 20px; background: url(../images/menu_1dpt_ico4.gif) no-repeat center; background-size: contain; }
.alarm_slide .menuarea ul.dpt1 > li.ic_wscomp > a:before { top: 52%; width: 20px; height: 18px; background: url(../images/menu_1dpt_ico5.gif) no-repeat center; background-size: contain; }
.alarm_slide .menuarea ul.dpt1 > li.ic_confirm > a:before { width: 19px; height: 17px; background: url(../images/menu_1dpt_ico6.gif) no-repeat center; background-size: contain; }
.alarm_slide .menuarea ul.dpt1 > li.ic_jungsan > a:before { top: 48%; width: 19px; height: 18px; background: url(../images/menu_1dpt_ico7.gif) no-repeat center; background-size: contain; }
.alarm_slide .menuarea ul.dpt1 > li.ic_graph > a:before { width: 17px; height: 15px; background: url(../images/menu_1dpt_ico8.gif) no-repeat center; background-size: contain; }
.alarm_slide .menuarea ul.dpt1 > li.ic_wsassign > a:before { width: 20px; height: 20px; background: url(../images/menu_1dpt_ico9.gif) no-repeat center; background-size: contain; }

.alarm_slide .menuarea ul.dpt1 li > a { width: 76%; line-height: 7.5vh; padding-left: 15%; display: block; background-size:4%; font-size:1.1em; }
.alarm_slide .menuarea ul.dpt1 li.on > a:after { transform: rotate(180deg); top: 42%; }
.alarm_slide .menuarea ul.dpt1 li ul.dpt2 { height: 0; overflow: hidden; background: #f2f4f5; transition: all .3s; }
.alarm_slide .menuarea ul.dpt1 li.on ul.dpt2{ background: #f2f4f5; padding: 15px 0; overflow: visible; height: auto; }
.alarm_slide .menuarea ul.dpt1 li ul.dpt2 li {  }
.alarm_slide .menuarea ul.dpt1 li ul.dpt2 li a{ height: 5vh; line-height: 5vh; background: none; }
.alarm_slide .menuarea ul.dpt1 li ul.dpt2 li:first-child { padding-top: 10px; }
.alarm_slide .menuarea ul.dpt1 li ul.dpt2 li:last-child { padding-bottom: 10px; }
.alarm_slide .menuarea ul.dpt2 li a { padding: 0 6% 0 12%; }

.alarm_slide .menuarea_btm { height: 8vh;  align-items: center; position: relative; }
.alarm_slide .menuarea_btm button.logout { text-indent: 0; font-size: 1em; color:#555; background: #eee; display: block; width: 100%; height: 100%; font-weight: bold; }