:root {
    /*텍스트 */
    --bs-left-menu-on-text: #4aa4ff;
    --bs-left-menu-text: #9fccf2;
    --bs-left-menu-on-bg: #e6f3ff;

    /* 상태바 */
    --bs-state-on: linear-gradient( to right, #328eff, #86d3ff );
    --bs-state: #c8c8c8;

    /* on */
    --bs-State-gradient-top: linear-gradient( to top, #328eff, #86d3ff );
    
    --bs-white: #fff;
    /* tab */
    --tab-on: #0a8cff;

    /* 기본 폰트색상 */
    --text-09:#333333;
    --text_13:#202020;
    --text-20:#333333;
    --text_34:#575757;
    --text_40:#656565;
    --text_62:#9d9d9d;
    --text_71: #b4b4b4;
    --text_78:#c8c8c8;

    /* 상태 텍스트*/
    --bs-blue-state-text: #2e8ff1;
    --bs-green-state-text: #2ebd3f;
    --bs-yellow-state-text: #edb121;
    --bs-red-state-text: #f11f1f;

    /* 다크모드 텍스트 */
    --dark-base : #797f86;
    --dark-text : #8c9bac;

    /* 다크모드 상태 텍스트*/
    --dark-blue-state-text: #51a7ff;
    --dark-green-state-text: #1fffc8;
    --dark-yellow-state-text: #ffdb5c;
    --dark-red-state-text: #fe2d54;

    /* 버튼 */
    --btn-blue: #3d97ff;
    --btn-red: #e74343;
    --btn-disabled: #dddede;
    --btn-blue-hover: #0063d5;
    --btn-red-hover: #c40000;
}

@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

@font-face {
     font-family: 'S-CoreDream-5Medium';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-6Bold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
html{
    position: relative;
    min-height: 100%;
    background-color: #f5f8f9;
}
select {
    min-width: 160px;
    line-height: 40px;
    border: 1px solid var(--bs-state);
    color: var(--text_40);
    padding: 0 40px 0 20px;
    border-radius: 5px;
    -webkit-appearance: none;  /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
    background:#fff url(../img/arrow_icon.png) no-repeat 95% -120px;  /* 화살표 모양의 이미지 */
    background-size: 40px auto;
}
body{
    font-family: 'S-CoreDream-5Medium';
}
.wrap{
    height: 100%;
    position: relative;
}
/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand {
    display: none;
}
/*font-color*/
.text-blue{
    color: #2995f0 !important;
}
.text-gray{
    color: #ababab !important;
}
.text-green{
    color: #3fc088 !important;
}
.text-red{
    color: #e45f5f !important;
}
.text-yellow{
    color: #ff7200 !important;
}


/*margin padding*/
.mt-0{
margin-top: 0px !important;
}
.mt-10{
margin-top: 10px !important;
}
.mt-20{
margin-top: 20px !important;
}
.mt-30{
margin-top: 30px !important;
}
.mt-40{
margin-top: 40px !important;
}
.mt-50{
margin-top: 50px !important;
}
.mt-60{
margin-top: 60px !important;
}
.mb-0{
margin-bottom: 0px !important;
}
.mb-10{
margin-bottom: 10px !important;
}
.mb-20{
margin-bottom: 20px !important;
}
.mb-30{
margin-bottom: 30px !important;
}
.mb-40{
margin-bottom: 40px !important;
}
.mb-50{
margin-bottom: 50px !important;
}
.mb-60{
margin-bottom: 60px !important;
}


.ml-10{
margin-left: 10px !important;
}
.ml-20{
margin-left: 20px !important;
}
.ml-30{
margin-left: 30px !important;
}
.ml-40{
margin-left: 40px !important;
}
.ml-50{
margin-left: 50px !important;
}
.ml-60{
margin-left: 60px !important;
}
.mr-10{
margin-right: 10px !important;
}
.mr-20{
margin-right: 20px !important;
}
.mr-30{
margin-right: 30px !important;
}
.mr-40{
margin-right: 40px !important;
}
.mr-50{
margin-right: 50px !important;
}
.mr-60{
margin-right: 60px !important;
}
.pt-0{
    padding-top: 0!important;
}
.pt-10{
padding-top: 10px !important;
}
.pt-20{
padding-top: 20px !important;
}
.pt-30{
padding-top: 30px !important;
}
.pt-40{
padding-top: 40px !important;
}
.pt-50{
padding-top: 50px !important;
}
.pt-60{
padding-top: 60px !important;
}
.pb-0{
padding-bottom: 0px !important;
}
.pb-10{
padding-bottom: 10px !important;
}
.pb-20{
padding-bottom: 20px !important;
}
.pb-30{
padding-bottom: 30px !important;
}
.pb-40{
padding-bottom: 40px !important;
}
.pb-50{
padding-bottom: 50px !important;
}
.pb-60{
padding-bottom: 60px !important;
}


.pl-10{
padding-left: 10px !important;
}
.pl-20{
padding-left: 20px !important;
}
.pl-30{
padding-left: 30px !important;
}
.pl-40{
padding-left: 40px !important;
}
.pl-50{
padding-left: 50px !important;
}
.pl-60{
padding-left: 60px !important;
}
.pr-10{
padding-right: 10px !important;
}
.pr-20{
padding-right: 20px !important;
}
.pr-30{
padding-right: 30px !important;
}
.pr-40{
padding-right: 40px !important;
}
.pr-50{
padding-right: 50px !important;
}
.pr-60{
padding-right: 60px !important;
}

.p-0{
padding: 0px !important;
}


/* 스크롤 스타일 */
.scrollbar_light,.scrollbar_dark{
    overflow-y: auto;
}
.scrollbar_light::-webkit-scrollbar, .scrollbar_dark::-webkit-scrollbar {
    width: 6px;
    height: 5px;
}
.scrollbar_light::-webkit-scrollbar-thumb{
    height: 5%;
    background-color: var(--bs-state);
    border-radius: 10px;    
}
.scrollbar_light::-webkit-scrollbar-track{
    background-color: rgba(0,0,0,0);
}

.scrollbar_dark::-webkit-scrollbar-thumb{
    height: 5%;
    background-color: #3b454b;
    border-radius: 10px;    
}
.scrollbar_dark::-webkit-scrollbar-track{
    background-color: rgba(0,0,0,0);
}
.left_etc.scrollbar_light::-webkit-scrollbar{
    /* background-color: #f4f4f4; */
}

/* 체크박스 */
.check_box input[type="checkbox"] + label {
	display: inline-block;
	min-width: 25px;
	height: 25px;
	cursor: pointer;
    background-image: url(/img/common/check.png);
    background-size: 25px;
    background-position: 0 0;
    background-repeat: no-repeat;
    vertical-align: middle;
}
.check_box input[type="checkbox"]:checked + label {
    background-position: 0 -25px !important;
}
.check_box.check_box_red input[type="checkbox"]:checked + label {
    background-position: 0 -25px !important;
}
.check_box input[type="checkbox"] {
	display: none;
}
.check_box input[type="checkbox"] + label .text{
    padding-left: 36px;
}
.dark_right .check_box input[type="checkbox"] + label{
    background-position: 0 -60px;
}
.dark_right .check_box input[type="checkbox"] + label .text{
    font-size: 1.25rem;
    color: var(--dark-text);
}
/* 라디오버튼 */
.radio_box input[type="radio"] + label {
	display: inline-block;
	height: 25px;
	cursor: pointer;
    background-image: url(/img/common/radio.png);
    background-size: 25px;
    background-position: 0 0px;
    background-repeat: no-repeat;
    vertical-align: middle;
        padding-left: 30px;
}
.radio_box input[type="radio"] + label h3{
    font-size: 18px;
}
.dark_right .radio_box input[type="radio"] + label {
    background-position: 0 0;
}
.radio_box input[type="radio"]:checked + label {
    background-position: 0 -25px;
}
.radio_box input[type="radio"] {
	display: none;
}
.dark_right .radio_box span{
    padding-left: 46px;
    font-size: 1.5rem;
    display: inline-block;
    line-height: 36px;
}
.dark_right .radio_box span{
    color: #797f86;
}
.dark_right .radio_box input[type="radio"]:checked + label span{
    color: #fff;
}
.radio_box{
    display: inline-block;
}

/* 탭버튼 */
.nav-tab{
    font-size: 1.25rem;
    display: flex;
    padding: 0 20px;
    border-bottom: 1px solid var(--tab-on);
    margin-bottom: 20px;
    margin-top: 30px;
}
.nav-tab li a{
    padding: 10px 30px;    
    margin-left: -1px;
    display: block;
    border: 1px solid transparent;
    margin-bottom: -1px;
    color: var(--text_62);
    border-radius: 5px 5px 0 0;
    font-weight: 500;
}
.nav-tab li a:hover{
    color: var(--tab-on);
}
.nav-tab .active a{
    border-color: var(--tab-on);
    border-bottom-color: #ebebeb;
    position: relative;
    color: var(--tab-on);
}
/* 테이블 스타일 */
.table_border{
    border: 1px solid var(--bs-state);
    border-radius: 10px;
}
.table{
    width: 100%;
    border-spacing: 0;
    border-radius: 10px;
    border: none;
    margin-bottom: 0;
    border-collapse: collapse;
}
.table thead th{
    font-size: calc(1rem + 2px);
    line-height: 70px;
    font-weight: 500;
}
.table tbody td{
    background-color: #fff;
    font-size: calc(1rem + 1px);
    text-align: center;
    font-weight: 400;
    color: var(--text_40);
    padding: 10px 0;
    height: 60px;
}
.table thead th:first-child{
    border-top-left-radius: 10px;
}
.table thead th:last-child{
    border-top-right-radius: 10px;
}
.table tbody tr:last-child td{
    border-bottom: none;
}
.table tbody tr:last-child td:first-child{
    border-bottom-left-radius: 10px;
}
.table tbody tr:last-child td:last-child{
    border-bottom-right-radius: 10px;
}
.table .swithc_box{
    width: 60px;
    height: 30px;
    margin: 0 auto;
    position: relative;
}
.table .btn_outline{
    font-size: 1.25rem;
    line-height: 50px;
}
.text-right{
    text-align: right !important;
}
.text-left{
    text-align: left !important;
}
.text-center{
    text-align: center !important;
}
.width_50{
    width: 50%;
    display: inline-block;
    font-size: 0;
}
.content_top .tit{
    display: inline-block;
    font-size: 1.5rem;
    line-height: 60px;
    font-weight: 500;
}
.content_top .btn_box .btn+.btn{
    margin-left: 13px;
}
.table tbody .td_check{
    width: 100px;
}
.table tbody .td_num{
    width: 100px;
}
/* 테이블 스타일 */
.table_style_01 thead th{
    color: var(--text_40);
}
.table_style_01 tbody td{
    height: 60px;
}
/* 페이지 표시 */
.pg_box{
    position: relative;
    height: 40px;
}
.pg_box .btn_right{
    position: absolute;
    right: 0;
    top: -10px;
}
.pg_wrap{
    margin-top: 30px;
    text-align: center;
    padding-top: 2px;
}
.pg_wrap .pg_page, .pg_wrap .pg{
    width: 36px;
    height: 36px;
    display: inline-block;
    font-size: calc(1rem + 2px);
    border-radius: 5px;
    text-align: center;
    line-height: 34px;
    margin-left: 1px;
    margin-right: 1px;
    border: 1px solid transparent;
}
.pg_wrap .pg_page:hover{
    /* color: var(--tab-on); */
    border: 1px solid var(--bs-state);
}
.pg_wrap .pg{
    color: #fff;
    background-color: var(--tab-on);
    border: 1px solid var(--tab-on);
}
.pg_wrap .pg_current{
    font-weight: normal;
} 
.sound_only {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}
.pg_next, .pg_start, .pg_end, .pg_prev{
    text-indent: -9999em;
    background-image: url(../img/arrow_icon.png);
    background-size: 40px;
    background-position-x: -4px;
}
.pg_prev{
    background-position-y: 2px;
}
.pg_next{
    background-position-y: -38px;
} 
.pg_start{
    background-position-y: -158px;
}
.pg_end{
    background-position-y: -198px;
}
/*상단 날씨정보*/
.top{
        height: 60px;
    padding: 0px 0px 0px 160px;
    border-bottom: 1px solid #d5d5d5;
    position: fixed;
    background-color: #fff;
    width: 100%;
    z-index: 10;
    top: 0;
}
.top .top-state{
    padding: 15px 0px;
    display: inline-block;
}
.top .top-state li{
    display: inline-block;
    float: left;
    margin-right: 40px;
        font-size: 1.8rem;
    color: #333;
    height: 30px;

} 
.top .top-state [class^="icon-"]{
    display: inline-block;
    float: left;
    margin: 0px auto;
}
.top .top-state [class^="icon-"] span{
    background-image: url(../img/common/topbar_icon.png);
     background-size: 360px auto;
    display: block;
    margin-right: 10px;
}
.top .top-state .state-weather [class^="icon-"] span{
    background-image: url(../img/common/topbar_w_icon.png);
     background-size: 360px auto;
      width: 100%;
    height: 100%;
    display: block;
}
.top .top-state ul{
    margin-bottom: 0;
    display: inline-block;
}
.topswiper-bx{
    display: inline-block;
    overflow: hidden;
    max-width: 420px;
}
.topswiper-bx .swiper-slide{
    white-space: nowrap;
    width: auto;
}
.topswiper-bx .swiper-slide span{
    font-size: 1.8rem;
}
.top .top-state li>span{
        display: inline-block;
    float: left;
    padding: 3px 0px;
}
.top .top-state .icon-location span{
    background-position: -10px 0px;
    width: 18px;
    height: 30px;
}
.top .top-state .icon-temperature span{
    background-position: -90px 0px;
    width: 24px;
    height:30px;
}
.top .top-state .icon-humidity span{
    background-position: -133px 0px;
    width: 18px;
    height:30px;
}
.top .top-state .icon-dust span{
    background-position: -173px 0px;
    width: 24px;
    height:30px;
}
.top .top-state .icon-so2 span{
    background-position: -218px 0px;
    width: 37px;
    height:30px;
}
.top .top-state .icon-o3 span{
    background-position: -274px 0px;
    width: 23px;
    height:30px;
}
.top .top-state .icon-no2 span{
    background-position: -316px 0px;
    width: 38px;
    height:30px;
}
.top .top-state .state-weather [class^="icon-"] span{
    width: 30px;
    height:30px;
}
.top .top-state .state-weather .icon-weather-01 span{
    background-position: 0px 0px;
}

.top .top-state .state-weather .icon-weather-02 span{
    background-position: -30px 0px;
}
.top .top-state .state-weather .icon-weather-03 span{
    background-position: -60px 0px;
}
.top .top-state .state-weather .icon-weather-04 span{
    background-position: -90px 0px;
}
.top .top-state .state-weather .icon-weather-05 span{
    background-position: -120px 0px;
}
.top .top-state .state-weather .icon-weather-06 span{
    background-position: -150px 0px;
}
.top .top-state .state-weather .icon-weather-07 span{
    background-position: -180px 0px;
}
.top .top-state .state-weather .icon-weather-08 span{
    background-position: -210px 0px;
}
.top .top-state .state-weather .icon-weather-09 span{
    background-position: -240px 0px;
}
.top .top-state .state-weather .icon-weather-10 span{
    background-position: -270px 0px;
}
.top .top-state .state-weather .icon-weather-11 span{
    background-position: -300px 0px;
}
.top .top-state .state-weather .icon-weather-12 span{
    background-position: -330px 0px;
}
.top-user{
    float: right;
    display: inline-block;
    height: 100%;
    border-left: 1px solid #d5d5d5;
    min-width: 254px; 
}
.top-user{
    text-align: center;
}
.top-user a {
        color: #333;
        text-decoration: none;
     font-size: 1.8rem;
    padding: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-user a .profile_img{
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
margin-left: 20px;
}
/*main_tab*/
.main_tab{
    position: fixed;
    top: 60px;
    width: 100%;
    background: #fff;
    padding-left: 170px;
    border-bottom: 1px solid #cfd0d0;
    z-index: 10;
}
.main_tab .nav-tabs li a{
    font-size: 20px;
    min-width: 120px;
    text-align: center;
}
.main_front main.content{
    padding: 150px 30px 30px 170px;
}
/* 왼쪽 메뉴*/
.firmware .menu{
    margin-right: 0;
    position: fixed;
}
.menu{
    width: 120px;
    transition: width 0.3s ease-in;
    position: fixed;
    margin-right: 20px;
    min-height: 100vh;
    z-index: 999;
    left: 20px;
    top: 20px;
    height: calc(100vh - 80px);
}
.menu.active{
    width: 420px;
}
.menu.active + .content{
    position: absolute;
    left: 320px;
    top: 0;
}
.menu_list{
    width: 120px;
    height: calc(100% - 40px);
    border-right: 1px solid var(--text_78);
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 35%);
    position: relative;
    z-index: 100;
    background-color: #2995f0;
    border-radius: 30px;
    padding: 20px;
}
.menu_list li{
    position: relative;
    border-radius: 20px;
}
.menu_list li a{
    color: var(--bs-left-menu-text);
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
    
    border-radius: 20px;
    display: block;
    padding-top: 11px;
    padding-bottom: 12px;
    transition: color 0.2s ease-in, background-color 0.2s ease-in;
    text-decoration: none;
     font-family: 'S-CoreDream-5Medium';
     margin-bottom: 20px;

}
.menu_list li>a:hover ul{
display: block;
}
.menu_list li>a:hover:after{
    display: inline-block;
    width: 20px;
    height: 80px;
    content: '';
    position: absolute;
    right: -20px;
    top:0;
}
.menu_list li a.sub_menu{
   margin-bottom: 0;
   font-size: calc(1rem + 5px);
   border-radius: 0;
}
.menu_list li.on>a, .menu_list li>a:hover{
    color: var(--bs-left-menu-on-text);
    background-color: var(--bs-left-menu-on-bg);
}
.menu_list > ul > li.on>a{
 box-shadow: 0px 5px 14.3px 0.8px rgba(72, 72, 72, 0.35);
}
.menu_list [class^="icon-"], .menu_list [class^="icon2-"]{
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: block;
    margin: 0 auto;
}
.menu_list .on [class^="icon-"],.menu_list a:hover [class^="icon-"], .menu_list .on [class^="icon2-"],.menu_list a:hover [class^="icon2-"] {
     
}
.menu_list [class^="icon-"] span{
    background-image: url(../img/common/menu_icon.png);
    background-size: 420px auto;
    width: 100%;
    height: 100%;
    display: block;
}
.menu_list [class^="icon2-"] span{
    background-image: url(../img/meun2_icon.png);
    background-size: 108px auto;
    width: 100%;
    height: 100%;
    display: block;
}
.menu_list .icon-dash span, .menu_list .icon2-firmware span{
    background-position: 0px -36px;
}
.menu_list .icon-account span{
    background-position: -40px -36px;
}
.menu_list .icon-control span{
    background-position: -84px -36px;
}
.menu_list .icon-group span{
    background-position: -120px -36px;
}
.menu_list .icon-device span{
    background-position: -155px -36px;
}
.menu_list .icon-setting span{
    background-position: -196px -36px;
}
.menu_list .icon-customer span{
    background-position: -236px -36px;
}
.menu_list .icon-report span{
    background-position: -276px -36px;
}
.menu_list .icon-energy span{
    background-position: -311px -36px;
}
.menu_list .icon-history span{
    background-position: -346px -36px;
}
.menu_list .icon-aircondition span{
    background-position: -384px -36px;
}
.menu_list .on .icon-dash span, .menu_list a:hover .icon-dash span, .menu_list .on .icon2-firmware span, .menu_list a:hover .icon2-firmware span{
    background-position: 0px 0px;
}
.menu_list .on .icon-account span,  .menu_list a:hover .icon-account span{
    background-position: -40px 0;
}
.menu_list .on .icon-control span,  .menu_list a:hover .icon-control span{
    background-position: -84px 0;
}
.menu_list .on .icon-group span, .menu_list a:hover .icon-group span{
    background-position: -120px 0;
}
.menu_list .on .icon-device span, .menu_list a:hover .icon-device span{
    background-position: -155px 0;
}
.menu_list .on .icon-setting span, .menu_list a:hover .icon-setting span{
    background-position: -196px 0;
}
.menu_list .on .icon-customer span, .menu_list a:hover .icon-customer span{
    background-position: -236px 0;
}
.menu_list .on .icon-report span, .menu_list a:hover .icon-report span{
    background-position: -276px 0;
}
.menu_list .on .icon-energy span, .menu_list a:hover .icon-energy span{
    background-position: -311px 0;
}
.menu_list .on .icon-history span, .menu_list a:hover .icon-history span{
    background-position: -346px 0;
}
.menu_list .on .icon-aircondition span, .menu_list a:hover .icon-aircondition span{
    background-position: -384px 0;
}
.menu_list li a>span{
    display: block;
    line-height: 1;
    padding-top: 5px;
}
.menu_list li ul{
    display: none;
    position: absolute;
    top: 0;
    left: 99px;
    width: 120px;
    background-color: #fff;
    border-right: 1px solid var(--bs-state);
    border-left: 1px solid var(--bs-state);
    border-top: 1px solid var(--bs-state);
    box-shadow: 2px 1px 5px 0px rgba(0, 0, 0, 0.35);
}
.menu_list li:hover ul{
    display: block;
}
.menu_list li ul a{
    font-size: calc(1rem + 2px);
}
/*main_dashboard*/
/*manin_energy 메인 에너지*/
.refresh_btn span{
    display: none;
}
a.refresh_btn{
    background-image: url('../img/refresh_icon.png');
    width: 20px;
    height: 20px;
    background-size: 20px;
    background-position: 0px 0px;
}
a.refresh_btn:hover{
    background-position: 0px -20px;
}
.energy_icon_bx{
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    background-image: url('../img/energy_icon.png');
    background-repeat: no-repeat;
    background-size: 100px;
    margin: 20px auto;
}
.energy_total span{
    font-size: 16px;
    color: #b0b0b0;

}
.energy_total h2{
    margin-top: 10px;
    color: #333333;
    font-size: 36px;
    
}
.energy_progress-bx ul li{
    margin:11px 0px;
}
.energy_progress-text{
    margin-bottom: 10px;
}
.energy_progress-text{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.energy_progress-text h3{
    font-size: 16px;
    color: #b0b0b0;
    margin: 0;
}
.energy_progress-text span{
    font-size: 16px;
    color: #333;
}
.energy_progress-bx ul li .progress {
    background-color: #d9d9d9;
    border-radius: 10px;
}
.energy_progress-bx ul li .progress > .progress-bar{
    background-color: #2995f0;
    background-image: none;
    border-radius: 10px;
}
.energy_progress-bx ul li .progress > .progress-bar-prediction{
    background-color: #4fab90;
}
.energy_progress-bx ul li .progress > .progress-bar-goal{
    background-color: #8d959c;
}
.main_energy_navi h2{
color:#2995f0;
margin-bottom: 20px;
font-size: 35px;
}
.main_energy_navi p{
color:#333;
font-size: 16px;
margin-bottom: 30px;
}
.main_energy_navi .btn-toolbar{
    margin-bottom: 20px;
}
/*메인 공기질*/
.air-chart-bx{
    display: block;
    position: relative;
    width: 100%;
    padding: 20px;
    max-width: 520px;
    min-height: 240px;
}
.air-chart-01, .air-chart-02 {
    position: absolute;
    margin-top: -26%;
}
.air-chart-01{
    width: calc(100% - 40px)
}
.air-chart-txt{
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 30%;
}
.air-chart-txt h3{
        top: 50%;
    display: block;
    font-size: 40px;
    font-weight: 600;
}
.air-chart-txt h3.good{
    color: #1b8cec;
}
.air-chart-txt h3.normal{
    color: #07b56e;
}
.air-chart-txt h3.bad{
    color: #f5c654;
}
.air-chart-txt h3.sobad{
    color: #e45f5f;
}
.air-chart-detail-bx{
    position: relative;
    width: 100%;
    max-width: 260px;
    min-height: 240px;
}
.air-chart-detail-bx .air-chart-01, .air-chart-detail-bx .air-chart-02 {
    position: absolute;
    margin-top: -5%;
}
h5.air-chart-detail-tit{
    font-size: 20px;
    margin-bottom: 0;
    margin-top: 0;
    color: #333;
        font-weight: 600;
    text-align: center;
}
.air-chart-detail-txt{
    width: 100%;
    position: relative;
    padding-top: 25%;
    text-align: center;
}
.good{
    color: #1b8cec;
}
.normal{
    color: #07b56e;
}
.bad{
    color: #f5c654;
}
.sobad{
    color: #e45f5f;
}
.air-chart-detail-txt h5{
font-size: 16px;
margin-bottom: 10px;
}
.air-chart-detail-txt h1{
font-size: 40px;
color: #333;
margin-top: 0;
margin-bottom: 0;
font-weight: 600;
}
.air-chart-detail-txt span.unit{
font-size: 14px;
margin-top: 20px;
color: #ababab;
}
.air-chart-detail.card .card-body{
    padding-bottom: 0;
}
.air-chart-device{
        position: relative;
    /* top: -30px; */
    margin-top: -35px;
}
.air-chart-device ul li{
    border-radius: 5px;
    border:1px solid #bcbcbc;
    padding: 5px;
    width: calc(50% - 6px);
    display: inline-block;
}
.air-chart-device ul li:nth-child(odd){
margin: 4px 5px 4px 0;
}
.air-chart-device ul li:nth-child(even){
margin: 4px 0 4px 5px;
}
.air-chart-device ul li .air-device-card{
    display: flex;
    justify-content: space-between;
}

.air-chart-device ul li .air-device-card span, .air-chart-device ul li .air-device-card a {
    color: #6b6b6b;
}
.air-chart-device ul li .air-device-card span{
    white-space: nowrap;
}
.btn-info-ic span{
    display: none;
}
.btn-info-ic{
    width: 21px;
    height: 21px;
    background-image: url('../img/info_icon.png');
    background-repeat: no-repeat;
    background-size: 21px;
    background-position: 0px 0px;
    z-index: 9;
    margin: 0px 10px;
}
.btn-info-ic:hover{ 
    background-position: 0px -21px;
}
.pls-chart-txt{
    margin-top: 25%;
}
.pls-chart-txt h3:before{
display: block;
position: relative;
font-size: 18px;
font-weight: 400;
margin-bottom: 10px;
}
.pls-chart-txt h3.good:before{
    content: '1단계'
}
.pls-chart-txt h3.normal:before{
    content: '2단계'
}
.pls-chart-txt h3.bad:before{
    content: '3단계'
}
.pls-chart-txt h3.sobad:before{
    content: '4단계'
}
.temp-icon, .moist-icon{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 45px auto 20px;
}
.temp-icon{
    background-repeat: no-repeat;
    background-image: url('../img/temper_icon.png');
    background-size: contain;
}
.moist-icon{
    background-repeat: no-repeat;
    background-image: url('../img/moist_icon.png');
    background-size: contain;
}
.moist-txt, .temp-txt{
    position: relative;
    margin: 0px auto;
    text-align: center;
  margin-bottom: 27.14px;
}
.moist-txt span, .temp-txt span{
    color: #ababab;
    font-size: 24px;
        font-family: 'S-CoreDream-3Light';
}
.air-outside-bx{
    display: flex;
    margin-top: 40px;
    align-items: center;
    justify-content: flex-start;
}
.air-outside-bx .air-outside-icon{
position: relative;
    width: 50%;
    display: inline-block;
}
.air-outside-bx .air-outside-icon .moist-icon, .air-outside-bx .air-outside-icon .temp-icon{
margin: 0px auto;
    position: relative;
    width: 80px;
    height: 80px;
}
.air-outside-bx .air-outside-txt{
        display: flex;
    align-items: center;
    margin-left: 20px;
}
.air-outside-bx .air-outside-txt h1{
display: inline-block;
    margin: 0;
}
.air-outside-bx.air-card-state{
    margin-top: 20px
}
.air-outside-bx.air-card-state .air-outside-txt{
    display: inline-block;
}
.air-outside-bx.air-card-state .air-outside-txt h1, .air-outside-bx.air-card-state .air-outside-txt span{
    display: block;
}
.air-outside-bx .air-outside-txt h1{
    font-weight: 600;
}
.air-outside-bx .air-outside-txt span {
font-size: 24px;
color: #ababab;
font-weight: 100;
    font-family: 'S-CoreDream-3Light';
}
.modal .air-card-state {
    display: flex;
    justify-content: flex-start;
    margin-top: 0;
}
.state-blue .air-outside-bx.air-card-state .state-icon:after{
content: '좋음';
    font-size: 20px;
    color: #2995f0;
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
}
.state-green .air-outside-bx.air-card-state .state-icon:after{
content: '보통';
    font-size: 20px;
    color: #24b878;
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
}
.state-yellow .air-outside-bx.air-card-state .state-icon:after{
content: '나쁨';
    font-size: 20px;
    color: #ff9c01;
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
}
.state-red .air-outside-bx.air-card-state .state-icon:after{
content: '매우나쁨';
    font-size: 20px;
    color: #e66868;
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
}
/* 관리자 정보 */
.left_etc_box{
    position: absolute;
    left: -220px;
    top: 0;
}
.menu.active .left_etc_box{
    left: 100px;
}
.left_etc_box .close{
    position: absolute;
    top: 10px;
    right: -21px;
    width: 21px;
    height: 50px;
    background-color: #fff;
    border: 1px solid var(--bs-state);
    border-left: none;
    border-radius: 0 5px 5px 0;
    box-shadow: 2px 1px 5px 0px rgb(0 0 0 / 35%);
    overflow: hidden;
}
.left_etc_box .close button{
    content: '';
    position: absolute;
    display: block;
    width: 20px;
    height: 40px;
    text-indent: -9999em;
    background-image: url(../img/arrow_icon.png);
    background-size: 40px auto;
    background-position-x: center;
    background-color: transparent;
    background-position-y: -40px;
    top: 5px;
    left: 0;
    transition: 0.2s all ease-in;
}
.menu.active .close button{
    transform: rotate(180deg);
}
.left_etc{
    width: 320px;
    height: 100vh;
    min-height: 800px;
    background-color: #fff;
    border-right: 1px solid var(--text_78);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0);
    transition: box-shadow 0.3s ease-in;
}
.menu.active .left_etc{ 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.left_etc .member, .left_etc .weather{
    margin-left: 30px;
    margin-right: 30px;
}
.left_etc .member_name_box{
    padding-top: 30px;
}
.left_etc  .member_name{
    display: flex;
    flex-wrap: wrap;
}
.left_etc .member_name i{
    width: 60px;
    height: 60px;
    vertical-align: middle;
    background: var(--bs-state) url(../img/men_icon.png) center/46px no-repeat;
    border-radius: 50%;
}
.left_etc .member_name span{
    font-size: 1.25rem;
    font-weight: 500;
    padding-left: 10px;
    width: calc(100% - 60px);
    display: flex;
    align-items:center;
}
.left_etc .member_name_box .btn_box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
}
.left_etc .member_name_box .btn_box .btn{
    border: 1px solid var(--bs-state);
    color: var(--text_40);
    border-radius: 5px;
    background-color: #fff;
    padding: 0;
    width: calc(50% - 5px);
    text-align: center;
    line-height: 32px;
    display: block;
    transition: 0.2s all ease-in;
}
.left_etc .member_name_box .btn_box .btn:hover{
    background-color: var(--bs-left-menu-on-text);
    border-color: var(--bs-left-menu-on-text);;
    color: #fff;
}
.left_etc .member .img_box{
    margin-top: 35px;
}
.left_etc .member .img_box .img{
    width: 100%;
    min-height: 200px;
    background-color: #ddd;
    background-image: url(../img/noimage.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--bs-state);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.left_etc .member .img_box .img img{
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.left_etc .member .img_box span{
    text-align: center;
    display: block;
    font-size: 1.25rem;
    font-weight: 500;
    padding: 15px 0;
}
/* 날씨관련 */
.left_etc .weather{
    border-top: 1px solid var(--bs-state);
    padding-top: 13px;
    padding-bottom: 35px;
}
.weather .weather_tit>*{
    display: inline-block;
}
.weather .weather_tit h3{
    font-size: calc(1rem + 2px);
    font-weight: 500;
    color: var(--text_34);
    line-height: 32px;
    padding-right: 5px;
}
.weather .btn_reflash{
    width: 32px;
    height: 32px;
    border: 1px solid var(--bs-state);
    background-color: #fff;
    vertical-align: top;
    border-radius: 50%;
    background: url(../img/weather_icon.png);
    background-size: 30px auto;
    transition: 0.1s;
}
.weather .btn_reflash:hover{
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
}
.weather .btn_reflash span{
    text-indent: -9999em;
    display: block;
}
.weather_content{
    text-align: center;
}
.weather_area{
    margin-top: 25px;
    font-size: calc(1rem + 2px);
    color: var(--text_34);
    margin-bottom: 5px;
}
.weather_info strong{
    font-size: 48px;
    color: var(--text_13);
    font-weight: 500;
    line-height: 1.1;
    display: inline-block;
}
.weather_info div{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
}
.weather_info div span{
    background-image: url(../img/weather_icon.png);
    background-size: 30px auto;
    background-repeat: no-repeat;
    background-position: 0 -30px;
    height: 30px;
    line-height: 30px;
    width: 50%;
    text-align: left;
    padding-left: 40px;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text_13);
}
.weather_info div span+span{
    background-position: 0 -60px;
}
/* 발생이슈 */
.issue .issue_tit{
    background-color: #f4f4f4;
    border-top: 1px solid var(--bs-state);
    border-bottom: 1px solid var(--bs-state);
    height: 40px;
    line-height: 40px;
    padding-left: 30px;
    font-size: calc(1rem + 2px);
    font-weight: 500;
}
.issue_tab ul{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--bs-state);
}
.issue_tab li{
    text-align: center;
    width: 100%;
    border-left: 1px solid var(--bs-state);
}
.issue_tab li:first-child{
    border-left: none;
}
.issue_tab button{
    background-color: #fff;
    height: 40px;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    font-weight: 500;
    width: 100%;
}
.issue_tab button:hover{
    color: var(--tab-on);
}
.issue_tab .on button{
    border-bottom-color: var(--tab-on);
    color: var(--tab-on);
}
.issue_list{
    padding: 7.5px 20px;
}
.issue_list li{
    padding: 7.5px 0;
}
.issue_list li>*{
    display: block;
    line-height: 1.2;
}
.issue_list li a{
    /* white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; */
}
.issue_list .alarm_on{
    display: inline-block;
    position: relative;
    padding-right: 10px;
}
.issue_list li .alarm_on::after{
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--tab-on);
    border-radius: 50%;
    display: block;
    position: absolute;
    right: 0;
    top: 2px;
}
.issue_list .date{
    font-size: .75rem;
    font-weight: 300;
    color: var(--text_62);
    text-align: right;
}
/* 내용부분 */
.content{
    min-width: 1200px;
    width: 100%;
    padding: 80px 20px 40px 120px;
    /* margin: 0 auto; */
}
.driving_header{
    border: 1px solid var(--bs-state);
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
}
.driving_header .tit{
    font-size: 1.6rem;
    color: var(--text-09);
    font-weight: 500;    
    padding-right: 40px;
    margin: 0;
    line-height: 40px;
}
.driving_header .state>h5{
    line-height: 38px;
    border-radius: 5px;
    border:1px solid #e1e1e1;
    width: 120px;
    text-align: center;
    margin: 0 5px;
    display: inline-block;
    font-size: 16px;
}
.driving_header .state>h5 span{
   font-size: 20px;
}
.driving_header .driving{
    color: var(--btn-blue);
}
.driving_header .stop{
    color: #a3a5a5;
}
.driving_header .error{
    color: var(--btn-red);
}
.driving_info .select_box{
    border-bottom: 1px solid var(--bs-state);
    padding: 20px 0;
}
.select_box select+select{
    margin-left: 17px;
}
.driving_model{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px; 
}
.model_box{
    width: 20%;
    margin-top: 35px;
    padding: 0 10px;
}
.model_box .model_tit{
    font-size: 1.25rem;
    text-align: center;
    font-weight: 500;
    position: relative;
}
.model_box .model_tit span{
    position: absolute;
    width: 0;
    height: 0;
    font-size: 0;
    top: -1px;
    left: -1px;
}
.model_display{
    margin-top: 15px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid var(--bs-state);
    overflow: hidden;
    cursor: pointer;
}
.model_display .status_bar{
    display: flex;
    justify-content: space-evenly;
    background-color: var(--bs-state);
    height: 60px;
}
.model_box.on .model_display .status_bar{
    background-image: var(--bs-state-on);
}
.model_display .status_bar [class^="icon_"] span{
    text-indent: -9999em;
    display: block;
}
.model_display .status_bar [class^="icon_"]{
    background-image: url(../img/state_icon.png);
    background-size: 40px auto;
    width: 40px;
    height: 40px;
    margin-top: 10px;
    opacity: 0.3;
}
.status_bar .icon_calendar{background-position-y: 0;}
.status_bar .icon_issue{background-position-y: -40px; filter: grayscale(100%);}
.status_bar .icon_link{background-position-y: -80px;}
.status_bar .icon_wifi{background-position-y: -120px;}
.model_display .status_bar [class^="icon_"].on{
    opacity: 1;
    filter: grayscale(0);
}

.status_bar+div{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 10px 25px;
}
.model_box .step{
    width: 38%;
}
.model_box .step .icon{
    background-image: url(../img/model_icon.png);
    background-size: 140px auto;
    background-repeat: no-repeat;
    width: 70px;
    height: 80px;
    display: block;
    margin: 0 auto;
    margin-top: 5px;
}
.model_box.wall_airc .step .icon{
    background-position: 0 0;
}
.model_box.stand_airc .step .icon{
    background-position: 0 -80px;
}
.model_box.air_cleaner .step .icon{
    background-position: 0 -160px;
}
.model_box.on .step .icon{
    background-position-x: -70px;
}
.model_box .step span{
    text-align: center;
    font-size: 1.5rem;
    display: block;
    font-weight: 500;
    height: 33px;
    margin-top: 10px;
}
.air_cleaning{
    padding-left: 10px;
}
.air_cleaning>strong{
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    height: 50px;
    position: relative;
    margin-bottom: 10px;
}
.air_cleaning>strong::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 106px;
    height: 1px;
    background-color: var(--bs-state);
}
.air_cleaning>div{
    padding: 2.5px;
    color:  var(--text_78);
}
.on .air_cleaning>div{
    color: #333333;
}
.air_cleaning>div strong{
    font-weight: 500;
    display: inline-block;
    width: 60px;
}
.air_cleaning>div span{
    font-weight: 500;
    font-size: 1.25rem;
}
.air_cleaning .good{
    color: var(--bs-blue-state-text);
}
.air_cleaning .normal{
    color: var(--bs-green-state-text);
}
.air_cleaning .bad{
    color: var(--bs-yellow-state-text);
}
.air_cleaning .very_bad{
    color: var(--bs-red-state-text);
}

/* 오른쪽 설정 */
.dark_right{
    background-color: #2a3135;
    position: fixed;
    width: 320px;
    height: 100vh;
    z-index: 999;
    top: 0;
    right: 0;
    border-right: 1px solid var(--dark-base);    
}
.dark_right .header{
    border-bottom: 1px solid var(--dark-base);
    position: relative;
}
.dark_right .header .tit{
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    padding: 28px 40px;
}
.dark_right .header .close{
   background-image: url(../img/right_icon.png);
    background-size: 100px auto;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 6px;
    right: 5px;
    background-color: transparent;
    background-position: 0 -150px;ㄴ
}
.dark_right .header .close span{
    display: block;
    position: absolute;
    top: -1px;
    height: -1px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    font-size: 0;
}
.dark_wrap{
    padding: 0px;
}
.dark_wrap .dark_tab{
    margin-bottom: 20px;
    border-bottom: 1px solid #fff ;
    font-size: 0;
}
.dark_wrap .dark_tab button{
    display: inline-block;
    width: 50%;
    text-align: center;
    font-size: 2rem;
    background-color: transparent;
    padding: 13px 0;
    color: var(--dark-base);
    margin-bottom: -1px;
}
.dark_wrap .dark_tab .on{
   border: 1px solid #ffffff;
    color: #fff;
    background-color: #202528;
}
.dark_content{
        max-height: calc(100vh - 150px);
            overflow: auto;
padding-bottom: 100px;
}
.dark_content::-webkit-scrollbar {
    width: 8px;  /* 스크롤바의 너비 */
    position: absolute;
    right: 5px;
}

.dark_content::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #39444b; /* 스크롤바의 색상 */
    
    border-radius: 4px;
}

