@charset "utf-8";

/* base */
.container
{
  width: 1000px;
  margin: 0 auto;
}

@media (max-width: 1020px)
{
  .container {width: 100%;}
}

.row
{
  position: relative;
  padding: 0 15px;
  width: 100%;
}

/* flex */
.flex_row
{
  display:flex;
  flex-direction: row;
}

.flex_column
{
  display:flex;
  flex-direction: column;
}

.flexrow
{
  display:flex;
  flex-direction:row;
  justify-content:center;
}

.flex000
{
  flex-grow:0;
  flex-shrink:0;
  flex-basis:auto;
}
.flex100
{
  flex-grow:1;
  flex-shrink:0;
  flex-basis:auto;
}
.flex010
{
  flex-grow:0;
  flex-shrink:1;
  flex-basis:auto;
}
.flex001
{
  flex-grow:0;
  flex-shrink:0;
  flex-basis:100%;
}
.flex011
{
  flex-grow:0;
  flex-shrink:1;
  flex-basis:100%;
}
.flex110
{
  flex-grow:1;
  flex-shrink:1;
  flex-basis:auto;
}
.flex111
{
  flex-grow:1;
  flex-shrink:1;
  flex-basis:100%;
}
.flex200
{
  flex-grow:2;
  flex-shrink:0;
  flex-basis:auto;
}
.flex210
{
  flex-grow:2;
  flex-shrink:1;
  flex-basis:auto;
}
.flexwrap{ flex-wrap:wrap; }
.flexnowrap{ flex-wrap:nowrap; }



/* 로그인 화면 */
#login
{
  display:flex;
  flex-direction:column;
  height:100vh;
  justify-content:center;
  align-items:center;
}

#login .loginImg
{
  display:flex;
  justify-content:center;
  align-items:center;
  height:20vh;
}

#login .loginImg img
{
  height: 70%;
}

#login .login
{
  display:flex;
  flex-direction:column;
  width: 100%;
  height:80vh;
  background-color:#fff;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding:30px;
}

#login .login h3
{
  text-align: center;
  margin-bottom:20px;
}

.login_input_div
{
  width: 100%;
  margin-bottom: 15px;
}

#login .login_input
{
  height: 34px;
  width: 100%;
  border: 1px solid #ccc;
  background:#fff;
  border-radius: 5px;
  padding: 0 10px;
}

.login_btn
{
  height: 48px;
  padding: 0 20px;
  margin-top: 20px;
  margin-right: 0;
  display: block;
}

.cssBtn_orange
{
  background: #116fa8;
  color: #fff;
  border: #116fa8 1px solid;
}

.cssBtn_lightgrey
{
  border: #7a7c7f 1px solid;
  color:#304269;
}

