@charset "UTF-8";

/* css */
@import url('/css/reset.css');
@import url('/css/tooltip.css');

/* font */
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* 구글 아이콘 셋팅 시작 */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url('/fonts/MaterialIcons-Regular.woff2') format('woff2'),
  url('/fonts/MaterialIcons-Regular.woff') format('woff'),
  url('/fonts/MaterialIcons-Regular.ttf') format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}


.material-symbols-outlined {
  font-variation-settings:
          'FILL' 1,
          'wght' 200,
          'GRAD' 0,
          'opsz' 24
}
/* 구글 아이콘 셋팅 끝 */
/* 구글 아이콘 사이즈 클래스 추가 */
.i-size-10{
  font-size: 10px;
}
.i-size-12{
  font-size: 12px;
}
.i-size-14{
  font-size: 14px;
}
.i-size-16{
  font-size: 16px;
}
.i-size-18{
  font-size: 18px;
}
.i-size-20{
  font-size: 20px;
}
.i-size-22{
  font-size: 22px;
}
.i-size-26{
  font-size: 26px;
}
.i-size-28{
  font-size: 28px;
}
.i-size-30{
  font-size: 30px;
}
.i-size-32{
  font-size: 32px;
}
.i-size-34{
  font-size: 34px;
}
.i-size-36{
  font-size: 36px;
}
.i-size-38{
  font-size: 38px;
}
.i-size-40{
  font-size: 40px;
}
.i-size-42{
  font-size: 42px;
}
.i-size-44{
  font-size: 40px;
}

.i-bold {
  font-weight: 800;
}
/*
 * Table of Contents
 *
 * 1.0 - Normalize
 * 2.0 - nav
 * 3.0 - header
 * 4.0 - login
 */
/********************************************************************************************************************************************************
 * 1.0 - Normalize
********************************************************************************************************************************************************/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, input, textarea, select, button, a, a:link {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 300;
  color: #3A3E44;
}

body {
  overflow: hidden;
  background: #1b1b1b;
}

::selection {
  background: #3A3E44;
  color: ;
}

p {
  line-height: 22px;
}

.text-space {
  display: none;
}
.sub {
  font-size: 12px !important;
}

/********************************************************************************************************************************************************
 * 2.0 - nav
********************************************************************************************************************************************************/

body{
  min-width: 1080px;
}

.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 230px;
  background: #27272d;
  z-index: 10;
  transition: all 0.2s ease;
}
.sidebar.close{
  width: 70px;
}