.dark_content::-webkit-scrollbar-track {
    background: #181b1d;  /*스크롤바 뒷 배경 색상*/
}
.dark_bar_top{
    border-top: 1px solid var(--dark-base);
}
.dark_content .tit{ 
    font-size: 2rem;
    color: var(--dark-text);
    padding-top: 33px;
    margin-bottom: 14px;    
}
.dark_content .btn_box{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.dark_content .btn{
    background-color: transparent;
    color: var(--dark-base);
    border: 1px solid var(--dark-base);
    line-height: 48px;
    font-size: 2.3rem;
    height: 60px;
    border-radius: 10px;
    width: calc(50% - 10px);
    font-weight: normal;
    transition: 0.2s all ease-in;
}
.dark_content .btn:hover{
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.dark_content .btn.on{
    color: var(--text_13);
    background-color: #fff;
    border-color: #fff;
}
.dark_content .btn_blue{
    background-color: #3e97ff;
    color: #fff;
    border-radius: 0;

}
.switch .icon{
    background: var(--bs-state);
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    border: 2px solid var(--bs-state);
}
.switch .icon span{
    display: block;
    text-indent: -9999em;
    width: 100px;
    height: 100px;
    background-image: url(../img/right_icon.png);
    background-size: 100px auto;
}
.switch.on .icon{
    background: var(--bs-State-gradient-top);
    border-color: #fff;
}
.switch .tit{
    padding-top: 13px;
}
.wind_strength{
    margin-top: -15px;
}
.strength_value{
    font-size: 60px;
    text-align: center;
    font-weight: 600;
    color: #fff;
}
.wind_strength input[type="range"]{
    -webkit-appearance: none;
    height: 10px;
    width: 100%;
    background: linear-gradient(to right, var(--btn-blue) 0%, var(--btn-blue) 50%, #2a3135 50%, #2a3135 100%);
    border-radius: 10px;
    border: 1px solid var(--dark-base);
    outline: none;    
}
.wind_strength input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    border: none;
    height: 36px;
    width: 36px;
    border: 1px solid white;
    background: var(--btn-blue);
    border-radius: 50%;
}
.wind_strength .bg{
    display: flex;
    justify-content: space-evenly;
    height: 10px;
    margin-top: 5px;
    margin-bottom: 20px;    
}
.wind_strength .bg span{
    position: relative;
}
.wind_strength .bg span:after{
    content: '';
    display: block;
    width: 1px;
    height: 10px;
    background-color: var(--dark-base);
    position: absolute;
    top: 0;
    left:calc(50% - 0.5px) ;
    z-index: -1;
}
.time_onoff{
    border-radius: 10px;
    border: 1px solid var(--dark-base);
    overflow: hidden;
}
.timer_check .checkbox_box, .swithc_box .checkbox_box{
    width: 60px;
    height: 30px;
    position: relative;
}
.timer_check .checkbox_box input[type="checkbox"], .swithc_box input[type="checkbox"], .check_btn input[type="checkbox"]{
    position: absolute;
    visibility: hidden;
}  
.timer_check .checkbox_box label, .swithc_box label  {
    display: block;
    position: absolute;
    width: 60px;
    height: 30px;
    border-radius: 15px;
    background-color: #797f86;
    transition-duration: 0.2s;
    cursor: pointer;
}
.timer_check .checkbox_box label span, .swithc_box label span {
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #31393d;
    transition-duration: 0.2s;
} 
.swithc_box label span{
    background-color: #cfcfcf;
}
.timer_check .checkbox_box label:before,
.timer_check .checkbox_box label:after,
.swithc_box label:before,
.swithc_box label:after{
    position: absolute;
    top: 0;
    width: 34px;
    font-size: 11px;
    line-height: 34px;
    color: #fff;
    text-align: center;
} 
.timer_check .checkbox_box input:checked + label, .swithc_box input:checked + label {
    background-color: #3e97ff;
}  
.timer_check .checkbox_box input:checked + label span, .swithc_box input:checked + label span {
    left: 6px;
    background-color: #fff;
    transform: translateX(26px);
}
.timer_check{
    display: flex;
    justify-content: space-between;    
    padding: 20px 15px;
}
.timer_check span{
    font-size: 2.3rem;
    color: var(--dark-base);
    line-height: 30px;
}
.time_onoff.on{
    border-color: #fff;
}
.time_onoff.on .timer_check{
    background-color: #fff;
}
.time_onoff.on .timer_check>span{
    color: var(--text-20);
    border-color: #fff;
}
.week ul{
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid var(--dark-base);
}
.time_centent .week li{
    width: calc(100% / 7);
}
.time_centent .week li+li{
    border-left: 1px solid var(--dark-base);
}
.time_centent .week button{
    background-color: transparent;
    color: var(--dark-base);
    text-align: center;
    width: 100%;
    display: block;
    line-height: 40px;
    transition: 0.1s all ease-in;
}
.time_centent .week button:hover{
    color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
}
.time_centent .on button{
    color: #fff;
    background-color: var(--tab-on);
}
.time_onoff.on .time{
    padding: 0 20px 40px;
}
.time_onoff.on .time_centent .tit{
    border-top: none;
    padding-top: 15px;
    margin-bottom: 15px;
}
.time_centent .tiem_box{
    font-size: 40px;
    font-weight: 600;
    color: #fff;
    display: flex;
    justify-content: center;
}
.time_centent .tiem_box>div{
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    width: 150px;
}
.time_centent .tiem_box>div>span{
        background-color: #181b1d;
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}
.time_centent .btn_t_box{
    position: absolute;
    right: 0;
    top: 0;
}
.time_centent .btn_t_box button{
    width: 40px;
    background-color: #1d2225;
    display: block;
    text-indent: -9999em;
    height: 40px;
}
.time_centent .btn_t_box button:hover{
    background-color: #181b1d;
}
.time_centent .btn_t_box button+button{
    border-top: 1px solid #2a3135;
}
.time_centent .btn_t_box button>span{
    background-image: url(../img/right_icon.png);
    background-size: 100px auto;
    height: 25px;
    width: 40px;
    display: block;
    background-position-x: -55px;
}
.time_centent .btn_t_box .btn_up span{    
    background-position-y: -100px;
}
.time_centent .btn_t_box .btn_down span{
    background-position-y: -125px;
}
.time_centent .btn_t_box .btn_down{
    
}
.time_centent .tiem_box>strong{
   width: 20px;
    font-size: 20px;
    text-align: center;
    line-height: 80px;
}
.time_centent .date_box{
    border-radius: 10px;
    height: 50px;
    background-color: #181b1d;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    margin-bottom: 10px;
}
.time_centent .date_box input{
    background-color: transparent;
    border: none;
    color: #fff;
    line-height: 50px;
    font-size: 20px;
    font-weight: 600;
    outline: none;
    width: 145px;
    padding-left: 10px;
}
.time_centent .date_box .icon{
        width: 48px;
    height: 52px;
    background-color: #1d2225;
    background-image: url(../img/right_icon.png);
    background-size: 80px auto;
    background-position: 5px -75px;
}
.time_centent .date_box span{
    line-height: 50px;
    color: #39444b;
    font-size: 1.5rem;
}
.btn_dark_blue{
    display: block;
    width: 100%;
    background-color: var(--tab-on);
    color: #fff;
    font-size: 1.5rem;
    line-height: 60px;
    height: 60px;
    border-radius: 10px;
    margin-top: 20px;
}
.padding_lr_10{
    padding-left: 10px;
    padding-right: 10px;
}
.padding_lr_20{
    padding-left: 20px;
    padding-right: 20px;
}
.padding_t_0{
    padding-top: 0 !important;
}
.time_content_box{
    margin-top: 40px;
}
.time_content_box .week{
    border-top: 1px solid var(--dark-base);
    border-left: 1px solid var(--dark-base);
    border-right: 1px solid var(--dark-base);
}
.time>.padding_lr_10{
    margin-bottom: 20px;
}
.dark_btn_fixed{
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    display: flex;
}
.dark_btn_fixed .btn, .dark_btn_fixed [class*="btn_"]{
    display: block;
    color: #fff;
    font-size: 2rem;
    line-height: 78px;
    transition: 0.1s all ease-in;
}
.dark_btn_fixed .btn, .dark_btn_fixed .btn_blue{
    background-color: #328eff;
}
.dark_btn_fixed .btn{
    width: 100%;    
}
.dark_btn_fixed .btn_red{
    background-color: var(--btn-red);
}
.dark_btn_fixed .btn_red:hover{
    background-color: var(--btn-red-hover);
}
.dark_btn_fixed .btn:hover, .dark_btn_fixed .btn_blue:hover{
    background-color:var(--btn-blue-hover);
}
.dark_btn_fixed [class*="btn_"]{
    width: 50%;
}

.dark_input input[type="text"]{
    background-color: transparent;
    display: block;
    width: 100%;
    font-size: 30px;
    border: none ;
    border-bottom: 1px solid #8c9bac;
    line-height: 60px;
    outline: none;
    color: #fff;
}
.dark_input input[type="text"]::placeholder{
    color: #4a555c;
}
.dark_content .textarea_box textarea{
    background-color: transparent;
    color: #fff;
    resize: none;
    border-radius: 5px;
    width: 100%;
    outline: none;
    padding: 10px;
    border: 1px solid #6c7279;
}
.dark_content .input_line input[type="text"]{
    font-size: 30px;
    color: #fff;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid var(--dark-base);
    padding-bottom: 10px;
    outline: none;
    width: 100%;
}
.dark_content .textareaInput_box textarea{
    background-color: transparent;
    color: #fff;
    resize: none;
    border-radius: 0 0 5px 5px ;
    width: 100%;
    outline: none;
    padding: 10px;
    border: 1px solid #6c7279;
}
.dark_content .textareaInput_box input[type="text"]{
    background-color: transparent;
    color: #fff;
    resize: none;
    border-radius: 5px 5px 0 0 ;
    width: 100%;
    outline: none;
    padding: 10px;
    border: 1px solid #6c7279;
    margin-bottom: -1px;
}
.dark_content .notification{
    font-size: 30px;
    color: #fff;
}
.dark_content .model_info .tit{
    margin-bottom: 20px;
}
/* 파일 */
.input_file{
    border-bottom: 1px solid var(--dark-base);
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
}
.input_file .upload-name {
    display: inline-block;
    height: 40px;
    vertical-align: middle;
    border: none;
    width: calc(100% - 123px);
    background-color: transparent;
    color: #999999;
}
.input_file label {
    display: inline-block;
    padding: 0 15px;
    line-height: 40px;
    font-size: 1.25rem;
    color: #fff;
    vertical-align: middle;
    background-color: #999999;
    cursor: pointer;
    height: 40px;
    background-color: var(--btn-blue);
    border-radius: 5px;
    min-width: 110px;
    margin-left: 10px;
}
.input_file input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}
/* 실내환경 */
.environment .list li{
    border-bottom: 1px solid var(--dark-base);
    line-height: 60px;
}
.environment .list li:last-child{
    border-bottom: none;
}
.environment .list .tit{
    width: calc(100% - 175px);
    display: inline-block;
    padding-top: 0;
    margin-bottom: 0;
}
.environment .list li strong{
    width: 170px;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: normal;
}
.dark_right .good{
    color: var(--dark-blue-state-text) !important;
}
.dark_right .normal{
    color: var(--dark-green-state-text) !important;
}
.dark_right .bad{
    color: var(--dark-yellow-state-text) !important;
}
.dark_right .very_bad{
    color: var(--dark-red-state-text) !important;
}

/* 위치 */
.breadcrumb{
    color: var(--text_71);

    padding-bottom: 20px;
    margin-bottom: 20px;
}
.breadcrumb-item {
    display: inline-block;
}
.breadcrumb-item.active{
    color: var(--text_40);
}
.breadcrumb-item +.breadcrumb-item::before{
    content: ' > ';
    color: var(--text_71);
    padding-left: 3px;
    padding-right: 3px;
    display: inline-block;
}
/* 버튼 관련 */
.content .btn_base{
    border: 1px solid var(--bs-state);
    color: var(--text_40);
    border-radius: 5px;
    background-color: #fff;
    padding: 0 25px;
    text-align: center;
    line-height: 32px;
    display: inline-block;
    transition: background-color 0.2s  ease-in, border-color 0.2s  ease-in, color 0.2s  ease-in;
    vertical-align: middle;
}
.content  .btn_base:hover{
    background-color: var(--bs-left-menu-on-text);
    border-color: var(--bs-left-menu-on-text);;
    color: #fff;
}
.content .btn{
   
}
.content_top .btn{
    font-size: 1.25rem;
    line-height: 50px;
    padding: 0 20px;
    min-width: 140px;
}
.content .btn_s{
    display: inline-block;
    font-size: 1.25rem;
    color: #fff;
    border: none;
    line-height: 40px;
    padding: 0 15px;
    border-radius: 10px;
    text-align: center;
    min-width: 60px;
}
.content .btn_s + .btn_s{
    margin-left: 7px;
}
.btn-darkgray{
    background-color: #596a78;
    color: #fff;
}
.btn-darkgray:hover, .btn-darkgray:focus{
    background-color: #3d5163;
    color: #fff;
}
.btn-lg, .btn-group-lg > .btn{
    min-width: 100px;
}
.content .btn_red{
    background-color: var(--btn-red);
    transition: 0.2s background-color ease-in;
}
.content .btn_red:hover{
    background-color: var(--btn-red-hover);
}
.content .btn_blue{
    background-color: var(--btn-blue);
    transition: 0.2s background-color ease-in;
    color: #fff;
}
.content .btn_blue:hover{
    background-color: var(--btn-blue-hover);
}
.content .btn_outline{
    background-color: #fff;
    border: 1px solid  var(--btn-blue);
    color: var(--btn-blue);
    border-radius: 30px;
    font-size: calc(1rem + 2px);
    line-height: 38px;
    transition: 0.1s all ease-in;
    min-width: auto;
}
.content .btn_outline:hover{
    background-color: var(--btn-blue);
    color: #fff;
}
/* 계정관리 */
.account_member {
    font-size: 0;
    margin-bottom: 40px;
}
.account_member span{
    font-size: 1.25rem;
    font-weight: 500;
    padding-left: 10px;
    padding-right: 20px;
    vertical-align: middle;
}
.account_member .icon{
    width: 60px;
    height: 60px;
    vertical-align: middle;
    background: var(--bs-state) url(../img/men_icon.png) center/46px no-repeat;
    border-radius: 50%;
    display: inline-block;
}
.account_box{
    display: flex;
}
.account_box>*{
    width: 430px;
}
.account_box .img{
    border: 1px solid var(--bs-state);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    background-image: url(../img/noimage.png);
    background-size: 260px auto;
    background-repeat: no-repeat;
    background-position: center;
    height: 296px;
    background-color: #fafafa;
    position: relative;
}
.account_box img{
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.account_name{
    font-size: 1.5rem;
    font-weight: 500;
    vertical-align: middle;
    text-align: center;
    display: block;
    line-height: 40px;
}
.account_box .btn_box{
    margin-top: 20px;
    display: flex;
}
.account_box .btn_box .btn_base{
    width: calc(50% - 5px);
}
.account_box  .btn_base + .btn_base{
    margin-left: 10px;
}
.admin_management, .adimn_add_del{
    margin-left: 20px;
}
.account_box .admin_box{
    border-radius: 10px;
    border: 1px solid var(--bs-state);
    overflow: hidden;
    margin-bottom: 15px;
}
.account_box .admin_box header{
    font-size: 1.25rem;
    color: #fff;
    line-height: 80px;
    padding-left: 20px;
}
.account_box .admin_management header{
    background-color: var(--tab-on);
}
.account_box .adimn_add_del header{
    background-color: var(--bs-state);
}
.account_box .admin_box_inner{
    padding: 20px;
    background-color: #fff;
}
.admin_management .admin_item{
    border: 1px solid var(--bs-state);
    border-radius: 5px;
    line-height: 80px;
    padding: 0 20px;
    position: relative;
    font-size: 1.5rem;
    font-weight: 500;
}
.admin_management .admin_item + .admin_item{
    margin-top: 10px;
}
.admin_management .admin_item.active{
    border-color: var(--tab-on);
}
.admin_management .btn_add{
    width: 100%;
}
.admin_management .admin_item .btn{
    position: absolute;
    right: 20px;
    top: 10px;
}
.adimn_add_del .admin_box_inner input{
    width: 100%;
    border: 1px solid ;
    line-height: 80px;
    border-radius: 5px;
    border: 1px solid var(--bs-state) ;
    font-size: 1.5rem;
    padding: 0 20px;
    margin-bottom: 10px;
}
.adimn_add_del .admin_box_inner input::placeholder{
    color: var(--bs-state);
}
.adimn_add_del .admin_item>span{
    font-size: 1.5rem;
    padding: 23px 0;
    display: inline-block;
}
.adimn_add_del .admin_box_inner .btn_box{
    margin-top: 10px;
    margin-bottom: 10px;
}
.admin_box_inner .btn_box{
    display: flex;
}
.admin_box_inner .btn_box .btn{
    width: calc(50% - 7.5px);
}
.admin_box_inner .btn_box .btn + .btn{
    margin-left: 15px;
}

/* 제어 */
.control_group_box, .setting_group_box{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.control_group_inner, .setting_group_inner{
    border: 1px solid var(--bs-state);
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    width: 430px;
}
.control_group+.control_group, .setting_group+.setting_group{
    margin-left: 20px;
}
.control_group .tit, .setting_group .tit{
    background-color: var(--tab-on);
    color: #fff;
    line-height: 80px;
    font-size: 1.25rem;
    padding: 0 20px;
    position: relative;
}
.control_group .tit::after{
    content: '';
    position: absolute;
    background-image: url(../img/arrow_icon2.png);
    background-size: 40px auto;
    width: 40px;
    height: 40px;
    top: calc(50% - 20px);
    right: 20px;
}
.control__items{
}
.control__items .control_item{
    width: 100%;
    display: block;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid var(--bs-state);
    text-align: left;
    line-height: 60px;
    padding: 0 15px;
    font-size: 1.5rem;
    font-weight: 500;
}
.control__items.control__items_small .control_item{
    line-height: 60px;
}
.control__items .control_item.active, .control__items .control_item:hover{
    color: var(--tab-on);
}   
.control__items .control_item.active{
    border-color: var(--tab-on);
}
.control__items .control_item+.control_item{
    margin-top: 10px;
}
.control_group_inner + .btn{
    margin-top: 40px;
    width: 100%;
}
.content_top{
    margin-bottom: 20px;
    font-size: 0;
}

.content .control_tit{
    margin-top: 20px;
    margin-bottom: 15px;
    color: var(--dark-text);
    font-weight: 600;
    font-size: 1.6rem;
}
.input_box{
    border: 1px solid var(--bs-state);
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
}
.input_box input[type="text"]{
    display: block;
    width: 100%;
    line-height: 50px;
    border: none;
    border-bottom: 1px solid var(--bs-state);
    outline: none;
    font-size: 30px;
    color: var(--text_40);
}
.sch_box{
    font-size: 0;
}
.sch_box strong{
    font-size: 1.25rem;
    color: var(--text_40);
    font-weight: 500;
}
.sch_box .sch_input{
    border-radius: 10px 0 0 10px;
    background-color: #fff;
    outline: none;
    border: 1px solid var(--bs-state);
    font-size: 1.25rem;
    line-height: 48px;
    margin-left: 20px;
    padding: 0 20px;
}
.sch_box .sch_date{
    border-radius: 10px;
    width: 280px;
    text-align: center;
}
.sch_box .sch_btn{
    background-color: var(--tab-on);
    color: #fff;
    width: 70px;
    line-height: 50px;
    vertical-align: top;
    font-size: 1.25rem;
    border-radius: 0 10px 10px 0;
    transition: 0.2s background-color ease-in;
}
.sch_box .sch_btn:hover{
    background-color: var(--btn-blue-hover);
}
.device-list li{
 padding: 5px 0px;
}
.device-list li > .form-group > h3{
    font-size: 18px;
}
.device-list li > .control-setting p{
    font-size: 18px;
    display: inline-block;
}
.device-list li > .control-setting button{
    display: inline-block;
}
/* 환경설정 */
.setting_group .tit{
    text-align: center;
}
.setting_item{
    position: relative;
    min-height: 60px;
}
.setting_item+.setting_item{
    border-top: 1px solid var(--bs-state);
}
.setting_item .setting_tit{
    display: block;
    font-size: 1.5rem;
    line-height: 60px;
    padding: 0 20px;
}
.setting_item .swithc_box{
    position: absolute;
    right: 20px;
    top: calc(50% - 15px);
    width: 60px;
    height: 30px;
}
.check_btn_box{
    padding: 0 20px 30px;
    margin-top: -10px;
}
.check_btn{
    display: inline-block;
    font-size: 0;
}
.check_btn input + label{
    font-size: calc(1.25rem + 2px);
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    display: block;
    min-width: 88px;
    border-radius: 10px;
    color: #fff;
    background-color: #d2d2d2;
    cursor: pointer;
}
.check_btn input + label:hover{
    background-color: #91c4ff;
}
.check_btn input:checked + label{
    background-color: #3e97ff;
}
.check_btn+.check_btn{
    margin-left: 10px;
}
/*예외일*/
.exception_list ul li{
    padding: 18px 10px;
    border: 1px solid #c8c8c8;
    border-radius: 5px;
    margin-bottom: 10px;
}
.exception_list ul li .form-group, .exception_list ul li .form-group h3{
    margin-bottom: 0;
}
.exception_list ul li .form-group h3{
    font-size: 20px; 
    color: #656565;
}
.exception_list ul li .form-group input[type='checkbox']:checked+label h3{
    color: #2995f0;
}
.exception_list ul li.active{
    border: 1px solid #2995f0;
}
.plus-btn span{
    display: none;
}
.plus-btn{
    width: 32px;
    height: 32px;
    background: none;
    background-image: url(../img/common/plus_btn_g.png);
    background-position: 0 0;
    background-size: 32px;
    line-height: 32px;
    display: inline-block;
    top: 10px;
    left: 10px;
    position: relative;
}
.plus-btn:hover{
background-position: 0 -32px;
}

/* 그룹관리 */
.group .group_box{
    display: flex;
    flex-wrap: wrap;
}
.group_style01{
 
    border-right: 1px solid var(--bs-state);
}
.group_style01 .group_inner{
    width: 365px;
    padding-right: 20px;
}
.group_style02, .group_style03{
    width: 421px;
}
.group_style01 .group_item{
    width: 100%;
    text-align-last: left;
    padding: 0 20px;
    line-height: 40px;
    background-color: #fff;
    border: 1px solid var(--bs-state);
    border-radius: 5px;
    font-size: 1.5rem;
    color: var(--text_40);
}
.group_style01 .group_item.active{
    color: var(--tab-on);
    border-color: var(--tab-on);
}
.group_item+.group_item{
    margin-top: 10px;
}
.group_style02, .group_style03{
    margin-left: 20px;
}
.group_style02, .group_style03{
    border: 1px solid var(--bs-state);
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
}
.group_style02 .tit, .group_style03 .tit{
    color: #fff;
    font-size: 1.25rem;
    line-height: 80px;
    padding: 0 20px;
}
.group_style02 .tit{
    background-color: var(--tab-on);
}
.group_style03 .tit{
    background-color: var(--bs-state);
}
.group_style02 .group_items, .group_style03 .group_items{
    margin: 20px 10px;
}
.group_style02 .group_item, .group_style03 .group_item{
    width: calc(100% - 20px);
    text-align-last: left;
    padding: 0 20px;
    line-height: 58px;
    background-color: #fff;
    border: 1px solid var(--bs-state);
    border-radius: 5px;
    font-size: 1.5rem;
    color: var(--text_40);
    margin-left: 10px;
    margin-right: 10px;
}
.group_style02 .group_item.active, .group_style03 .group_item.active{
    border-color: var(--tab-on);
    position: relative;
}
.group_style01 .group_item.active::after, .group_style02 .group_item.active::after, .group_style03 .group_item.active::after{
        content: '';
    background-image: url(../img/arrow_icon2.png);
    background-size: 40px;

    width: 40px;
    height: 40px;
    float: right;
    background-position: 0 -80px;
}
.grounp_arrow{
        margin-left: 10px;
    width: 40px;
    margin-right: 10px;
    display: inline-block;
    float: left;
    margin-top: 80px;
}
.grounp_arrow [class*="btn_arrow"]{
    border: 1px solid var(--bs-state);
    display: block;
    width: 100%;
    height: 80px;
    background-color: #fff;
    border-radius: 5px;
}
.grounp_arrow [class*="btn_arrow"]:hover{
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}
.grounp_arrow [class*="btn_arrow"]+[class*="btn_arrow"]{
    margin-top: 20px;
}
.grounp_arrow span{
    text-indent: -999em;
    display: block;
    background-image: url(../img/arrow_icon2.png);
    background-size: 40px;
    width: 40px;
    height: 40px;
}
.grounp_arrow .btn_arrow_left span{
    background-position-y: -120px;
}
.grounp_arrow .btn_arrow_right span{
    background-position-y: -160px;
}

/* firmware */
.firmware .dark_content{
    padding: 25px;
}
.radio_firmware{
    display: flex;
}
.radio_firmware .radio_box{
    width: 50%;
}
.dark_right .firmware_box{
    padding: 0 10px ;
}
.firmware_box .time_centent .tiem_box>strong{
    width: 60px;
}
.firmware_box .time_centent .date_box{
    margin-bottom: 40px;
}
.tit+.radio_firmware{
    margin-left: 10px;
    margin-right: 10px;
}
.dark_right .test_check{
    margin-bottom: 20px;
    margin-top: 20px;
}

.display_round {
    background-color: #dddede;
    color: #fff;
    width: 100px;
    display: inline-block;
    line-height: 40px;
    border-radius: 22px;
    font-size: 1.25rem;
}
.display_round.active{
    background-color: var(--btn-blue);
}

.mcu_version {
    text-align: center;
}
.mcu_version .mcu_id{
    display: block;
    margin: 0 auto;
    line-height: 40px;
}
.mcu_version .btn_round{
    display: block;
    margin: 0 auto;
    color: #fff;
    font-size: 1.25rem;
    width: 100px;
    background-color: var(--btn-blue);
    line-height: 40px;
    border-radius: 20px;
}
.mcu_version .btn_round:hover{
    background-color: var(--btn-blue-hover);
}
.mcu_version .btn_round:disabled{
    background-color: #dddede;
    cursor: default;
}
.mcu_version> * + .btn_round, .mcu_version> * + .mcu_id{
    margin-top: 10px;
}

/* 실시간 모니터링 */
.real_time {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.real_time .real_time_box{
    border: 1px solid var(--btn-blue);
    width: calc(33.333% - 14px);
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
}
.real_time .real_time_box .real_time_tit{
    font-size: calc(1rem + 2px);
    color: #fff;
    background-color: var(--btn-blue);
    line-height: 50px;
    text-align: center;
}
.real_time .real_time_box dl{
    margin: 10px;
    font-size: calc(.75rem + 3px);
    display: flex;
    flex-wrap: wrap;
}
.real_time .real_time_box dt{
    width: 40%;
}
.real_time .real_time_box dd{
    width: 60%;
}
.real_time .real_time_box dt{
    text-align: right;
    padding-right: 15px;
    color: var(--text_62);
}

/* 데이터 히스토리 */
.search_tit{
    font-size: 1.25rem;
    display: inline-block;
    margin-right: 20px;
    padding-right: 20px;
    position: relative;
    min-width: 120px;
    line-height: 50px;
}
.search_tit::after{
    content: '';
    width: 1px;
    height: 20px;
    background-color: var(--bs-state);
    position: absolute;
    top:  calc(50% - 10px);
    right: 0;
}
.input_line {
    display: inline-block;
}
.input_box_date{
    position: relative;
    display: inline-block;
}
.input-daterange .input_date, .number_box .input_number{
    font-size: 1.25rem;
    line-height: 48px;
    padding: 0 50px 0 10px;
    background-color: #fff;
    border: 1px solid var(--bs-state);
    border-radius: 5px;
}
.input-daterange .input_date{
    width: 250px;
}
.number_box .input_number{
    width: 100px;
}
.input-daterange .icon_box{
    background-image: url(../img/right_icon.png);
    background-size: 100px auto;
    width: 50px;
    height: 50px;
    position: absolute;
    top: calc(50% - 25px);
    right: 3px;
    background-color: transparent;
    background-position: -50px -150px;
}
.input_to{
    font-size: calc(1rem + 2px);
    padding: 0 10px;
}
.history_sch_box .btn_box{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 60px;
}
.history_sch_box .btn{
    font-size: 1.25rem;
    line-height: 50px;
}
.daterange_box, .number_box, .date_select_box{
    margin-bottom: 20px;
}
.number_box{
    display: flex;
    flex-wrap: wrap;
}
.number_box>div{
    width: 50%;
}
.btn_item_add{
    color: var(--tab-on);
    font-size: 1.25rem;
    font-weight: 500;
    border-radius: 10px;
    background-color: transparent;
    padding: 0 10px;
    transition: 0.2s background-color ease-in;
}
.btn_item_add:hover{
    background-color: rgba(255, 255, 255, 0.7);
}
.date_select_box .input_date_box{
    width: 350px;
    border: 1px solid var(--bs-state);
    background-color: #fff;
    padding: 5px 20px;
    height: 50px;
    border-radius: 5px;
}
.date_select_box{
    font-size: 1rem;
    display: flex;
}
.radio_btn_s{
    display: flex;
    margin: 0 20px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--bs-state);
}
.radio_btn_s input[type="radio"]{
    display: none;
}
.radio_btn_s input[type="radio"] + label{
    line-height: 48px;
    font-size: 1.25rem;
    padding: 0 20px;    
    cursor: pointer;    
    background-color: #fff;
}
.radio_btn_s input[type="radio"]:checked + label{
    background-color: var(--tab-on);
    color: #fff;
}
.selected_box{
    display: flex;
}
.selected_item{
    font-size: 1.25rem;
    display: inline-block;
}
.table_border+.content_top{
    margin-top: 60px;
}
.btn_box_width{
    width: 1326px;
}

/* 데시보드 */
.dashboard .inner{
    display: flex;
    flex-wrap: wrap;
}
.dashboard .inner .dashboard_info{
    width: 50%;
    padding: 10px;
}
.dashboard .dashboard_box{
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #c8c8c8;
    min-height: 360px;
}
.dashboard .tit{
    text-align: center;
    border-bottom: 1px solid #c8c8c8;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 69px;
    height: 70px;
}
.dashboard_box_item{
    display: flex;
    width: 100%;
}


.t_blue{
    color: #469fff !important;
}
.t_red{
    color: #e86161 !important;
}
.t_gray{
    color: var(--text_40) !important;
}
.table_s{
    padding: 15px 20px;
    width: 40%;
}
.dashboard_box_item{
    display: flex;
}
.dashboard_box_item .dashboard_grap{
    display: flex;
    width: 60%;
    padding-left: 40px;
    justify-content: space-around;
    padding: 15px;
}


.dash_table thead,.dash_table tbody td:last-child{
    margin-right: 10px;
}
.dashboard_box .tit_box{
    position: relative;
}
.dashboard_box .tit_box .setting_icon{
    background-color: transparent;
    width: 24px;
    height: 26px;
    position: absolute;
    top: calc(50% - 13px);
    right: 20px;
    background-image: url(../img/setting_icon.png);
    background-size: 24px ;
    background-position: 0 0;
}
.dashboard_box .tit_box .setting_icon:hover{
    background-position: 0 -26px;
}
.dashboard_box .tit_box .setting_icon span{
    text-indent: -9999em;
    display: inline-block;
}
.tit sub{
    font-size: calc(.75rem + 1px);
}
.dash_grap_item{
    padding: 15px 20px;
}

.card{
    border-radius: 10px;
    border: solid 1px #cfd0d0;
    background-color: #fff;
    display:block;
}
.card .card-header{
    
        padding: 18px 10px;
    border-bottom: solid 1px #cfd0d0;
    display: flex;
    position: relative;
    justify-content: flex-start;
    vertical-align: middle;
        align-items: center;
}
.card .card-header.card-header-flex{
   padding: 18px 10px;
    border-bottom: solid 1px #cfd0d0;
display: flex;
position: relative;
align-items: center;
    justify-content: space-between;
}
.card .card-header h3{
font-size: 2rem;
    font-weight: 600;
    margin: 0;
    display: inline-block;
    padding-left: 10px;
    line-height: 2rem;
    /* padding-top: 5px; */
    float: left;
}
.card .card-header select{
max-width: 300px;
}
.card .card-header .btn{
display: inline-block;
    float: left;
    margin-left: 10px;
}
.card .card-body.main-chart{
display: flex;
}
.card .card-body{
    padding: 20px 20px;
}
.card .card-body p{
   font-size: 18px;
}
.chart-card{
    min-height: 347px;
}
.chart-bx{
    margin: 0px auto;
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    padding: 9%;
}
.main-doughnut{
    margin: 0 auto;
    max-width: 250px;
    max-height: 250px;
}
.main-chart-title{
  position: absolute;
    width: calc(100% - 20px);
    height: auto;
    text-align: center;
    margin: 22% auto;
    top: 40px;
}
.main-chart-title h5{
  font-size: 20px;
  margin: 0;
}
.main-chart-title h3{
  font-size: 36px;
  margin: 0;
}
.main-chart-title h3 span{
  font-size: 40px;
  font-family: 'S-CoreDream-6Bold';
}
.main-chart-legend{
        position: absolute;
    top: 290px;
    display: block;
    margin: 0px auto;
    width: calc(100% - 20px);
}
.main-chart-legend ul{
        margin: 0px auto;
    display: flex;
    justify-content: center;
}
.main-chart-legend ul li:before{
    content: '';
width: 10px;
height: 10px;
display: inline-block;
border-radius: 5px;
margin-right: 10px;
}
.main-chart-legend ul li.legend-blue:before{
background-color: #2995f0;
}
.main-chart-legend ul li.legend-gray:before{
background-color: #ababab;
}
.main-chart-legend ul li.legend-green:before{
background-color: #07b56e;
}
.main-chart-legend ul li.legend-red:before{
background-color: #e45f5f;
}
.main-chart-legend ul li{

    display: inline-block;
    margin-right: 20px;
}
.main-chart-legend ul li:last-child{
    margin-right: 0;
}
.nav-tabs > li > a {
    margin-right: -1px;
    line-height: 1.42857143;
    border: 1px solid #cfd0d0;
    border-radius: 5px 5px 0 0;
    background-color: #f3f3f3;
    color:#b0b0b0;
    padding: 12.5px 24px;
}
.col-md-3 .card .nav-tabs > li > a {
    padding: 12.5px 15px;
}
.nav-tab-wh.nav-tab-sm.nav-tabs > li > a{
    padding: 12.5px 10px;
}
.nav-tabs {
    padding-left: 10px;
    padding-top: 10px;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}
.setting-group .btn{
    width: 100%;
    height: 80px;
    font-size: 18px;
    margin-bottom: 20px;
    border-radius: 10px;

}
.setting-group .btn i{
    margin-right: 10px;
}
.all-control{
    padding: 20px;
}
.all-control h5{
    font-size: 20px;
    margin: 20px 0px 50px;

}
.all-control-btn{
    width: 100%;
    margin-right: 20px;
    display: flex;
}
.all-control-btn button{
 font-size: 20px;
 border-radius: 20px;
 width: 100px;
 height: 48px;
 margin-right: 5px;
 margin-left: 5px;
}
.main-button-group{
        display: flex;
    width: 100%;
    text-align: right;
    float: right;
    flex-direction: row;
}
.main-button-group h5{
    white-space: nowrap;
    font-size: 18px;
    margin-right: 5px;
}
.main-button-group .btn-wh{
    font-size: 18px;
}
.dash_table{
    padding-bottom: 30px;
}
 .dash_table .table { border-collapse:collapse;}
  .dash_table .table thead tr > th, .dash_table .table tfoot tr > th,  .dash_table .table tbody tr > th{ position:sticky; top:0; }
  .dash_table .table thead tr th:first-child, .dash_table .table tfoot tr td:first-child { left:0px; z-index:9; }
  .dash_table .table tbody tr > th { position:sticky; left:0px; z-index:99; }
  .dash_table .table tbody tr{
    border-bottom: 1px solid #cfd0d0;
  }
  .dash_table .table thead{
    background-color: #ecf4fa;
  }

.dash_table .table tbody tr th:first-child{
        position: sticky;
        z-index: 9;
    border-right: 1px solid #cfd0d0;
    text-align: center;
    background-color: #f3f3f3;
}
.dash_table .table tbody tr:first-child td:first-child{
    top:0;
    left: 0;
}
.dash_table .table tbody tr:nth-child(2) td:first-child{
    top:0;
    left: 0;
}
.dash_table .table tbody tr:nth-child(3) td:first-child{
    top:0;
    left: 0;
}
.table-responsive table {
    overflow: auto;
    table-layout: fixed;
}
  .dash_table .table tr th, .dash_table .table tr td{
    width: 120px;
    vertical-align: middle;
    text-align: center;
      color:#333333;
      height: 48px;
      font-size: 16px;

  }

 .dash_table .table tr th span{
 }
 .dash_table .table tr th span:before{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    content: '';
    display: inline-block;
    margin-right: 10px;
 }
 .dash_table .table tr th span.driving:before{
        background-color: #0ebb74;
 }
 .dash_table .table tr th span.stop:before{
        background-color: #ababab;
 }
 .dash_table .table tr th span.error:before{
        background-color: #e45f5f;
 }
 @media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
    .table-responsive-sm > .table-bordered {
      border: 0; } }

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
    .table-responsive-md > .table-bordered {
      border: 0; } }

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
    .table-responsive-lg > .table-bordered {
      border: 0; } }

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
    .table-responsive-xl > .table-bordered {
      border: 0; } }

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; }
  .table-responsive > .table-bordered {
    border: 0; 
}
.issue-list ul li span, .issue-list ul li .issue-tit{
display: inline-block;
  font-size: 16px; 
}
.issue-list ul li .issue-tit{
    color: #333;
}
.issue-list ul li span.date{ 
    color: #ababab;
    margin-right: 20px;
}


