@charset "utf-8";


/*메뉴*/
#smart_container {width:100%;padding:55px 25px;height:100vh}
#smart_container .container_wrapper {position:relative; height:100%;border-radius:30px; border:1px solid #ddd; background:#fff}
#smart_container .menu_Content {position: absolute; height: 100%; background: linear-gradient(180deg,rgb(64,67,140) 80%,#5c2b7b); border-radius: 30px; width: 220px;}
#smart_container .menu_Content .scroll {height:100%; overflow-y:auto; overflow-x:hidden}
#smart_container .menu_Content .mControl {position: absolute; top: 20px; right: 15px;text-align: center; cursor: pointer; color: #fff; z-index: 10;}
#smart_container .menu_Content .mControl .mhide {display:block; padding-top:2px}
#smart_container .menu_Content .mControl .mhide i {font-size:32px}
#smart_container .menu_Content .mControl_show { display: none; position: absolute; top: -45px; right: -35px; width: 40px; height: 40px; text-align: center; cursor: pointer; color: #fff; background: linear-gradient(180deg,rgb(64,67,140) 80%,#5c2b7b); z-index: 10; border-radius: 30px;}
#smart_container .menu_Content .mControl_show i {font-size:24px; line-height:40px}
#smart_container .menu_Content .mcont_hd {font-size:1.5em;font-weight:600;padding:50px 10px;position:relative;width: 220px;}
#smart_container .menu_Content .mcont_hd h2 {text-align:center;}
#smart_container .menu_Content .mcont_hd h2 a {color:#fff}
.mcont_hd .login_b {font-size:12px; margin-top:11px; width:100%; position:absolute; background:#333; right:0; height:50px; line-height:50px; text-align: center;}
.mcont_hd .l_btn { padding:5px; background: #f6d50e; border-radius: 3px; }
.mcont_bd {margin-top:25px; width:210px; margin-left:10px}

#menuContent .menu01_li .menu_a {position:relative;display: block; padding: 15px 0 15px 50px; color: #fff; min-width: 200px; font-size: 1.2em; text-align: left;}
#menuContent .menu01_li .menu_a:before {content:"";width:50px; height:52px;line-height:52px;font-size:25px;color:#fff;font-family: "xeicon";text-align: center; text-indent: 0; position: absolute; left: 0; top: 0; -webkit-transition: all .2s ease-out; transition: all .2s ease-out;}
#menuContent .menu01_li:nth-child(1) .menu_a:before {content:"\eb04"}
#menuContent .menu01_li:nth-child(2) .menu_a:before {content:"\eb59"}
#menuContent .menu01_li:nth-child(3) .menu_a:before {content:"\eb09"}
#menuContent .menu01_li:nth-child(4) .menu_a:before {content:"\eaec"}
#menuContent .menu01_li:nth-child(5) .menu_a:before {content:"\ea4e"}
#menuContent .menu01_li:nth-child(6) .menu_a:before {content:"\ea77"}
#menuContent .menu01_li:nth-child(7) .menu_a:before {content:"\e99d"}

#menuContent .menu01_li .menu_a.active {background: #fff; color: rgb(26, 27, 51); border-radius: 30px 0 0 30px; font-weight: 500;}
#menuContent .menu01_li .menu_a.active:before {color: rgb(26, 27, 51)}

#menuContent .menu02 {display:none;padding:10px 0;margin-left:50px}
#menuContent .menu02 li {padding-left:14px;position:relative;}
#menuContent .menu02 li:before {content:"";display:block; width:2px;height:2px;background:#fff;position:absolute;top:50%;left:5px;transform:translateY(-50%);}
#menuContent .menu02 li a {color:#fff;padding: 5px 0; display:block; font-size:1.2em}
#menuContent .menu02.active { display: block; }
#menuContent .menu02 li a.active { font-weight:500;text-decoration: underline;}

.dot_h4{font-size:1.3em;margin-bottom:5px;line-height:28px;padding-left:25px;position:relative;}
.dot_h4:after {display:block; content:"";background: url(../img/tit_icon.png) no-repeat; position: absolute; top: 4px; left:10px; height: 15px; width: 10px;}
.body_{padding: 35px 30px 0px 255px; height:100%;overflow:hidden;overflow-y:auto;}
.body_container {position:relative}
.bc_box:after {display:block; content:""; clear:both}
.bc_box .bdcont_50 {width:50%; padding:5px;float:left}

/*카메라*/
.cl_img {display: flex ; flex-direction: row;flex-wrap: nowrap; justify-content: center;}
.cl_img li {width:25%;padding:5px}
.cl_img li .img_area {position:relative; height:350px;overflow: hidden; border-radius: 8px;}
.cl_img li .img_area img {width:100%; position:absolute;top:50%; left:50%; transform: translate(-50%,-50%);}


/*로그인*/
.login {display: flex; height: 100vh; background: url(/img/triangle-mosaic.png) repeat; flex-direction: column; align-items: center; justify-content: center;}
.loginbox {display:flex; width:900px; border-radius:30px; box-shadow:1px 5px 7px 0 #dedede;overflow:hidden;height:700px}
.loginbox > div {width: 50%;}
.loginbox .loginfo {background: #f0f7f9 url(/img/info_bg.png) top no-repeat; padding: 50px 30px; background-size: contain; }
.loginbox .loginfo .logo {margin-bottom:330px}
.loginbox .loginfo .logo img {width:100px;}
.loginbox .loginfo .logo h2.title {margin-top: 55px; font-size: 36px; color: #c9449f; text-align: center;font-weight: 900;}
.loginbox .loginfo .logo h2.title span {display: block; font-size: 18px; color: #fff;font-weight: 500;}
.loginbox .loginfo .logo h2.title span em {font-style:normal; border-radius:50px; padding:5px 20px;background:#9c9c9c}
.loginbox .loginfo .decs_info {padding-top: 30px; border-top: 1px solid #4c80c1;text-align:center}

.loginbox .mb_box {background:#fff;height:100%;padding:100px 30px}
.loginbox .mb_box h4 {text-align:center; font-size:20px;margin-bottom: 70px;}
#login_fs { position: relative;}
#mb_login #login_fs .frm_input { background-color: #f2f2f2; border-radius: 5px; border: 0; height: 45px; padding: 15px; display: block; width: 100%; margin-bottom: 10px; font-size: 14px;}
#mb_login #login_fs .btn_submit {width: 100%; height: 45px; font-size: 16px; font-weight: 700; margin-bottom: 10px;}

/*메뉴 타이틀*/
.body_ #sub-title {font-size:1.45em;padding-left:25px;color:#fff;background:#414350;height:60px;line-height:60px; font-weight:600;border-radius:15px;margin-bottom:10px;display:flex;align-items:center;position:relative;}

.body_container .sub_tit h3 {font-size:1.4em;position:relative;line-height: 45px;padding-left:18px}
.body_container .sub_tit h3:before {width: 4px; height: 18px; content: ""; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); background: #183076;}

/*fixtop button*/
.btn_fixed_top {position: fixed; top: 157px; right: 55px; z-index: 100;}

/*기관수정*/
.top_box {margin: 0; padding: 24px 40px; border-radius: 10px; background: #f8f8f8;margin-bottom:15px;display: flex; flex-direction: row; align-items: center;}
.top_box .id_view {color:#555; font-size:2em;display:inline-block;margin-right: 30px;}
.top_box .id_view span {display:block; font-size:18px; font-weight:400}
.top_box button {font-size:1.2em}

/*대시보드*/
.person .person_m {height:350px}

/*모니터링 리스트*/
#monitoring_list table td {padding:10px}

/* 설정 */
.bc_box .sub-title {display: flex;justify-content: space-between;margin: 20px 0px;}
.alert-settings label {display: block;margin-bottom: 10px;font-size: 1.2em;}
.alert-settings input {margin-right: 10px;font-size: 1.2em;}
.alert-settings div {margin-left: 25px;margin-bottom: 30px;}
.alert-settings hr {display: block;border: 1px solid #eee;}

/* 차트 */
canvas {
    width: 100% !important;
    height: 100% !important;
}
.bdcont_50 span{display:block;text-align:center;font-weight:bold;margin-bottom:4px;}