/****************************************  햄버거 메뉴  *******************************************/
.sidebar .logo-details{
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
.sidebar .logo-details i{
  font-size: 30px;
  color: #fff;
  height: 50px;
  min-width: 70px;
  text-align: center;
  line-height: 55px;
}
.sidebar .logo-details .logo_name{
  font-size: 22px;
  color: #fff;
  font-weight: 400;
  transition: 0.2s ease;
  transition-delay: 0s;
  margin-left: -4px;
}
.sidebar.close .logo-details .logo_name{
  transition-delay: 0s;
  opacity: 0;
  pointer-events: none;
}


/****************************************  네비  *******************************************/
.sidebar .nav-links{
  height: 100%;
  padding: 30px 10px 150px;
  overflow: auto;
}
.sidebar.close .nav-links{
  overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
  display: none;
}
.sidebar .nav-links li{
  position: relative;
  list-style: none;
  transition: all 0.2s ease;
  margin-bottom: 3px;
}

.sidebar .nav-links li .iocn-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
}
.sidebar.close .nav-links li .iocn-link{
  display: block;
}
.sidebar .nav-links li i{
  height: 50px;
  min-width: 78px;
  min-width: 48px;
  text-align: center;
  line-height: 52px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.icon-link i{
  margin-right: 15px;
}
.sidebar .nav-links li i:last-child{
  line-height: 52px;
  opacity: 0.4;
}
.sidebar .nav-links li.showMenu i.arrow{
  transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow{
  display: none;
}
.sidebar .nav-links li a{
  display: flex;
  align-items: center;
  text-decoration: none;
}
.sidebar .nav-links li a .link_name{
  font-size: 17px;
  font-weight: 300;
  color: #fff;
  transition: all 0.2s ease;
  white-space: nowrap;
  padding-left: 10px;
}
.sidebar.close .nav-links li a .link_name{
  opacity: 0;
  pointer-events: none;
  flex-wrap: nowrap;
}


.sidebar .nav-links li.showMenu .sub-menu{
  display: block;
}

.sidebar.close .nav-links li .sub-menu a{
  padding-left: 10px;
  padding-right: 10px;
}


.sidebar.close .nav-links li .sub-menu{
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  padding: 10px 10px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu{
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.2s ease;
}
.sidebar .nav-links li .sub-menu .link_name{
  display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
  font-size: 18px;
  opacity: 1;
  display: block;
  color: white;
  font-weight: 400;
}
.sidebar .nav-links li .sub-menu.blank{
  opacity: 1;
  pointer-events: auto;
  padding: 6px 10px;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
  top: 50%;
  transform: translateY(-50%);
}

.lnb-active {
  background: #bd1200;
  border-radius: 5px;
  color: #fff !important;
}



.sidebar .nav-links li .sub-menu{
  padding: 6px 6px 14px 80px;
  padding: 6px 0;
  margin-top: -10px;
  background: #27272d;
  display: none;
}
.sidebar .nav-links li .sub-menu a{
  color: #dfdfdf;
  font-size: 16px;
  padding: 6px 0;
  white-space: nowrap;
  transition: all 0.2s ease;
  padding-left: 59px;
}



/****************************************  네비 open hover   *******************************************/
.sidebar .nav-links li .sub-menu a{
  color: #dfdfdf;
  font-size: 16px;
  padding: 6px 0;
  white-space: nowrap;
  transition: all 0.2s ease;
  padding-left: 59px;
}
.sidebar .nav-links li .sub-menu a:hover{
  color: #fff;
}
.sidebar.close .nav-links li .sub-menu li:first-child a:hover{
  color: #dfdfdf;
  cursor: default;
}
.sidebar.close .nav-links li .sub-menu.blank li:first-child a:hover{
  color: #fff;
  cursor: pointer;
}

.sidebar .nav-links > li > a:hover,
.sidebar .nav-links li div:hover,
.sidebar .nav-links li ul li:hover{
  background: #bd1200;
  border-radius: 5px;
}
.sidebar .nav-links .icon-link {
  pointer-events: none;
}

/****************************************  네비 close hover   *******************************************/
.sidebar.close .nav-links > li > a:hover,
.sidebar.close .nav-links li div:hover{
  border-radius: 5px;
}

.sidebar.close .nav-links li:hover{
  background: #bd1200;
  border-radius: 5px;
}

.sidebar.close .sub-menu.blank li:first-child:hover{
  background: #bd1200;
}
.sidebar.close .sub-menu li:first-child:hover{
  background: transparent;
  cursor: default;
}

/****************************************  뷰포트 넓이  *******************************************/
.home-section {
  background: #F4F7FA;
}
.home-section,
header{
  position: relative;
  height: 100vh;
  left: 230px;
  width: calc(100% - 230px);
  transition: all 0.15s ease;
  min-width: 1690px;
  min-width: 1120px;
  overflow-y: scroll;
}

.sidebar.close ~ .home-section,
.sidebar.close ~ .home-section header{
  left: 70px;
  width: calc(100% - 70px);
  /*min-width: 1850px;*/
  min-width: 1280px;
  overflow-y: scroll;
}

.home-content{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  z-index: 900;
}


/********************************************************************************************************************************************************
 * 3.0 - header
********************************************************************************************************************************************************/

header {
  background: #E2E9F0;
  padding: 9px 25px 10px;
  height: 48px;
  position: fixed;
  top: 0;
  overflow: visible;
  color: #74797F;
}
.sidebar.close ~ .home-section header{
  overflow: visible;
}

.home-section .header-info{
  justify-content: space-between;
  border-bottom: 2px solid #F4F7FA;
}
.header-info .bname{
  font-size: 26px !important;
  font-weight: 700 !important;
  display: flex;
  font-style: italic;
  color: #bd1200;
}
.header-info .bname span{
  font-size: 18px !important;
  line-height: 30px;
  padding-left: 10px;
  font-weight: 400;
  /*
  color: #74797F;
  */
  font-style: normal;
}
.home-section .header-info .info{
  display: flex;
  justify-content: space-between;
  color: #74797F;
}
.login-btn a{
  color: #74797F;
  font-size: 15px;
}
.info div h2,
.home-section .header-info .info div{
  font-size: 16px;
  color: #74797F;
  display: inline;
  display: flex;
  align-items: center;
  margin-left: 4px;
}
.home-section .header-info .bx-menu,
.home-section .header-info .bname{
  font-size: 35px;
}
.home-section .header-info .bx-menu{
  cursor: pointer;
  margin-right: 10px;
}

.logo-details i{
  cursor: pointer;
}
.home-section .header-info .bname{
  color: #bd1200;
  font-size: 24px;
  font-weight: bold;
}

#content {
  background: #F4F7FA;
  padding: 70px 25px 15px;
  min-height: 100%;
  align-items: flex-start;
  overflow-x: ;
}

.bx-key{
  transform: rotate(-90deg);
}

.bx-menu:before{
  content: '';
}
.info-wea i{
  margin-left: 5px;
}
.info-wea span:last-child{
  margin-left: 3px;
}
.info-pro{
  margin-left: 10px !important;
}
.info-pro::before{
  content: '｜';
  margin-right: 13px;
  color: #C9CFD6;
}
.info-pro i{
  background: #c5d0db;
  border-radius: 8px;
  margin-right: 8px;
}
.login-btn{
  margin-left: 11px !important;
  /*
  background: url(/img/i-login.svg) right center no-repeat;
  */
  display: flex;
  flex-direction: row-reverse;

}

.login-btn a{
  display: flex;
  align-items: center;
  padding: 4px 10px;
  /* background: #D4DDE7; */
  border-radius: 30px;
}
.login-btn a:hover{
  background: #d6e0ea;
  color: #;
  transition: all 0.3s;
}
.login-btn a:hover i {
  opacity: 0.8;
}
.login-btn i{
  margin-left: px;
  padding-top: 1px;
  padding-right: 0px;
  font-size: 20px;
}
.i-28{
  font-size: 28px;
}
.info-temp::before{
  content: '｜';
  margin-right: -2px;
  color: #C9CFD6;
}
.info-temp{
  margin-left: 5px !important;
}
.info-temp i,
.info-hum i{
  margin-left: 5px;
}
.info-time{
  width: 195px;
  flex-direction: row;
  text-align: left;
}
.info{
  /* margin-right: 10px; */
}
.info-pro,
.home-content h2 {
  cursor: default;
}
.login-btn span{
  vertical-align: middle;
}

.text {
  display: flex;
  vertical-align: baseline;
}
/********************************************************************************************************************************************************
 * 4.0 - 로그인
********************************************************************************************************************************************************/

.content{
  width: 100vw;
  height: 100vh;
  background: url(/img/apt.png) center/cover no-repeat, #F7F7F7;
}

.login_wrap{
  position: absolute;
  top: 17%;
  left: 50%;
  margin-left: -300px;
}
.content .login_wrap h2 {
  text-align: center;
  font-size: 40px;
  padding-bottom: 25px;
  font-weight: 800;
  color: #bd1200;
}

form.login_form {
  width: 600px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border-radius: 5px;
  border: solid 1px #C7D3E0;
  padding: 30px;
}

.login_form > .input-box {
  position: relative;
  margin: 10px 0;
}

.login_form > .input-box > input {
  background: transparent;
  border: none;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #ccc;
  padding: 20px 0px 5px 0px;
  font-size: 14pt;
  width: 100%;
}
/*
.coin_pur > .input-box > input:hover {
  background: #F3F3F3;
  border: 1px solid #1b1b1b;
}
*/

.login_form > .input-box > input::placeholder {
  color: transparent;
}

.login_form > .input-box > input:placeholder-shown + label {
  color: #aaa;
  font-size: 14pt;
  top: 15px;
}

.login_form > .input-box > input:focus + label,
.login_form > .input-box > label {
  color: #bd1200;
  font-size: 10pt;
  pointer-events: none;
  position: absolute;
  left: 0px;
  top: 0px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}

.login_form > .input-box > input:focus,
.login_form > .input-box > input:not(:placeholder-shown) {
  border-bottom: solid 1px #bd1200;
  outline: none;
}

.login_btn {
  background: #bd1200;
  border: none;
  color: white;
  border-radius: 4px;
  width: 100%;
  height: 55px;
  font-size: 14pt;
  margin-top: 50px;
}

.login_btn:hover {
  background: #9f1001 !important;
  border: none;
  color: white;
  cursor: pointer;
}

.autologin {
  text-align: left;
  float: left;
  margin: 10px 0px;
}

#forgot {
  text-align: right;
  color: #1b1b1b;
  margin: 10px 0px;
  opacity: 0.5;
  float: right;
}

.login-logo {
  width: 200px;
  height: 120px;
  position: fixed;
  top: 15px;
  left: 40px;
  background: url(/img/lhlogo.svg) no-repeat;
}


/********************************************************************************************************************************************************
 * 5.0 컨텐츠 공통
********************************************************************************************************************************************************/

.fixed-width{
  margin: 0 auto;
}
.home-section .fixed-width {
  /*max-width: 1640px;*/
  max-width: 1070px;
}

.sidebar.close ~ .home-section .fixed-width {
  /*max-width: 1800px;*/
  max-width: 1230px;
}
.container {
  position: relative;
}
.container-wrap  {
  /* min-width: 1620px; */
  min-width: 1430px;
  overflow-x: ;
  /* position: relative; */
}
.container-wrap h1 {
  margin-bottom: 15px;
}


h1{
  color: #9499a1;
  font-weight: 400;
  font-size: 22px;
}

.container > h3,
.container h3 {
  font-size: 18px;
  /*
font-weight: 400;
color: #b62d2d;
*/
}

/****************************************  캘린더 area *******************************************/
.data-area {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  margin-bottom: 8px;
}
.flex-left{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-left li{
  margin-right: 20px;
  display: flex;
  align-items: center;
}


.dt_select {
  width: 330px;
  height: 35px;
  border: 1px solid #C7D3E0;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
li.dt_select  {
  padding: 0 10px;
}
.dt_select input[type=radio] {
  display: none;
}
.dt_select input[type=radio]+label {
  cursor: pointer;
  width: 16%;
  text-align: center;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dt_select input[type=radio]+label:not(:last-child)::after {
  /* content: '';
  display: block;
  width: 1px;
  height: 35px;
  border-right: 1px solid #C7D3E0;
  position: relative;
  top: 0px;
  left: 15px; */
}


.dt_select input[type=radio]:checked+label {
  color: #bd1200;
  font-weight: 400;
}
.dt_select input[type=radio]:checked+label::before {
  content: '．';
  font-size: 20px;
  font-weight: 800;
  display: block;
  width: 0;
  position: relative;
  top: -12px;
  left: -12px;
}
a.id_creation {
  padding: 8px 35px;
  border-radius: 4px;
  border: 1px solid #bd1200;
  background: #bd1200;
  color: #fff;
  height: 40px;
}
.calendar input {
  height: 35px;
  border: 1px solid #C7D3E0;
  border-radius: 4px;
  font-size: 1rem;
  color: #1b1b1b;
  padding-left: 15px;
  padding-right: 15px;
  background: transparent;
}
.calendar span{
  margin: 0 5px;
}

.form_control {
  cursor: pointer;
  height: 35px;
  border-radius: 4px;
  padding-left: 12px;
  padding-right: 10px;
  border: 1px solid #C7D3E0;
  width: 118px;
  font-size: 1rem;
  background: url(/img/i_arrow_d.svg) no-repeat 95% 50%, transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form_control_submit {
  cursor: pointer;
  height: 40px;
  border-radius: 4px;
  padding-left: 12px;
  padding-right: 10px;
  border: 1px solid #C7D3E0;
  width: 195px;
  font-size: 1rem;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form_control_search {
  cursor: pointer;
  height: 35px;
  border-radius: 4px;
  padding-left: 12px;
  padding-right: 10px;
  border: 1px solid #C7D3E0;
  width: 400px;
  font-size: 1rem;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form_control_search:hover {
  border: 1px solid #bd1200;
}


.refresh ~ span {
  margin-right: 10px;
  min-width: 59px;
}
.dt_select:hover,
.calendar input:hover,
.form_control:hover {
  border: 1px solid #bd1200;
  /*
  background: rgba(255,255,255,0.6);
  background: #E2E9F0;*/
}
.form_control:hover{
  background: url(/img/i_arrow_d.svg) no-repeat 95% 50%;
  /*background: #E2E9F0;*/
}
select::-ms-expand {
      display: none;
}

.refresh {
  margin-right: 2px;
  opacity: 0.5;
}


.flex-right {
  display: flex;
}
.flex-right button:last-child{
  margin-left: 20px;
}
/****************************************  btn *******************************************/


.btn-line-submit,
.btn-line-default,
.btn-line-black,
.btn-line-red,
.btn-fill-red {
  border: 1px solid #C7D3E0;
  width: 195px;
  height: 35px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  line-height: 1px;
  background: transparent;
}
.btn-line-default i,
.btn-line-black i,
.btn-line-red i,
.btn-fill-red i{
  margin-left: 10px;
}

.btn-line-black {
  border: 1px solid #1b1b1b;
}

.btn-line-red {
  border: 1px solid #bd1200;
  color: #bd1200;
}
.btn-fill-red {
  border: 1px solid #bd1200;
  color: #fff;
  background: #bd1200;
}

.btn-line-default:hover{
  border: 1px solid #bd1200;
  color: #bd1200;
}
.btn-line-red:hover{
  background: rgba(255,255,255,0.6);
  color: #bd1200;
  background: rgba(189, 18, 0, 0.1);
}
.btn-line-red:active,
.btn-fill-red:active{
  color: #fff;
  background: rgba(189, 18, 0, 0.7);
}
.btn-line-default:active{
  background: rgba(255,255,255,0.6);
}
/****************************************  리스트 area *******************************************/
th, td {
  line-height: 20px;
}

.list-area{
  border: 1px solid #C7D3E0;
  border-radius: 8px;
  width: 100%;
}
.list-area table{
  width: 100%;
}
.list-area thead tr{
  border-bottom: 1px solid #C7D3E0;
}
.list-area thead tr th{
  padding: 10px 10px;
  vertical-align: middle;
  font-weight: 400;
  border-right: 1px solid #C7D3E0;
}
.list-area thead tr th:last-child{
  border-right: 0;
}
.list-area thead {
  color: #bd1200;
}
.list-area thead tr:first-child th:first-child{
  border-radius: 8px 0 0 0;
}
.list-area thead tr:first-child th:last-child{
  border-radius: 0 8px 0 0;
}


.list-area tbody tr th,
.list-area tbody tr td,
.list-area tfoot tr th,
.list-area tfoot tr td {
  padding: 6px 6px;
  /* vertical-align: top; */
  text-align: center;
  vertical-align: middle;
}

.list-area tbody tr:nth-child(2n-1) {
  background: #EAF0F4;
}
.list-area tbody tr:last-child th:first-child,
.list-area tbody tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
}
.list-area tbody tr:last-child th:last-child,
.list-area tbody tr:last-child td:last-child {
  border-radius: 0 0 8px 0;
}
.list-area tbody tr:nth-last-child(3) th:first-child,
.list-area tbody tr:nth-last-child(3) td:first-child {
  border-radius: 0 0 0 8px;
}

/* tfoot 이 추가로 붙은 테이블에 레디어스 0 작업 & tfoot 마지막 모서리 레디어스 추가 */
.br-zero tbody tr:last-child th:first-child,
.br-zero tbody tr:last-child td:first-child,
.br-zero tbody tr:last-child th:last-child,
.br-zero tbody tr:last-child td:last-child,
.br-zero tbody tr:nth-last-child(3) th:first-child,
.br-zero tbody tr:nth-last-child(3) td:first-child {
  border-radius: 0;
}
.list-area tfoot tr:last-child th:first-child {
  border-radius: 0 0 0 8px;
}
.list-area tfoot tr:last-child td:last-child {
  border-radius: 0 0 8px 0;
}


.list-area tbody tr,
.list-area tfoot tr {
  border-bottom: 1px solid #C7D3E0;
}
.list-area tbody tr:last-child,
.list-area tfoot tr:last-child{
  border-bottom: 0;
}
.list-area thead span {
  font-weight: 300;
  font-size: 15px;
}

.top-sapce th,
.top-sapce td{
  padding-top: px;
}
.bottom-sapce th,
.bottom-sapce td{
  padding-bottom: px;
}
/****************************************  게시판 페이지 *******************************************/
.board_page {
  margin-top: 10px;
  text-align: center;
}

.board_page a {
  display: inline-block;
  width: 32px;
  font-size: 16px;
  vertical-align: middle;
  line-height: 100%;
  padding: 10px 0;
}

.board_page a:last-child {
  border: 1px solid #CFCFCF;
}

.board_page a.bt {
  font-size: 0.9rem;
  border: 1px solid #C7D3E0;
  background: ;
  border-radius: 4px;
}

.board_page a.p_num {
  opacity: 0.5;
}

.board_page a.p_num.on {
  font-weight: 500;
  opacity: 1;
  color: #bd1200;
}
.prev{
  margin-right: 5px;
}
.next {
  margin-left: 5px;
}
a.next,
a.last,
a.first,
a.prev {
  padding: 3px 0;
  color: #3A3E44;
}
/****************************************  게시판 페이지 *******************************************/
.tapbar {
  margin-bottom: 15px;
  border-bottom: 1px solid #bd1200;
}

.tapbar ul li{
  display: inline-block;
}
.tapbar ul li a {
  display: block;
  width: 160px;
  padding: 9px 0;
  background: #E2E9F0;
  margin-right: 5px;
  text-align: center;
  border-radius: 8px 8px 0 0;
  font-size: 17px;
}

.tap-active{
  color: #fff !important;
  font-weight: 400;
  background: #bd1200 !important;
}




/********************************************************************************************************************************************************
 * 5.1 보고서 - 전력경보 : report-alert
********************************************************************************************************************************************************/
.report-table tbody tr:nth-child(3n-2) {
  border-top: 1px solid #C7D3E0;
}
.report-table tbody tr th:first-child{
  text-align: center;
  vertical-align: middle;
}
.report-table tbody tr th,
.report-table tbody tr td{
  /*padding: 5px 10px;*/
  /* text-align: left; */
}
.report-table tbody tr:first-child {
  border-top: 0;
}
.report-table colgroup col:nth-child(1) {
  width: 7%;
}
.report-table colgroup col:nth-child(2) {
  width: 10%;
}
.report-table colgroup col:nth-child(3) {
  width: 43%;
}
.report-table colgroup col:nth-child(4) {
  width: 30%;
}
.report-table colgroup col:nth-child(5) {
  width: 10%;
}


.report-table tr td:last-child{
  text-align: center;
}
.report-table tr th:first-child{
  border-right: 1px solid #C7D3E0;
}

/********************************************************************************************************************************************************
 * 5.2-1 보고서 - 전력시보 : report-time-1
********************************************************************************************************************************************************/

.report-table-time-1 thead tr th{
  padding: 6px 3px;
}
.report-table-time-1 tbody tr th,
.report-table-time-1 tbody tr td{

  vertical-align: middle;
  text-align: center;
}
.report-table-time-1 tbody tr:last-child td:last-child{
  text-align: ;
}
.report-table-time-1 colgroup col {
  width: 6.66%;
}
.report-table-time-1 colgroup col:nth-child(n+2):nth-child(-n+7) {
  width: ;
}
/* .report-table-time-1 colgroup col:last-child {
  width: 20%;
} */


.report-table-time-1 thead tr:first-child th:nth-child(1),
.report-table-time-1 thead tr:first-child th:nth-child(2){
  /* border-right: 1px solid #C7D3E0; */
}
.report-table-time-1 thead tr:first-child th:nth-child(4){
  border-left: 1px solid #C7D3E0;
}
.report-table-time-1 thead tr:first-child th:nth-child(2),
.report-table-time-1 thead tr:first-child th:nth-child(3){
  border-bottom: 1px solid #C7D3E0;
}
.report-table-time-1 thead tr:last-child th:nth-child(3){
  border-right: 1px solid #C7D3E0;
}

.report-table-time-1 thead tr:last-child th {
  color: #0694ba;
  font-weight: 400;
}

/********************************************************************************************************************************************************
 * 5.2-2 보고서 - 전력시보 : report-time-2
********************************************************************************************************************************************************/
.report-table-time-2 colgroup col {
  width: 6.15%;
}

/********************************************************************************************************************************************************
 * 5.2-3 보고서 - 전력시보 : report-time-3
********************************************************************************************************************************************************/
.report-table-time-3 colgroup col {
  width: 6.7%;
}
.report-table-time-3 colgroup col:first-child{
  width: 5%;
}
.report-table-time-3 thead tr:nth-child(2) th:nth-child(2){
  border-left: 1px solid #C7D3E0;
}
.report-table-time-3 thead tr:nth-child(2) th:nth-child(n+8):nth-child(-n+9),
.report-table-time-3 thead tr:last-child th:nth-child(5){
  border-right: 1px solid #C7D3E0;
}


/********************************************************************************************************************************************************
 * 5.2-4 보고서 - 전력시보 : report-time-4
********************************************************************************************************************************************************/
.report-table-time-4 colgroup col {
  width: 8.6%;
}
.report-table-time-4 colgroup col:first-child {
  width: 5%;
}
.report-table-time-4 thead tr th:not(:first-child) {
  border-left: 1px solid #C7D3E0;
}
.report-table-time-4 thead tr:nth-child(2) th:nth-child(n+8):nth-child(-n+9),
.report-table-time-4 thead tr:last-child th:nth-child(5) {
  border-right: 1px solid #C7D3E0;
}





/********************************************************************************************************************************************************
 * 5.3 보고서 - 전력일보 : report-day-3
********************************************************************************************************************************************************/
.report-table-day-1 colgroup col {
  width: 7%;
}

.report-table-day-1 colgroup col:last-child {
  width: 7%;
}
.report-table-day-1 colgroup col:nth-child(n+1):nth-child(-n+6){
  width: 6.5%;
}
.time-area {
  padding: 0 0 10px;
  vertical-align: middle;
  color:  #767b85;
  color: rgba(58, 62, 68, 0.7);
}
.time-area span,
.time-area strong {
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
}
.time-area i {
  vertical-align: middle;
  color: rgba(58, 62, 68, 0.3);
}

tfoot {
  border-top: 4px double #2a2a2b;
}
tfoot th {
  color: #bd1200;
  font-weight: 400;
}
tfoot tr:nth-child(odd) {
  background: #EAF0F4;
}
tfoot tr th {
  border-right: 1px solid #C7D3E0;
  background: #F4F7FA;
}



/********************************************************************************************************************************************************
 * 5.4 보고서 - 전력일보 : report-day-3
********************************************************************************************************************************************************/

.report-table-day-3 colgroup col{
  width: 6.1%;
}
.report-table-day-3 colgroup col:nth-child(n+1):nth-child(-n+6){
  width: 5.5%;
}
.report-table-day-3 thead tr:nth-child(2) th:nth-child(1),
.report-table-day-3 thead tr:nth-child(2) th:nth-child(2),
.report-table-day-3 thead tr:nth-child(2) th:nth-child(8),
.report-table-day-3 thead tr:nth-child(2) th:nth-child(9),
.report-table-day-3 thead tr:last-child th:nth-child(6),
.report-table-day-3 thead tr:last-child th:nth-child(8){
  border-right: 1px solid #C7D3E0;
}
/********************************************************************************************************************************************************
 * 5.4 보고서 - 전력월보 : report-month-1
********************************************************************************************************************************************************/
.time-area li {
  display: inline-block;
  margin-right: 15px;
}



/********************************************************************************************************************************************************
 * 6.1 경보 리스트 - 경보 리스트 alarmlist-alarmlist
********************************************************************************************************************************************************/

.alarmlist-alarmlist colgroup col{
  width: 15.83%;
}
.alarmlist-alarmlist colgroup col:first-child{
  width: 5%;
}
.alarmlist-alarmlist colgroup col:nth-child(5) {
  /* width: 19%; */
}


.search-input {
  border: 1px solid #CFCFCF;
  border-radius: 4px;
  font-size: 1rem;
  color: #272727;
  padding-left: 15px;
  padding-right: 15px;
  width: 100px;
}



/********************************************************************************************************************************************************
 * 6.2 경보 리스트 - 계측기 조회/관리 alarmlist-instrument
********************************************************************************************************************************************************/
.alarmlist-instrument colgroup col{
  width: 8.6%;
}

.alarmlist-instrument colgroup col:first-child {
  width: 5%;
}
/* .alarmlist-instrument colgroup col:nth-child(3){
  width: 7%;
}
.alarmlist-instrument colgroup col:last-child{
  width: 13%;
} */


.date-check-red span,
.date-check span,
.check span,
.check-blue span,
.check-red span,
.check-gray span,
.yes span,
.no span,
.abnormal span,
.normal span,
.incomplete span,
.error span,
.limit span,
.use span,
.unused span {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  padding: 4px 0;
  margin: 0 15px;
  font-size: 15px;
}
.normal span{
  /* padding: 4px 0 4px 28px;  */
  /* 아이콘 & 텍스트 오른쪽 이동*/
}

/* .date-check,
.date-check-red, */
.check,
.check-blue,
.check-red,
.check-gray,
.normal,
.incomplete,
.error,
.limit,
.use,
.unused {
  /* padding: 2px 20px !important; */
  vertical-align: middle;
}


.check span,
.check-blue span {
  background: #42bbff;
}
.no span,
.error span,
.limit span,
.unused span {
  background: #FF5B5B;
  color: #fff;
}
.normal span,
.use span {
  background: #BAD7A5;
}
.incomplete span {
  background: #42bbff;
  /* color: #fff; */
}

/* .normal span i {
  color: #83a26d;
  margin-left: 5px;
} */

.check-red span {
  cursor: pointer;
  /* border: 1px solid #42bbff; */
  /* background: rgba(66, 187, 255, 0.1); */
  /* color: #0f91dd; */
  background: #F4F7FA;
  /* border: 1px solid #3A3E44;
  color: #3A3E44; */
  padding: 2px 0;
  border: 1px solid #bd1200;
  color: #bd1200;
}

.check-red span:hover {
  border: 1px solid #bd1200;
  color: #bd1200;
  background: rgba(189, 18, 0, 0.1);
}

.check-gray span {
  cursor: pointer;
  /* border: 1px solid #42bbff; */
  /* background: rgba(66, 187, 255, 0.1); */
  /* color: #0f91dd; */
  background: #F4F7FA;
  /* border: 1px solid #3A3E44;
  color: #3A3E44; */
  padding: 2px 0;
  border: 1px solid #5c626c;
}

.check-gray span:hover {
  border: 1px solid #bd1200;
  /* background: rgba(189, 18, 0, 0.1); */
  color: #bd1200;
}
/*
.abnormal span i{
  color: #b62d2d;
  margin-left: 5px;
}
*/


/********************************************************************************************************************************************************
 * 6.3 경보 리스트 - 요금제 조회/관리 alarmlist-fee
********************************************************************************************************************************************************/
.alarmlist-fee colgroup col{
  width: 25%;
}
.alarmlist-fee thead th,
.alarmlist-fee tbody tr td,
.alarmlist-fee tbody tr th{
  border-right: 1px solid #C7D3E0;
}
.alarmlist-fee thead th:last-child,
.alarmlist-fee tbody tr td:last-child,
.alarmlist-fee tbody tr th:last-child{
  border-right: 1px solid #C7D3E0;
}
.alarmlist-fee tbody tr th {
  /*background: #F4F7FA;*/
  border-bottom: 1px solid #CFCFCF;
  color: #b62d2d;
  font-weight: 400;
}
.alarmlist-fee tbody tr:last-child th{
  border-bottom: 0;
}


.horizontal {
  color: #b62d2d;
  width: 29px;
  transform: rotate(-90deg);
  margin-left: -13px;
  font-weight: 500;
}
.alarmlist-fee-sec2 {
  margin-top: 40px;
}


/********************************************************************************************************************************************************
 * 7.1 도움말 - 프로그램 설명 help-program
********************************************************************************************************************************************************/

.help-program colgroup col:nth-child(n+1):nth-child(-n+2){
  width: 5%;
}
.help-program colgroup col:nth-child(3){
  width: 10%;
}
.help-program colgroup col:nth-child(4){
  width: 72%;
}
.help-program colgroup col:nth-child(5){
  width: 8%;
}
tbody tr th input[type=checkbox] {
  transform : scale(1.2);
  cursor: pointer;
}
.help-program tbody td:nth-child(4) {
  /* text-align: left !important; */
  cursor: pointer;
}

/********************************************************************************************************************************************************
 * 7 전체상태 state
********************************************************************************************************************************************************/
.state colgroup col{
  width: 12.5%;
}
.state-sec1 tbody tr th:first-child{
  background: #F4F7FA;
}
.state-sec1 tbody tr th,
.state-sec1 tbody tr td{
  padding: 5px 6px;
}
.state-sec1 tbody tr th,
.state-sec1 tbody tr td{
  vertical-align: middle;
}
.state tbody tr th {
  border-right: 1px solid #CFCFCF;
  color: #b62d2d;
  /*background: #F4F7FA;*/
  font-weight: 400;
}
.state-sec2{
  margin-top: 25px;
}
.state-sec2 h3 {
  margin-bottom: 14px;
}
.state-sec2 .column3 {
  display: flex;;
  justify-content: space-between;
}
.state-sec2 .column3 div {
  width: 49.5%;
}

.state-sec2 tbody tr:first-child th {
  border-radius: 8px 0 0 0;
}
.state-sec2 tbody tr:first-child td{
  border-radius: 0 8px 0 0;
}

/********************************************************************************************************************************************************
 * 8.1 분석 - 절감 analysis-reduce
********************************************************************************************************************************************************/
.analysis-reduce colgroup col{
  width: 20%;
}
.anal-sec2 {
  /* margin-top: 10px; */
}
.analysis-reduce tbody tr th {
  border-right: 1px solid #CFCFCF;
  color: #b62d2d;
  background: #F4F7FA;
  font-weight: 400;
}

.test {
  background: green;
  height: 100px;
}
/********************************************************************************************************************************************************
 * 8.2 분석 - 소비 analysis-spend
********************************************************************************************************************************************************/
.analysis-spend colgroup col{
  width: 14.2%;
}
.analysis-spend-2 colgroup col{
  width: 16.6%;
}
.flex-left-tap {
  display: flex;
  align-items: center;
}
.dateTap-wrap {
  display: flex;
  justify-content: space-between;
}
.dateTap {
    border: 1px solid #C7D3E0;
    height: 35px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    line-height: 1px;
    background: transparent;
    padding: 0 18px;
    border-right: 0;
}
.dateTap-wrap li {
  margin-right: 0;
}
.dateTap-active {
  background-color: #bd1200;
  border: 1px solid #bd1200;
  color: #fff !important;
}
.dateTap-wrap li:first-child a {
  border-radius: 4px 0 0 4px;
}
.dateTap-wrap li:last-child a {
  border-radius: 0 4px 4px 0;
  border-right: 1px solid #C7D3E0;
}

.flex-left h3 {
  margin-right: 15px;
}
/********************************************************************************************************************************************************
 * 9 단지 배치 apt
********************************************************************************************************************************************************/
.tapbar-nomagin {
  margin-bottom: 0;
}
.dash-area-tap {
  /* background: #E2E9F0;
  height: calc(100vh - 170px);
  background: url(/img/apt.jpg) center/100% 100%, #E2E9F0; */
}


/********************************************************************************************************************************************************
 * 10 대시보드 dashboard
********************************************************************************************************************************************************/

.dash-area {
  /*background: #E2E9F0;*/
  height: calc(100vh - 172px);
  height: auto;
  max-width: 1650px;
  /* width: 1620px; */
  min-width: 1430px;
  margin: 0 auto;
}

.roundbox > div {
  border: 1px solid red;
  border-radius: 15px;
  box-shadow: 0 8px 14px -1px #d7e3f0;
  background: #fff;
  padding: 20px 30px;
  vertical-align: middle;
  display: flex;
  margin-bottom: 30px;
}

.shadowBox {
  border-radius: 15px;
  box-shadow: 0 5px 12px -1px #d7e3f0;
  background: #fff;
  padding: 15px 30px;
  vertical-align: middle;
  display: flex;
  margin-bottom: 10px;
}

.dash-area.main .row1 .shadowBox {
  height: 85px;
}
.dash-area.main .row2 .shadowBox {
  height: 85px;
}
.dash-area.main .row3 .p2,
.dash-area.main .row3 .p3,
.dash-area.main .row3 .p5,
.dash-area.main.row3 .p6 {
  /* height: 320px; */
  height: 310px;
}

.refresh-wrap {
  position: absolute;
  top: -43px;
  right: 10px;
  
  height: 32px;
  display: flex;
  justify-content: space-between;
  /* cursor: pointer; */
}
.refresh-wrap span {
  display: flex;
  align-items: center;
  margin-right: 6px;
}
.refresh-wrap .form_control {
  width: 80px;
  height: 32px;
}

.main .p4,
.main .p5,
.main .p6 {
  margin-bottom: 0;
}
.main .p4 h4,
.main .p6 h4 {
  padding-bottom: 20px;
}

/*******************************************************************************************
*******************************************************************************************
                                    1행 반응형태그로 수정
*******************************************************************************************
*******************************************************************************************/



/* 1행 공통*/
.row1 {
  display: flex;
  justify-content: space-between;
}
/* 1행 컬럼 사이즈 & 분할 */
.row1 .shadowBox {
  height: 72px;
}
.row1-1 {
  width: 42%;
}
.row1-2,
.row1-3 {
  width: 28%;
}
/* 쉐도우 박스 in */
.row1-1,
.row1-2,
.row1-3 {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

/* 쉐도우 박스 파티클 사이즈 공통 */
.row1 .p-icon {
  width: %;
  display: flex;
  margin-right: 6px;
}
.row1 .p-title {
  min-width: 100px;
  border-right: 1px solid #C7D3E0;
}
.row1 .p-sub {
  width: 20%;
  min-width: 110px;
  margin-left: 6px;
}
.row1 .p-text {
  width: 47%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 34px;
  font-weight: 500;
}
.row1 .p-icon,
.row1 .p-title,
.row1 .p-sub,
.row1 .p-text {
  display: flex;
  align-items: center;
}
.row1 .p-text span {
  font-size: 18px;
  font-weight: 300;
  padding-left: 6px;
  padding-top: 8px;
  color: #3A3E44;
}
.row1 .p-icon span{
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 1행 - 아이콘 */
.row1 .p-icon span {
  background: #E2E9F0;
}
.row1 .p-icon i {
  color: #969ca3;
}
.row1 .row1-1 .p-icon span {
  /*
  background: #fee3df;
  */
}
.row1 .row1-1 .p-icon i {
  /*
  color: #bd1200;
  */
}
.row1 .row1-3 .p-icon i {
  /*
  font-weight: 700;
  */
}
/* 1행 파티클 공통 */
.row1 .p-title h3 {
  font-weight: 400;
  line-height: 23px;
}
.row1 .p-sub ul {
  /* width: 100%; */
}
.row1 .p-sub li {
  font-size: 14px;
  color: #67A012;
  display: flex;
  text-align: justify;
  justify-content: space-between;
  padding: 2px 0;
  white-space:nowrap;
}
.row1 .p-sub li:nth-child(2) {
  padding: 2px 0;
  color: #79828F;
}
.row1 .p-sub li:nth-child(3) {
  color: #D96A6A;
}
.row1 .p-sub li strong {
  min-width: 68px;
  margin-right: 10px;
}
/* 1행 - 2, 3 파티클 공통 */

.row1-2 .p-text,
.row1-3 .p-text {
  width: 52%;
}


/*******************************************************************************************
*******************************************************************************************
                                    2행 반응형태그로 수정
*******************************************************************************************
*******************************************************************************************/
/* 공통 */
.row2 .shadowBox {
  height: 72px;
  padding: 10px 50px;
  justify-content: space-between;
}
.row2 .p-icon span {
  width: 50px;
  height: 50px;
  background: #E2E9F0;
  border-radius: 38px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.row2 .p-icon {
  padding-right: 24px;
}
.row2 .p-icon span i {
  color: ;
}
.row2 > ul > li {
  width: 25%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.row2 .p-info {
  align-self: stretch;
  display: flex;
  align-items: center;
}
.row2 strong.p-title,
.row2 span.p-text {
  display: block;
}
.row2 .p-text {
  margin-top: 3px;
}
.row2 .p-text strong {
  font-size: 25px;
  font-weight: 500;
  padding-right: 4px;
}


/* 아이콘 컬러 */
.row2 .p1 .p-icon span {
  background: ;
}
.row2 .p1 i {
  color: #;
}
.row2 .p2 .p-icon span {
  background: #DCBDE8;
}
.row2 .p2 i {
  color: #9D61B3;
}
.row2 .p3 .p-icon span {
  background: #B2CFEA;
}
.row2 .p3 i {
  color: #5281AD;
}
.row2 .p4 .p-icon span {
  background: #FFDF72;
}
.row2 .p4 i {
  color: #967D29;
  transform: rotate(-90deg);
  font-weight: 600;
}
.row2 .p5 .p-icon span {
  background: #EBB1B1;
}
.row2 .p5 i {
  color: #B45A5A;
}

/*******************************************************************************************
*******************************************************************************************
                                    3행 반응형태그로 수정
*******************************************************************************************
*******************************************************************************************/
.row3 .shadowBox {
  padding: 15px 20px;
}
.row3 {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
}
.row3 .p1,
.row3 .p4 {
  width: 27.5%;
  /*width: 445px;*/
  overflow: hidden;
}
.row3 .p2,
.row3 .p3,
.row3 .p5,
.row3 .p6 {
  /*width: 577px;*/
  width: 35%;
  overflow: hidden;
}

/******************* 그래프 박스 *******************/
figure {
  width: 100%;
  display: block;
}

figcaption {
  padding-bottom: 20px;
}
.graph-area {
  height: 87%;
  display: flex;
  align-items: center
}
.graph-area img {
  margin: 0 auto;
  height: 202px;
  /* margin-top: 20px; */
}


/******************* 에너지 총생산량 박스 *******************/

.row3 .p4,
.row3 .p6 {
  flex-direction: column;
  align-items: flex-start;
}
.total-energy-area {
  width: 100%;
  height: calc(100% - 16px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.total-energy-con {
  text-align: center;
}
.total-energy-con > div span{
  font-size: 34px;
  font-weight: 500;
  padding-right: 5px;
}
.total-energy-con ul {
  width: 100%;
  /* border-top: 1px solid #C7D3E0; */
  padding: 14px;
  margin-top: 14px;
  background: #ecf1f6;
  border-radius: 10px;
}
.total-energy-con ul li:not(:last-child) {
  padding-bottom: 8px;
}
.total-energy-con ul li i {
  margin-right: 3px;
}
.total-energy-con ul li:nth-child(2) {
  margin: 0 8px;
}

.total-energy-con ul li:nth-child(1) {
  color: #67A012;
}
.total-energy-con ul li:nth-child(2) {
  color: #79828F;
}
.total-energy-con ul li:nth-child(3) {
  color: #D96A6A;
}

.total-energy-con ul li:nth-child(1) {
  color: #67A012;
}
.total-energy-con ul li:nth-child(2) {
  color: #79828F;
}
.total-energy-con ul li:nth-child(3) {
  color: #D96A6A;
}

.main .p6 ul li:nth-child(1) {
  color: #67A012;
}
.main .p6 ul li:nth-child(2) {
  color: rgb(191, 150, 74);
}
.main .p6 ul li:nth-child(3) {
  color: #79828F;
}
.main .p6 ul li:nth-child(4) {
  color: #D96A6A;
}
/*******************************************************************************************
분석 - 비용 : 그래프 영역
********************************************************************************************/
.anal-cost-1 .shadowBox {
  justify-content: space-between;
}
.anal-cost-1 .row3 .shadowBox {
  height: 270px;
}
.anal-cost-1 .row1-1 {
  width: 60%;
  padding: 15px 50px;
}
.anal-cost-1 .row1-2 {
  width: 39%;
  padding: 15px 50px;
}

.anal-cost-1 .row1 .p-title {
  margin: 0 10px 0 10px;
  min-width: 122px;
}
.anal-cost-1 .row1 .p-text {
  width: 58%;
}
.anal-cost-1 .row1 .p-text span {
  /* font-size: 26px; */
  /* font-weight: 400; */
  padding-left: 6px;
  padding-top: 8px;
}
.anal-cost-1 .row1 .p-sub {
  padding-right: 15px;
  width: auto;
  min-width: 150px;
}
.anal-cost-1 .row1 .p-sub li:nth-child(2) {
  padding: 4px 0 0;
  color: #D96A6A;
}



.anal-cost-2 .row1 .row1-2 .p-icon span {
  background: #e2f2a8;
}
.anal-cost-2 .row1 .row1-2 .p-icon span i {
  color: #87a426;
}


.anal-cost-1 .row1 .p-title h3 {
  /*font-size: 25px;*/
}

.anal-cost-2 .row3 .p1,
.anal-cost-2 .row3 .p2,
.anal-cost-2 .row3 .p3,
.anal-cost-2 .row3 .p4 {
  flex-basis: 24%;
  /* flex-basis: 32.5%; */
}



.anal-cost-2 .graph-info ul {
  width: 100%;
  padding-top: 15px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.anal-cost-2 .graph-info li {
  width: 16%;
  font-size: 14px;
}
.anal-cost-2 .graph-info li:nth-child(2) {
  color: #b241db;
}
.anal-cost-2 .graph-info li:nth-child(3) {
  color: #3c8ad2;
}
.anal-cost-2 .graph-info li:nth-child(4) {
  color: #dfb527;
}
.anal-cost-2 .graph-info li:nth-child(5) {
  color: #d03939;
}


.add-tt {
  padding-bottom: 10px;
}


/*******************************************************************************************
분석 - 소비 : 그래프 영역
********************************************************************************************/
.anal-spend-1 .row1 .p-title h3 {
  font-size: 20px;
}

.anal-spend-1 .row1-1 .p-title {
  /*min-width: 100px;*/
}
.anal-spend-1 .row1-2 .p-title {
  min-width: 117px;
}

.anal-spend-1 .row1 .p-sub {
  min-width: 150px;
}
.anal-custom .row1 .p-sub li{
  color: #D96A6A;
}
.anal-custom .row1 .p-sub {
  min-width: 150px;
  padding-right: 26px;
}
/*
.anal-spend-1 .row1-1 .p-icon i {
  color: #87a426;
}*/
.anal-spend-1 .row1-1 .p-icon span {
  background: #e2f2a8;
  background: #E2E9F0;
}
/*
.anal-spend-1 .row1-2 .p-icon i {
  color: #bd1200;
}
.anal-spend-1 .row1-2 .p-icon span {
  background: #fee3df;
}
*/

/*******************************************************************************************
분석 - 절감 : 그래프 영역
********************************************************************************************/

.row1-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.row1-L {
  width: 27.5%;
}
.row1-r {
  width: 71.2%;
  flex-wrap: wrap;
}
.row1-r .shadowBox {
  padding: 15px 50px;
}
.row1-L .row1-1 {
  width: 100%;
  height: 162px;
  flex-wrap: wrap;
  justify-content: center;
}
.row1-L .row1-1 > div {
  width: 100%;
  /* justify-content: center; */
  padding: 10px 0;
  margin-right: 0;
}
.row1-L .row1-1 .p-icon {
  height: 80px;
}
.row1-L .row1-1 .p-text {
  height: 80px;
}
.row1-L .row1-1 .p-icon {
  /* border-bottom: 1px solid #C7D3E0; */
}
.row1-L .row1-1 .p-icon h3 {
  padding-left: 20px;
  font-weight: 400;
  line-height: 24px;
}
.row1-L .row1-1 .p-text span {
  font-size: 22px;

  padding-left: 6px;
  padding-top: 8px;
}


.row1-r .row1-1 {
  width: 100%;
}
.row1-r .row1-2,
.row1-r .row1-3 {
  width: 49%;
}
.row1-r .row1-1 .p-title {
  width: 126px;
}
.row1-r .row1-1 .p-sub {
  width: 18%;
}
.row1-r .row1-1 .p-text {
  width: 60%;
}


.row1-r .row1-2 .p-title,
.row1-r .row1-3 .p-title {
  width: 120px;
}
.row1-r .row1-2 .p-text,
.row1-r .row1-3 .p-text {
  width: 54%;
}
.ana-redu1 .shadowBox {
  margin-bottom: 14px;
}
.ana-redu1 .row1:last-child .shadowBox {
  height: 70px;
}
.ana-redu1 .row1-L .row1-1 > div {
  padding: 0;
}
.ana-redu1 .row1-L .row1-1 .p-icon {
  height: auto;
}
.ana-redu1 .row1 .p-text {
  font-size: 32px;
}
.ana-redu1 .row1-L .row1-1 {
  height: 154px;
}

.ana-redu1 .row3 .graph-info ul {
  display: flex;
  flex-wrap: wrap;
  padding-top: 5px;
}
.ana-redu1 .row3 .graph-info ul li {
  width: 33.3%;
  padding-top: 4px;
  font-size: 14px;
}
.ana-redu1 .graph-info li:nth-child(2){
  color: #b241db;
}
.ana-redu1 .graph-info li:nth-child(3){
  color: #3c8ad2;
}
.ana-redu1 .graph-info li:nth-child(4){
  color: #dfb527;
}
.ana-redu1 .graph-info li:nth-child(5){
  color: #d03939;
}
.ana-redu1 .row1-L .row1 .p-title h3 {

}

.ana-redu2 .row3 .graph-info ul {
  flex-wrap: nowrap;
  padding-top: 15px;
}

.ana-redu2 .row3 .p1,
.ana-redu2 .row3 .p2 {
  width: 49%;
}
.ana-redu2 .row3 .graph-info ul {
  justify-content: center;
}

.ana-redu2 .row3 .graph-info ul li {
  width: 19%;
}
.ana-redu2 .row1 .p-sub li strong {
  width: 105px;
}

.addition-txt {
  font-size: 12px;
  margin-top: -12px;
  color: #9499a1;
}


/*******************************************************************************************
분석 - 추이
********************************************************************************************/
.anal-progress .row1-1 {
  width: 49.5%;
  padding: 15px 50px;
}
.anal-progress .shadowBox {
  justify-content: space-between;
}
.anal-progress .row1-2 {
  width: 49.5%
  padding: 15px 50px;
}
.anal-progress .row1-wrap {
  margin-top: 20px;
}
.graph-area {
  /* height: 100%; */
  display: flex;
  align-items: center;
}
.graph-area img {
  width: 100%;
  object-fit: contain;
}
.anal-progress .row1 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.anal-progress .row1-1,
.anal-progress .row1-2 {
  width: 49.5%;
}

.anal-progress .row1 .row1-2 .p-icon span {
  background: #E2E9F0;
}
.anal-progress .row1 .row1-2 .p-icon span i {
  color: #969ca3;
}

.anal-progress .radio-wrap {
  display: flex;
  align-items: center;
}
.anal-progress .radio-wrap h3 {
  margin-right: 10px;
}


/* .anal-progress .radio-wrap input[type="radio"] {
  display: none;
}
.anal-progress .radio-wrap input[type="radio"] + span {
  display: inline-block;
  padding: 5px 0 7px;
  border: 1px solid #C7D3E0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 4px;
  width: 70px;
  margin-left: 4px;
}
.anal-progress .radio-wrap input[type="radio"]:checked + span {
  background-color: #bd1200;
  border: 1px solid #bd1200;
  color: #ffffff;
} */

.anal-progress .row4 .shadowBox > div {
  width: 100%;
}
.anal-progress .row4 .shadowBox {
  /* height: 420px; */
  height: 330px;
}
.anal-progress .row4 .graph-area img {
  height: 270px;
  /* margin-top: 31px; */
}
.charge-wrap {
  display: flex;
  align-items: center;
}
.charge-wrap h3 {
  margin-right: 5px;
}
.charge-wrap ul {
  display: flex;
  align-items: center;
}
.charge-wrap .charge-period {
  display: inline-block;
  padding: 5px 0 7px;
  border: 1px solid #C7D3E0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  width: 70px;
  border-right: 0;
}
.charge-wrap ul li:first-child a {
  border-radius: 4px 0 0 4px;
}
.charge-wrap ul li:last-child a {
  border-radius: 0 4px 4px 0;
  border-right: 1px solid #C7D3E0;
}
.charge-wrap .period-active {
  background-color: #bd1200;
  border: 1px solid #bd1200;
  color: #ffffff;
}
.charge-wrap .graph-area {
  display: flex;
  justify-content: center;
}

.anal-progress .p1 {
  margin-bottom: 0;
}
<<<<<<< HEAD


.anal-progress .row3 .shadowBox {
  /* flex-basis: 32.5%; */
  flex-basis: 24.2%;
}

.margin-top-none {
  margin-top: 0 !important;
}
.margin-top-20 {
  margin-top: 20px !important;
}



.flow-envi-col colgroup col {
  width: 11%;
}
.flow-comp .row3 .shadowBox {
  flex-basis: 32.5%;
}
.flow-comp .row1 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.flow-comp .row1-1, 
.flow-comp .row1-2 {
  width: 49.5%;
}
.flow-comp .row4 .shadowBox {
  height: 330px;
}
.flow-comp .row4 .graph-area img {
  height: 270px;
}




.flow-comp .row2 .p-icon span {
  background: #E2E9F0;
}

.flow-comp .row2 .p1 i,
.flow-comp .row2 .p3 i {
  color: #969ca3;
}

.flow-comp .row2 .p2 i,
.flow-comp .row2 .p4 i {
  color: #B45A5A;
}
.flow-comp .row2 .p2 .p-icon span,
.flow-comp .row2 .p4 .p-icon span {
  background: #EBB1B1;
}

.flow-comp .row2 .p4 i {
  transform: rotate(0deg);
  font-weight: normal;
}

/*******************************************************************************************
도움말 - 고객센터 정보
********************************************************************************************/
.help-info {
  height: calc(100vh - 172px);
  margin: 0 auto;
  background: green;
  background: url(/img/lhlogo-blue.svg) center/900px auto no-repeat;
  /*
  -webkit-filter: grayscale(100%);
  filter: gray;
  */
  text-align: center;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  padding-top: 100px;.help-info
}
.help-info h3 {
  font-size: 22px;
  padding: 20px 0 30px;
  line-height: 35px;
  font-weight: 400;
}
.help-info h3 span {
  font-weight: 700;
  font-style: italic;
  color: #bd1200;
}
.help-info ul {
  margin: 0 auto;
  width: 300px;
  padding: 30px 0 0;
  /*
  border-top: 1px solid #C7D3E0;
  */
}

.help-info i {
  font-size: 68px;
}



/*******************************************************************************************
전력감시 - 특별고압반
********************************************************************************************/

.elec-area,
.dash-area-tap {
  background: #E2E9F0;
  /* min-height: calc(100vh - 216px); */
  min-height: calc(100vh - 160px);
  text-align: center;
  overflow-x: ;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.po-re {
  position: relative;
}
/************* 3월 추가  **************/

.elec-con-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  justify-content: center;
}


.elec-con-wrap-1 {
  width: 1428px;
  height: 790px;
  background: url(/img/elec01.png) center/auto 790px no-repeat;
}
.elec-con-wrap-2 {
  width: 937px;
  height: 418px;
  background: url(/img/elec02.png) center/auto 418px no-repeat;
}
.elec-con-wrap-3 {
  width: 1356px;
  height: 675px;
  background: url(/img/elec03.png) center/auto 675px no-repeat;
}
.elec-con-wrap-4 {
  width: 518px;
  height: 190px;
  background: url(/img/elec04.png) center/auto 190px no-repeat;
  padding-left: 100px;
}
.elec-con-wrap-5 {
  width: 518px;
  height: 600px;
  background: url(/img/elec05.png) center/auto 600px no-repeat;
  padding-left: 100px;
}
.elec-con-wrap-6 {
  width: 1600px;
  height: 793px;
  background: url(/img/elec06.png) center/auto 793px no-repeat;
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #656d78;
}

.elec-con-wrap-4 > div {
  margin-left: 100px;
}

.elec-con-wrap .left-wrap {
  /* background-color: red; */
  width: 80%;
  /* position: relative; */
}
.elec-con-wrap .right-wrap {
  background-color:;
  width: 20%;
  position: relative;
}
.left-up {
  position: relative;
  /* border: 1px solid red; */
}
.left-down {
  position: relative;
  top: 222px;
  /* border: 1px solid blue; */
}
.legend {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  width: 230px;
  box-shadow: 0 5px 12px -1px #d7e3f0;
}
.legend h3 {
  color: #9499a1;
  padding: 7px 0 7px;
  border-bottom: 1px solid #C7D3E0;
  text-align: center;
}
.legend ul {
  display: flex;
  justify-content: space-around;
  padding: 8px 5px 10px;
}
.legend ul li {
  font-size: 21px;
  font-weight: 500;
  text-align: center;
}
.legend ul li:first-child {
  color: #FF5353;
}
.legend ul li:last-child {
  color: #61CC33;
}

.legend ul li div {
  width: 100px;
  height: 30px;
  border-radius: 20px;
  margin: 0 auto;
  color: #fff;
  font-size: 21px;
  line-height: 30px;
  margin-top: 8px;
  text-align: center;
}
.legend ul li:first-child div {
  background: #FF5353;
}
.legend ul li:last-child div {
  background: #61CC33;
}

.abc-tagWrap {
  position: absolute;
  top: 152px;
  left: 180px;
}
.abc-tagWrap span:nth-of-type(2) {
  margin-left: 250px;
}
.abc-tagWrap span:nth-of-type(3) {
  margin-left: 322px;
}


.ta-tagWrap {
  position: absolute;
  top: 378px;
  left: 332px;
}
.ta-tagWrap span {
  display: block;
  margin-bottom: 8px;
}





.elec-info-list {
  border: 1px solid #7C7D98;
  background: #BBC7D8;
  border-radius: 4px;
  width: 159px;
  font-size: 13px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
}
.elec-info-list > span,
.elec-info-list > p {
  padding: 2px 0;
}
.elec-info-list > span {
  width: 36%;
  color: white;
  background: #6E8194;
  border-radius: 3px 0 0 3px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.elec-info-list p {
  width: 64%;
  padding-right: 6px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}
.elec-info-list p em {
  color: #3A3E44;
  /* background: red; */
  width: 59px;
}
.elec-info-list p span {
  width: 34px;
  color: #7e8591;
}



.elec-info-list-dirty {
  border: 1px solid #7C7D98;
  background: #BBC7D8;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  width: 154px;
}
.elec-info-list-dirty > span,
.elec-info-list-dirty > p {
  padding: 2px 0;
}
.elec-info-list-dirty > span {
  width: 65%;
  color: white;
  background: #6E8194;
  border-radius: 3px 0 0 3px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 0 10px; */
}
.elec-info-list-dirty p {
  width: 35%;
  padding-right: 6px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}
.elec-info-list-dirty p em {
  color: #3A3E44;
  /* background: red; */
  padding: 0 5px;
  /* width: 59px; */
}
.elec-info-list-dirty p span {
  color: #7e8591;
  /* width: 34px; */
}

.elec-right .elec-info-list-dirty,
.wrap-bottom .elec-info-list-dirty {
  width: 120px;
  justify-content: left;
  align-items: center;
}
.elec-right .elec-info-list-dirty > span,
.wrap-bottom .elec-info-list-dirty > span {
  text-align: left;
  margin-right: 11px;
  padding: 4px 0 5px;
  line-height: 1.3;
}
.wrap-bottom .elec-info-list-dirty > span {
  /* height: 36px; */
}
.elec-info-list2 {
  border: 1px solid #7C7D98;
  background: #BBC7D8;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  width: 120px;
}
.elec-info-list2 li {
  display: flex;
  justify-content: space-between;
}
.elec-info-list2  span,
.elec-info-list2  p {
  padding: 3px 0;
}
.elec-info-list2  span {
  width: 60%;
  color: white;
  background: #6E8194;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 0 10px; */
}
.elec-info-list2  p {
  width: 40%;
  text-align: right;
  padding-right: 8px;
}
.elec-info-list2  li:first-child {
  border-bottom: 1px solid #7C7D98;
}
.elec-info-list2  li:first-child span {
  border-radius: 3px 0 0 0;
}
.elec-info-list2  li:last-child span {
  border-radius: 0 0 0 3px;
}









.ml {
  letter-spacing: -1px;
}

.tag {
  background: #61CC33;
  border-radius: 15px;
  padding: 0 6px 2px;
  font-size: 15px;
  font-weight: 500;
}
.tag-square-a {
  border-radius: 0;
  font-size: 13px;
}
.tag-square-b {
  border-radius: 0;
  padding:  2px 9px 4px;
}


.position-wrap-1,
.position-wrap-2,
.position-wrap-3,
.position-wrap-5,
.position-wrap-6 {
  /* display: inline-block; */
}
.vcb-wrap {
  position: absolute;
  top: 167px;
  left: 184px;
}
.position-wrap-1 {
  position: absolute;
  top: 22px;
  left: 300px;
  display: flex;
  align-items: flex-end;
}
.col > div {
  text-align: left;
  padding: 5px 0;
}
.position-wrap-2 .col > div {
  text-align: right;
}
.position-wrap-2 .col > div.condenser {
  /* text-align: left; */
}
.position-wrap-1 .col ul {
  padding: 3px 19px 3px 0;
}
.col ul {
  padding: 3px 0 0;
}

.position-wrap-2 {
  position: absolute;
  top: 56px;
  left: 0px;
  display: flex;
  align-items: flex-end;
}
.position-wrap-3 {
  position: absolute;
  top: 56px;
  left: 578px;
  display: flex;
  align-items: flex-end;
}
.position-wrap-4 {
  position: absolute;
  top: 56px;
  left: 926px;
  display: flex;
  align-items: flex-end;
}
.position-wrap-5 {
  position: absolute;
  top: 0px;
  right: 17px;
  display: flex;
  align-items: flex-end;
}
.elec-con-wrap-4 .position-wrap-6,
.elec-con-wrap-4 .position-wrap-7 {
  display: none;
}
.position-wrap-6 {
  position: absolute;
  top: 274px;
  right: 17px;
  display: flex;
  align-items: flex-end;
}
.elec-con-wrap-5 .position-wrap-6 {
  top: 70px;
}
.position-wrap-7 {
  position: absolute;
  top: 330px;
  right: 190px;
}




.alarm-highTem-1,
.alarm-highTem-2,
.alarm-highTem-3 {
  position: absolute;
  top: 3px;
}
.alarm-highTem-1 {
  left: 117px;
}
.alarm-highTem-2 {
  left: 416px;
}
.alarm-highTem-3 {
  left: 788px;
}

.eld-01,
.eld-02,
.eld-03,
.eld-04,
.eld-05,
.eld-06,
.eld-07 {
  position: absolute;
  top: 544px;
}
.eld-01 {
  left: 181px;
}
.eld-02 {
  left: 272px;
}
.eld-03 {
  left: 481px;
}
.eld-04 {
  left: 779px;
}
.eld-05 {
  left: 856px;
}
.eld-06 {
  left: 928px;
}
.eld-07 {
  left: 1004px;
}

.tag-on {
  background: #FF5353 !important;
  color: white;
}

/* 아이콘 */
.b-half,
.b-empty,
.b-full {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-bottom: -2px;
  margin-right: 1px;
}
.b-half {
  background: url(/img/i-b-half.png) center no-repeat;
}
.b-empty {
  background: url(/img/i-b-empty.png) center no-repeat;
}
.b-full {
  background: url(/img/i-b-full.png) center no-repeat;
}


/*******************************************************************************************
전력감시 > 특별고압반 electricity-2.php
********************************************************************************************/
.elec-con-wrap-2 .wrap-alarm .alarm-highTem-1,
.elec-con-wrap-2 .wrap-alarm .alarm-highTem-2,
.elec-con-wrap-2 .wrap-alarm .alarm-highTem-3 {
  top: 232px;
}

/*******************************************************************************************
전력감시 > 오수처리시설 electricity-6.php
********************************************************************************************/
.elec-con-wrap-6 .wrap-top {
  height: 47%;
  display: flex;
  justify-content: center;
}
.elec-con-wrap-6 .wrap-bottom {
  height: 53%;
  /* border-top: 1px solid red; */
  position: relative;
}

.wrap-top .elec-left {
  width: 39%;
  position: relative;
}
.wrap-top .elec-right {
  width: 61%;
}

.alarm-table {
  border: 1px solid #7C7D98;
  border-radius: 7px;
  width: 366px;
  position: absolute;
  top: 0px;
  right: 60px;
}
.alarm-table > div {
  display: flex;
  justify-content: space-between;
}
.alarm-table h4 {
  background: #6E8194;
  color: white;
  padding: 10px 0 13px;
  font-size: 16px;
  font-weight: 400;
}
.alarm-default,
.alarm-on {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #6E8194;
  background: #34383D;
  /* margin: 6px 0; */
}
.alarm-on {
  background: #FFE600;
}
.alarm-table ul {
  width: 33.3%;
}
.alarm-table ul:nth-of-type(2) {
  border-right: 1px solid #979797;
  border-left: 1px solid #979797;
}
.alarm-table li:first-child {
  border-bottom: 1px solid #979797;
}
.alarm-table li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 15px;
}
.pump-default,
.pump-on {
  display: inline-block;
  width: 50px;
  height: 24px;
  position: absolute;
}
.pump-default {
  background: url(/img/pump-default.jpg) center/contain no-repeat;
}
.pump-on {
  background: url(/img/pump-on.jpg) center/contain no-repeat;
}

.elec-left .pump-position-1 {
  top: 264px;
  left: 297px;
}
.elec-left .pump-position-2 {
  top: 264px;
  left: 376px;
}
.elec-left .pump-position-3 {
  top: 264px;
  left: 454px;
}

.elec-right {
  position: relative;
}
.elec-right ul:nth-child(odd) {
  margin-right: 37px;
}

.elec-right .pump-position-1,
.elec-right .pump-position-2,
.elec-right .pump-position-3 {
  position: absolute;
  top: 218px;
  left: 11px;
}
.elec-right .pump-position-2 {
  left: 345px;
}
.elec-right .pump-position-3 {
  left: 675px;
}

.elec-right > div > span:nth-of-type(2) {
  position: absolute;
  left: 61px;
}
.elec-right > div > span:nth-of-type(3) {
  position: absolute;
  left: 121px;
}
.elec-right > div > span:nth-of-type(4) {
  position: absolute;
  left: 181px;
}
.elec-right > div > span:nth-of-type(5) {
  position: absolute;
  left: 241px;
}


.elec-right .pump-position-1 > div,
.elec-right .pump-position-2 > div,
.elec-right .pump-position-3 > div {
  position: absolute;
  top: 57px;
  left: -13px;
  display: flex;
}


.wrap-bottom .elec-info-list-dirty.row1 span {
  padding: 7px 0;
}

.elec-info-list-dirty.valve-close p em,
.elec-info-list-dirty.valve-open p em {
  padding: 0;
}
.wrap-bottom .elec-info-list-dirty.valve-close {
  background: #FFAB5B;
}
.wrap-bottom .elec-info-list-dirty.valve-open {
  background: #b8ff5b;
}
.wrap-bottom .elec-info-list-dirty.valve-close > span,
.wrap-bottom .elec-info-list-dirty.valve-open > span {
  margin-right: 0;
  padding: 2px 0 4px;
  width: 55%;
  height: 29px;
}
.wrap-bottom .elec-info-list-dirty.valve-close p,
.wrap-bottom .elec-info-list-dirty.valve-open p {
  padding-right: 0;
  text-align: center;
  display: inline-block;
  width: 45%;
}
.wrap-bottom .elec-info-list-dirty.valve-close em,
.wrap-bottom .elec-info-list-dirty.valve-open em {
  font-size: 18px;
  font-weight: 600;
}

.i-valve {
  display: block;
  width: 50px;
  height: 40px;
  background: url(/img/valve-close.png) center/contain no-repeat;
  position: absolute;
  top: 2px;
  left: 278px;
}
.elec-info-list-dirty.valve-close,
.elec-info-list-dirty.valve-open {
  position: absolute;
  top: 50px;
  left: 237px;
}
.elec-info-list-dirty.valve-open {
  display: none;
}

.w-level1,
.w-level2 {
  position: absolute;
  top: 68px;
  height: 26px;
}
.w-level1 {
  left: 492px;
}
.w-level2 {
  left: 821px;
}

.alarm1 {
  position: absolute;
  top: 160px;
  left: 80px;
}
.alarm2 {
  position: absolute;
  top: 160px;
  left: 240px;
}
.alarm3 {
  position: absolute;
  top: 300px;
  left: 240px;
}
.alarm4 {
  position: absolute;
  top: 160px;
  left: 1080px;
}
.alarm5 {
  position: absolute;
  top: 300px;
  left: 1080px;
}




/*******************************************************************************************
경보리스트 - 계시별 리스트  alarmlist-list.php
********************************************************************************************/
.alarmlist-list colgroup col {
  width: 12%;
}
.alarmlist-list colgroup col:first-child {
  width: 5%;
}
.alarmlist-list colgroup col:last-child {
  width: 45%;
}
.table-note {
  background: transparent;
  width: 100%;
  height: 100%;
  border: 0;
  font-size: 16px;
  border: 1px solid transparent;
  text-align: center;
}
.table-note:focus {
  outline: none;
  border-bottom: 1px solid #bd1200;
}



/*******************************************************************************************
경보리스트 - 누수/누설 조회  alarmlist-leak.php
********************************************************************************************/
.alarmlist-leak colgroup col {
  width: 8%;
}
.alarmlist-leak colgroup col:first-child {
  width: 5%;
}
.alarmlist-leak colgroup col:last-child {
  width: 20%;
}

/*******************************************************************************************
경보리스트 - LP 리스트  alarmlist-LPlist.php
********************************************************************************************/
.alarmlist-LPlist colgroup col {
  width: 12%;
}
.alarmlist-LPlist colgroup col:first-child {
  width: 5%;
}
.alarmlist-LPlist colgroup col:last-child {
  width: 45%;
}

/*******************************************************************************************
경보리스트 - 독거노인 조회  alarmlist-alone.php
********************************************************************************************/
.alarmlist-alone colgroup col {
  width: 10%;
}
.alarmlist-alone colgroup col:first-child {
  width: 5%;
}
.alarmlist-alone colgroup col:last-child {
  width: 35%;
}


/*******************************************************************************************
페이징
********************************************************************************************/
.board_page a i {
  padding-top: 1px;
}

/*******************************************************************************************
경보리스트 - 환경 정보 조회/관리  alarmlist-environment.php
********************************************************************************************/
.alarmlist-environment colgroup col {
  width: 15.83%;
}
.alarmlist-environment colgroup col:first-child {
  width: 5%;
}

/*******************************************************************************************
설정 - 계측기 관리  setting-equipment.php
********************************************************************************************/
.setting-eq colgroup col {
  width: 9.5%;
}
.setting-eq colgroup col:first-child {
  width: 5%;
}

/*******************************************************************************************
설정 - 사용자 계정 관리  setting-admin.php
********************************************************************************************/
.setting-admin colgroup col {
  width: 11.87%;
}
.setting-admin colgroup col:first-child {
  width: 5%;
}

/*******************************************************************************************
설정 - 요금제 관리  setting-fee.php
********************************************************************************************/
.fee-data {
  font-size: 14px;
  padding-left: 5px;
  /* font-style: italic; */
  color: #8b93a0;
}

/*******************************************************************************************
설정 - 공통 코드 관리  setting-code.php
********************************************************************************************/
.setting-code colgroup col {
  width: 15.83%;
}
.setting-code colgroup col:first-child {
  width: 5%;
}


/*******************************************************************************************
            모달 공통
********************************************************************************************/
.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}
.modal.show {
  display: block;
}

.modal-con {
  display:none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  width: 800px;
  /* height: 500px; */
  padding: 40px;

  text-align: center;

  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);

  background: #F4F7FA;
}

.modal-con h3 {
  color: #3A3E44;
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 32px;
}



/********* 설정 - 사용자 계정 관리  - 모달 setting-admin.php ******/
.modal-con .input-wrap {
  border: 1px solid rgba(199, 211, 224, 0.6);
  padding: 20px 20px;
  width: 90%;
  border-radius: 8px;
  margin: 0 auto;
  background: white;
  /* box-shadow: 0 5px 12px -1px #d7e3f0; */
}
.modal-con .input-box {
  padding: 6px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.modal-con .input-box label {
  width: 18%;
  text-align: left;
}
.modal-con .input-box input,
.modal-con textarea {
  cursor: pointer;
  height: 35px;
  border-radius: 4px;
  padding-left: 12px;
  padding-right: 10px;
  width: 400px;
  font-size: 1rem;
}
.modal-con .input-box input,
.modal-con .input-box textarea {
  border: 1px solid #C7D3E0;
}
.modal-con .input-box > div {
  width: 400px;
  text-align: left;
}
.modal-con .input3 > div input {
  width: 80px;
  margin-right: 5px;
  margin-left: 3px;
}
.modal-con .input2 > div input {
  width: 123px;
  margin-right: 4px;
  margin-left: 2px;
}
.modal-con .input3 > div input:first-child,
.modal-con .input2 > div input:first-child {
  margin-left: 0;
}
/* 버튼 */
.modal-con .btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
.modal-con .btn-wrap .btn {
  height: 30px;
  padding: 25px 0;
  width: 220px;
  font-size: 1rem;
  margin: 10px;
}
.modal-con .btn-fill-red {
  border: 1px solid #bd1200;
}

.modal-con .modal-data input {
  width: 80px;
  margin-right: 5px;
  margin-left: 10px;
}
.modal-con .modal-data input:first-child {
  margin-left: 0;
}
.input-box sup {
  color: #bd1200;
}

.flex-start {
  align-items: start !important;
}
.file-input {
  border: 0 !important;
  line-height: 35px;
  padding-left: 0 !important;
}
form input::file-selector-button {
  border: 1px solid #C7D3E0;
  padding: 5px 10px;
  margin-right: 10px;
  border-radius: 4px;
  line-height: 21px;
  color: gray;
  font-weight: 400;
  font-size: 16px;
}
.btn3 {
  width: 170px !important;
}

.modal-con .date-wrap input {
  width: 150px;
}


.btn .material-symbols-outlined {
  margin-left: -10px;
  margin-right: 5px;
  font-size: 24px;
  color: rgba(58, 62, 68, 0.6);
}

#modal {
  display:none;
  position:fixed;
  width:100%; height:100%;
  top:0; left:0;
  background:rgba(0,0,0,0.3);
}





/*******************************************************************************************
           단지배치 apt.php
********************************************************************************************/
.apt-wrap {
  min-height: calc(100vh - 130px);
  background: url(/img/apt.jpg) center/auto 866px no-repeat, #E2E9F0;
  position: relative;
}
.spd-wrap {
  /* min-height: calc(100vh - 133px); */
  background: url(/img/apt.jpg) center/auto 840px no-repeat, #E2E9F0;
  position: relative;
}

.apt-con,
.spd-con {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.apt-on {
  background: #FF5353;
  color: white !important;
}
.apt-off {
  background: #61CC33;
}

.apt-con ul li a,
.spd-con ul li a {
  border-radius: 5px;
  width: 80px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}
.spd-con ul li a {
  cursor: default;
}

.apt-con ul li,
.spd-con ul li {
  position: absolute;
  display: inline-block;
}
.apt-con ul li:nth-of-type(1) {
  top: -247px;
  left: -462px;
}
.apt-con ul li:nth-of-type(2) {
  top: -138px;
  left: -409px;
}
.apt-con ul li:nth-of-type(3) {
  top: -55px;
  left: -135px;
}
.apt-con ul li:nth-of-type(4) {
  top: -47px;
  left: 209px;
}
.apt-con ul li:nth-of-type(5) {
  top: 160px;
  left: 461px;
}
.apt-con ul li:nth-of-type(6) {
  top: 123px;
  left: 650px;
}
.apt-con ul li:nth-of-type(7) {
  top: -29px;
  left: 525px;
}
.apt-con ul li:nth-of-type(8) {
  top: -132px;
  left: 142px;
}
.apt-con ul li:nth-of-type(9) {
  top: -199px;
  left: 17px;
}
.apt-con ul li:nth-of-type(10) {
  top: -363px;
  left: -112px;
}
.apt-con ul li:nth-of-type(11) {
  top: -394px;
  left: -399px;
}
.apt-con ul li:nth-of-type(12) {
  top: -319px;
  left: -693px;
}
.apt-con ul li:nth-of-type(13) {
  top: -183px;
  left: -186px;
}

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

.spd-con ul li:nth-of-type(1) {
  top: -242px;
  left: -450px;
}
.spd-con ul li:nth-of-type(2) {
  top: -135px;
  left: -398px;
}
.spd-con ul li:nth-of-type(3) {
  top: -54px;
  left: -132px;
}
.spd-con ul li:nth-of-type(4) {
  top: -46px;
  left: 200px;
}
.spd-con ul li:nth-of-type(5) {
  top: 155px;
  left: 445px;
}
.spd-con ul li:nth-of-type(6) {
  top: 118px;
  left: 627px;
}
.spd-con ul li:nth-of-type(7) {
  top: -29px;
  left: 508px;
}
.spd-con ul li:nth-of-type(8) {
  top: -130px;
  left: 136px;
}
.spd-con ul li:nth-of-type(9) {
  top: -194px;
  left: 16px;
}
.spd-con ul li:nth-of-type(10) {
  top: -353px;
  left: -110px;
}
.spd-con ul li:nth-of-type(11) {
  top: -383px;
  left: -388px;
}
.spd-con ul li:nth-of-type(12) {
  top: -311px;
  left: -673px;
}
.spd-con ul li:nth-of-type(13) {
  top: -178px;
  left: -181px;
}

/********* 추가 수정 ******/
.searchDateBtn {
  margin-left: 4px;
}



/*******************************************************************************************
           미디어 쿼리
********************************************************************************************/
@media print {
  @page {
    size: A4 landscape;
    margin: 0;
    background-color: #FFFFFF;
  }
  .no-print, .no-print *
  {
    display: none !important;
  }
  html {
    width: 297mm;
    height: 208mm;
    margin: 1.3cm;
  }

  body {
    background-color: #FFFFFF;
    overflow: hidden;
    min-width: 1800px;
  }

  .home-section {
    position: relative;
    /*width: 290mm;*/
    /*min-width: 0mm;*/
    height: 100%;
    left: 0px;
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
    /*page-break-after: always;*/
  }

  #content {
    background-color: #FFFFFF;
    padding: 0;
  }

  .alarmModal {
    display:none;
    position:fixed;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.3);
  }

}