/*main-공기질관리현황*/
.card.swiper-card .card-body{
    padding: 0;
}
.swiper-air{
    overflow: hidden;
    padding: 20px;
}
.swiper-air .air-card {
box-shadow: 0px 5px 5px 0 rgba(160, 160, 160, 0.35);
  border: solid 1px #e1e1e1;
  background-color: #fff;
  border-radius: 10px;
  padding:10px;
}
.air-card-tit .air-card-btns{
    float: right;

}
.air-card-tit h3{
    font-size: 24px;
    margin: 10px;
    font-family: 'S-CoreDream-6Bold';
}
.air-card-state-list{
    display: block;
    width: 100%;
}
.air-card-state-list ul{
    display: flex;
       justify-content: space-between;
    margin-right: -2.5px;
    margin-left: -2.5px;
}
.air-card-state-list ul li{
    display: inline-block;
    width: 25%;
        padding: 0px 2.5px;
}
.air-card-state-list ul li a{
   width: 100%;
    border: solid 1px #e1e1e1;
    display: block;
    background-color: #fff;
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    padding:10px 0px;
}

.air-card-state-list .state-list-red a:hover{
border: solid 1px #e45f5f;
}
.air-card-state-list .state-list-blue a:hover{
  border: solid 1px #2995f0;  
}
.air-card-state-list .state-list-green a:hover{
    border: solid 1px #3fc088;
}
.air-card-state-list .state-list-yellow a:hover{
    border: solid 1px #ff7301;
}

