@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*GmarketSans*/
@font-face {
    font-family: 'GmarketSansMedium';
    font-style: normal;
    font-weight: 500;
    src: url('../font/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: "GmarketSansBold";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}
/*font face Noto Sans KR*/
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(../css/fonts/NotoSansKR-Thin.woff2) format('woff2'),
       url(../css/fonts/NotoSansKR-Thin.woff) format('woff'),
       url(../css/fonts/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(../css/fonts/NotoSansKR-Light.woff2) format('woff2'),
       url(../css/fonts/NotoSansKR-Light.woff) format('woff'),
       url(../css/fonts/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(../css/fonts/NotoSansKR-Regular.woff2) format('woff2'),
        url(../css/fonts/NotoSansKR-Regular.woff) format('woff'),
        url(../css/fonts/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url(../css/fonts/NotoSansKR-Medium.woff2) format('woff2'),
        url(../css/fonts/NotoSansKR-Medium.woff) format('woff'),
        url(../css/fonts/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(../css/fonts/NotoSansKR-Bold.woff2) format('woff2'),
        url(../css/fonts/NotoSansKR-Bold.woff) format('woff'),
        url(../css/fonts/NotoSansKR-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 900;
   src: url(../css/fonts/NotoSansKR-Black.woff2) format('woff2'),
        url(../css/fonts/NotoSansKR-Black.woff) format('woff'),
        url(../css/fonts/NotoSansKR-Black.otf) format('opentype');
 } 


@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(../css/fonts/NotoSansKR-Thin.woff2) format('woff2'),
       url(../css/fonts/NotoSansKR-Thin.woff) format('woff'),
       url(../css/fonts/NotoSansKR-Thin.otf) format('opentype');
}

html, body {height: 100%; /* width: fit-content; */ width: 100%; overflow:/* auto !important :스크롤바 중복오류 -checkData 페이지 개별설정*/ hidden; /*navbar반응형..*/ /* overflow-y:scroll !important; */}
input, div, p, em, section{
  appearance: none;/**/
  -webkit-appearance: none;	/**/
  -webkit-text-size-adjust: none;/**/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}

body {font-family: 'GmarketSansMedium', 'GmarketSansBold', 'Poppins', 'Noto Sans KR', sans-serif; color: #535863; font-size: 16px;}

/*스크롤로 인한 레이아웃 밀림 방지*/
/* body{overflow-y: scroll;} */

body a {color: #494949; text-decoration: none;}

    input::-webkit-input-placeholder {
      font-size: 1rem; color:#a3a3a3;
    }
    input:-ms-input-placeholder {
      font-size: 1rem; color:#a3a3a3;
    }

.navbar,
.container-scroller {min-width: 320px;}


  

/*부트스트랩 기본 포커스 색상 초기화*/
input,    
button,
.btn:hover,    
.btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

/*대시보드 색상 및 네비게이션 사이즈 재정의*/
.sidebar {width: 190px;}
.sidebar .sidebar-brand-wrapper {width: 190px;}

.page-body-wrapper {width: calc(100% - 190px);}
.content-wrapper { background: var(--bs-cl-dash);}

.navbar {left:190px;}
.navbar .navbar-menu-wrapper .navbar-toggler {height: 30px;}
.navbar .navbar-menu-wrapper {height: 50px;}

.main-panel {padding-top: 60px; min-width: 1000px;}



/*아이폰 사파리 버튼 초기화*/
a[type="button"] {-webkit-border-radius:0;-webkit-appearance:none;}
/*크롬 체크박스 살리기*/
input:checked[type="checkbox"]{background-color:#fff;-webkit-appearance:checkbox;}
/*체크박스를 제외 후 일괄 지정*/
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="search"], 
input[type="image"], 
input[type="tel"], 
button, 
select, 
textarea{-webkit-border-radius:0;-webkit-appearance:none;}

/* 아이폰 input 기본 스타일 제거 */
input, textarea {
appearance: none;
-webkit-appearance: none;
-webkit-border-radius: 2px /* 기본값0 */;
}

/*- 아이폰 select 기본 스타일 제거 -*/
select {    -webkit-appearance: auto;
/* -webkit-appearance: none;
-moz-appearance: none; 
appearance: none; */
/*화살표 배경 넣기- 안됨*/
background:url(../../assets/img/down.png) no-repeat 98% center;
}
/* 익스플로러 select 화살표 제거 -??*/
select::-ms-expand{
/* 화살표 없애기 for IE10, 11 -??*/ 
display:none;
}

/*로고*/
.admin_logo { text-align: center; }
.sidebar .sidebar-brand-wrapper {height: 50px;}
.admin_logo > a {display: block;}
.admin_logo img {width: 50%; display: inline-block; opacity: 0.7;}
.sidebar .sidebar-brand-wrapper .sidebar-brand {padding: 0;}
.sidebar .sidebar-brand-wrapper .sidebar-brand img {height: auto; max-width: 75%;}

.sidebar-icon-only .navbar {left: 100px;}
.sidebar .sidebar-brand-wrapper .sidebar-brand.brand-logo-mini { width: 100px; text-align: center;}
.sidebar .sidebar-brand-wrapper .sidebar-brand.brand-logo-mini img {
    width: 70%;
    height: auto;
    margin-left:10px;
    padding-top: 7px;    
}
.navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini img {
    width: 100%;
    height: auto;
    opacity: 0.7;
}

.ham_line {border:1px solid #bfc5d5; background:#bfc5d5;  height: 1px; width: 100%; display: block; margin-bottom: 5px;}
.navbar .navbar-menu-wrapper .navbar-toggler {padding:0; width: 20px;}
.navbar-toggler.navbar-toggler.align-self-center {display: flex; display: none; justify-content: center; flex-direction: column; padding-top: 5px;}
.navbar .navbar-menu-wrapper {
    /* box-shadow: 20px 19px 34px -15px rgb(85 85 85 / 50%);
    -webkit-box-shadow: 20px 19px 34px -15px rgb(85 85 85 / 50%);
    -moz-box-shadow: 20px 19px 34px -15px rgba(85, 85, 85, 0.5); */
    position: relative;
}
/*.sidebar-icon-only .navbar {left:0;}*/
.footer {background: #252c41;}
/*sidebar 없앰..*/
.sidebar-icon-only .sidebar {width: 0;}
.sidebar-icon-only .sidebar .sidebar-brand-wrapper {width: 100px;}
.sidebar-icon-only .sidebar .nav .nav-item .nav-link {display: none;}
}
/**로그인**/
/* body{
	background-image : url('${pageContext.request.contextPath}/resources/assets/img/abstract-gca5aa8353_1920.png');
} */
.lg_wrap{
	display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    /* background: url(../../assets/img/lg_back.png) no-repeat center center; */
    /* background-image:url(../../assets/img/abstract-gca5aa8353_1920.png); */
    background-size: cover;
}
.login_box{
    /* border: 1px solid #e0e0e0; */
    padding: 30px;
    border-radius: 0px;
    max-width: 400px;
    width: 100%;
    background:#b1bcd54d /* rgb(128 138 161 / 30%) */;
}
/*id, pw 글자색상*/
.input_txt{color: #e9f4fd;}

.input_txt .lg_area {
    width: 100%;
    border: 0;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
    font-size: 20px;
    border-bottom: 1px solid #dfdfdf;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    display: block;
}   

/*login 버튼*/
.lg_btin {
    border-radius: 100px;
    background: #329bff;
    /* background: #0d86cd; */
    /* background: linear-gradient(to top, #204892,#007cc2,#1e5497); */
    color: #fff;
    font-size: 1.7rem;
    letter-spacing: 3px;
    width: 100%;
    padding-top: 14px;
    padding-bottom: 14px;
    border: 0;
    outline-style: none;
    cursor: pointer;
    font-size: 22px;
    font-weight: 500;
    margin-top: 20px;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.lg_btin:hover {background:#5eb0ff !important;}

/*회원가입 텍스트정렬*/
.signup {
	display: block;
    text-align: center;
    }

.t_admin{
    padding-bottom: 30px;
	text-align: center;
	color:#fff;
}   
.logo_knu img{
	width:150px;
    margin: 20px 0 20px 0;
}

/* test 화면 선택보기(단순 radio button 형식) */
.syst_slct{
  display: block;
  position: relative;
  margin: 10px auto;
  height: auto;
  /* width: 500px; */
}

.syst_slct ul{
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

.syst_slct ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  /* height: 100px; */
}

.syst_slct ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

.syst_slct ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  line-height: 15px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

.syst_slct ul li:hover label{
  color: #FFFFFF;
}

.syst_slct ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}

.syst_slct ul li:hover .check {
  border: 5px solid #FFFFFF;
}

.syst_slct ul li .check::before {
  display: block;
  position: absolute;
  content: '';
  border-radius: 100%;
  height: 9px;
  width: 9px;
  top: 3px;
  left: 3px;
  margin: auto;
  transition: background 0.25s linear;
  -webkit-transition: background 0.25s linear;
}

/*라디오버튼 선택시*/
.syst_slct input[type=radio]:checked ~ .check {
  border: 5px solid #64cdff;
}

.syst_slct input[type=radio]:checked ~ .check::before{
  background: #64cdff;
}
/*라디오버튼 선택시 텍스트*/
.syst_slct input[type=radio]:checked ~ label{
  color: #fff;
}

/*로그인페이지: 화면 선택보기  Copyright (c) 2023 by Adam Jones (https://codepen.io/techanddesign/pen/jGBQev) */
 .radio-tile-group {
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
     margin-top: 20px;
}
 .radio-tile-group .input-container {
	 position: relative;
	 height: 6.5rem;
	 width: 7rem;
	 margin: 1rem;
}
 .radio-tile-group .input-container .radio-button {
	 opacity: 0;
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 100%;
	 width: 100%;
	 margin: 0;
	 cursor: pointer;
}
 .radio-tile-group .input-container .radio-tile {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 width: 100%;
	 height: 100%;
	 background: transparent /* #618ccd */ /* #f0ffff3b */;
	 border: 1px solid #a8b2b5;       
	 border-radius: 5px;
	 /* padding: 1rem; */
	 transition: transform 300ms ease;
}
 .radio-tile-group .input-container .icon i {
	 fill: #079ad9;
	 /* width: 3rem;
	 height: 3rem */;
}
 .radio-tile-group .input-container .radio-tile-label {
	 margin-bottom: 0px !important;
	 text-align: center;
	 font-size: 0.8rem;
	 font-weight: 300;
	 text-transform: uppercase;
	 letter-spacing: 1px;
	 color: #fff;
}
 .radio-tile-group .input-container .radio-button:checked + .radio-tile {
	 background-color: #1e336d;
     border: 3px solid #56a2e9;
	 color: white;
	 /* transform: scale(1.1, 1.1); 클릭시 커지는 효과*/
}
 .radio-tile-group .input-container .radio-button:checked + .radio-tile .icon i {
	 fill: white;
	 background-color: #079ad9;
}
 .radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {
	 color: white;
	 background-color: #1e336d;
}

.scale-in-center {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-11-30 17:48:37
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}


/*아이콘, 아이콘 타이틀 정렬*/
 .radio-tile-group .input-container .radio-tile .portal-icon i,
 .radio-tile-group .input-container .radio-tile .card-icon i {
    position: absolute !important;
    top: 35px !important;
    }

 .radio-tile-group .input-container .radio-tile .portal-icon  + label,
 .radio-tile-group .input-container .radio-tile .card-icon  + label {
    position: absolute !important;
    bottom: 22px !important;
    }

 .radio-tile-group .input-container .radio-tile {cursor:pointer;}

/*  .radio-tile-group .input-container .radio-tile:hover {border: #eee !important;} */


/*로그인 배경화면 효과*/
.kenburns-top {
	width: 100%;
  height: 100%;
  position: absolute;
  /* background-image: url(${pageContext.request.contextPath}/resources/assets/img/lgbg-1.png); */
  background-size: cover;
  background-position: center top;
  animation: bgAnim 20s infinite;
}
.box_grp {
  position: relative;
}

@keyframes bgAnim {
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/*환경설정*/
.menu_setting {
	position: absolute; 
	right:1.75rem;     
	bottom: 12px;
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 0; 
    margin-right: 5px;
}
.menu_setting li {margin-left: 15px;}
.menu_setting li a {color: #d7f0ed; font-weight: 300; font-size: 1rem; padding-left: 25px;}
.menu_setting li a:hover,
.menu_setting li a:focus {color: #fff;}
  
  /*백그라운드 설정*/
  .menu_setting li a.set {background: url(../../assets/img/setting_icon_w.png) no-repeat center left; background-size: 18px;}
  .menu_setting li a.ad_infos {background: url(../../assets/img/admin_icon_w.png) no-repeat center left; background-size: 18px;}
  .menu_setting li a.ad_infos2 {background: url(../../assets/img/monitor_w.png) no-repeat center left; background-size: 18px;}
  .menu_setting li a.logout {background: url(../../assets/img/lg_out_w.png) no-repeat center left; background-size: 18px;}

/*로그아웃*/
/* 페이지 중앙에 배치된 버튼과 텍스트 컨테이너 */
.power_logout_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 원형 전원 버튼 스타일 */
.round_power_button {
    background-color: #f9f9f9; /* 부드러운 화이트 톤 배경 */
    border: 2px solid #555; /* 회색 테두리 */
    width: 25px;  /* 버튼 크기: 100x100 */
    height: 25px;
    border-radius: 50%; /* 완전한 원형 버튼 */
    cursor: pointer;
    outline: none;
    position: relative;
    transition: background-color 0.3s, box-shadow 0.3s ease; /* 색상과 그림자 전환 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1), inset 0 4px 6px rgba(0, 0, 0, 0.15); /* 내부 그림자 효과 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 3px; /* Logout 텍스트와의 간격 */
}

/* 전원 아이콘 스타일 */
.power-icon {
    font-size: 15px; /* 전원 아이콘 크기 */
    color: #555; /* 회색 계열 아이콘 색상 */
}

/* 버튼 호버 시 */
.round_power_button:hover {
    background-color: #e0e0e0; /* 호버 시 밝은 회색 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), inset 0 4px 6px rgba(0, 0, 0, 0.15); /* 더 깊은 그림자 */
}

/* 버튼 클릭 시 */
.round_power_button:active {
    background-color: #87b9e5; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.2); /* 클릭 효과 */
    transform: scale(0.95); /* 살짝 눌린 듯한 효과 */
    color: white; /* 클릭 시 아이콘 색상 변경 */
}

/* 버튼 내부 아이콘 클릭 시 색상 변경 */
.round_power_button:active .power-icon {
    color: white; /* 클릭 시 아이콘 색상을 흰색으로 변경 */
}

/* Logout 텍스트 스타일 */
.logout_text > a {
    padding-left: 0px !important;
    font-size: 12px !important;
    color: #87b9e5 !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
    }



/*기본설정*/
.anc_txt {font-weight: 400; margin-top: 10px; display: block; font-size: 0.8rem; line-height: 1.4;}
.con_admin {margin-bottom: 0; width: 100%;}

/*sms 문자*/
.sms_bl {width: 100%; flex-direction:column; /* display: flex; align-items: stretch; */ /* padding-right: 20px; */}
.pdr0 {padding-right: 0;}
.txt_ct {margin-top: 8px; display: block; margin-left: 18px;}
.c_bytes,
.w_bytes {color: #ffbb50;}
.content1, .content2 {resize: none;}

.a-txt{
	padding-top: 22px;
    padding-left: 15px;
    padding-bottom: 10px;
    color:#3881ff;
    font-size: 1.1em;
    float: left;
    font-weight: 500;
}
/*실시간 이상수질 감시시스템 상단 고정*/
.w50-div{
	position: fixed;
    top: 53px;
    left: 0;
    right: 0;
    z-index: 10000; /*모달창 가려져서 안뜨는 오류 z-index속성값 설정: 10000이하 X*/
    
}    
/*경보 구분*/
.a-desct {
	border: 1px solid #98a3cc;
    border-radius: 5px;
    background: #f9f9f9;
    padding: 23px;
    margin: 15px;    
    width: 50%;    
}
.a-desct div {
	padding-top: 15px;
    line-height: 35px;
}
.a-desct b {
	font-weight: 500;
}
.a-desct > b:first-child {
    border-left: 5px solid #58a2e5; padding-left: 10px;
    color: #1636a8; font-size: 17px; font-weight:500;
}
.a-desct span {padding-left: 30px;}
.a-desct span:last-child {display: block;}

.dgbg {color:#006ccd}
.a-desct i {
	font-weight: 500;
    color: #3f3f3f;
}


.sidebar .nav .nav-item .nav-link {
  color: #bfc5d5;
}

.form-check-input.user_cl:checked {
  background-color: #2070c8;
  border-color: #2070c8;
}


.cb_h2 {
	position:relative; 
    margin-bottom: 0px;
    line-height: 40px;
    font-size: 1.3rem; 
    color: #fff; 
     }

/*감지시스템 버튼정렬*/
.flex_a{
    display: flex;
    justify-content: right/* center */;
    align-items: center;
    /* padding-top: 45px; */
}

/*설치지점 목록 전체 보여주기*/
#allSitesNames{
    border: 1px solid #c5c5c5;
    height: 29px;
    min-width: 175px; 
    color: #ffffff; 
    background:#505050;
}

/*통합모니터링화면 돌아가기 버튼*/
.moni_btn {
    /* display: inline-block; */
    text-decoration: none;
    color: #FFF;
    /* padding: 2px 25px; */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    /* position: absolute relative; */
    top: 50%;
   /*  right: 470px;
    left: 50%; */
    transform: translateY(-50%);
    text-align: center;
    /* background:#487dc9 */ /* #149dff */ /* #0073ee */ /* #1b67b9 */;
    /* border: 2px solid #fff; */
    -webkit-transition: background 0.15s ease-in-out;
    -moz-transition: background 0.15s ease-in-out;
    -ms-transition: background 0.15s ease-in-out;
    -o-transition: background 0.15s ease-in-out;
    transition: background 0.15s ease-in-out;

}
.moni_btn {background: url(../../assets/img/computer.png) no-repeat center left;background-size: 18px;}
.moni_btn em {letter-spacing: 1px;}
.moni_btn i {
    /*   positioning */
    /* position: absolute; */
    opacity: 0;
    top: 0;
    left: 0;
    /*   gradient   */
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(1%, rgba(255, 255, 255, 0.03)), color-stop(30%, rgba(255, 255, 255, 0.85)), color-stop(50%, rgba(255, 255, 255, 0.85)), color-stop(70%, rgba(255, 255, 255, 0.85)), color-stop(71%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1 );
    /* IE6-9 */
  /*  forming the shine element
      play around with the width, skew and gradient to get different effects
    */
    width: 15%;
    height: 100%;
    transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-50deg, 0deg);
    -moz-transform: skew(-50deg, 0deg);
    -ms-transform: skew(-50deg, 0deg);
    -o-transform: skew(-50deg, 0deg);
    /*  animating it  */
    animation: move 2s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
    -webkit-animation: move 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 1s;
    -moz-transform: skew(-50deg, 0deg);
    -moz-animation: move 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 1s;
    -ms-transform: skew(-50deg, 0deg);
    -ms-animation: move 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-delay: 1s;
    -o-transform: skew(-50deg, 0deg);
    -o-animation: move 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-delay: 1s;
}

/*  */
@keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.2;
}
80% {
opacity: 0.0;
}
100% {
left: 82%;
}
}
@-webkit-keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.2;
}
80% {
opacity: 0.0;
}
100% {
left: 82%;
}
}
@-moz-keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.2;
}
80% {
opacity: 0.0;
}
100% {
left: 88%;
}
}
@-ms-keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.2;
}
80% {
opacity: 0.0;
}
100% {
left: 82%;
}
}
@-o-keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.2;
}
80% {
opacity: 0.0;
}
100% {
left: 82%;
}
}
.moni_btn span{
	line-height: 25px;
}
.moni_btn:hover span{
	color:#fff;
}
/*차트모아보기 scatterChart.jsp*/
.sctchart .navbar,
.sctchart .navbar .navbar-brand-wrapper,
.sctchart .navbar .navbar-menu-wrapper {background:#314c65 !important;}

.card {/*background-color:#222a40;*/ border: none; }
.card .card-body {padding:0.7rem;}
.card.tran_cl {
	/* background: linear-gradient(0deg, #3c536d, #3f5b7c); */ 
	height: auto;
	border-radius: 0;
	background: #314c65 !important;
	}
	
/*차트모아보기: dropdown 상세정보 ui*/
.card.tran_cl .data_rank .info_tit .cb_h2 .info_dropdown .dropdown_content {width: 550px !important;}

/*실시간 모니터링*/  
.data_rank {/* display: flex; */ align-items: center; justify-content: space-between;}

/*드랍다운*/
.dropdown-item:hover, .dropdown-item:focus {color: #fff;}
.txt_row {color: #afc5d5;}

.adc_ok {    
	background:#3f96e3;
    border: 1px solid #3f96e3; 
    border-radius:3px;
    color:#fff;
}

.adc_ok:hover,
.adc_ok:focus {background:#55b5ff;  border-radius: 0;}

.adc_st {background:#4e596e; /* border:1px solid #4e596e; */}
.adc_st:hover,
.adc_st:focus {background:#474747; /* border:1px solid #474747; */}

.rld_ok {background: #e7e7e7; /* border-color:#a9a9a9 !important; */}
.rld_ok:hover,
.rld_ok:focus {background:#b6c1c1; /* border:1px solid #b6c1c1; */}


.cond_srch {background: #1d3c71; font-size: 0.85rem; border:1px solid #1d3c71; margin-left: 5px;}
.cond_srch:hover,
.cond_srch:focus {background:#163770; font-size: 0.85rem; border:1px solid #163770;}

  /*소메뉴*/
  .sidebar .nav.sub-menu .nav-item .nav-link {color:#a7accb;}

    
    /*네비게이션 메뉴*/
    .menu_link li,
    .menu_link {height: 100%;}
    .menu_link li a { font-size: 0.9rem; display: flex; align-items: center; color: #fff; height: 100%; padding: 0 20px; color: #dfdfdf;}
    .menu_link li a:hover,
    .menu_link li a:focus {color: #fff;}
    .menu_link {display: flex; align-items: center; justify-content: flex-start;}


    /*탭 메뉴*/
    .tab_menu { padding:0; margin:10px auto 0; display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid #1d4e63; }
    .tab_menu li a {padding: 7px 10px; font-size: 0.9rem; color: #fff; display: block; background: #294374;}
    .tab_menu li:first-child a {border-radius: 3px 0 0 0;}
    .tab_menu li:last-child a {border-radius: 0 3px 0 0;}
    .tab_menu li a.active {background: #0f7ba8;}


/*과거 데이타 조회*/
.data_out {margin-right: 7px; text-align: right;
  display: flex;
  justify-content: center;
  align-items: center;
}
.data_out a {padding: unset; height: 29px; border-style:none;}
.data_out a img {width:29px;}
  
.data_time_input { /* width:45% 값설정X */ /* 35% */; display: flex; justify-content: flex-end; align-items: center; margin-left:20px; color: #fff;}
.data_rank {display: flex;/*<- 타이틀,콘텐츠 분리할때는 해제 */  align-items: center; justify-content: space-between;}


.act_on {background: #0092ff; border:1px solid #0092ff;} 
.act_on:hover,
.act_on:focus {background: #2271e6; border:1px solid #2271e6;}


/*이상구간*/
.sec_set input {width: 100%; text-align: right;}
.tlr {text-align:right;}
.sidebar .nav .nav-item.active > .nav-link:before {display: none; }
.sidebar .nav .nav-item.active > .nav-link {background: none;}
.degree_set { width:20%; max-width: 80px; line-height: 1; font-size: 0.8rem; outline: none; padding:5px 10px; border:0; border-radius: 3px; opacity: 0.9;}
.degree_set:hover,
.degree_set:focus { line-height: 1; border:0; outline: none;}
.sh_date_text.col-1 {padding-left:0; }

    input.degree_set::-webkit-input-placeholder {
      color: #888;
      font-size: 0.8rem;
    }
    input.degree_set:-ms-input-placeholder {
      color: #888;
      font-size: 0.8rem;
    }
    input.degree_set::placeholder {
      color: #888;
      font-size: 0.8rem;
    }
.unit_txt {font-size: 0.8rem; color: #fff; margin-left: 10px;}
.set_search_grp {background: #11213d; padding: 0; display: flex; align-items: center; justify-content: space-between;}   

.degree_stg {flex:1; display: flex; align-items: center; justify-content: flex-start;}
.magt {width:20%; max-width: 100px; padding: 10px; background: #1a3057;}
.mag_input {width: 100%;}
.degt {width:78%;  padding: 10px;}
.magt .degree_set {max-width: 100%;}

/*씨리얼 코드*/
.n_area_name p.serial_code {font-weight: 500; color: #2656a9; font-size: 1.2rem;}
.serial_code input {border-radius: 3px; color: #2656a9; font-weight: 500; border:none;}
.serial_code input:disabled {
  background: #ececec;
  color: #888;
}

/*sms 알람메세지*/
.form-check .form-check-input {margin-left: -1.2rem;}
.fck_div {display: flex; align-items: center; justify-content: flex-start;}
.form-check.fck_div .form-check-input {margin-top: 0 !important;}
.form-check.fck_div .form-check-label {color: #afc5d5; cursor: pointer;}


/*그래프 출력구간*/
.min_h {height: calc(100% - 8px); /*height: calc(100% - 77px);*/ /*min-height: 300px; height: 45%; max-height: 400px;*/}
/* .auto_h {height: calc(100% - 71px); } 회색영역 높이설정값 임의삭제*/ 
.min_h .card-body {overflow:hidden; /* background: #141b28; */ border-radius: 5px;}
.min_h .card {height: 100%;}

.min_h .auto_h:nth-child(1) {padding-right: 0;}


.card.tran_cl1 {background: #2c3c58;}

.data_sh {
	width:111px /* 30% */; max-width: 150px; height: 29px; 
    margin-left: 1px;
    margin-right: 1px;
	font-size: 0.8rem; outline: none; padding:5px 10px; border:0; border-radius: 3px; opacity: 0.9;
}

.data_sh:hover,
.data_sh:focus { padding:0 !important; border:0;}
.card .card-title { margin-bottom:2.5rem !important; font-size: 0.9rem; }
.card.tb_wb {background: #fff;}
.sidebar {background: #1f2533;}
.nav-link.active > span {padding-right: 20px; background: url(../../assets/img/right_aw.png) no-repeat center right;}
.layout_chart {position: relative;}
.mag_txt_row {position: absolute; right:0; bottom: 0.5%; color: #ff903b; font-size: 0.8rem;}
.mag_txt_col {position: absolute; top:0; left: 0; color: #ff903b; font-size: 0.8rem;}
.mag_txt_col_cl {position: absolute; top:0; left: 0; color: #5ba8d9; font-size: 0.8rem;}

/*날짜*/
.data_output {margin-left: 10px; padding-right: 20px;}
.sh_date_text {color: #d8d8d8; font-size: 1rem; white-space:nowrap; margin-right:10px;}
.data_srh { padding: 10px; background: #0f2e45; border-radius: 5px;}
.data_time_input input {    
	text-align:center;
	font-size: 13px;
	padding-top: 9px;
    background: #ffffff;
    color: #3d6081;
}

/**날짜 up,down 버튼**/
.down-btn {
    border-style: none;
    padding: 2px 4px 3px 3px;
    background:#eaecef;
}

.data_time_input .down-btn:first-child{   
	margin-left: 10px !important;
}

.up-btn{
	border-style: none;
	padding: 2px 3px 3px 3px;
	background:#eaecef;
}

.down-btn:hover {
    background: #aaafb7;
}

.up-btn:hover {
    background: #aaafb7;
}

/*데이터 보기 버튼*/
#databtn {
	height:29px; margin-left:10px; padding: 4px 22px; 
	letter-spacing: 1px; background:#939393/* #818e99 */; 
	border:none; border-radius:0px; color: #fff; font-weight: 500;
	/* background:url(../../assets/img/data01.png) 98% center; */
}

#databtn:hover {background:#939393; border:1px solid #fff;}

/*위상수질 지표 그래프*/
.water-stat {
    position: relative;
}


/*점수란영역*/
.grad {
    position: absolute;
    top: 15px;
    right: 50%;
    transform: translate(50%, 0);
    letter-spacing: 3px;
    width: 380px;
    height: 50px;
    background: transparent;
    border-radius: 0px;
    border: 1px solid #858585;
   }
   
.grad ul {
   display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 5px;
    width:100%;
    padding-left: 1rem !important;
}

.grad ul li {
	display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 12px;
    border-right: 1px solid #858585 !important;
    width: 33.33%;
    }  
    
.grad ul li:first-child {padding-left: 0px;}
    
.grad ul li:last-child {border-right:none !important;}    
     
.grad b {
    display: inline-block;
    line-height: 19px;
	color: #fff;
    font-weight: 300;
    letter-spacing: 0px;
    font-size: 11px;
}   
/*생태독성도 TUe*/
.tue_amt {
	margin-left: 15px;
    font-size: 17px !important;
    letter-spacing: 0px;     
    color:#cd9735;
}
   
/* .grad::before {
    content: '';
    width: 50px;
    height: 1px;
    position: absolute;
    bottom: 20px;
    left: 23px;
    border: 1px solid #7bc7ce;
} */
/*점수란 점수표기*/
.grad_number {
    /* position: absolute;
    top: 0px;
    left: 30px; */
    margin-left: 15px;
    font-size: 20px !important;
    /* color: #ffd18e; */
    /* color: #e6c66b80; */
    color:#4a8aff;
}
.grad_number02{
	position: absolute;
    top: 10px;
    left: 30px;
    font-size: 25px !important;
    /* color:#ffd18e; */
    /* color: #e6c66b80; */
    color:#9d9d9d;
    font-weight: 600;
}
/**************/
/*위상수질 지표- 매우좋음표시*/
.grad .A-list {
    /* position: absolute;
    bottom: 12px; */
    /* left: 92px; */
    margin-left: 15px;
    font-size: 17px;
    color: #00baff !important;
    font-weight: 500;
	letter-spacing:.1px;
}
/*위상수질 지표- 좋음표시*/
.grad .B-list {
    /* position: absolute;
    bottom: 12px; */
    /* left: 92px; */
    margin-left: 15px;
    font-size: 17px;
    color: #13d565 !important;
    font-weight: 500;
    letter-spacing: .1px;
}
/*위상수질 지표- 보통표시*/
.grad .C-list {
    /* position: absolute;
    bottom: 12px; */
    /* left: 92px; */
    margin-left: 15px;
    font-size: 17px;
    color: #eccb49 !important;
    font-weight: 500;
    letter-spacing: .1px;
}
/*위상수질 지표- 나쁨표시*/
.grad .D-list {
    /* position: absolute;
    bottom: 12px */;
    /* left: 92px; */
    margin-left: 15px;
    font-size: 17px;
    color: #ffbb52 !important;
    font-weight: 500;
    letter-spacing: .1px;
}
/*위상수질 지표- 매우나쁨표시*/
.grad .F-list {
    /* position: absolute;
    bottom: 12px; */
    /* left: 92px; */
    margin-left: 15px;
    font-size: 17px;
    color: #ff5252 !important;
    font-weight: 500;
    letter-spacing: .1px;
}
/**************/
/*유입수질지표- 매우좋음표시*/
.grad02 .A-list {
    position: absolute;
    bottom: 12px;
    /* left: 92px; */
    margin-left: 15px;
    font-size: 16px;
    color: #00baff !important;
    font-weight: 500;
    letter-spacing: .1px;
}
/*유입수질지표- 좋음표시*/
.grad02 .B-list {
    position: absolute;
    bottom: 12px;
    /* left: 92px; */
    margin-left: 15px;
    font-size: 16px;
    color: #13d565 !important;
    font-weight: 500;
    letter-spacing: .1px;
}
/*유입수질지표- 보통표시*/
.grad02 .C-list {
    position: absolute;
    bottom: 12px;
    /* left: 92px; */
    margin-left: 15px;
    font-size: 16px;
    color: #eccb49 !important;
    font-weight: 500;
    letter-spacing: .1px;
}
/*유입수질지표- 나쁨표시*/
.grad02 .D-list {
    position: absolute;
    bottom: 12px;
    /* left: 92px; */ 
    margin-left: 15px;
    font-size: 16px;
    color: #ffbb52 !important;
    font-weight: 500;
    letter-spacing: .1px;
}
/*유입수질지표- 매우나쁨표시*/
.grad02 .F-list {
    position: absolute;
    bottom: 12px;
    /* left: 92px; */
    margin-left: 15px;
    font-size: 16px;
    color: #ff5252 !important;
    font-weight: 500;
    letter-spacing: .1px;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-1-19 13:26:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.5s linear both;
	animation: tracking-in-expand 0.5s linear both;
}
 @-webkit-keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }
  
.grad > span {
    position: absolute;
    bottom: 30px;
    right: 20px;
    font-size: 30px;
    color: #6be6dd87 !important;
}



/*점수란 점수표기->관련코드 주석처리*/
.w_grad {
    position: absolute;
    top: 10px;
    right: 10px;
    letter-spacing: 3px;
    border-radius: 50%;
    width: 33%;
    height: 50px;
    background: #b4cbdf0f;
    border-radius: 10px;}
    
.w_grad_number {
    position: absolute;
    top: 0px;
    left: 30px;
    font-size: 34px !important;
    /* color: #ffd18e; */
    /* color: #e6c66b80; */
    color: #b6bea3;}
    
/**************/
/*위상수질 지표- 매우좋음표시*/
.w_grad .A-list {
    position: absolute;
    bottom: 12px;
    left: 92px;
    margin-left: 15px;
    font-size: 16px;
    color: #00baff !important;
    font-weight: 500;
	letter-spacing:.1px;
}
/*위상수질 지표- 좋음표시*/
.w_grad .B-list {
    position: absolute;
    bottom: 12px;
    left: 92px;
    margin-left: 15px;
    font-size: 16px;
    color: #13d565 !important;
    font-weight: 500;
    letter-spacing: .1px;
}
/*위상수질 지표- 보통표시*/
.w_grad .C-list {
    position: absolute;
   bottom: 12px;
    left: 92px;
    margin-left: 15px;
    font-size: 16px;
    color: #eccb49 !important;
    font-weight: 500;
    letter-spacing: .1px;
}
/*위상수질 지표- 나쁨표시*/
.w_grad .D-list {
    position: absolute;
    bottom: 12px;
    left: 92px;
    margin-left: 15px;
    font-size: 16px;
    color: #ffbb52 !important;
    font-weight: 500;
    letter-spacing: .1px;
}
/*위상수질 지표- 매우나쁨표시*/
.w_grad .F-list {
    position: absolute;
    bottom: 12px;
    left: 92px;
    margin-left: 15px;
    font-size: 16px;
    color: #ff5252 !important;
    font-weight: 500;
    letter-spacing: .1px;
}


/*시계*/
.clock_h4 {display: flex; align-items: center; justify-content: space-between;}
#clock {margin-left: 5px; margin-top: 2px; color: #dfdfdf; width: 95px; text-align: center;}
.real_clock {font-size: 0.7rem; color: #ff720a;}
.clock_zone {display: flex; align-items: center; justify-content: flex-start; margin-left: 25px;}
.clock_zone > img {width: 14px;} 

.point_title {
    padding: 7px 10px; 
    text-align: left; 
    word-break: break-all; 
    white-space: normal; 
    display: -webkit-box; 
    -webkit-line-clamp:2; 
    -webkit-box-orient:vertical; 
    overflow: hidden; 
    background: #2c5c95 /* #1a4abe */; 
    border-radius: 20px;
    }

/*mag,deg*/
.mag_deg {
	display: flex;
    width: 95%;
    height: 30px;
    /* background: #efefef; */
    background: #fff/* #e8f0f7 */;
    /* border: 2px solid #236caf; */
    border-radius: 20px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: -5px 5px 14px 0 #b3b3b3;
}
.mag_deg b {line-height: 35px;}
.mag_deg span {width:35%; height:35px;background:#d9e4f7;}
.mag_deg span:first-child {margin-right: 10px !important;}


/*transition menu bar*/
.navbar-toggler.open span.mid{top:23px; opacity:0;
  transform:translate3d(0, 150px, 0) rotate(-720deg);
  -webkit-transform:translate3d(0, 150px, 0) rotate(-720deg);
  -moz-transform:translate3d(0, 150px, 0) rotate(-720deg);
  -o-transform:translate3d(0, 150px, 0) rotate(-720deg);
  background: #fff;
}
.navbar-toggler.open span.dw{top:32px; opacity:1;
  transform:translate3d(0, -8px, 0) rotate(-45deg);
  -webkit-transform:translate3d(0, -6px, 0) rotate(-45deg);
  -moz-transform:translate3d(0, -6px, 0) rotate(-45deg);
  -o-transform:translate3d(0, -6px, 0) rotate(-45deg);
  -ms-transform:translate(0, -6px) rotate(-45deg);
  background: #fff;
}
.navbar-toggler.open span.up{top:32px; opacity:1;
  transform:translate3d(0, 8px, 0) rotate(45deg);
  -webkit-transform:translate3d(0, 8px, 0) rotate(45deg);
  -moz-transform:translate3d(0, 8px, 0) rotate(45deg);
  -o-transform:translate3d(0, 8px, 0) rotate(45deg);
  -ms-transform:translate(0, 8px) rotate(45deg);
  background: #fff;
}

.content-wrapper {padding: 0.1rem; padding-bottom: 0; }
.grid-margin {margin-bottom: 0;}
.grid-margin div:nth-child(n+2){ padding-right: 0;}


/*레프트 메뉴*/
.sidebar .nav.sub-menu {padding-left:1.5rem;}
.sidebar .nav .nav-item .nav-link i.menu-arrow {color: #4092d1;}


/*환경설정 table excel*/
.table-bordered thead th { color: #dedede;}
.table-bordered.tb_set {border-radius: 3px;}
.table-bordered.tb_set th{ /*border-bottom: 0 !important; border-bottom-color:unset !important;*/ border-bottom: 1px solid #000 !important;}
.table-bordered.tb_set td {background-color:#373c4a; color:#c2c2c2;}

.table.tb_set th {background: #42577d;}

/*범위변경*/
.r_change { padding: 5px 7px ; background: #dfdfdf; border-radius: 3px;}
.r_change:hover,
.r_change:focus {background: #e3e3e3; color: #222;}
.table-bordered.tb_set td.set_degree {color: #ffb90e;}

.set_cau {width: 100%; 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.set_wpoint {border:1px solid #dfdfdf; background: #fff; 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.set_wpoint p {font-size: 0.85rem; color: #767676; font-weight: 500; margin-bottom: 20px; line-height: 1.3;}
.set_wpoint_txt { display: flex; align-items: center; justify-content: flex-start; margin-top: 20px; margin-bottom: 20px; background: #ececec; border-radius: 5px; border:1px solid #f1f1f1; padding: 20px;}
.set_wpoint_txt > div {margin:0 30px 0 0;}
.bd_t_df {border-top:1px solid #0b1423 !important;}
.bd_b_df {border-bottom:1px solid #0b1423 !important;}
.cau_lv {color: #d88600; font-size: 0.9rem; margin-bottom: 10px;}
.sms_rd {color: #fff;}
.cau_lv.cau_rd {color: #ff1200;}
.sms_or1 {color: #fff; font-weight: 500;}
.cau_lv.cau_or {color: #de8d0a;}
.cau_lv.cau_or + div > input { border:1px solid #dfdfdf; color: #222; padding: 10px;}
.cau_lv.cau_rd + div > input { border:1px solid #ff1200; color: #ff1200;}
.name_ch {    
    border-radius: 5px;
    background: #464784;
    color: #fff;
    border: 0;
    cursor: pointer;
    padding: 8px;
    font-size: 0.8rem;
}

.list_winput,
.tit_ul {background: #fff; width: 100%; display: flex; align-items: center; justify-content: center;}
.tit_ul {background: #0c2b6f; color: #fff; font-weight: 600;}
/* .tit_ul li {font-size: 0.85rem; padding-top: 10px; padding-bottom: 10px; width: 25%; text-align: center;} 기존220628*/
.tit_ul tr {width:100%; display:flex; align-items:center; justify-content:center;}
.tit_ul th {font-size: 0.85rem; /* padding-top: 10px; padding-bottom: 10px; */ width: 25%; text-align: center;}

.table-box-wrap {
	position: relative;
	z-index: 0;
    top: 44px !important;
    margin-bottom: 60px;
}

/*테이블 타이틀 상단 고정*/
.table-box-wrap . table-box .tit_ul {
	position:absolute !important;
	top:-49px !important;
	width: 100%;
  height: 50px;
 /*  display: flex;
  align-items: center;
  justify-content: center; */
  background: #3565b8 /* #3a4b88 */ /* #0c2b6f */;
  color: #fff;
  font-weight: 600;
}

.table-box-wrap .table-box {
    /* max-height: 258px; */
    overflow: auto;
    overflow-x: hidden;
    overflow-y:scroll;
}

.table-box-wrap .table-box::-webkit-scrollbar  {width:10;}

.table-box-wrap .table-box table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
}

.table-box-wrap .table-box table thead tr {
    position: absolute;
    top: -49px;
    left:0px;
    z-index: 1;
    display: inline-table;
    width: 100%;
    table-layout: fixed;
}

.table-box-wrap .table-box table thead tr th {
    font-weight: normal;
    /* width: 120px; */
    height: 50px;
    background:#3565b8;
    color:#fff;
    vertical-align: middle;
    font-size: 17px;
}

.table-box-wrap .table-box table td {
    text-align: center;
    /* height: 40px; */
    vertical-align: middle;
    /* border-top: 1px solid #ccc; */
}

/*중복 
.table-box-wrap .table-box table tr {
    display: inline-table;
    width: 100%;
    table-layout: fixed;
} */

.table-box-wrap .table-box table tbody tr {
    display: table-row;
    border-bottom: 1px solid #dfdfdf;
    height: 50px;
}

/*설치지점 등록 데이터테이블 내 표출 이미지 사이즈 고정*/ 
.set_water .list_winput  td > img {width:50px; height: 50px;}

/* .admin_info { display: flex; align-items:stretch; justify-content:flex-start; border-top:1px solid #000; border-bottom: 1px solid #000; background: #ddd; margin-bottom: 20px; padding: 0 0 0 0;}  */
.admin_info2 { display: flex; align-items:stretch; justify-content:flex-start; border-top:1px solid #000; background: #ddd; padding: 0 20px 0 0;} 
.tit_admin { background:#3565b8 /* #3a54af */ /* #223867 */; margin-right: 20px; font-size: 0.85rem; color: #fff; font-weight: 500; width: 100% /* 150px */; padding:15px; padding-left: 13px;}
/*.tit_admin2 {margin-right: 20px; font-size: 0.85rem; color: #4a6aaf; font-weight: 500; width: 116px;}*/

.tit_admin img {margin-right: 5px; opacity: 0.8;}
.zizum_tit {margin-right: 20px; font-size: 0.85rem; color: #4a6aaf; font-weight: 500;}
.ad_num_area {display: block; flex:1; width: 98%; height: 75px; color: #222; border:1px solid #dfdfdf; padding: 10px; font-size: 0.9rem;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: vertical;
    font-family: 'Poppins', 'Noto Sans KR', sans-serif;
    /* margin-top: 20px; */
    margin: 25px auto; 
    border-radius: 3px;
}
.ad_num_send {flex:1; width: 30%; color: #222; border:1px solid #dfdfdf; padding: 10px; font-size: 0.9rem; margin-top: 20px;}
.con_admin {flex:1; /* padding-bottom:20px; */}
.n_area_name {padding: 20px; padding-left:0;  font-size: 0.9rem;}
.n_area_name p {margin-bottom: 0; color: #000;}
.n_area_name em {margin-left: 3px; color: #5194c8;}
/* .mod_area { display: flex; align-items: center;justify-content: flex-start;} */
.mod_titname {
  padding: 7px;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  flex:1;
  font-size: 1rem;
  margin-right: 10px;
}
.anc_txt { display: block; margin-top: 10px; margin-bottom: 20px; padding-left: 15px; font-weight: 400;  font-size: 0.8rem; color:#3565b8; line-height: 1.4;}
.w_sms {display: flex; align-items: center; justify-content: flex-start;}
.w_sms .admin_info {width: 49%; padding:15px; background: #f1f1f1; border-radius: 5px;}
.w_sms .admin_info:nth-child(1) {margin-right: 2%;}
.w_sms .tit_admin {text-align: right;}
.w_sms .ad_num_area {resize: none;}
.w_sms p.con_admin {margin-bottom: 0;}

.admin_info.pdr0 .anc_txt {color: #e60000;}
.degr {margin-left: 10px; font-size: 0.8rem;}

/*(전송)확인버튼*/
.send_btn {
	padding-right: 13px; 
	}
	
.send_btn > button {
    border-radius: 5px;
    background: #0e69be;
    color: #fff;
    border: 0;
    cursor: pointer;
    padding: 6px 15px;
    font-size: 0.8rem;
	font-family: GmarketSansMedium !important;
    line-height:36px;
}

.send_btn > button:hover{background: #2093ff;}

/*취소버튼*/
.send_btn > button.cancel {
	background: transparent;
    color: #888;
    border: 2px solid #c3c3c3;
    font-weight: 500;
    font-family: GmarketSansMedium !important;
    line-height:36px;
    }
    
.send_btn > button.cancel:hover {
	background:#282828;
	color:#fff;
	border:2px solid #282828;
	}
	
.tar {text-align: right;}
.mb0 {margin-bottom: 0 !important;}

/*지점명 등록*/
.mod_area {display: flex; align-items: center;justify-content: flex-start;}
.mod_titname {
  padding: 7px;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  flex:1;
  font-size: 1rem;
  margin-right: 10px;
}
.cau_txt { margin-left: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 0; color: #d88600; }
.reg_input {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;}
  
/*지점등록, 입력*/
.setInput {
  display: inline-block;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: none;
  padding: 0.375rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1;
  border-radius: 0.1875rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background: #2c5cb1;
}
.setInput:hover,
.setInput:focus {color: #fff; border: none; }

/*지점등록, 삭제*/
.cancel {
  display: inline-block;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: none;
  padding: 0.375rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1;
  border-radius: 0.1875rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background: #888;
}
.cancel:hover,
.cancel:focus {color: #fff; background: #626262; border: none;}

/*요일별,시간별 모달창*/
.inputbtn{
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-day{
  height: 29px;
  padding: 3px 10px 3px 10px;
  border-radius: 0px;
  background-color: #d3e1f733/* #b42c2c */;
  color: #fff;
  border: 1px solid;
}
.btn-time{
  height: 29px;
  margin-left:5px;
  padding: 2px 10px 2px 10px;
  border-radius: 0px;
  background-color: #d3e1f733/* #b42c2c */;
  color: #fff;
  border: 1px solid;
}

.modal-dialog{
  position:absolute;
  top:50%;
  left:50%;
  margin-top: -200px;
  margin-left: -350px;
  
}
.modal-content{
  width:700px;
  height:400px;
  background: #f4f4f4; border:none; border-bottom: 1px solid #cbcbcb;
}
.modal-title{
  padding-left: 30px;
  text-align:center;
  color:#3e486c;
}
.modal-title img {
	width: 20px;
    margin-bottom: 6px;
    margin-right: 11px;
}

.search-day{
  display: block;
  margin-bottom:30px;
}
.day-cont{

  padding-top: 40px;
  padding-left: 140px;
}
.sh_day_text{
  font-size: 18px;
  color:#000;
}
/*요일별, 시간별 날짜조회 input height*/
#fr_date_week{height:40px; width: 30%; border: 1px solid;}
#to_date_week{height:40px; width: 30%; border: 1px solid;}

#fr_date_time{height:40px; width: 30%; border: 1px solid #000;}
#to_date_time{height:40px; width: 30%; border: 1px solid #000;}
 	
 	
.daylist{
  /* float:left;  */
  display: block;
}

/*요일별, 시간별 버튼 스타일*/
#analWeek,
#analTime {
	background:#395875;
	border:1px solid #afafaf;
}
#analWeek:hover,
#analWeek:focus,
#analTime:hover,
#analTime:focus {
	background:#333;
	border:1px solid #fff;
}

/******* The Modal (background) checkdata 모달 211221*******/
.modal2 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content2 {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/***********설치지점 등록 *수정*,지점*추가*모달************/
.modal3 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content3 {
  position: fixed; /*중앙정렬*/
  top: 50%; 
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);	
  background-color: #fefefe;
  /* margin: 15% auto;  *//* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}
.modal-body{
  padding: 0;
}
.modal-body span select{
  width: 27%;
  height: 40px;
  /* margin-left: 10px; */
  /* padding-left: 50px; */
  text-align:center;
  border-style: none;
  background: #eef2f7;
}
.modal-body p{
  text-align:center;
  padding-top: 60px;
  font-size: 1rem;
  color: #314f7a;
  }
	    
/*     .day-cont p{
    	clear: both;
	    padding-top: 60px;
	    padding-left: 8px;
    } */
.time-cont{
  overflow: hidden;
  text-align: center;
  padding-top: 35px;
    
/* 	    padding-top: 40px;
	    padding-left: 130px; */

	}
.sh_time_text{
  font-size: 18px;
  color:#000;
}
/*     .timelist{
    	float:left;
    } */
.timelist{
  display:flex;
  justify-content:center;
  align-items:center;
}
.timelist > div > select{
  width: 60px;
  height:40px;
  margin-left: 10px;
  /* padding-left: 5px; */
  text-align:center;
  border-style:none;
  background: #eef2f7;
}
.time-cont p{
  clear: both;
  padding-top: 60px;
  padding-left: 8px;
}
.modal-footer{
  text-align: center;
  display: block;
}
.modal-footer button{
  width: 45%;
  height: 50px;
  border: none;
  background: #d4d4d4;
  font-size: 18px;
  letter-spacing: 4px;
  
}

.modal-footer button:hover {background:#ebebeb;}

.modal-footer button:last-child{
  width: 45%;
  height: 50px;
  background-color: #0d6efd;
  color: #fff;
}
.modal-footer button:last-child:hover {
	background-color:#3d84ed;
}

/*close 닫힘 버튼 스타일*/
/* .modal-content {
    position: relative;
    background-color: #fff;
}    
.modals-default .close, .modal-header .close, .modal-sm .close, .modal-large .close {
    position: absolute;
    right: -15px;
    top: -15px;
    background: #00c292;
    opacity: 1;
    color: #fff;
    height: 26px;
    width: 25px;
    border-radius: 50%;
    font-size: 18px;
    outline: none;
}     */

/*모달창 달력 z-index*/
.datepickers-container{
  z-index: 10001 !important;
}
/*모달팝업*/
.modal-content {background: #fff; border:none; border-bottom: 1px solid #cbcbcb;}
.modal-header {/* background: #f5f5f5; */ border-style: none; border-bottom: 1px solid #cbcbcb;}
.modal-footer {    border-style: none;/* border-top: 1px solid #cbcbcb; */}
/*모달팝업 close 버튼*/
.modal-header .close {
    padding:0 !important/*  -2rem -2rem */;
    margin: auto !important/* -25px -26px -25px auto */;
    position: absolute;
    right: 0;
    top: -58px;
    font-size:66px;
    font-weight: 100;
    color:#fff;
    opacity:1;
    }
    
/*모달팝업 관리자 정보*/
/* .modal_admin {}   */
.inp_lab {width: 20%; min-width:80px;  display: inline-block; font-size: 0.85rem;}
.inp_lab + em {width: 80%; display: inline-block;}
.modal_admin {margin-bottom: 10px;}    
.md_input {border-radius: 3px; width: 100%; outline: none; border:1px solid #dfdfdf; font-size: 0.9rem; padding: 10px;}
.md_input:hover,
.md_input:focus { border:1px solid #dfdfdf; }

input.md_input::-webkit-input-placeholder {
  color: #c1c1c1;
}
input.md_input:-ms-input-placeholder {
  color: #c1c1c1;
  font-style: italic;
}
input.md_input::placeholder {
  color: #c1c1c1;
}

/**/
#test .reg_btn {
    border: 1px solid #92a8d5;
    background: #f9f9f9;
    padding: 5px 20px 2px 18px;
    margin-left: 9px;
    color: #2b4e96;
    font-size: 14px;
    }

/** 설치지점 추가 모달창 항목추가 **/
/*1. 강우량 코드 사이트 이동 및 툴팁*/
.rain_code > label {
    margin-right: 10px;
    font-weight: bold;
}

.rain_code > input[type="text"] {
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 15px;
    width: 150px;
}

.rain_code .move_btn {
    background-color: #777;
    padding: 6px 10px;
    font-size: 11px;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    margin-left: 10px;
}

.rain_code .move_btn:hover {
    background-color: #91989d;
}

.rain_code td {    
	display: flex;
    justify-content: flex-start;
    align-items: end;
    }

.rain_code .info_dropdown .dropdown_content span,
.md_rdbtn .info_dropdown .dropdown_content span {
	line-height: 18px;
    font-size: 14px;
    }

/*2. 주파수 선택 radio button */
.md_rdbtn {position: relative;}

.radio_group {
    display: flex;
    justify-content: stretch;
    align-items: center;
    position: absolute;
    top: -4px;
}

.custom_radio {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;    
}

.custom_radio > input[type="radio"] {
    display: none; /* 기본 라디오 버튼 숨기기 */
}

.custom_radio:first-child { margin-right:20px;}

.radio_btn {
    width: 18px;
    height: 18px;
    border: 2px solid #6d7aab; /* 라디오 버튼 테두리 색상 */
    border-radius: 50%; /* 원형 */
    position: relative;
    margin-right: 10px;
    transition: background 0.3s ease;
}

.custom_radio > input[type="radio"]:checked + .radio_btn {
    background-color: #d92020; /* 체크된 경우 배경색 */
}

.custom_radio > input[type="radio"]:checked + .radio_btn::after {
    content: '';
    width: 7px; /* 내부 원의 크기 */
    height: 7px;
    border-radius: 50%;
    background: white; /* 내부 원의 색상 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/********서브페이지(관리자정보)**********/
/*나란히정렬*/
/* .rel_sec{
  display: inline-flex;
} */
.tab_page{
  display: contents !important; /*element: list~ 해제*/
}
.branch_div { 
  height:100%;	
  /* height: calc(100% - 42px); 기존(오류)*/
  display: flex;
  align-items: flex-start;
  justify-content:space-between; /*end*/
  min-width: 1000px;
}  
/*관리자정보 탭*/     
.set_menu {
  /* width: 20%;
  min-width: 200px; */
  /* width:20%; */
  /* min-width:200px; */
  width: 30%;/**/
  max-width: 250px;/**/
  /* background: linear-gradient(328deg, #69ceff, #3c58b9); */
  background: linear-gradient(186deg, #416caf, #54aaf1);
  height: 100%;
  /* height: 100vh; */
  /* border-right: 1px solid #eee; */
}
.set_menu h2 {
  padding: 30px;
  margin-left: 20px;
  color: #fff;
  /* color: #0d338d; */
  font-weight: 500;
  /* border-bottom: 1px solid #eee; */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.set_menu h2 > img {
  margin-right: 8px;
}
.st_menu {
width: 100%;
}
body a {
  color: #494949;
  text-decoration: none;
}
.st_menu a {
  padding-top: 15px;
  padding-bottom: 15px;
  display: block;
  width: 100%;
  margin: 0 auto;
  font-size: 0.8rem;
}
.container{
	width: 100%;
	margin: 0 auto;
}
ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.tabs li{
	/* background:#f5f5f5; */
	color: #222;
	display: inline-block;
  /* padding: 23px 0; */
	cursor: pointer;
}

ul.tabs li.current{
	background:#fff;
	/* background: #223867; */
	color: #222;
	border-left: 6px solid #b4c9df;
	width:98%;
	/* animation-duration: 3s !important;
    animation-name: slidein !important; */
}
/* @keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}*/

.tab-content{
	display: none;
	background: #fff /* #ededed */;
	padding: 15px;
	height: 100%; /*스크롤바생성위해 높이설정*/
	
	/* padding: 0px 12px;
	width: 70%;
	border-left: none;
	height: 300px; */
}
#tab-1,
#tab-2,
#tab-3 {
	overflow: scroll;
}
.tab-content.current{
	display: flex;
    flex-direction: column;
	/* display: inherit; */
}
.tab-links{
  display: block;
  background-color: inherit;
  color: black;
  /* padding: 22px 16px; */
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
}
/* .tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 30px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}
.tab button .current {
  background-color: #ccc;
} */
/* .st_menu .on {
  background: #f6f6f6;
}   */
/******************************************************************/
/*Hoverable Dropdown 드롭다운 상세설명 ui  참고:  https://www.w3schools.com/howto/howto_css_dropdown.asp   */    

.info_tit{
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    }
 .drop_tit {
  color: black;
  border: none;
}
.info_dropdown {
  position: relative;
 /* display: inline-block; */
  cursor:pointer !important;
}
.dropdown_content {
  display: none;
  position: absolute;
  background-color: #f7f7f7;
  color:#000;
  border: 1px solid #3565b8;
  padding:10px;
  min-width: 300px;
  border-radius: 5px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align:left !important;
}
.info_dropdown:hover .dropdown_content {display: block;}
.info_dropdown img {margin-bottom: 3px;}
/*********************/

/*버튼색상*/
.ch_water_h {
  word-break: keep-all;
  display: inline-block;
  background:#f8fafd;
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid #3565b8;
  border-radius: 3px;
  font-size:1rem /* 0.75rem */;
  color: #3565b8;
  font-family: 'GmarketSansMedium';
}

.ch_water_h:hover {background:#fff;}

#tab-2 .btn_save {
	color: #fff;
    background: #2d60b7;
    padding: 5px 20px;    
    }
    
#tab-2 .btn_save:hover {background:#5279bb;}   

.st_menu a em {
  display: block;
  width: 200px;
  margin-left: 50px;
  color:#fff;
}  
.st_menu .current em {
  color: #133f97;
  font-weight: 700 !important;
  /* color: #fff;
  font-weight: 400 !important; */
  /*아이콘이미지 background: url(../../assets/img/bookmark.png) url(../../assets/img/tab_arw.png) url(../../assets/img/bar_m.png) no-repeat center left; */
  background-size: contain;
  margin-left: 43px;
  /* padding-left: 22px; */
  animation-duration: 1s;
  animation-name: slidein;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 10%;
    width: 100%;
  }
}	




/* .tab-content {
  float: left;
  padding: 0px 12px;
  width: 70%;
  border-left: none;
  height: 300px;
} */
/*기본설정*/
.out_ly {
  width: 100%;
  padding: 0 20px;
  height: 100%;
  background: #fff;
}
/* form[name="theForm"] {
  width: 100%;
  height: 100%;
  padding: 20px 30px;
} */
/*페이지아이콘들 정렬*/
img{
  vertical-align: middle;
/*   padding-right:5px; */
}
.set_lyout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.set_cau {
  width: 100%;
}      
.admin_info {
  flex-direction:column; /*콘텐츠 세로정렬*/	
  /* display: flex;
  align-items: stretch;
  justify-content: flex-start; */
  border-top: 1px solid #104082;
  border-bottom: 1px solid #bfbdc9;
  margin-bottom: 60px;
  background: #ffffff;
  /* padding: 0 20px 0 0; */
}
.set_lyout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* .admin_info {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  border-top: 1px solid #104082;
  border-bottom: 1px solid #eee;
  background: #fff;
  margin-bottom: 20px;
  padding: 0 20px 0 0;
} */
/* .send_btn {
  margin-top: 20px;
} */
.tar {
  text-align: right;
}      
.pdr0 {
  padding-right: 0;
}
/*이상구간 설정 탭페이지*/
#tab-2 .out_ly {
  width: 100%;
  padding:0 20px;
  height: 100%;
  background: #fff;
}
.set_lyout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.set_lyout h2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  background: /*#0f3952*/ /*#1173ad*/ transparent;
  border-radius: 5px 5px 0 0;
  font-size: 0.9rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #0f3952;
  font-size: 22px;
  font-weight: 400;
  color: #313131;
  margin-bottom: 15px;
  margin-top: 40px;
}
.set_lyout h2 img {
  margin-right: 10px;
}
.set_water {
  width: 100%;
  height: 303px;
  /* overflow-y: scroll; */
  overflow: auto; 
  border: 1px solid #dfdfdf;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*중복 
.list_winput, .tit_ul {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3565b8 #3a4b88 #0c2b6f;
  color: #fff;
  font-weight: 600;
}  */
.tit_ul li {             /*설치지점등록페이지 ul li 일단 살려두기*/
  font-size: 0.85rem;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 25%;
  text-align: center;
  font-weight: 500;
}
.tit_ul tr {
  font-size: 0.85rem;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 25%;
  text-align: center;
  font-weight: 500;
}
.list_winput {
  border-bottom: 1px solid #dfdfdf;
}
.list_winput li { /**/
  padding: 5px;
  width: 25%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.3;
  word-break: keep-all;
}
.list_winput td {
  padding: 5px;
  width: 20%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.3;
  word-break: keep-all;
}

.list_winput li em {  /**/
  margin-left: 3px;
  color: #002fdb;
  word-break: keep-all;
}
.list_winput td em {
  margin-left: 3px;
  color: #002fdb;
  word-break: keep-all;
}
/*위상수질 경보알림 구간설정  Copyright (c) 2023 by 듀 (https://codepen.io/jgvoseid-the-styleful/pen/PoKMmXy)*/
 .cont-select {
      position: relative;
      width: 150px;
      margin: 0 auto;
  }

  .btn-select {
    width: 100%;
    padding: 10px 15px;
    font-size: 12px;
    text-align: center;
    /* line-height: 18px; */
    background-color: #fff;
    border: 1px solid #8597b7;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
    background: url(images/icon-Triangle-down.png) center right 14px no-repeat;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .btn-select:hover,
  .btn-select:focus {
      border: 1px solid #9B51E0;
      outline: 3px solid #F8E4FF;
  }

  .list-member {
      display: none;
      position: absolute;
      width: 100%;
      top: 40px;
      left: 0;
      border: 1px solid #8597b7;
      box-sizing: border-box;
      box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
      border-radius: 10px;
      width: inherit !important;
      background: #fff;
      z-index: 1;    
  }

  .btn-select.on {
      background: url("images/icon-Triangle-up.png") center right 14px no-repeat;
  }

  .btn-select.on+.list-member {
      display: block;
  }

  .list-member li {
      height: 33px;
      padding: 5px 8px;
      box-sizing: border-box;
      width:auto !important;
  }

  .list-member li button {
      width: 100%;
      border: none;
      background-color: #fff;
      border-radius: 5px;
      cursor: pointer;
      text-align: left;
      /* 말줄임 */
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
  }

  .list-member li button:hover,
  .list-member li button:focus {
      background-color: #c9d8fc;
  }

/***Degree/Magnitude 라디오버튼***/

/*******************************/
/*반응형그래프*/
/*영훈정비 앞*/
#mScatterLeft{
  width:100% !important;
  height:auto;
}

#sctByTimeLB{
  width:100% !important;
}	

/*이현복어 앞*/
#mScatterRight{
  width:100% !important;
  height:auto;
}

#sctByTimeRB{
  width:100% !important;
}	

/**canvas**/  
canvas{
  position: absolute;
  left: -20px;
  top: 0px;
  width: 100% !important;
  height: auto;
}

/*반응형canvas*/
#mScatterTest canvas {
  width:80%;
  height:80%;	
}

/* #sctByTime2ndRB > canvas {width:1190px !important;}--안됨 */
/*******************************/	  
.mt10 {margin-top: 10px;}
.mb0 {margin-bottom: 0px;}
.mrl0 {margin-left: 0px;}
.mrl5 {margin-left: 5px;}
.mrl10 {margin-left: 1px;} /*10px*/
.mrl15 {margin-left: 15px;}

/*반응형 고정 fixed*/
.sidebar-icon-only .navbar,
.sidebar-icon-only {min-width: 1000px;}

@media screen and (max-width: 2560px) {
	.power_logout_container {display:none;}
}

@media screen and (max-width: 1860px) {
   .alarm_txt{right:125px !important;}
}

@media screen and (max-width: 1770px) {
   .alarm_txt{right:90px !important;}	
}
	
@media screen and (max-width: 1700px) {
   /* .moni_btn {left: 24%;} */
}
	
@media screen and (max-width: 1643px) {
/*차트모아보기 select기능 모음란*/
.data_rank {height: 40px;}

/*상단메뉴고정*/
#wholeWrap{padding-top: 8px;}

/*점수란*/
.w_grad {height: 6vh;}
.w_grad_number {
    top: 8px;
    left: 16px;
    font-size: 26px !important;
    }
.w_grad .A-list, .grad .B-list, .grad .C-list, .grad .D-list, .grad .F-list {left: 70px;}

	
/* @media screen and (max-width: 1592px) { */
	.data_out{
		width:40%;
	}
	/* .adc_ok {
		width:40%;
	} */
	.rld_ok{
		/* width:60%; */
	}
/* @media screen and (max-width: 1470px) { */
	.btn-time{
		margin-left:5px;
	}
	.data_time_input{
		margin-left:20px;
	}
	.data_out{
		width:70%; 64%
	}
  .set_menu {
    width: 20%;
    min-width: 200px;
    width:20%;
    min-width:200px;
    width: 30%;
    min-width: 300px;
    }  	
    .alarm_txt{right:65px !important;}	
}

@media screen and (max-width: 1590px) {
   .cb_h2 {font-size:1rem;}
   .alarm_txt{right:95px !important; font-size:14px !important;}
}

@media screen and (max-width: 1500px) {
	/*상단메뉴고정*/
    #wholeWrap{padding-top: 65px;}
    .data_rank {display: block;}
    .sctchart .info_tit {align-items: center !important;}
    .sctchart .cb_h2 {
	  	background: none;
	  	/* width:100%; */
	  	/* margin-bottom: 2.5rem;  */
	  	font-size: 1.5rem;
	  	text-align: center; 
	}
	
	.sctchart .info_tit {justify-content: center;}
	.sctchart .flex_a {justify-content: center;}
	.sctchart .card.tran_cl {height: 125px;}
    .sctchart .alarm_txt{right:85px !important;}
}

@media screen and (max-width: 1450px){
	.w_grad {width: 40%;}
}

/**과녁판 그래프 1440 breakpoint**/	
@media screen and (max-width: 1440px) {
    canvas {width:90% !important;}
    .top_bg {height:50%; padding-bottom: 10px;}
    .layout_chart {display:none;}
    
    .col-6 {max-width: 33% !important;}	
   	.alarm_txt{right:65px !important;}
}	
  
@media screen and (max-width: 1390px) {
	.alarm_txt {right: 22px !important; font-size: 14px !important;}
	
	.col-sm-3.w50-div {
    	width: 100%;
    	max-width: 100%;
    	flex: 0 0 100%;
    }
}

@media screen and (max-width: 1270px) {
    .adc_ok{
  	  font-size: 13px;
      height: 29px;
    }
    .rld_ok{
	  font-size: 13px;
      height: 29px;
    }	
    canvas {
    width: 100% !important;
    }
    /*경고알람txt*/
    /* .alarm_txt{width:68% !important;} */
    .alarm_txt{top:0 !important; right: 100px !important;}
    #mScatter2ndRightInfo {right: 75px !important;}
    .mq_date{display:block !important;}
    
    /*점수란*/
    .w_grad {width: 50%;}
    .w_grad_number {
      top: 14px;
      font-size: 19px !important;
   }
}
  
@media screen and (max-width: 1200px) {
  
  .navbar{
  	max-width:100%;
  }
  .col-sm-3.w50-div {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .set_menu {
    /* width: 20%;
    min-width: 200px; */
    /* width:20%; */
    /* min-width:200px; */
    width: 25%;/**/
    min-width: 250px;/**/
  }
  .grad {width: 350px;}
  .grad ul li {padding-left: 3px;}
  .grad_number {
    margin-left: 13px;
    font-size: 15px !important;
    }
  .tue_amt {
    margin-left: 13px;
    font-size: 15px !important;
    }  
  .grad .A-list, .grad .B-list, .grad .C-list, .grad .D-list, .grad .F-list {margin-left: 13px; font-size: 15px;}  
   
}



@media screen and (max-width: 1190px) {
  .col-sm-3.w50-div {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .adc_ok{
/*   	font-size: 11px; */
    height: 29px;
  }
  .rld_ok{
/* 	font-size: 11px; */
    height: 29px;
  }
  /* .block400 {display:block;} */
  
  .sitelist {
    /* margin: 0 auto; */
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
}

@media screen and (max-width: 1150px) {
	.alarm_txt {right: 80px !important; font-size:13px !important;}
	
	/*상단메뉴고정*/
	.w50-div {
    	top: 50px;
    }
	.w50-div {
		padding-right: 0px !important;
    	padding-left: 0px !important;
	}
	
}

@media screen and (max-width: 1140px) {
  .menu_setting{margin-right:5px;}
}

@media screen and (max-width: 1110px) {
  .navbar .navbar-menu-wrapper {
    width: auto;
  }
  .menu_setting{
  	margin-right:5px;
  }
  .btn-day{
		font-size:13px;
	}
  .btn-time{
		font-size:13px;
	}
 
}

@media screen and (max-width: 1100px) {
	.sidebar-icon-only, 
	.navbar, 
	.sidebar-icon-only {min-width: auto !important;}
	/* .data_time_input {width: 60%  53%;} */
	/* .block400 {display:block;} */
	.top_bg {height:45% !important;}
    .alarm_txt{font-size: 12px !important;}
}	

@media screen and (max-width:1170px){
    .alarm_txt{margin:0 !important; top:10px !important;}
	.mq_date{display:block !important;}
}

@media screen and (max-width:1030px){
    .alarm_txt{right:85px !important;}
    #mScatter2ndRightInfo {right:50px !important;}
}

@media screen and (max-width:1008px){
  .card.tran_cl {height:235px !important;}	
  .flex_a {display:grid;}	
  #wholeWrap {padding-top: 180px;}
  #allSitesNames {min-width:80%;}
  .adc_ok{
  	/* font-size: 11px; */
  	font-size: 0.7rem;
    height: 29px;
  }
  .rld_ok{
	/* font-size: 11px; */
	font-size: 0.7rem;
    height: 29px;
    line-height: 17px;
  }	
  .w_grad {width: 76%;}
}

@media screen and (max-width: 1000px) {
  .navbar-menu-wrapper{width: 100%;}
  .sidebar-icon-only {min-width: 100%;}	
  .main-panel{min-width:100%;}
  .txt_row,
  .cb_h2 {font-size: 1.5rem;}
  .bkg-1, 
  .bkg-2,
  .bkg-3,
  .bkg-4 {
    background-size:16px;
  }

.card .card-title { font-size: 1.2rem; }

.date_out{
  width:100%;
}

.fade {
  background-color:rgba(0,0,0,.3);
  justify-content:center;
  align-items:center;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:none;
}  
.alarm_txt{right:75px !important;}
#mScatter2ndRightInfo {right: 60px !important;}
.point_title {font-size: 13px;}

}

@media screen and (min-width: 992px)/* (min-width: 992px) */{ 
  .sidebar-icon-only .page-body-wrapper {width: 100%;}
  /* .sidebar-icon-only .sidebar {
      width: 0;
  }
  .sidebar-icon-only .sidebar .sidebar-brand-wrapper {width: 100px;}
  .sidebar-icon-only .sidebar .nav .nav-item .nav-link {display: none;} */
}


@media screen and (max-width: 991px) {
  .page-body-wrapper {width: 100%;}
  .navbar {width: 100%; left:0;}

  .navbar .navbar-brand-wrapper {height: 50px; width: 100px;}
  .main-panel {padding-top: 50px;}
  .sidebar-offcanvas {top:50px;}

  .sidebar-offcanvas {
    max-height: calc(100vh - 50px);
  }
  .sidebar-icon-only .navbar {left:0;}
  .navbar .navbar-brand-wrapper .navbar-brand {padding-left: 0;}

  .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini {display: flex; justify-content: flex-start; align-items: center;}  
  .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini > img {width: 70%; margin-left: 10px; margin-top: -2px;}
  .navbar-menu-wrapper.flex-grow.d-flex.align-items-stretch {position: relative;}
  .navbar .navbar-menu-wrapper .navbar-toggler.navbar-toggler-right {position: absolute; right:1.75rem; padding: 0; padding-top: 5px; width: 20px; }
  .menu_setting {right: 1rem /* 4.75rem */;} /*상단 로그아웃메뉴랑 우측공백 줄임(반응형)*/
}
@media screen and (max-width: 909px){
  /* .data_time_input {width: 65% ;} */
  .flex_a {display:inherit;}
  .moni_btn {top:44%;}
  .data_out {width: auto;}
  .data_time_input {justify-content: center;}
  .cb_h2 {font-size: 1.3rem !important;}
  .data_time_input {padding-top: 15px;}
  .power_logout_container {display:inline-flex;} /*로그아웃 버튼 태블릿, 모바일 버전에서만 적용*/
  .info_dropdown {display:none;}
}

@media screen and (max-width: 870px) {
  .col-sm-3.w50-div {width: 100%; max-width: 100%; flex:0 0 100%;}
}
/**/
@media screen and (max-width: 885px /* 850px */) {
  .clock_z{width:100%; margin-left:0 !important;}
  .menu_setting{/* margin-top: 0 !important; */ right:1rem;}
  .data_output{font-size: 0.7rem; width:max-content;}
  
  /*모니터링시스템 정렬*/
  .data_rank {
    display: block;
  }  
  .cb_h2 {
  	background: none;
  	/* width:100%; */
  	text-align: center; 
	}
/*   .min_h{display: block;} */
   
   /* 모달창배경*/
  .modal-container .modal-body input{
  	width: 100%;
    height: 28%;
    font-size: 1rem;
  }
  .btn-day,
  .btn-time{height:30px; font-size: 15px;}
  .sh_date_text{
    font-size: 1rem;
  }  
  .data_time_input{	
    /* width: 68%; */
    display: flex;
    align-items: center;
    justify-content: center !important;
    margin: 0 auto;
  }

  .data_out {
    /* width: 63%; */
    width:auto;
  }  
  .adc_ok {
    font-size: 0.9rem;
  }
  .rld_ok {
   font-size: 0.9rem;
  }
  /*그래프3영역 여백 조절*/
  .col-6 {
    max-width: 32.888% !important;}
    
   .alarm_txt {right: 55px !important;} 
   #mScatter2ndRightInfo {right: 25px !important;}
}  
@media screen and (max-width: 840px){
   .alarm_txt {right: 40px !important;}	
   #mScatter2ndRightInfo {right: 10px !important;}
   
}	
/*태블릿반응형*/
@media screen and (max-width: 768px){
  .sctchart .info_dropdown {display:none;}
  .cb_h2 {display: none;}
  .card.tran_cl {height: 155px !important;}
  #wholeWrap {padding-top: 95px;}
  .sitelist {margin-top: 0px;}
  .modal-dialog {
	position: fixed;
	left: 50% !important;
	top: 50% !important;
	width: 85%;
	margin-top:0;
	margin-left:0;
	
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%) !important;
  }
  .modal-content {
    width: 100%; /* 70% */
    height: 50%;
  } 
  .day-cont {
    width:100%;
/*     padding-top: 10px; */
    padding-left: 73px;}
    
  .modal-body p{
	    padding-top: 30px;
	    width: 308px;
    	margin: 0 auto;
  } 

    .top_bg {height:35% !important;}
    
    /*그래프3영역 여백 조절*/
    .col-6 {
    max-width: 32.777% !important;}
    
    .data_time_input {
        width: auto;
    }
}
@media screen and (max-width: 720px) { 
	.menu_setting li:nth-child(n+2) > a > em {
		font-size:.8rem;
	}
}
@media screen and (max-width: 700px) { 
.w_grad_number {left: 32px;}
/*상단메뉴고정*/
#wholeWrap{padding-top: 95px;}	
.day-cont{padding-left: 2.3rem;}
.w_grad {width: 40%;}
.menu_setting em {display: none; /*700 이영역 이상함...체크!!!*/}

@media screen and (max-width: 605px){
	.card.tran_cl {height:195px !important;}
	#wholeWrap {padding-top: 140px;}	
	.sitelist {margin-top:0;}
	.cb_h2 {margin-top: 0; margin-bottom:12px;}
	.mq-h {height: 260px;}
	.data_out {position: absolute;bottom: 16px;}
	.moni_btn {top: 37%;}
	.adc_ok {width: 80px !important;}	
	.inputbtn {padding-bottom: 0px;}
}

@media screen and (max-width: 583px) {
  .data_time_input{width:100%;}
}

@media screen and (max-width: 576px) {
  .col-sm-3.w50-div {
    flex: 0 0 100%;
    max-width: 100%;
}

/*모달창-시간별분석select정렬*/
  .timelist {
        flex-direction: column;}
}

@media screen and (max-width: 550px) {
  .card.tran_cl {height: 200px !important;} 	
  .menu_setting em {display: none;}
  .menu_setting li {margin-left: 1rem;}
  .data_sh {max-width:30%; /* 100px; */}
  /* .col-6 {max-width:100% 32.666% !important;} */
}

@media screen and (max-width: 463px) {
  .data_out {width: 75%;}
  .data_sh {width: 100px;}
  .data_time_input input {font-size: 12px;}
}

@media screen and (max-width: 450px) {
  .inp_lab + em {width: 100%;}
}

/*425-mobile L*/
@media screen and (max-width: 425px) {
  /*모바일 반응형 헤더높이 수정*/
  .navbar,
  .navbar-brand-wrapper,
  .navbar-menu-wrapper {height:30px !important;}
  .menu_setting {top: 15px;}
  .logout_text {font-size: 13px;} /* 로그아웃 버튼  텍스트*/
  .round_power_button {width: 19px; height: 19px;} /* 로그아웃 버튼 크기조절 */
  .power-icon {font-size: 9px;} /* 로그아웃 아이콘 사이즈 */
  .card.tran_cl {margin-top: -20px;}
  #wholeWrap {padding-top: 110px !important;;}
  
  .card.tran_cl {height:190px !important;}
  .data_out {bottom: 13px;}  
  #wholeWrap {padding-top: 160px;}
  .sitelist {
    margin-top: 0px;
    margin-bottom: 12px;
    } 
  .point_title {margin: 0 auto; padding: 7px 30px;}

  /*점수란*/
  .w_grad { width: 46%;}
  .clock_z{width:100%; margin-left:0 !important;}
  .menu_setting{/* margin-top: 0 !important; */ right:1rem;}
  .data_output{font-size: 0.7rem; width:max-content; padding-right: 0px;}

  /*점수란'*/
  .grad {width: 312px;}
  .grad ul {padding-left: 3px !important;}
  
  /*모니터링시스템 정렬*/
  .data_rank {display: block;}  
  
  /*여기이상함 미디어쿼리700px설정값으로 나옴*/
  .cb_h2 {
  	background: none;
  	width:100%; 
    margin-top: 0rem;
    font-size: 1rem !important;    
  	text-align: center; 
  	}
  	
  .min_h{display: block;}
  /* .mq-h {height: 280px;} */
  
/* 모달창배경*/
  .modal-container .modal-body input{
  	width: 100%;
    height: 28%;
    font-size: 1rem;
  }
  
  .btn-day,
  .btn-time{height:30px; font-size: 12px;}
  .adc_ok i {font-size: 14px;}
  .data_out {width: auto/* 75% */;}
  .adc_ok {width: 100px/* 35% */;}
  .rld_ok {/* width: 62%; */}
  
/*사파리 새로고침 버튼 수정*/
  .adc_ok i, .rld_ok i{text-align: -webkit-center;     font-size: 1rem;}
  .day-cont{padding-left: 2.3rem;
  }
/*카드 배경*/
  .card {background-color:transparent;}

/* 모달창 select박스*/
/* .modal-body span select {
  height: 50px;
}   */
  .sh_date_text{font-size: .8rem;}  
  .data_time_input{	
    width: 100%;
    margin: 0 auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .min_h{width: 103%; /* 100%; */} /**425그래프회색상자 width값**/
    
  /*그래프425*/
  .col-6{max-width:100% !important;}
  
  .top_bg {height: 500px !important;}
  
  .card .card-title {margin-bottom: 1rem !important;}
  
  .mag_deg {width: 93%; bottom:20px;}
  
  
  /*경고알림 txt*/
 /*  .alarm_txt{top:6% !important; right: 2%; width: 72%;} */
   .alarm_txt{margin:17px 0 17px 0 !important; right:15px !important; font-size: 13px !important;} 
   .mq_date{display:inline-block !important;}
   
   .sh_date_text {margin-right: 2px;}
   
   .up-btn {
    padding: 2px 0px 3px 0px;
  } 
  .down-btn {
    padding: 2px 0px 3px 0px;
  }  
}
  
@media screen and (max-width: 420px) {
  .data_sh:first-child {margin-left: 0;}
  .data_time_input {display: flex; align-items: center; justify-content: flex-end; width: 100%;}	
  .data_rank {display: block;}
  /* .data_sh {width: 100%;} */
  .mon_min {margin-top: 5px;}
  .adc_ok, .adc_st { padding: 5px 8px }
  .data_out .adc_ok, .rld_ok {/* text-align: left; */ line-height: 1.4; word-break: keep-all;}
}

@media screen and (max-width: 400px) {
  .menu_setting {/* width:100%; */ right:0.8rem; /* right: 3.8rem; */}
  .menu_setting li {margin-left: 0.5rem; }
  /* .block400 {display:block;} */
  .sh_date_text {
    margin-right: 2px;
  }
  
  .mq-h {
    height: 270px;
  }
  .moni_btn {
    top: 40%;
    /* padding: 2px 10px; */
  }
  /* .flex_a {
    padding-top: 20px;
  } */
  .data_time_input {
    padding-top: 13px;
  }
  .sh_date_text {
    font-size: .8rem;
  }
  
}

/* @media screen and (max-width: 420px) {
  .cb_h2 {margin-bottom: 1rem;}
  .data_sh:first-child {margin-left: 0;}
  .data_time_input {display: flex; align-items: center; justify-content: flex-end; width: 100%;}
} */
@media screen and (max-width: 385px) {
   .top_bg {height: 475px !important;}
   .alarm_txt{margin:17px 0 17px 0 !important; right:10px !important; font-size: 13px !important;} 
   .mq_date{display:inline-block !important;}
   .data_sh {
    	width:85px;
    	padding: 5px 5px;
   }
}	

@media screen and (max-width: 375px){
   .navbar {width: 100%;}
   .rld_ok i{margin-right:0; font-size:13px;}
   .alarm_txt{margin:0 !important; top:10px !important; right:80px !important; font-size: 13px !important;} 
   .mq_date{display:block !important;}
   #mScatter2ndRightInfo {right: 50px !important;}
   #databtn {padding: 4px 4px;}
   
}
/*경보알림txt*/
	/*경고알림 txt*/
    /* .alarm_txt{top:4% !important; right: 2%; width: 65% !important;}
    .alarm_txt > em {font-size: 11px !important;} */

/*모바일반응형*/
/* @media screen and (max-width: 375px) {
  .clock_z{width:100%; margin-left:0 !important;}
  .data_output{font-size: 0.7rem;}
  .cb_h2 {
  	background: none;
  	width:100%; 
  	margin-top: 1.4rem; 
  	margin-bottom: 2.5rem; 
  	font-size: 1.3rem;
  	text-align: center; 
  	}
  .min_h{display: block;}
  
  모달창배경
  .modal-container input{
  	width: 100%;
    height: 28%;
    font-size: 1rem;
  }
  모달창 select박스
  .modal-body span select {
    height: 50px;
  }  
  .sh_date_text{
    font-size: 1rem;

  }  
  .data_time_input{	
    width: 100%;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .data_time_input input{	
  	height: 50px;
  }
  .data_out {
    width: 55%;
  }  
  .data_out button{
    height: 50px;
  }
  .data_out a{
    height: 50px;
  }
  .adc_ok {
    font-size: 0.5rem;
  }
  .rld_ok {
   font-size: 0.5rem;
  
  }
  .card-body{margin-bottom:10px;}
  .min_h{width: 100%;}
    
  그래프375
  .col-6{max-width:100% !important;}
} */
@media screen and (max-width:360px) {  
  .top_bg {height: 423px !important;}	
  .cb_h2 {font-size: 0.9rem !important;}
  .adc_ok{width:37%;}
} 

@media screen and (min-width:320px) {  

}