.cssBtn
{
  font-size: 14px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  text-align: center;
  height:35px;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.cssBtn2
{
  font-size: 13px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  text-align: center;
  height:35px;
  padding: 0px 20px;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.cssBtn3
{
  position:fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  z-index: 50;
  font-size: 13px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  text-align: center;
  width: calc(100% - 30px);
  height:38px;
  padding: 0;
  margin:0 15px;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}


/******************************

header 영역

*******************************/
#header
{
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  width: 100%;
  right: 0;
  z-index: 2000;
  height: 50px;
  background: #fff;
  border-bottom:1px solid #ddd;
  -webkit-box-shadow: 0 0px 6px rgb(0 0 0 / 8%), 0 0 40px rgb(0 0 0 / 0%) inset;
    -moz-box-shadow: 0 0px 6px rgb(0 0 0 / 8%), 0 0 40px rgb(0 0 0 / 0%) inset;
    box-shadow: 0 0px 6px rgb(0 0 0 / 8%), 0 0 40px rgb(0 0 0 / 0%) inset;
  -webkit-transition: background 0.3s ease-out, margin-top 0s ease-out;
  transition: background 0.3s ease-out, margin-top 0s ease-out;
}

.header
{
  display:flex;
  flex-direction:row;
}

#header .logo
{
  width: 70px;
  height: 50px;
}

#header .logo .logo_img
{
  display: block;
  height: 100%;
  background: url(../img/logo.png) no-repeat center center;
  background-size: 70px auto;
}

#header .header_tit
{
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  width: 115px;
  top:14px;
  left: 0;
  right: 0;
  text-align: center;
  color:#304269;
  font-weight: bold;
}

.back_btn
{
  position: absolute;
  top: 14px;
  left: 15px;
  width: 24px;
  height: 24px;
}

.back_btn a i
{
  font-size:22px;
  color:#333;
  font-weight: 300;
}

.logout_btn
{
  position: absolute;
  top: 13px;
  right: 20px;
  width: 24px;
  height: 24px;
}

.logout_btn a i
{
  font-size:25px;
  color:#fff;
  font-weight: 300;
}


.category
{
  position: absolute;
  top: 16px;
  right: 15px;
  width: 22px;
  height: 20px;
  cursor: pointer;
}

.category .bar
{
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border: 0;
  border-radius: 30px;
  background: #444;
  transition: opacity 0.3s, top 0.3s, transform 0.5s;
  transition-delay: 0.3s, 0.3s, 0s;
}

.category .bar:nth-child(2) {top:0; transform:rotate(0)}
.category .bar:nth-child(3) {top:8px; opacity:1}
.category .bar:nth-child(4) {top:16px; transform:rotate(0)}

.category.close .bar {display:inline-block; background:#444; transition:background 1s, opacity 0.3s, top 0.3s, transform 0.5s; transition-delay:0s, 0s, 0s, 0.3s; }
.category.close .bar:nth-child(2) {top:8px; background:#444; transform:rotate(-45deg)}
.category.close .bar:nth-child(3) {opacity:0}
.category.close .bar:nth-child(4) {top:8px; background:#444; transform:rotate(45deg)}

#header .header_tit.close {display:none;}

.search
{
  display:flex;
  align-items:center;
  margin-top: 7px;
}

.search .inputText
{
  width: 66%;
  border: 0;
}

.search i
{
  font-size: 20px;
  font-weight: 500;
  color:#3f8ebf;
  margin-right:10px;
}

.search02
{
  position: absolute;
  top: 15px;
  right: 54px;
  width: 24px;
  height: 24px;
}

.search02 i
{
  font-size: 20px;
  font-weight: 500;
  color:#333;
  margin-right:10px;
}

.search03
{
  position: absolute;
  top: 15px;
  left: 54px;
  width: 34px;
  height: 24px;
}

.search03 > div
{
  position: absolute;
  top: -5px;
  right: -2px;
  font-size: 10px;
  background-color: #ff8066;
  opacity: 0.8;
  border-radius: 10px;
  padding: 0 5px;
  color: #fff;
  text-align: center;
}

.search03 i
{
  font-size: 20px;
  font-weight: 500;
  color:#333;
  margin-right:10px;
}


/*전체 사이트맵 */

#full_menu
{
  position:fixed;
  right:-100%;
  top:0;
  height: 100%;
  background:#fff;
  z-index:9000;
  transition: all ease .5s;
  -webkit-transition: all ease .5s;
  -o-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  overflow: hidden;
  overflow-y: auto;
}

#full_menu.open
{
  right: 0;
  width: 70%;
}

.full_menu
{
  display:flex;
  flex-direction: column;
  flex-wrap:wrap;
  align-content:space-between;
  padding-top:30px;
}

.full_menu .dept
{
  flex-grow:0;
  flex-shrink:0;
  flex-basis: auto;
  padding: 6px 0;
  padding-right: 0;
  display:flex;
  flex-direction: column;
  border-bottom: 1px solid #ddd;
  width: 100%;
}

.full_menu .dept:nth-last-child()
{
  padding-right:0px;
}

.full_menu .dept .dept01 h4
{
  color:#333;
  font-weight: bold;
  -webkit-transition-duration: 0.3s;
}

.full_menu .dept .dept01 h4:hover
{
  color:#fe4957;
}

#full_menu .dept01
{
  color:#fff;
  font-weight: bold;
  padding:20px 0;
  position:relative;
  padding-top:10px;
  padding-bottom:10px;
  margin-bottom:0;
}

#full_menu .dept02
{
  color:#666;
  flex-direction: column;
  width: 100%;
  line-height: 32px;
  font-weight: 400;
  font-size:15px;
  -webkit-transition-duration: 0.4s;
  display:none;
  background:#f1f1f1;
  border-radius: 6px;
}

#full_menu .dept01.active:before
{
  content: '';
  position: absolute;
  background-color: #858585;
  transition: 0.3s;
  right: 0;
  top: calc( 50% - 1.5px );
  width: 15px;
  height: 1px;
}

#full_menu .dept01.active:after
{
  transform: rotate(-90deg);
}

#full_menu .dept01:before
{
  content: '';
  position: absolute;
  background-color: #858585;
  transition: 0.3s;
  right: 0;
  top: calc( 50% - 1.5px );
  width: 15px;
  height: 1px;
}

#full_menu .dept01:after
{
  content: '';
  position: absolute;
  background-color: #858585;
  transition: 0.3s;
  right: 7px;
  top: calc( 50% - 8.5px );
  width: 1px;
  height: 15px;
}

.full_menu .dept02
{
  display:flex;
  flex-direction:column;
}

.full_menu .dept02 a
{
  color:#666666;
  padding:4px 15px;
  font-weight: 400;
  letter-spacing: -0.5px;
  -webkit-transition-duration: 0.3s;
  display: block;
}

.full_menu .dept02 a:hover
{
  color:#fe4957;
}

#full_menu .info
{
  padding:0;
}

#full_menu .info > div
{
  background:#f0f6fb;
  border-bottom:1px solid #ddd;
  padding:0px 15px 15px 15px;
  display:flex;
  flex-direction: row;
}

#full_menu .info i
{
  color:#888;
  font-size:16px;
  margin-right:10px;
  margin-top:2px;
}


#header.sitemap_header
{
  background:#fff;
}

#header.sitemap_header .logo .logo_img
{
  display: block;
  width: 115px;
  height: 56px;
  background: url(../img/logo.png) no-repeat center center;
  background-size: 115px auto;
}

/******************************

콘텐츠 영역

*******************************/

/* 공통 */
#wrap
{
  padding-top: 50px;
  height: calc(100vh - 50px);
  overflow-y:auto;
  display: flex;
  flex-direction: column;
}



/* 메인 화면_연차현황 */
.box
{
  width: 100%;
  background:#fff;
  border-bottom:8px solid #ebebeb;
  padding: 10px 0;
}

.box:last-child
{
  border-bottom:0px;
}

.subbox
{
  width: 100%;
  background:#fff;
  border-bottom:8px solid #ebebeb;
  padding:10px 0;
}

.subbox:last-child
{
  border-bottom:0px;
  margin-bottom: 50px;
}

.menu_header
{
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  overflow:hidden;
}

.subbox .menu_header
{
  display: flex;
  justify-content: space-between;
  padding: 0;
  overflow:hidden;
  margin-bottom:10px;
}

.menu_header .menu_name
{
  font-weight: 600;
  color: #333;
  letter-spacing: -0.5px;
}

.menu_list .menu_count
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 20px;
  border-radius: 4px;
  background-color: #f2f2f2;
  text-align: center;
  margin-right:3px;
}

.menu_header .more, .menu_header .setting, .menu_header .reload
{
  cursor: pointer;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  line-height: normal;
  display: flex;
  align-items: center;
  width: 26px;
  height: 26px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-left: auto;
}

.menu_header .reload i
{
  color: #666;
  font-size: 12px;
  font-weight: 500;
  width: 100%;
}

.menu_item
{
  padding:0 15px 10px 15px;
}

.subbox .menu_item
{
  padding:0;
}

.menu_item .menu_list
{
  display:flex;
  flex-direction:row
}

.menu_item .menu_list .row3
{
  width: 33%;
  padding: 0 5px;
}

.menu_item .menu_list .row2
{
  width: 49%;
  padding: 0 5px;
}

.menu_item .menu_list .no_hand h6
{
  text-align: center;
}

.menu_item .menu_list .no_hand .menu_name
{
  color:#666;
  text-align: center;
  font-weight: 400;
  line-height: 2;
}

.menu_item .menu_list .menu_txt
{

}



.menu_item .menu_list ul
{
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 100%;
}

.menu_item .menu_list ul li.no_hand
{
  cursor: initial;
  border-bottom:1px solid #e8e8e8;
}


.menu_item .menu_list ul li
{
  display: flex;
  flex-direction: column;
  text-align: inherit;
  padding: 15px 0;
  cursor: pointer;
  width: auto;
}

.menu_item .menu_list ul li .list_left
{
  flex-basis: 30%;
}

.menu_item .menu_list ul li .list_right
{
  flex-basis: 70%;
}


.menu_item .menu_list ul li .tit2.l4
{
  cursor: initial;
  letter-spacing: -1px;
}

.menu_item .menu_list ul li .team2.l4
{
  color:#999;
  font-weight: 400;
  margin-left:5px;
  margin-top:1px;
}

.menu_txt
{
  color:#38496e;
}


.menu_item .menu_list ul li .date2.l4
{
  font-weight: 400;
  color: #38496e;
}

.menu_item .menu_list ul li .day2.l4
{
  color:#fb755a;
  font-weight: 300;
}

.menu_item .menu_list ul li .txt2.l4
{
  color:#999;
  font-weight: 400;
}

.menu_item .menu_list ul li .name2.l4
{
  color:#333;
  font-weight: 400;
}

/* 검색 리스트 */


.subbox .menu_item2
{
  padding:0;
}

.menu_item2 .menu_list
{
  display:flex;
  flex-direction:row
}


.menu_item2 .menu_list ul
{
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 100%;
}

.menu_item2 .menu_list ul li.no_hand
{
  cursor: initial;
}

.menu_item2 .menu_list ul li
{
  display: flex;
  flex-direction: column;
  text-align: inherit;
  padding: 15px 10px;
  cursor: pointer;
  width: auto;
  border-bottom:1px solid #ddd;
}


.menu_item2 .menu_list ul li .tit2.l4
{
  cursor: initial;
  font-weight: 500;
}

.menu_item2 .menu_list ul li .date2.l4
{
  color:#666;
  font-weight: 400;
}






/* 근태관리 */

/* 등록 */
.btn_box
{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  margin-top:20px;
}

.btn_box button
{
  width: 48%;
}

.btn_box2
{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  margin-top:20px;
}

.btn_box2 button
{
  width: 100%;
}

.regist
{

}

.regist h6
{
  margin-bottom:6px;
  font-weight: 500;
}

select
{
  background-position-y: center;
  padding-right: 25px;
  height: 35px;
  font-family: inherit;
}

.selectBox
{
  height: 35px;
  padding: 0 4px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
}

.selectBox2
{
  height: 35px;
  padding: 0 4px;
  font-weight: 400;
}

.ctlDateBtn::before { content:"\f073"; }

.ctlDateBox
{
  height: 35px;
  border: 1px solid #ccc;
  border-radius: 6px;
  align-items: center;
  background: #fff;
  display:flex;
  flex-direction: row;
  flex-basis:auto;
  flex-shrink:1;
  flex-grow:1;
  position:relative;
}

.ctlDate
{
  margin-left: 10px;
  border: 0;
  width: 58%;
  height: 30px;
}

.ctlDateBtn
{

  font-size: 1.25em;
  cursor: pointer;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  text-rendering: auto;
  line-height: 1;
  position:absolute;
  right: 10px;

}

.capInput
{
  min-height: 40px;
  align-items: center;
  background-color: white;
  padding: 10px;
}

.Inputtxt
{
  line-height: 1.5;
}

.textArea
{
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 5px;
}

.mgb
{
  margin-bottom: 15px;
}

.mgb2
{
  margin-bottom: 10px;
}

.mgb3
{
  margin-bottom: 5px;
}

.mgt
{
  margin-top: 15px;
}

.mgt2
{
  margin-top: 10px;
}

.mgr
{
  margin-right: 5px;
}

.mgr2
{
  margin-right: 10px;
}

.mgl
{
  margin-left: 5px;
}

.approval
{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  border-radius: 5px;
}

.fa-stack
{
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.ctlRadioItem
{
  cursor: pointer;
  line-height: 30px;
  display:flex;
  flex-direction:row;
  align-items:center;
}

.ctlRadioItem input
{
  margin-right:5px;
}

.inputText
{
  height: 35px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 5px;
}

.tableList
{
  overflow-y: hidden;
  overflow-x: auto;
}

.tableHead
{
  min-width: -moz-fit-content;
  min-width: fit-content;
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  font-weight: 500;
  color: #444;
}

.tableHead .tableTd, .tableHead .tableTd_L, .tableHead .tableTd_R
{
  background-color: #f8f8f8;
  border-top: 1px solid #666;
  border-bottom: 1px solid #ddd;
}

.tableTd
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-weight: 400;
}

.tableBody
{
  min-width: -moz-fit-content;
  min-width: fit-content;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 100%;
  /* border-bottom: 1px solid #ddd; */
  overflow-y: auto;
  overflow-x: hidden;
}

.tableTr
{
  display: flex;
  flex-direction: row;
  cursor: pointer;
}

.tableTr .tableTd,
.tableTr .tableTd_L,
.tableTr .tableTd_R
{
  border-bottom: 1px solid #ddd;
}

.label
{

}

.label_approval
{
  padding: 2px 10px;
  background-color: #ffdc96;
  color: #986204;
  border-radius: 6px;
  font-weight: 400;
}

.label_ing
{
  padding: 2px 10px;
  background-color: #d1f3f2;
  color:#37816d;
  border-radius: 6px;
  font-size:12px;
  font-weight: 400;
}

.label_delete
{
  padding: 2px 10px;
  background-color: #d67073;
  color:#fff;
  border-radius: 6px;
  font-size:12px;
  font-weight: 400;
}

.label_self
{
  padding: 2px 10px;
  background-color: #6c7bb2;
  color:#fff;
  border-radius: 6px;
  font-size:12px;
  font-weight: 400;
}

.label_grey
{
  padding: 2px 10px;
  background-color: #f1f1f6;
  color:#0000EE;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size:12px;
  font-weight: 400;
}


.capEdit
{
  min-height: 30px;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 10px 8px 5px;
  background-color: #f8f8f8;
  font-weight: bold;
}

.border
{
  border:1px solid #ddd;
}
.border_1
{
  border-top:1px solid #ddd;
}
.border_2
{
  border-right:1px solid #ddd;
}
.border_3
{
  border-bottom:1px solid #ddd;
}
.border_4
{
  border-left:1px solid #ddd;
}
.border_5
{
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
}
.border_6
{
  border-left:1px solid #ddd;
  border-right:1px solid #ddd;
}
.border_7
{
  border-right:1px solid #ddd;
  border-bottom:1px solid #ddd;
}
.border_8
{
  border-left:1px solid #ddd;
  border-bottom:1px solid #ddd;
}
.border_9
{
  border-top:1px solid #ddd;
  border-right:1px solid #ddd;
  border-bottom:1px solid #ddd;
}
.border_10
{
  border-top:1px solid #ddd;
  border-left:1px solid #ddd;
  border-bottom:1px solid #ddd;
}
.border_11
{
  border-left:1px solid #ddd;
  border-right:1px solid #ddd;
  border-bottom:1px solid #ddd;
}
.border_12
{
  border-top:1px solid #ddd;
  border-left:1px solid #ddd;
  border-right:1px solid #ddd;
}
.border_13
{
  border-top:1px solid #ddd;
  border-right:1px solid #ddd;
}
.border_14
{
  border-top:1px solid #ddd;
  border-left:1px solid #ddd;
}

/* 조직도 */
.loctation
{
  width: 100%;
  min-height: 50px;
  display:flex;
  align-items:center;
  -webkit-box-shadow: 0px 0px 15px 1px rgb(138 132 206 / 3%);
  -moz-box-shadow: 0px 0px 15px 1px rgba(138, 132, 206, 0.03);
  box-shadow: 0px 20px 20px rgb(126 142 177 / 12%);
  background: #fafafa;
  border-radius: 0;
}

.loctation .row
{
  display:flex;
  flex-direction: row;
  align-items:center;
}

.loctation .row i
{
  font-size:15px;
  margin-right:10px;
}

.loctation .row span
{
  margin-right:10px;
  font-weight: 400;
}

.orgtit
{
  min-height: 45px;
  background-color:#3f8ebf;
}

.orgtit h6
{
  color:#fff;
}

.orgmenu
{
  border-bottom:1px solid #ddd;
  padding:10px 15px;
  justify-content:space-between;
}

.orgmenu i
{
  font-size:20px;
  color:#999;
  font-weight: 300;
}

.user_info
{
  margin-left:15px;
}

.user_pic img
{
  border-radius: 10px;
  overflow: hidden;
}

/* nav 영역 */
.nav
{
  position: fixed;
  left: 0;
  bottom: 0px;
  z-index: 2000;
  width: 100%;
  background: #fff;
  height:50px;
  border-top:1px solid #ccc;
  -webkit-box-shadow:0 0px 6px rgb(0 0 0 / 10%), 0 0 40px rgb(0 0 0 / 0%) inset;
  -moz-box-shadow:0 0px 6px rgb(0 0 0 / 10%), 0 0 40px rgb(0 0 0 / 0%) inset;
       box-shadow:0 0px 6px rgb(0 0 0 / 10%), 0 0 40px rgb(0 0 0 / 0%) inset;

}


.nav>div
{
  flex-basis: 25%;
  padding-top: 3px;
  position:relative;
  text-align: center;
  display:flex;
  flex-direction: column;
}



.nav .active > div
{
  position: relative;
  background-color:#58b1d3;
  border-radius: 10px;
}

.nav .alerm_new
{
  position:absolute;
  top:10%;
  left:55%;
  background:#fe4957;
  color:#fff;
  padding:1px 5px;
  border-radius: 30px;
  font-size:10px
}


.nav > div > div .icon i
{
  font-size:17px;
  font-weight: bold;
  color:#ccc;
  margin-top:5px;
}

.nav .active > div .icon i
{
  font-size:17px;
  font-weight: bold;
  color:#fff;
  margin-top:5px;
}

.nav > div > div .navtxt
{
  cursor: pointer;
  color:#999;
  width: 100%;
  font-size:12px;
}

.nav .active > div .navtxt
{
  cursor: pointer;
  color:#fff;
  width: 100%;
  font-size:12px;
}


.navcategory
{
  position: relative;
}

.navcategory i
{
  font-size: 17px;
  font-weight: bold;
  color: #ccc;
  margin-top: 5px;
}


/* 팝업 */
#mainPopup
{
  z-index: 4000;
  width: 250px;
  height: 160px;
  top: calc(50% - 125px);
  left: calc(50% - 125px);
  background-color: white;
  position: absolute;
  display:flex;
  flex-direction: column;
  justify-content:space-between;
  overflow:hidden;
}

#mainPopup .icon
{
  display:flex;
  justify-content:center;
  align-items:center;
  align-content:center;
  margin-top:20px;

}

#mainPopup .icon i
{
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #fad961 0%,#f76b1c 100%);
  border-radius: 50%;
  color:#fff;
  text-align: center;
  font-size:18px;
  font-weight: 100;
  line-height: 36px;
}

#mainPopup .pop_btn
{
  display:flex;
  flex-direction: row;
}

#mainPopup .pop_btn .pop_btn1
{
  text-align: center;
  width: 150px;
  height: 40px;
  background-color: #58b1d3;
  color: white;
  line-height: 40px;
  font-weight: bold;
}

#mainPopup .pop_btn .pop_btn2
{
  text-align: center;
  width: 150px;
  height: 40px;
  line-height: 40px;
  background:#ddd;
  font-weight: bold;
}

#mainPopup .pop_btn .pop_btn0  /* 버튼 1개일 경우 */
{
  text-align: center;
  width: 150px;
  height: 40px;
  background-color: #58b1d3;
  color: white;
  line-height: 40px;
  font-weight: bold;
}