.air-card-state{
    display: flex;
    justify-content: center;
}
.air-card-state .state-icon-bx, .air-card-state .state-txt{
    width: 50%;
    display: inline-block;
    text-align: center;
}
.state-green .air-card-state .state-icon{
    background-image: url(../img/common/state_icon_g.png);
}
.state-blue .air-card-state .state-icon{
    background-image: url(../img/common/state_icon_b.png);
}
.state-yellow .air-card-state .state-icon{
    background-image: url(../img/common/state_icon_y.png);
}
.state-red .air-card-state .state-icon{
    background-image: url(../img/common/state_icon_r.png);
}
.air-card-state .state-icon{
     display: block;
    margin: 0px auto;
    background-repeat: no-repeat;
    width: 100px;
        position: relative;
        min-height: 100px;
}
.air-card-btns{
        display: flex;
    position: absolute;
    right: 20px;
    z-index: 99;
    top: 20px;
}
.air-card-btns .icon-btn{
    width: 30px;
    height: 30px;
    display: block;
}
.air-card-btns .icon-btn i{
    width: 30px;
    height: 30px;
    display: block;
     background-image: url(../img/common/icon_aircard.png);
     background-repeat: no-repeat;
}
.modal .air-card-tit h3 {
    font-size: 24px;
    margin: 20px;
    text-align: center;
}
.modal .nav-tabs.nav-tab-wh{
        border-bottom: 1px solid #ddd;
}
.modal .exception_list .check_box input[type="checkbox"] + label {
    display: flex;
    min-width: 25px;
        align-items: center;
}
.modal .exception_list .check_box input[type="checkbox"] + label p{
    margin: 0px 10px;
    font-weight: 100;
}
.air-card .air-device-list{
padding: 20px;
    width: 100%;

}
.air-card .air-device-list ul{
    height: 240px;
    overflow: auto;
    list-style: none;
    border: 1px solid #cfd0d0;
    background-color: #fefefe;
    border-radius: 20px;
}
.air-card .air-device-list ul li{
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #cfd0d0;
}
.air-card .air-device-list ul li:last-child{

    border-bottom: 0;
}
.air-card .air-device-list ul::-webkit-scrollbar {
    width: 5px;
    background-color: rgba(255,255,255,0);
    right: -10px;
    padding: 10px;
  }
  .air-card .air-device-list ul::-webkit-scrollbar-thumb {
   background-color: #cfd0d0;
    border-radius: 2px;
  }
  .air-card .air-device-list ul::-webkit-scrollbar-track {
    
     background-color: transparent;
    border-radius: 2px;
  }
.swiper-air .swiper-slide{
    min-width: 300px !important;
}
.air-card-btns .icon-btn i.air-card-info{
    background-position: 0px 0px;
}
.air-card-btns .icon-btn i.air-card-refresh{
    background-position: -30px 0px;
}
.air-card-btns .icon-btn:hover i.air-card-info{
    background-position: 0px -30px;
}
.air-card-btns .icon-btn:hover i.air-card-refresh{
    background-position: -30px -30px;
}
.air-card-state .state-icon.state-icon-co2{
    background-position: 0px 0px;
}
.air-card-state .state-icon.state-icon-total{
    background-position: -100px 0px;
}
.air-card-state .state-icon.state-icon-pm10{
    background-position: -200px 0px;
}
.air-card-state .state-icon.state-icon-pm25{
    background-position: -300px 0px;
}
.air-card-state .state-icon.state-icon-gas{
    background-position: -400px 0px;
}
.air-card-state .state-txt h1{
   font-size: 36px;
}
.air-card-state-list ul li a h5,.air-card-state-list ul li a h4{
   margin: 0;
}
.air-card-state-list ul li a h5,.air-card-state-list ul li a h4{
   font-size: 16px;
}
.air-card-state-list ul li a h5{
    margin-bottom: 10px;
}
.state-list-blue a h5, .state-list-blue a h4, .air-card-state .state-txt.state-blue h1{
color: #2995f0;
}
.state-list-green a h5, .state-list-green a h4, .air-card-state .state-txt.state-green h1{
color: #3fc088;
}
.state-list-yellow a h5, .state-list-yellow a h4, .air-card-state .state-txt.state-yellow h1{
color: #ff7301;
}
.state-list-red a h5, .state-list-red a h4, .air-card-state .state-txt.state-red h1{
color: #e45f5f;
}
.state-blue .air-card-state .state-txt h1:before{
    content: '좋음';
    color: #2995f0;
}
.state-green .air-card-state .state-txt h1:before{
    content: '보통';
    color: #3fc088;
}
.state-yellow .air-card-state .state-txt h1:before{
    content: '나쁨';
    color: #ff7301;
}
.state-red .air-card-state .state-txt h1:before{
    content: '매우나쁨';
    color: #e45f5f;

}
.report-select{
    position: absolute;
    right: 30px;
    top: 65px;
}
.report-select select {
    min-width: 120px;
    line-height: 32px;
    border: 1px solid var(--bs-state);
    color: var(--text_40);
    padding: 0 40px 0 20px;
    border-radius: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url(../img/arrow_icon.png) no-repeat 95% -88px;
    background-size: 30px auto;
}

/*필터교체 알람*/
.filter-alert{
    position: fixed;
    right: 0;
    bottom: 0;
    width: 720px;
    z-index: 999;
}
.filter-alert .filter-alert-head{
    background-color: #e45f5f;
    height: 60px;
    padding:20px;
    display: flex;
    justify-content: space-between;
    border-radius: 40px 0px 0px 0px;
    align-items: center;

    color: #fff;
}
.filter-alert .filter-alert-head h5{
font-size: 18px;
}
.filter-alert .filter-alert-head .filter-alert-icon{
    width: 20px;
    height: 16px;
    margin-right: 10px;
    background: url(../img/common/alert_icon.png) no-repeat;
    display: inline-block;
}
.filter-alert .btn-white{
    background-color: #fff;
    color: #e45f5f;
}
.filter-alert .btn-white:hover{
    color: #fff;
    border:1px solid #fff;
    background-color: #e45f5f;
}
.filter-alert .filter-alert-close{
    width: 15px;
    height: 15px;
    display: inline-block;
    background: url(../img/common/exit_icon_w.png) no-repeat;

}
.filter-alert .close-btn{
background: none;
}
.filter-alert .filter-alert-body{
    background-color: #fff;
    border:2px solid #e45f5f;
    padding: 20px;
}
.filter-alert .filter-alert-body ul{
    max-height: 200px;
    overflow: auto;

}
.filter-alert .filter-alert-body ul li {
    border-bottom: 1px solid #c8c8c8;
    display: flex;
    justify-content: space-between;
padding:0px 20px;
}
.filter-alert .filter-alert-body ul li h5{
    font-size: 16px;
    
}
.filter-alert .filter-alert-body ul li h6{
 color: #e45f5f;
 font-size: 14px;
}
.filter-alert .filter-alert-body ul li h5 span{
    font-size: 12px;
    background-color: #e4e4e4;
    padding: 5px 10px;
    border-radius: 10px;
    color: #7b7b7b;
}
.filter-alert input[type="checkbox"]{
        display: none;
      }
.filter-alert input[type="checkbox"] + label .input-frame{
        display: inline-block;
        width: 20px;
        height: 20px;
        border:2px solid #fff;
        position: relative;
        border-radius: 3px;
        top:5px;
        margin-right: 5px;
      }
.filter-alert input[id="check-not-today"]:checked + label .input-frame::after{
        content:'✔';
        font-size: 16px;
        width: 20px;
        height: 20px;
        text-align: center;
        position: absolute;
        left: -2px;
        top:-5px;
      }
      .filter-alert-body ul::-webkit-scrollbar {
    width: 5px;
    background-color: rgba(255,255,255,0);
    right: 5px;
    padding-right: 10px;
  }
  .filter-alert-body ul::-webkit-scrollbar-thumb {
   background-color: #cfd0d0;
    border-radius: 2px;
  }
  .filter-alert-body ul::-webkit-scrollbar-track {
    
     background-color: #fff;
    border-radius: 2px;
  }
/*계정관리*/
h1.account-name{
    font-size: 32px;
    margin: 0px 20px 40px 0px;
}
.account-tit h1.account-name{
    float: left;
}
.account-tit a{
    float: left;
}
.btn-wh{
    color: #494949;
    background-color: #fff;
    border-radius: 5px;
    border:1px solid #cfd0d0;
 
  background-image: -moz-linear-gradient( 90deg, rgb(233,233,233) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(233,233,233) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(233,233,233) 0%, rgb(255,255,255) 100%);
 
}
.account-img{
    width: 100%;
    min-height: 352px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: cover;
}
.card .form-account .form-group{
       margin: 0px;
    padding: 10px 0px;
    border-bottom: 1px solid #ececec;
    display: flex;
    align-items: center;
}
.card .form-account .form-group:last-child{
    border-bottom: 0;

}
.form-group .address-search input{
    width: calc(100% - 90px);
    float: left;

}

.form-group .address-search .btn-sm{
width: 80px;
float: left;
margin-left: 10px;

}

.form-account .form-group label{
    font-size: 1.6rem;
    margin-bottom: 0;
}
.form-group input{
    border-radius: 5px;
    border:1px solid #d7d8d8;
}

.admin-list li{
    display: flex;
     justify-content: space-between;
      align-items: center;
       border-bottom: 1px solid #ececec;
       padding: 10px 0px;
}

.admin-list li:last-child{
    border-bottom: 0;
}

.btn-danger {
    background-color: #e45f5f;
    color: #fff;
}

.btn-secondary{
    background-color: #89a9c5;
    color: #fff;

}

.btn-secondary:hover{
    color: #fff;
 background-color: #658aaa;   

}
.control-device-cont{
    margin-left: -10px;
    margin-right: -10px;
  
}
.controller-open.content{
    padding: 80px 340px 30px 170px;
}
.controller-open .control-device-cont .control-device{
width: 25%;
}
.control-device{
     float:left;
display: inline-block;
padding: 0px 10px;
width: 20%;
margin-bottom: 20px;
}
.control-device .device-card{
display: inline-block;
    background-color: #fff;
    width: 100%;
    border-radius: 10px;
    border:1px solid #b5b5b5;
    text-decoration: none;
}

.control-device .device-card.device-on{
    border:1px solid #1b8cec;
}

.device-name h3{
    color: #fff;
    font-size: 20px;
    margin: 0;
    line-height: 30px;
    display: inline-block;
    margin-left: 10px;
}

.control-device .device-card .device-name{
    background-color: #b5b5b5;
padding:10px;
border-radius: 10px 10px 0px 0px; 
display: flex;
align-items: center;
}

.control-device .device-card.device-on .device-name{
    background-color: #1b8cec;

}
.device-icon.device-icon-01{
    width: 20px;
    height: 30px;
    display:inline-block;
    background-image: url('../img/control/device_icon_01.png');
    background-repeat: no-repeat;

}
.device-icon.device-icon-02{
      width: 34px;
    height: 30px;
    display: inline-block;
    background-image: url(../img/control/device_icon_02.png);
    background-repeat: no-repeat;
    background-position: 0 7px;
}
.device-icon.device-icon-03{
      width: 21px;
    height: 33px;
    display: inline-block;
    background-image: url(../img/control/device_icon_03.png);
    background-repeat: no-repeat;
  
}
.device-icon.device-icon-04{
      width: 29px;
    height: 29px;
    display: inline-block;
    background-image: url(../img/control/device_icon_04.png);
    background-repeat: no-repeat;
  
}

.device-state ul{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1px solid #b5b5b5;
    align-items: center;
    height: 52px;
}

.device-state ul li span{
display: none;
}

.device-state ul li{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url('../img/control/control_icon.png');
}

.device-state ul li.d-calendar{
    background-position: -160px 0px;
}
.device-state ul li.d-error{
    background-position: -200px 0px;
}
.device-state ul li.d-link{
    background-position: -240px 0px;
}
.device-state ul li.d-wifi{
    background-position: -280px 0px;
}
.device-state ul li.d-filter{
    background-position: -160px -40px;
}

.device-state ul li.d-calendar.on{
    background-position: 0px 0px;
}
.device-state ul li.d-error.on{
    background-position: -40px 0px;
}
.device-state ul li.d-link.on{
    background-position: -80px 0px;
}
.device-state ul li.d-wifi.on{
    background-position: -120px 0px;
}
.device-state ul li.d-filter.on{
    background-position: 0px -40px;
}
.device-mode{
    text-align: center;
}
.device-mode h5{
    font-size: 16px;
    padding: 6px 20px;
    display: inline-block;
    border-radius: 15px;
    color: #1b8cec;
    border:1px solid #1b8cec;
    margin: 0px;
}
.device-mode p{
    font-size: 16px;
    color: #c8c8c8;
    margin: 21px 0px;
        min-height: 45.99px;
}
.device-mode h3{
   margin: 10px;
   color: #333333;
}

.air-state{    
    padding: 0px 10px 10px 10px;
    display: flex;
    justify-content: space-between;
}

.air-state .device-inner-card{
        width: calc(50% - 5px);
    background-color: #f3f3f3;
    display: inline-block;
    border-radius: 5px;
    float: left;
    text-align: center;
    padding: 10px;

}
.erv .air-state .device-inner-card{
        width: 100%;
}
.control-device-cont.erv{
    display: inline-block;
    width: 100%;
    position: relative;
}
.control-device-cont.erv .erv-tit{
    width: 100%;
    margin: 10px;
    border-bottom: 1px solid #1b8cec;
}
.control-device-cont.erv .erv-tit h4{
    padding: 10px 20px;
    background-color: #1b8cec;
    color: #fff;
    display: inline-block;
    border-radius: 5px 5px 0 0;
    margin-bottom: 0px;
}
.air-state .device-inner-card h5{
   color: #b5b5b5;
   font-size: 14px;
    margin-bottom: 10px;
    margin-top: 0;
}
.air-state .device-inner-card h3{
   color: #b5b5b5;
   font-size: 18px;
   margin: 0;
}

.font-green{
    color: #2ebd3f !important;
}
.font-blue{
    color: #1b8cec !important;
}
.font-red{
    color: #e45f5f !important;
}
.font-yellow{
    color: #ff7301 !important;
}




.control-device .device-card.device-select, .control-device .device-card.device-on:hover{
    border:1px solid #004c8c !important;
}


.control-device .device-card.device-select .device-name, .control-device .device-card.device-on:hover .device-name{
    background-color: #004c8c !important;

}

.input-group .form-control:first-child{
    border-right: 0;
}

.driving_header_filter.driving_header{
    display: flex;
    justify-content: space-between;
}


.driving_header_filter.driving_header h3, .driving_header_filter.driving_header .state{
    display: inline-block;
}
.erv_state h1, .erv_state h3{
    color: #fff;
}
.erv_state span{
    color: #8c9bac;
    border-radius: 15px;
    border:1px solid #8c9bac;
    padding: 5px 15px;
    margin-top: 40px;
    position: relative;
    top: 20px;
}
.erv_state h1{
    font-size: 48px;
}
.erv_state h3{
    position: relative;
    top: 10px;
}
.erv_state_list ul{
    list-style: none;
    margin-top: 30px;
}
.erv_state_list ul > li{
    position: relative;
}
.erv_state_list ul > li > span{
font-size: 20px;
color: #797f86;
min-width: 140px;
display: inline-block;
padding: 10px 0;
}
.erv_state_list ul > li > strong{
font-size: 24px;
color: #fff;
position: relative;
}
.erv_state_list .alert-filter:after{
    content: '!';
    background-color: #e45f5f;
    width: 18px;
    height: 18px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    border-radius: 9px;
    position: absolute;
    top: 0;
}
.erv_content .full-btn-bx, .dark_content .full-btn-bx{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.erv_content .full-btn-bx .full-btn,.erv_content .full-btn-bx .half-btn, .dark_content .full-btn-bx .full-btn,.dark_content .full-btn-bx .half-btn{
    height: 78px;
    font-size: 20px;
    width: 100%;
    color: #fff;
    background-color: #1b8cec;
}
.erv_content .full-btn-bx .full-btn:hover, .erv_content .full-btn-bx .full-btn:focus, .dark_content .full-btn-bx .full-btn:hover, .dark_content .full-btn-bx .full-btn:focus{
    background-color: #004c8c;
}
.erv_content p{
    font-size: 16px;
    color: #8c9bac;
}
.erv_content .btn_box-erv{
display: block;
}

.erv_content .btn_box-erv > button{
        width: calc(32% - 10px);
    margin: 0px 10px 10px 0px;
}
.swiper.ervmode .swiper-slide span{
color: #797f86;
font-size: 24px;
}
.swiper.ervmode {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        line-height: 60px;
      }

      .swiper.ervmode .swiper-slide {
        text-align: center;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper.ervmode .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .swiper.ervmode .swiper-slide-active span{
        color: #fff;
        font-size: 46px;
      }
      .erv-mode-btn-bx{
        position: absolute;
        width: 100%;
            top: 42px;
      }
      .erv-mode-btn-bx .swiper-button-next{
            background-image: url('/img/control/erv-mode-next.png');
            background-repeat: no-repeat;
                right: 70px;
      }
      .erv-mode-btn-bx .swiper-button-prev{
            background-image: url('/img/control/erv-mode-prev.png');
            background-repeat: no-repeat;
                left: 70px;
      }
      .erv-mode-btn-bx .swiper-button-next, .erv-mode-btn-bx .swiper-button-prev{
        width: 10px;
        height:19px;
        background-size: 10px;
      }

.care_check .checkbox_box, .swithc_box .checkbox_box{
    width: 60px;
    height: 30px;
    position: relative;
}
.care_check .checkbox_box input[type="checkbox"], .swithc_box input[type="checkbox"], .check_btn input[type="checkbox"]{
    position: absolute;
    visibility: hidden;
}  
.care_check .checkbox_box label{
    display: block;
    position: absolute;
    width: 60px;
    height: 30px;
    top: 10px;
    border-radius: 15px;
    background-color: #797f86;
    transition-duration: 0.2s;
    cursor: pointer;
}
.care_check .checkbox_box label span {
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #31393d;
    transition-duration: 0.2s;
} 
.care_check .tit{
    padding-top: 0;
}
.care_check .checkbox_box label:before,
.care_check .checkbox_box label:after,
.swithc_box label:before,
.swithc_box label:after{
    position: absolute;
    top: 0;
    width: 34px;
    font-size: 11px;
    line-height: 34px;
    color: #fff;
    text-align: center;
} 
.care_check .checkbox_box input:checked + label{
    background-color: #3e97ff;
}  
.care_check .checkbox_box input:checked + label span{
    left: 6px;
    background-color: #fff;
    transform: translateX(26px);
}
.care_check{
    display: flex;
    justify-content: space-between;    
    padding: 20px 0px;
}
.care_check span{
    font-size: 2.3rem;
    color: var(--dark-base);
    line-height: 30px;
}
.focus_care-bx label h3{
font-size: 18px;
color: #70767c;
}
.focus_care-bx .radio_box input[type="radio"]:checked + label h3{
color: #fff;
}
.focus_care-bx .radio_box input[type="radio"] + label {
    background-image: url(/img/control/control_radio.png);
}
.erv_content .full-btn-bx .half-btn-01,.erv_content .full-btn-bx .half-btn-02{
width: 50%;
display: inline-block;
float: left;
}
.erv_content .full-btn-bx .half-btn-01{
    background-color: #576068;
}
.erv_content .full-btn-bx .half-btn-02{
    background-color: #1b8cec;
}
.dark_content .full-btn-bx .half-btn-01,.dark_content .full-btn-bx .half-btn-02{
width: 50%;
display: inline-block;
float: left;
}
.dark_content .full-btn-bx .half-btn-01{
    background-color: #576068;
}
.dark_content .full-btn-bx .half-btn-02{
    background-color: #1b8cec;
}
/*운영이력*/
.device-item.active h3{
color: #2995f0;
}
.drive_chart_y{
    position: relative; 

}
.drive_chart_y ul{
    position: absolute;
    top: -13px;
    z-index: 7;
    padding-right: 20px;
    background-color: #fff;
}
.drive_chart_y ul li{
    line-height: 80px;
}
.drive_chart_y ul li span{
    font-size: 16px;
    color: #838383;
}
.charts-bx{
    width: 100%; 
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;

}
.card .card-body.chart_event-body{
    position: relative;
    padding-top: 50px;
}
.chart_event_legend_bx{
    position: absolute;
    top: 20px;
    width: 100%;
}
.chart_event_legend_bx ul{
    display: flex;
    justify-content: center;
}
.chart_event_legend_bx ul li{
    display: inline-block;
}
.chart_event_legend_bx ul li span{
    color: #838383;
    font-size: 16px;
    margin-right: 20px;
}
.chart_event_legend_bx ul li span:before{
    width: 40px;
    height: 10px;
    content: '';
    display: inline-block;
    margin-right: 10px;
}
.chart_event_legend_bx ul li span.r_legend:before{
    border:1px solid #e45f5f;
    background-color: rgba(228, 95, 95, 0.5);
}
.chart_event_legend_bx ul li span.g_legend:before{
    border:1px solid rgba(7, 181, 110, 1);
    background-color: rgba(7, 181, 110, 0.5);
}
.chart_event_legend_bx ul li span.y_legend:before{
    border:1px solid rgba(243, 160, 30, 1);
    background-color: rgba(243, 160, 30, 0.5);
}
.chart_event_legend_bx ul li span.b_legend:before{
    border:1px solid rgba(41, 149, 240, 1);
    background-color: rgba(41, 149, 240, 0.5);
}
.chart_event_legend_bx ul li span.dg_legend:before{
    border:1px solid rgba(89, 106, 120, 1);
    background-color: rgba(89, 106, 120, 0.5);
}
/*에너지*/
.content.energy{
    padding-top: 170px;
}
.btn-group > .btn, .btn-group-vertical > .btn {
    border: 1px solid #c7c7c7;
    color: #b0b0b0;
}
.btn-group > .btn.btn-primary{
    color: #fff;
}
.energy_legend_bx{
    position: absolute;
    top: 20px;
    width: 100%;
}
.energy_legend_bx ul{
    display: flex;
    justify-content: flex-start;
}
.energy_legend_bx ul li{
    display: inline-block;
}
.energy_legend_bx ul li span{
    color: #838383;
    font-size: 16px;
    margin-right: 20px;
}
    .energy_navi_tit{
    display: flex;
    /* justify-items: baseline; */
    align-items: center;
}
.energy_legend_bx ul li span:before{
    width: 10px;
    height: 10px;
    content: '';
    display: inline-block;
    margin-right: 10px;
    border-radius: 5px;
}
.energy_kwh_bx{
   border: 1px solid #d7d8d8;
   background-color: #fff;
   border-radius: 5px;
   display: inline-block;
   padding-right: 10px;
   margin-right: 5px;
}
.energy_kwh_bx span{
   color: #959595;
}

.energy_kwh_bx .energy_kwh_form{
    background-color: #fff;
    border:0;
    padding: 7px 10px;
    width: 80%;
}

.energy_navi_tit h1.account-name {
    font-size: 32px;
    margin: 0px 20px 0px 0px;
}

.energy_legend_bx ul li span.r_legend:before{
    background-color: rgba(228, 95, 95, 1);
}
.energy_legend_bx ul li span.g_legend:before{
    background-color: rgba(7, 181, 110, 1);
}
.energy_legend_bx ul li span.y_legend:before{
    background-color: rgba(243, 160, 30, 1);
}
.energy_legend_bx ul li span.b_legend:before{
    background-color: rgba(41, 149, 240, 1);
}
.energy_legend_bx ul li span.dg_legend:before{
    background-color: rgba(89, 106, 120, 1);
}
.energy_navi_table span{
    color: #838383;
}
.energy_navi_table span.energy_device{
    min-width: 120px;
    text-align: center;
    color: #333333;
}
.use_time_total{
    position: absolute;
    right: 20px;
    top:20px;
}
.use_time_total span{ 
color: #838383;
font-size: 16px;
}
.energy_navi_tit .swithc_box{
    margin-bottom: 25px;
}
.energy .btn-group-lg > .btn {
    min-width: 80px;
}
.energy_navi_current h1{
color: #2995f0;
font-size: 36px;
}
/*공기질*/
.air-chart-y span{
    color: #838383;
    font-size: 14px;
}

/*기기관리*/
.table-card {
    border-radius: 10px;
    border:1px solid #c8c8c8;
}
.table-card .table{
    
margin-bottom: 0;
}
.table-card .table thead{
background-color: #e5e9ec;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #c8c8c8;
}

.table-card.device-table .table thead th{
    text-align: center;
color: #333333;
font-size: 16px;
vertical-align: middle;
}
.table-card.device-table .table td{
    text-align: center;
    font-size: 16px;
    color: #333;
    vertical-align: middle;
}
.scrollbar_light .table-card .table{
    width: auto;
    padding-bottom: 40px;
}
.scrollbar_light .table-card .table thead th{
    white-space: nowrap;
}
.scrollbar_light .table-card .table td{
    text-align: center;
    font-size: 16px;
    color: #333;
    vertical-align: middle;
        white-space: nowrap;
}

.btn-outline-primary{
        color: #1b8cec;
    border-color: #1b8cec;
    background: #fff;
}

.btn-rounded{
    border-radius: 20px;
}

.table-card.device-table .table .btn{
    padding: 5px 40px;
    min-width: 100px;
}
.table-navigation{
    text-align: center;
}

.table-navigation .pagination > li > a, .table-navigation .pagination > li > span{
font-size: 16px;
    padding: 12px 18px;
}

/*연동제어*/
.interlock-list .interlock_items{
    margin: 20px 0px;
}
.interlock-list .interlock_items .interlock_item{
        padding: 10px;
    border-radius: 5px;
    border: 1px solid #c8c8c8;
    margin: 10px 0px;
    width: 100%;
    display: flex;
    padding-right: 70px;
    position: relative;
    justify-content: space-between;
    cursor: pointer;
}
.interlock-list .interlock_items .interlock_item span{
    font-size: 20px;
}
.interlock-list .interlock_items .interlock_item.active{
    border:1px solid #3d97ff;
}
.interlock-list .interlock_items .interlock_item.active span{
    color:#3d97ff;
}
.time-form-group select.sm-select{
        min-width: 80px;
}
/*그룹관리*/
.tit-with-btn .btn{
position: relative;
    top: -5px;
}
.content .card .panel-default > .panel-heading{
    background:none;
    background-color: #fff;
    position: relative;
}
.content .card .panel-default > .panel-heading h4{
    font-size: 18px;
}
.content .card .panel-default > .panel-heading h4 a.collapsed:after{
    content: '▼';
    font-size: 10px;
    color: #838383;
    padding:20px;
    position: absolute;
    right: 0px;
    top: 0px;
}
.content .card .panel-default > .panel-heading h4 a:after{
    content: '▲';
    font-size: 10px;
    color: #838383;
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 20px;
}

.group-setting .group-selected, .group-setting .ungroup{
    width: calc(50% - 30px);
    display: inline-block;
    float: left;
}
.group-setting-btns{
        width: 40px;
    display: inline-block;
    height: 100px;
    float: left;
}


@media (max-width: 1439px) {
 .control-device {
    width: 25%;
}
.all-control-btn {
    width: 100%;
    display: block;
}
.all-control-btn button {
    width: 100%;
    /* height: 100px; */
    font-size: 20px;
    border-radius: 30px;
    display: block;
        height: 50px;
    margin-top: 10px;
}
.all-control h5 {
    font-size: 18px;
    margin: 20px 0px 40px;
}
.setting-group .btn {
    width: 100%;
    height: 80px;
    font-size: 14px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 8px 6px;
}
.dash_table tbody td.text-date {
    font-size: 10px;
}
.dash_table table tbody td {

    font-size: 14px;
}
.main-chart-title {
    margin: 15% auto;
}
.main-chart-title h5 {
    font-size: 18px;
    margin: 0;
}
.main-chart-title h3 {
    font-size: 24px;
    margin: 0;
}
.main-chart-title h3 span {
    font-size: 32px;
}
}


@media (max-width: 1199px) {
 .control-device {
    width: 33.333%;
}
.topswiper-bx {
    display: inline-block;
    overflow: hidden;
    max-width: 260px;
}
.air-chart-01, .air-chart-02 {
    position: absolute;
    margin-top: -27%;
}

}
.history .search-filter .row{
    margin: 0;
}
.history .search-filter .form-group label{
    float: left;
    min-width: 150px;
    padding: 10px 0px;
}


.card-header .check_box input[type="checkbox"] + label {
    font-size: 20px;
    line-height: 20px;
}

.d-inline-block{
    display: inline-block !important;
}
.d-inline-flex{
    display: inline-flex !important;
}

h2.sub-tit{
    font-size: 24px;
    padding-left: 18px;
    margin-bottom: 20px;
}
h2.sub-tit span{
    font-size: 16px;
    color: #2995f0;
    padding-left:10px;
}
h2.sub-tit:before{
width: 6px;
height: 24px;
background-color: #2995f0;
content: '';
position: absolute;
left: 10px;

}


/*=================left navibar begin=========================================*/


.gw-nav-list {
  margin: 0;
  padding: 0;
  list-style: none
}

.gw-nav-list>li:first-child { border-top: 0; }

.gw-nav-list>li {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #fcfcfc;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  text-decoration: none;
  text-align: center;
}
 @-webkit-keyframes 
arrow-slide {  0% {
}
 100% {
-webkit-transform:rotate(225deg);
z-index:3
}
}
 @-webkit-keyframes 
arrow-slide1 {  0% {
}
 100% {
-webkit-transform:rotate(225deg);
z-index:3
}
}

.gw-nav-list>li.arrow-down:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-top: 1px solid #bababa;
  border-left: 1px solid #bababa;
  -webkit-transform: rotate(45deg);
  -webkit-animation: arrow-slide .5s 0s ease both;
}

.gw-nav-list>li.init-arrow-down:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-right: 1px solid #bababa;
  border-bottom: 1px solid #bababa;
  -webkit-transform: rotate(45deg);
}

.gw-nav-list>li.arrow-up:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-right: 1px solid #bababa;
  border-bottom: 1px solid #bababa;
  -webkit-transform: rotate(45deg);
  -webkit-animation: arrow-slide1 .5s 0s ease both;
}

.gw-nav-list>li.init-arrow-up:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-top: 1px solid #bababa;
  border-left: 1px solid #bababa;
  -webkit-transform: rotate(45deg);
}

.gw-nav-list>li.active { background-color: #dfedfa; }

.gw-nav-list>li>a {
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 16px 0 7px;
  background-color: #fff;
  color: #585858;
  text-shadow: none!important;
  font-size: 16px;
  text-decoration: none;
}

.gw-open > a { outline: 0; }

.gw-nav-list>li.gw-open { border-bottom-color: #e5e5e5 }

.gw-nav-list>li.gw-open>a {
  background-color: #fafafa;
  color: #1963aa
}
.gw-nav-list>li>a:hover {
color: #3d97ff;
}
.gw-nav-list .gw-open>a,
.gw-nav-list .gw-open>a:hover,
.gw-nav-list .gw-open>a:focus { background-color: #fafafa }

.gw-nav .gw-open > a,
.gw-nav .gw-open > a:hover,
.gw-nav .gw-open > a:focus {
  background-color: #eee;
  border-color: #428bca;
}

.gw-nav-list>li.active>a,
.gw-nav-list>li.active>a:hover,
.gw-nav-list>li.active>a:focus,
.gw-nav-list>li.active>a:active {
  background-color: #dfedfa;
  font-weight: bold;
  font-size: 16px;
}

.gw-nav-list>li>a,
.gw-nav-list .gw-nav-header { margin: 0 }
.gw-nav-list>li.active>a>[class*="icon-"] {
 font-weight: normal
}

.gw-nav-list>li.active>a:hover:before { display: none }

.gw-nav-list>li.active>ul{
  background-color: #f5f5f5;
}

.gw-nav-list li.gw-open>a:after { display: none }

.gw-nav-list>li a>.gw-arrow {
  display: inline-block;
  width: 14px!important;
  height: 14px;
  line-height: 14px;
  text-shadow: none;
  font-size: 18px;
  position: absolute;
  right: 11px;
  top: 11px;
  padding: 0;
  color: #666
}

.gw-nav-list>li a:hover>.gw-arrow,
.gw-nav-list>li.active>a>.gw-arrow,
.gw-nav-list>li.gw-open>a>.gw-arrow { color: #3d97ff }

.gw-nav-list>li>a>[class*="icon-"]:first-child {
  display: inline-block;
  vertical-align: middle;
  min-width: 30px;
  text-align: center;
  font-size: 18px;
  font-weight: normal;
  margin-right: 2px
}

.gw-nav-list>li.active .gw-submenu {
 display: block -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.13);
  -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.13);
  box-shadow: inset 0px 0px 5px rgba(0,0,0,0.13);
}

.gw-nav-list>li .gw-submenu {
  font-size: 13px;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
}

.gw-nav-list>li .gw-submenu>li {
  margin-left: 0;
  position: relative
}

.gw-nav-list>li .gw-submenu>li>a {
  display: block;
  position: relative;
  color: #616161;
  margin: 0;
  border-top: 1px dotted #e4e4e4;
  font-size: 16px;
  line-height: 40px;
  text-decoration: none;
}

.gw-nav-list>li .gw-submenu>li>a:focus { text-decoration: none }

.gw-nav-list>li .gw-submenu>li>a:hover {
  text-decoration: none;
  color: #3d97ff;
  background-color: rgba(25,25,50,0.1);
}

.gw-nav-list>li .gw-submenu>li.active {
  background-color: #f5f5f5
}

.gw-nav-list>li .gw-submenu>li.active>a { color: #3d97ff }

.gw-nav-list>li .gw-submenu>li a>[class*="icon-"]:first-child {
  display: none;
  font-size: 12px;
  font-weight: normal;
  width: 18px;
  height: auto;
  line-height: 12px;
  text-align: center;
  position: absolute;
  left: 10px;
  top: 11px;
  z-index: 1;
  background-color: #FFF
}

.gw-nav-list>li .gw-submenu>li.active>a>[class*="icon-"]:first-child,
.gw-nav-list>li .gw-submenu>li:hover>a>[class*="icon-"]:first-child { display: inline-block }

.gw-nav-list>li .gw-submenu>li.active>a>[class*="icon-"]:first-child { color: #c86139 }

.gw-nav-list>li>.gw-submenu>li:first-child>a { border-top: 0px; }

.gw-nav-list li .gw-submenu { overflow: hidden }

.gw-nav-list li.active.gw-open>.gw-submenu>li.active.gw-open>a.dropdown-toggle:after { display: none }

.gw-nav-list li.active>.gw-submenu>li.active>a:after { display: none }

.gw-nav-list li.active.gw-open>.gw-submenu>li.active>a:after { display: block }

.gw-nav-tabs li[class*=" icon-"],
.nav-tabs li[class^="icon-"] {
  width: 1.25em;
  display: inline-block;
  text-align: center
}
/*=================left navibar end=========================================*/

.nav-tab-wh li a{
    color: #bac0c6;
    background:none;
    border:0;
    font-size: 16px;
}
.nav-tab-wh li.active a, .nav-tab-wh li.active a:focus, .nav-tab-wh li.active a:hover{
    color: #1b8cec;
    border:0;
    border-bottom: 6px solid #1b8cec;
}

.nav-tabs.nav-tab-wh{
    border-bottom: 0;
}
.nav-tab-wh li a:hover{
    color: #768695;
    background:none;
    border:0;
}