body {
  height: 100%;
  width: 100%;
  /*  min-width:1710px; */
}

html {
  width: 100%;
  height: 100%;
  background: var(--background);
  /*  min-width:1710px; */
}

select::-ms-expand {
  display: none;
}

#login {
  position: relative;
  min-height: 100vh;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2, 10, 24, 0.4) 0%, rgba(2, 10, 24, 0.3) 38%, rgba(248, 250, 252, 0.16) 100%),
    url(../images/login-bg.png) center center / cover no-repeat;
}

#login .login_wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  padding: clamp(32px, 6vw, 66px);
  box-sizing: border-box;
  background: transparent;
}

#login .login_wrap>.logo-sectionbox {
  position: absolute;
  top: clamp(32px, 6vw, 66px);
  left: clamp(32px, 6vw, 66px);
  width: auto;
  align-self: flex-start;
}

#login .login_wrap>.login-input-box {
  align-self: center;
}

#login .login_wrap .login-input-box {
  width: min(460px, 100%);
  padding: 54px 46px 48px;
  box-sizing: border-box;
  display: block;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(2, 10, 24, 0.34);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

#login .login_wrap .logo-sectionbox {
  width: 100%;
}

#login .login_wrap>.logo-sectionbox {
  width: auto;
  max-width: min(520px, calc(100% - 64px));
  color: white;
}

#login .login_wrap .logo-sectionbox h1 {
  /* width: 100%; */
  margin-top: 24px;
  font-size: 40px;
}

#login .login_wrap .logo-sectionbox span {
  display: block;
  margin-top: 14px;
  color: #8f9db1;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

/* #login .login_wrap .logo-sectionbox:after {
  content: '';
  clear: both;
} */

#login .login_wrap .logo-sectionbox img {
  float: none;
  width: 200px;
  height: auto;
}

/* #login .login_wrap .login-input-box .logo-sectionbox a {
  float: right;
} */

#login .login_wrap .login-input-box p {
  margin-bottom: 10px;
  color: #08142b;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

#login .login_wrap .login-input-box .login-card-desc {
  display: block;
  margin-bottom: 34px;
  color: #64748b;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

#login .login_wrap .login-input-box .login-sm-txt {
  font-size: 15px;
  color: #64748b;
  text-align: center;
  margin: 16px 0 24px;
}

#login .login_wrap .login-input-box .login-sm-txt span:after {
  content: '|';
  font-weight: 100;
  margin: 0 15px;
  color: #ECECEC;
}

#login .login_wrap .login-input-box .login-sm-txt span:last-child::after {
  content: unset;
}

#login .login_wrap .login-input-box .login-id {
  width: 100%;
  height: 58px;
  border: 1px solid #d8dee9;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 0 16px 0 44px;
  background: #fff url(../images/login-icon1.png) 16px center no-repeat;
  font-family: 'Apple SD Gothic Neo', 'Barlow', 'Noto Sans KR', sans-serif;
  font-size: 15px;
  color: #0f172a;
}

#login .login_wrap .login-input-box .login-id::placeholder {
  font-size: 15px;
  color: #a8b3c4;
  line-height: 21px;
  font-weight: 600;
}

#login .login_wrap .login-input-box .login-pw {
  width: 100%;
  height: 58px;
  border: 1px solid #d8dee9;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 0 16px 0 44px;
  background: #fff url(../images/login-icon2.png) 16px center no-repeat;
  font-family: 'Apple SD Gothic Neo', 'Barlow', 'Noto Sans KR', sans-serif;
  font-size: 15px;
  color: #0f172a;
}

#login .login_wrap .login-input-box .login-pw::placeholder {
  font-size: 15px;
  color: #a8b3c4;
  line-height: 21px;
  font-weight: 600;
}

#login .login_wrap .right-box {
  display: none;
}

#login .login_wrap .login-input-box .blue-bt {
  height: 58px;
  border-radius: 10px;
  /* background: #061a3a; */
  font-size: 17px;
  line-height: 58px;
  box-shadow: 0 12px 26px rgba(6, 26, 58, 0.25);
}

#login .login_wrap .right-box span {
  text-shadow: 0px 0px 7px rgb(41 41 41);
}

#login .login_wrap .right-box span .sm-txt {
  font-size: 35px;
}

#login .mob-rang {
  position: absolute;
  right: 0;
  top: 2%;
}

.login-chk-area {
  padding: 10px 0 24px;
}

.login-chk-area .login-chk {
  display: none;
}

.login-chk-area .login-chk+label {
  display: inline-block;
  font-size: 14px;
  color: #a9b1c6;
  line-height: 18px;
  padding-left: 20px;
  background: url(../images/login-chk-off.png) left 0 no-repeat;
  cursor: pointer;
}

.login-chk-area .login-chk:checked+label {
  background: url(../images/login-chk-on.png) left 0 no-repeat;
}

.login-chk-area .chk-login {
  color: #A5ADC1;
  font-size: 15px;
}

.login-chk-area span:before {
  margin-right: 5px !important;
  vertical-align: -3px;
}

.login-chk-area label>input[type="checkbox"]+*::before {
  content: url(../images/login-chk-off.png);
}

.login-chk-area label>input[type="checkbox"]:checked+*::before {
  content: url(../images/login-chk-on.png);
}

#join {
  background: #f1f3f6;
  height: 100%;
}

.join_wrap {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 50%;
  ;
  width: 50%;
  margin: 0 auto;
}

.join_wrap .join-tit {
  text-align: center;
}

.join_wrap .join-tit p {
  font-size: 45px;
  font-weight: 900;
  color: #000;
}

.join_wrap .join-tit span {
  font-size: 15px;
  font-weight: 200;
}

.join_wrap .join-content {
  padding: 20px 30px;
  background: #fff;
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.join_wrap .join-content h4 {
  border-bottom: 1px solid #000;
  font-size: 27px;
  margin-bottom: 20px;
  padding-bottom: 5px;
}

.join_wrap .join-content .sm-txt {
  font-size: 12px;
  color: #a8b9ce;
  margin: 10px 0 50px 0;
  font-weight: 200;
}

.join_wrap .join-content .tit-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 29px;
}

.join_wrap .join-content .tit-form p {
  font-size: 15px;
  color: #8a8a8a;
  font-weight: 700;
}

.join_wrap .join-content .tit-form2 {
  display: flex;
}

.join_wrap .join-content .tit-form3 {
  display: flex;
  align-items: center;
}

.join_wrap .join-content .in-contbox1 {
  display: flex;
  justify-content: space-between;
}

.join_wrap .join-content .in-contbox1 li {
  width: calc(50% - 25px);
}

.join_wrap .join-content .input-contbox1 input,
.join_wrap .join-content .input-contbox1 select {
  height: 38px;
  line-height: 38px;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background: #fff;
  font-size: 14px;
}

.join_wrap .join-content .input-contbox1 input::placeholder {
  font-family: 'Apple SD Gothic Neo', 'Barlow', 'Noto Sans KR', sans-serif;
  color: #ddd;
  font-weight: 300;
}

.join_wrap .join-content .join-inputBOX .tit {
  display: block;
  color: #005aff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

.join_wrap .join-content .join-inputBOX .tit span {
  margin-left: 5px;
  letter-spacing: -0.7px;
  display: inline-block;
  color: #999;
  font-weight: 300;
  font-size: 13px;
}

.join_wrap .join-content .in-contbox2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.join_wrap .join-content .in-contbox2 .join-inputBOX2 {
  width: calc(50% - 25px);
  margin-bottom: 25px;
}

.join_wrap .join-content .in-contbox2 .join-inputBOX2:nth-of-type(n + 7) {
  margin-bottom: 0;
}

.join_wrap .join-content .in-contbox2 .join-inputBOX3 {
  width: calc(50% - 25px);
}

.join_wrap .join-content .join-inputBOX4 {
  display: flex;
  align-items: center;
}

.join_wrap .join-content .join-inputBOX4 .tit {
  margin-right: 7px;
  color: #005aff;
  font-size: 14px;
  font-weight: 800;
}

.join_wrap .join-content .join-inputBOX2 .join-inputST {
  width: 100%;
}

.join_wrap .join-content .join-inputBOX2 .join-inputST2 {
  width: calc(100% - 75px);
}

.join_wrap .join-content .join-inputBOX2 .tit {
  display: block;
  color: #005aff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

.join_wrap .join-content .join-inputBOX2 .tit span {
  margin-left: 5px;
  letter-spacing: -0.7px;
  display: inline-block;
  color: #999;
  font-weight: 300;
  font-size: 13px;
}

.join_wrap .join-content .in-contbox2 .join-inputBOX3 {
  width: 100%;
  position: relative;
}

.join_wrap .join-content .join-inputBOX3 .tit {
  display: block;
  color: #005aff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

.join_wrap .join-content .join-inputBOX3 .tit span {
  margin-left: 5px;
  letter-spacing: -0.7px;
  display: inline-block;
  color: #999;
  font-weight: 300;
  font-size: 13px;
}

.join_wrap .join-content .join-inputBOX3 .station-select {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px 10px;
  margin-top: 10px;
  min-height: 35px;
  max-height: 71px;
}

.join_wrap .join-content .join-inputBOX3 .station-select.pd-station {
  padding: 10px 10px 0;
}

.join_wrap .join-content .join-inputBOX3 .station-select span {
  position: relative;
  background: #ececec;
  font-size: 13px;
  padding: 5px 25px 5px 5px;
  border-radius: 4px;
  display: inline-block;
}

.join3-hd {
  text-align: center;
}

.join3-hd .txt1 {
  font-size: 45px;
  line-height: 51px;
  margin-bottom: 15px;
}

.join3-hd .txt2 {
  font-size: 12px;
  font-weight: 200;
  color: #a8b9ce;
  border-radius: 55px;
  border: 1px solid #ddd;
  display: inline-block;
  ;
  margin: 0 auto;
  line-height: 19px;
  padding: 10px 25px;
}

.join3-hd .txt1 b {
  color: #1B53E3;
  font-weight: 900;
}

.join-table {
  border-top: 3px solid #ddd;
  width: 65%;
  margin: 0 auto;
  margin-top: 50px;
}

.join-table .tr {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #f1f3f6;
}

.join-table .tr .th {
  width: 30%;
  padding: 13px 0;
  font-size: 14px;
  border-right: 1px solid #f1f3f6;
  box-sizing: border-box;
  text-align: center;
  color: #999;
}

.join-table .tr .td {
  width: 70%;
  padding: 13px 0;
  font-size: 14px;
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
}

/* .join_wrap .join-content .join-inputBOX3 .station-select span:after {content:'';background:url(../images/btn_close01.png) no-repeat;width:10px;height:10px;display:inline-block;background-size:100%;position:absolute;right:8px;top:7px;} */
.pop-station-select {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 10px 0;
  margin-top: 10px;
  min-height: 35px;
  max-height: 71px;
  overflow: auto;
}

.pop-station-select span {
  position: relative;
  background: #ececec;
  font-size: 13px;
  padding: 5px 25px 5px 5px;
  border-radius: 4px;
  margin: 0 5px 10px 0;
  display: inline-block;
}

.join_wrap .join-content .article_text {
  border-radius: 5px;
  border: 1px solid #ddd;
  line-height: 19px;
  padding: 15px;
  font-size: 13px;
  font-weight: 200;
  color: #999;
  height: 110px;
  box-sizing: border-box;
  overflow-y: auto;
}

.join_wrap .join-content .chk-color-on {
  color: #2A2C32 !important;
}

.join_wrap .join-content label>input[type="checkbox"]+* {
  font-size: 14px;
  /* color:#ddd; */
}

.join_wrap .join-content label>input[type="checkbox"]:checked+* {
  color: #2A2C32;
}

.join_wrap .join-content label>input[type="checkbox"]+*::before {
  margin-right: 5px;
  vertical-align: -5px;
}

.join_wrap .join-content .join-form {
  text-align: center;
  padding-top: 40px;
}

.join_wrap .pro-number {
  display: flex;
  justify-content: space-around;
  width: 60%;
  margin: 0 auto;
  padding: 25px 0;
  box-sizing: border-box;
  align-items: center;
}

.join_wrap .pro-number .number-txtbox {
  text-align: center;
}

.join_wrap .pro-number .join-arrow {
  width: 17px;
}

.join_wrap .pro-number .join-arrow img {
  width: 100%;
}

.join_wrap .pro-number img {
  width: 70px;
}

.join_wrap .pro-number .number-txtbox p {
  position: relative;
  font-weight: 900;
  font-size: 27px;
  color: #1B53E3;
  padding: 0 20px;
  margin-bottom: 10px;
}

.join_wrap .pro-number .number-txtbox .p-off {
  filter: grayscale(1);
  opacity: 0.5;
}

.join_wrap .pro-number p:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: #1B53E3;
}

.join_wrap .pro-number span {
  font-weight: 200;
  font-size: 14px;
}

.loginsecurity_wrap {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  margin: 0 auto;
  width: 30%;
  border-radius: 5px;
  background: #fff;
  padding: 35px 30px;
  box-sizing: border-box;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.loginsecurity_wrap p {
  font-size: 40px;
  margin: 20px 0 30px;
}

.loginsecurity_wrap h4 {
  border-bottom: 1px solid #000;
  font-size: 27px;
  margin-bottom: 20px;
  padding-bottom: 5px;
}

.loginsecurity_wrap .article_text {
  border-radius: 5px;
  border: 1px solid #ddd;
  line-height: 19px;
  padding: 15px;
  font-size: 13px;
  font-weight: 200;
  color: #999;
  height: 110px;
  box-sizing: border-box;
  overflow-y: auto;
}

.loginsecurity_wrap .article_btbox {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.loginsecurity_wrap .article_btbox .join-nextbt {
  margin-right: 15px;
}

#loginsecurity {
  background: #f1f3f6;
  height: 100%;
}

.loginsecurity_wrap .security-hd {
  font-size: 40px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 35px;
  width: 100%;
}

.loginsecurity_wrap .info-txt {
  font-size: 15px;
  font-weight: 700;
  color: #a8a8a8;
}

.loginsecurity_wrap .security-input-cont {
  border-radius: 5px;
  border: 1px solid #ddd;
  line-height: 19px;
  box-sizing: border-box;
  padding: 15px;
  background: #FAFAFA;
  margin-top: 10px;
}

.loginsecurity_wrap .security-input-cont .secu-input {
  border: 0;
  font-size: 17px;
  width: 100%;
  background: none;
  text-align: center;
  font-weight: 900;
  font-family: 'Apple SD Gothic Neo', 'Barlow', 'Noto Sans KR', sans-s;
}


.station-pop .option_box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.station-pop .option_box .search-contBOX {
  height: 40px;
}

.station-pop .option_box .search-contBOX .search-input {
  width: 270px;
}

.station-pop .in-subBOX1 .option_tit {
  display: block;
  color: #005aff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

.findlayer_wrap {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  margin: 0 auto;
  width: 25%;
  border-radius: 5px;
  background: #fff;
  box-sizing: border-box;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.findlayer_wrap .poptit-box {
  padding: 25px 30px 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.findlayer_wrap .poptit-box .pop-title {
  font-weight: 800;
  font-size: 18px;
}

.findlayer_wrap .poptit-box .btn-close2 {
  width: 16px;
  height: 16px;
  display: block;
  background: url(../images/pop-close2.png) top left no-repeat;
}

.findlayer_wrap .pop-cont {
  padding: 25px 30px;
}

.findlayer_wrap .find-input::placeholder {
  color: #ddd
}

.findlayer_wrap .info-txt {
  margin-bottom: 20px;
  font-size: 17px;
  font-weight: 500;
  color: #a8a8a8;
  display: block;
  word-break: keep-all;
}

.findlayer_wrap .info-txt b {
  font-weight: 900;
  color: #000;
}

.findlayer_wrap .find-box {}

.findlayer_wrap .find-box .txt {
  width: 10%;
}

.findlayer_wrap .security-input-cont {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #ddd;
  line-height: 19px;
  box-sizing: border-box;
  padding: 15px;
  background: #FAFAFA;
}

.findlayer_wrap .security-input-cont span {
  font-size: 12px;
  color: #a8b9ce;
  font-weight: 400;
}

.findlayer_wrap .security-input-cont .find-input {
  border: 0;
  font-size: 17px;
  width: 100%;
  background: none;
  font-weight: 600;
  font-family: 'Apple SD Gothic Neo', 'Barlow', 'Noto Sans KR', sans-s;
}

.findlayer_wrap .article_btbox {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.findlayer_wrap .article_btbox .join-nextbt {
  margin-right: 15px;
}

.findlayer_wrap .find-result {
  margin: 20px 0;
  font-size: 19px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}

.findlayer_wrap .find-result span {
  font-weight: 900;
  color: #005aff;
}

.mypage_wrap {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  margin: 0 auto;
  width: 50%;
  border-radius: 5px;
  background: #fff;
  box-sizing: border-box;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.mypage_wrap .poptit-box {
  padding: 25px 30px 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.mypage_wrap .poptit-box .pop-title {
  font-weight: 800;
  font-size: 18px;
}

.mypage_wrap .poptit-box .btn-close2 {
  width: 16px;
  height: 16px;
  display: block;
  background: url(../images/pop-close2.png) top left no-repeat;
}

.mypage_wrap .tit {
  display: block;
  color: #005aff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

.mypage_wrap .my-inputST {
  height: 38px;
  line-height: 38px;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

.mypage_wrap .my-inputST::placeholder {
  font-family: 'Apple SD Gothic Neo', 'Barlow', 'Noto Sans KR', sans-serif;
  color: #ddd;
  font-weight: 300;
}

.mypage_wrap .in-contbox1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mypage_wrap .in-contbox1 .my-inputBOX {
  width: 30%;
}

.mypage_wrap .in-contbox1 .my-inputBOX:nth-child(n+4) {
  margin-top: 15px;
}

.mypage_wrap .btbox {
  text-align: center;
  margin-top: 20px;
}

.mypage_wrap .sub-tit {
  font-weight: 500;
  font-size: 18px;
  border-bottom: 1px solid #000;
  margin: 25px 0 20px;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
}

.mypage_wrap .pop-cont {
  padding: 25px 30px;
}

.mypage_wrap .my-pushbox {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}

.mypage_wrap .my-pushbox .ul-box {
  display: flex;
  flex-wrap: wrap;
}

.mypage_wrap .my-pushbox li {
  margin: 0 25px 25px 0;
}

.mypage_wrap .my-pushbox li:last-child {
  margin: 0;
}

.mypage_wrap .my-pushbox span {
  font-size: 14px;
}

.mypage_wrap .my-pushbox span:before {
  margin-right: 5px;
  vertical-align: -5px;
}

.mode_label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin-left: 10px;
}

.mode_label input {
  display: unset !important;
}

.colorMODE {
  appearance: none;
  position: relative;
  border: max(2px, 0.1em) solid #EBF0F6;
  background: #EBF0F6;
  border-radius: 55px;
  width: 42px;
  height: 22px;
}

.colorMODE::before {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: scale(0.9);
  background-color: #fff;
  transition: left 250ms linear;
}

.colorMODE:checked {
  background-color: #005aff !important;
  border-color: #005aff !important;
}

.colorMODE:checked::before {
  background-color: #fff;
  left: 1.5em;
}

.colorMODE:disabled {
  border-color: lightgray;
  opacity: 0.7;
  cursor: not-allowed;
}

.colorMODE:disabled:before {
  background-color: lightgray;
}

.colorMODE:disabled+span {
  opacity: 0.7;
  cursor: not-allowed;
}

.colorMODE:focus-visible {
  outline-offset: max(2px, 0.1em);
  outline: max(2px, 0.1em) solid tomato;
}


#wrap {
  /* min-width:1710px; calc(100% - 78px);*/
  box-sizing: border-box;
  padding-left: 240px;
  position: relative;
  height: calc(100% - 67px);
  min-height: 730px;
  overflow: hidden;
}

#wrap #left-menu {
  position: absolute;
  left: 0;
  width: 240px;
  height: 100%;
  background: #fff;
  padding: 15px 20px 125px 20px;
  box-sizing: border-box;
  min-height: 730px;
  border: 1px solid #F1F3F6;
}

/* #wrap #left-menu .lnb {margin-top:65px;} */
#wrap #left-menu .lnb li {
  margin-top: 15px;
}

#wrap #left-menu .lnb li:hover {}

#wrap #left-menu .lnb li:first-child {
  margin-top: 0;
}

#wrap #left-menu .lnb li a {
  padding: 15px 0 15px 40px;
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #a8a8a8;
  /* height:20px; */
  line-height: 20px;
  /* padding-left:26px; */
  position: relative;
}

#wrap #left-menu .lnb li a:hover {
  background: #f4f4f4;
  border-radius: 10px;
  color: #2563EB;
  font-weight: 700;
}

#wrap #left-menu .lnb li a.active-nav {
  color: #2563EB;
  background: #EFF6FF;
  border-radius: 10px;
  font-weight: 900;
}

#wrap #left-menu .lnb li a:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 15px;
  top: 17px;
  background-repeat: no-repeat;
  background-image: url(../images/lnb-icon.png);
}

/* 메뉴 아이콘 매핑: ① 홈(집) ② 장소관리(느낌표) ③ CCTV관리(톱니) ④ 이벤트(번개) ⑤ 알림설정(스피커) ⑥ 통계(리스트) ⑦ 공지사항(모니터) */
/* 홈: 집 */
#wrap #left-menu .lnb li:nth-child(1) a:hover:before,
#wrap #left-menu .lnb li:nth-child(1) a:before {
  background-position: 0 0;
}

/* 장소관리: Pin */
#wrap #left-menu .lnb li:nth-child(2) a:hover:before,
#wrap #left-menu .lnb li:nth-child(2) a:before {
  background-position: 0 -268px;
}

/* CCTV관리: cctv */
#wrap #left-menu .lnb li:nth-child(3) a:hover:before,
#wrap #left-menu .lnb li:nth-child(3) a:before {
  background-position: 0 -470px;
}

/* 이벤트: 번개 */
#wrap #left-menu .lnb li:nth-child(4) a:hover:before,
#wrap #left-menu .lnb li:nth-child(4) a:before {
  background-position: 0 -334px;
}

/* 알림설정: alert */
#wrap #left-menu .lnb li:nth-child(5) a:hover:before,
#wrap #left-menu .lnb li:nth-child(5) a:before {
  background-position: 0 -536px;
}

/* 통계: 차트 */
#wrap #left-menu .lnb li:nth-child(6) a:hover:before,
#wrap #left-menu .lnb li:nth-child(6) a:before {
  background-position: 0 -200px;
}

/* 공지사항: 스피커 */
#wrap #left-menu .lnb li:nth-child(7) a:hover:before,
#wrap #left-menu .lnb li:nth-child(7) a:before {
  background-position: 0 -67px;
}

/* 공지사항: 장비관리 */
#wrap #left-menu .lnb li:nth-child(8) a:hover:before,
#wrap #left-menu .lnb li:nth-child(8) a:before {
  background-position: 0 -402px;
}



#wrap #left-menu .lnb li:nth-child(1) a.active-nav:before {
  background-position: -20px 0;
}

#wrap #left-menu .lnb li:nth-child(2) a.active-nav:before {
  background-position: -20px -268px;
}

#wrap #left-menu .lnb li:nth-child(3) a.active-nav:before {
  background-position: -20px -470px;
}

#wrap #left-menu .lnb li:nth-child(4) a.active-nav:before {
  background-position: -20px -334px;
}

#wrap #left-menu .lnb li:nth-child(5) a.active-nav:before {
  background-position: -20px -536px;
}

#wrap #left-menu .lnb li:nth-child(6) a.active-nav:before {
  background-position: -20px -200px;
}

#wrap #left-menu .lnb li:nth-child(7) a.active-nav:before {
  background-position: -20px -67px;
}

/* 장비관리: 톱니 */
#wrap #left-menu .lnb li:nth-child(8) a.active-nav:before {
  background-position: -20px -402px;
}

#wrap #left-menu .left-btm {
  position: absolute;
  left: 30px;
  bottom: 33px;
}

#wrap #left-menu .left-btm dt {
  margin-bottom: 10px;
  font-size: 0;
  line-height: 0;
  background: url(../images/B_logo_swrts.png) no-repeat center;
  width: 87px;
  height: 28px;
  opacity: 0.7;
}

#wrap #left-menu .left-btm dd {
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.05em;
  color: #636363;
}

#container {
  height: 100%;
  padding-left: 105px;
}

.login-container {
  background: url(../images/login-bg.png) center no-repeat;
  background-size: cover;
  overflow: hidden;
}

.login-container .login-logo {
  text-align: right;
  position: absolute;
  top: 50px;
  right: 105px;
}

/****/

/****/

#container.sub-container {
  background: #f1f3f6;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

#container.sub-container .in-h {
  height: 100%;
}

#container.sub-container .header {
  *zoom: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #fff;
  z-index: 2;
  box-sizing: border-box;
  padding: 0 40px;
  -webkit-box-shadow: 0px 5px 30px 0px rgba(96, 103, 131, 0.2);
  -moz-box-shadow: 0px 5px 30px 0px rgba(96, 103, 131, 0.2);
  box-shadow: 0px 5px 30px 0px rgba(96, 103, 131, 0.2);
}

#container.sub-container .header.no-box-shadow {
  -webkit-box-shadow: 0px 0px 0px 0px rgba(96, 103, 131, 0);
  -moz-box-shadow: 0px 0px 0px 0px rgba(96, 103, 131, 0);
  box-shadow: 0px 0px 0px 0px rgba(96, 103, 131, 0);
}

#container.sub-container .header:after {
  content: "";
  display: block;
  clear: both;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 67px;
}

.header .logo {
  padding: 22px 0;
  cursor: pointer;
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-bt {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  white-space: nowrap;
}

.btn-admin {
  border: 1px solid #C3CEDB;
  color: #C3CEDB !important;
  border-radius: 6px;
  padding: 5px 8px;
  font-weight: 800;
  background: transparent;
}

.btn-admin:hover {
  background: #333;
  color: #fff !important;
  border-color: #333;
}

.header-bt .left-hdbox {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-bt .right-hdbox {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-bt .push_set {
  position: relative;
  margin-right: 12px;
}

.header-bt .push_set img {
  vertical-align: middle;
}

.header-bt .push_set span {
  position: absolute;
  top: -5px;
  right: -12px;
  background: #d00000;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  height: 17px;
  line-height: 20px;
  padding: 0 7px;
  border-radius: 50px;
}

.header-bt a {
  margin-right: 0;
}

.header-bt .code_set {}

.btn-logout {
  border: 1px solid #C3CEDB;
  color: #C3CEDB !important;
  border-radius: 6px;
  padding: 5px 8px;
  font-weight: 800;
}

.btn-logout:hover {
  background: #333;
  color: #fff !important;
  border-color: #333;
}

.header-bt .btn-mypage::before {
  content: '';
  display: inline-block;
  background: url(../images/my_icon.png) top left no-repeat;
  width: 27px;
  height: 27px;
  vertical-align: -7px;
  margin-right: 8px;
}

.hd-box {
  display: flex;
  justify-content: space-between;
  padding: 4px;
  align-items: flex-end;
}

/* .contents {height:calc(100% - 86px); overflow-y:auto;margin-top:10px;padding:0 50px;} */
.contents {
  /* height: calc(100% - 20px); */
  height: 100%;
  overflow-y: auto;
}

.set_tab_cont .contents {
  height: calc(100% - 30px) !important;
}

.contents .in-wrap-cont {
  height: calc(100% - 40px);
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.contents.write-cont #mFrm {
  height: 100%;
}

.contents.write-cont #mFrm #cke_contents {
  height: 100%;
}

.cke_inner {
  height: 100% !important;
}

.section {
  width: 1510px;
  margin: 0 auto;
  *zoom: 1;
}

.section:after {
  content: "";
  display: block;
  clear: both;
}

.clear-fix {
  zoom: 1;
}

.clear-fix:after {
  content: "";
  display: block;
  clear: both;
}

.fl-left {
  float: left;
}

.fl-right {
  float: right;
}

.tit1 {
  font-size: 28px;
  font-weight: 800;
  line-height: normal;
  /* padding: 30px 0 0 50px; */
  padding: 10px 0 0 0;
}

.tit-right-in {
  display: flex;
}

.contents h3 {
  font-size: 20px;
  font-weight: 800;
  width: 100%;
  letter-spacing: -1px;
}

.contents .container-box {
  height: calc(100% - 185px);
  display: flex;
  justify-content: space-between;
}

.contents .card-body1 {
  width: 100%;
  /* height:25%;min-height:175px; */
  display: flex;
  background: #fff;
  /* border-radius: 25px; */
  border-radius: 18px;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.contents .main-Card-body2 {
  width: 75%;
  height: 100%;
}

.contents .main-Card-body3 {
  width: calc(25% - 30px);
}

.contents .main-Card-body3 .wd-3n {
  width: 100%;
}

.contents .card-body2 {
  width: 100%;
  height: calc(40% - 10px);
  /* height:24%; */
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.contents .card-body3 {
  height: calc(51% - 70px);
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.contents .card-body4 {
  height: calc(100% - 20px);
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

/*map*/
/* 시도별평균 */
#map-contents {
  z-index: 9;
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  border-radius: 4px;
  padding: 12px 0;
  align-items: center;
  height: calc(100% - 45px);
  box-sizing: border-box;
}

#map-contents .main-section1 .layout .box .main_map {
  background: url(/images/main_map.png) no-repeat 0;
  background-size: 100%;
  width: 270px;
  height: 400px;
}

#map-contents .main-section1 .layout .box .main_map .up {
  background: url(/images/map_01.png) no-repeat 0 0;
  width: 46px;
  height: 40px;
  text-align: center
}

#map-contents .main-section1 .layout .box .main_map .down {
  background: url(/images/map_01.png) no-repeat 0 0;
  width: 46px;
  height: 40px;
  text-align: center
}

#map-contents .main-section1 .layout .box .main_map span.title {
  display: block;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: -0.7px;
}

/* 글자 조절 */
#map-contents .main-section1 .layout .box .main_map span.price {
  display: block;
  color: #32374B;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: -0.05em;
  margin-top: 0px;
  cursor: pointer;
}

#map-contents .main-section1 .layout .box .main_map .Seoul {
  position: absolute;
  margin: 70px 0 0 90px;
}

#map-contents .main-section1 .layout .box .main_map .Incheon {
  position: absolute;
  margin: 55px 0 0 40px;
}

#map-contents .main-section1 .layout .box .main_map .Gyeonggi {
  position: absolute;
  margin: 10px 0 0 100px;
}

#map-contents .main-section1 .layout .box .main_map .Gangwon {
  position: absolute;
  margin: 45px 0 0 165px;
}

#map-contents .main-section1 .layout .box .main_map .Saison {
  position: absolute;
  margin: 130px 0 0 90px;
}

#map-contents .main-section1 .layout .box .main_map .Chungbug {
  position: absolute;
  margin: 90px 0 0 160px;
}

#map-contents .main-section1 .layout .box .main_map .Chungnam {
  position: absolute;
  margin: 110px 0 0 25px;
}

#map-contents .main-section1 .layout .box .main_map .Daejeon {
  position: absolute;
  margin: 170px 0 0 115px;
}

#map-contents .main-section1 .layout .box .main_map .Jeonbuk {
  position: absolute;
  margin: 190px 0 0 50px;
}

#map-contents .main-section1 .layout .box .main_map .Jeonam {
  position: absolute;
  margin: 295px 0 0 30px;
}

#map-contents .main-section1 .layout .box .main_map .Gwangju {
  position: absolute;
  margin: 245px 0 0 50px;
}

#map-contents .main-section1 .layout .box .main_map .Gyeongbuk {
  position: absolute;
  margin: 145px 0 0 195px;
}

#map-contents .main-section1 .layout .box .main_map .Gyeongnam {
  position: absolute;
  margin: 245px 0 0 125px;
}

#map-contents .main-section1 .layout .box .main_map .Busan {
  position: absolute;
  margin: 260px 0 0 195px;
}

#map-contents .main-section1 .layout .box .main_map .Daegu {
  position: absolute;
  margin: 195px 0 0 170px;
}

#map-contents .main-section1 .layout .box .main_map .Ulsan {
  position: absolute;
  margin: 210px 0 0 225px;
}

#map-contents .main-section1 .layout .box .main_map .Jeju {
  position: absolute;
  margin: 350px 0 0 50px;
}

/*//map*/

.contents .n-cardbody3ST {
  height: calc(60% - 30px);
}

.contents .situation_box1 {
  width: 45%;
  padding: 20px 30px;
  box-sizing: border-box;
}

.contents .situation_box1 .info1-cont {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
}

.contents .y-line {
  padding: 25px 0;
}

.contents .y-line:before {
  content: '';
  display: inline-block;
  border-right: 1px solid #ddd;
  height: 100%;
}

.contents .situation_box1 .cont-box {
  height: calc(100% - 45px);
  height: 75%;
  background: #ebf0f6;
  padding: 15px;
  margin: 10px 12px 0 0;
  border-radius: 10px;
  width: 30%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.contents .situation_box1 .cont-box:nth-of-type(3) {
  margin-right: 0;
}

.contents .situation_box1 .cont-box .t-tit {
  font-size: 14px;
  color: #32374b;
  font-weight: 700;
  width: 100%;
}

.contents .situation_box1 .cont-box .t-info {
  font-size: 12px;
  color: #a8b9ce;
  font-weight: 400;
  margin: 5px 0 3px 0;
  width: 100%;
}

.contents .situation_box1 .cont-box .t-number {
  font-size: 27px;
  font-weight: bold;
  color: #005aff;
}

.din_f {
  font-family: 'Barlow';
  font-weight: 600;
}

.contents .situation_box2 {
  width: 55%;
  padding: 20px 30px;
  box-sizing: border-box;
}

.contents .situation_box2 .cont-box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: calc(100% - 34px);
  margin-top: 10px;
}

.contents .situation_box2 .psh-cont {
  width: 25%;
  display: flex;
  align-items: center;
}

.contents .situation_box2 .psh-cont:nth-of-type(n + 5) {
  margin-top: 12px;
}

.contents .situation_box2 .psh-cont .iconbox {
  margin-right: 15px;
}

.contents .situation_box2 .psh-cont .iconbox img {
  width: 44px;
}

.contents .situation_box2 .psh-cont .psh-tit {
  color: #999;
  font-size: 14px;
  font-weight: 500;
  display: block;
}

.contents .situation_box2 .psh-cont .psh-num {
  color: #32374b;
  font-size: 20px;
  font-weight: 700;
  /* line-height:18px;vertical-align:-8px; */
}

.contents .situation_box3 {
  width: 29%;
  border-radius: 25px;
  background: #fff;
  padding: 20px 30px;
  box-sizing: border-box;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.contents .situation_box3 h3 {
  position: relative;
}

.contents .situation_box3 .cont-box {
  line-height: 31px;
  margin-top: 10px;
  height: calc(100% - 34px);
}

.contents .situation_box3 .cont-box.board-list .lati-txt {
  font-weight: 300;
  height: 25%;
}

.contents .situation_box3 .cont-box.board-list .lati-txt div:nth-child(1) {
  width: 68%;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.contents .situation_box3 .cont-box.board-list .lati-txt div:nth-child(2) {
  width: 31%;
  line-height: 18px;
  text-align: right;
}

.contents .situation_box3 .board-list li {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
}

.contents .situation_box3 .servertimebox {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.contents .situation_box3 .servertimebox h3 {
  width: unset;
  border-bottom: 0;
}

.contents .situation_box3 .servertimebox p {
  margin-left: 10px;
  font-weight: bold;
  color: #999;
}

/* .contents .situation_box3 .servertimebox p:before {content:'[';display:inline-block;}
.contents .situation_box3 .servertimebox p:after {content:']';display:inline-block;} */

.contents .situation_box4 {
  width: calc(71% - 25px);
  border-radius: 25px;
  background: #fff;
  padding: 20px 30px;
  box-sizing: border-box;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.contents .situation_box4 h3 {
  position: relative;
}

.contents .situation_box4 .live-push-box {
  border-radius: 7px;
  background: #f5f6f7;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding: 8px 15px 5px 15px;
  box-sizing: border-box;
  /* height:calc(50% - 5px);height:max-content; */
}

.contents .situation_box4 .live-push-box.on {
  background: #ebf0f6;
}

.contents .situation_box4 .live-push-box li:last-child {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.contents .situation_box4 .live-push-box li:nth-last-child(-n+2) {
  margin-top: 2px;
}

.contents .situation_box4 .live-push-box .tit {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.contents .situation_box4 .live-push-box .txt-date {
  font-size: 15px;
  display: inline-block;
}

.contents .situation_box4 .live-push-box .bz {
  display: flex;
  align-items: center;
  align-items: center;
}

.contents .situation_box4 .live-push-box .bz span {
  display: block;
  padding: 1px 2px;
  border: 1px solid #005aff;
  color: #005aff;
  font-size: 11px;
  border-radius: 2px;
}

.contents .situation_box4 .live-push-box .livecam_bt.on {
  position: relative;
  background: #32374b;
  padding: 3px 10px 1px 25px;
  border-radius: 50px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 1;
}

.contents .situation_box4 .live-push-box .livecam_bt:before {
  content: '';
  background: url('../images/cam_on.png') no-repeat;
  height: 17px;
  display: inline-block;
  width: 15px;
  position: absolute;
  left: 10px;
  top: 1px;
}

.contents .situation_box4 .live-push-box .livecam_bt.on:before {}

.contents .situation_box4 .cont-box {
  margin-top: 10px;
  height: calc(100% - 34px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.contents .situation_box4 .cont-box .live-push-box {
  margin-bottom: 10px;
}

/* .contents .situation_box4 .cont-box .live-push-box:nth-last-child(-n+2) {margin-bottom:0;} */
.contents .situation_box4 .cont-box .live-push-box:last-child {
  margin-bottom: 0;
}

.contents .situation_box4 .in-contbox {
  padding: 20px 30px 15px 30px;
  height: calc(100% - 35px);
}

.contents .situation_5ST {
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.contents .wd-3n {
  width: calc(50% - 15px);
}


.chargingST-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(50% - 10px);
  background: #f5f6f7;
  padding: 5px 15px;
  box-sizing: border-box;
  border-radius: 7px;
  margin-bottom: 7px;
}

.chargingST-box:nth-last-child(-n+2) {
  margin-bottom: 0;
}

.chargingST-box:hover {
  background: #ebf0f6;
}

.chargingST-box:hover .chST-tit {
  font-weight: 600;
}

.chargingST-box .chST-tit {
  font-weight: 300;
  font-size: 15px;
  width: calc(65% - 15px);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.chargingST-box .chST-btBOX {
  display: flex;
  justify-content: space-between;
}

.chargingST-box span {
  display: inline-block;
}

.chargingST-box .chST-sta1 {
  color: #005aff;
  border: 1px solid #005aff;
  border-radius: 50px;
  font-size: 13px;
  width: 65px;
  line-height: 24px;
  text-align: center;
  margin-right: 10px;
  font-weight: 700;
}

.chargingST-box .chST-sta2 {
  color: #32374b;
  background: #fff;
  border: 1px solid #32374b;
  border-radius: 50px;
  font-size: 13px;
  width: 65px;
  line-height: 24px;
  text-align: center;
  font-weight: 700;
}

.chargingST-box .chST-sta2.not {
  opacity: 0.3;
}

.chargingST-box .chST-sta1.on {
  color: #fff;
  background: #005aff;
}

.chargingST-box .chST-sta1.not {
  color: #fff;
  border: 1px solid #32374b;
  background: #32374b;
}

.chargingbox-NST {
  width: 100%;
}

.chargingbox-NST:nth-child(3) {
  margin-bottom: 7px;
}

.sub-charginST {
  width: 100%;
  background: #f2f6f9;
  padding: 12px 30px;
  border-radius: 0 0 25px 25px;
  height: calc(65% - 64px);
}

.sub-charginST p {
  color: #005aff;
  font-weight: 900;
  margin-bottom: 7px;
}

.sub-charginST p:before {
  content: url("../images/tit-icon.png");
  width: 19px;
  height: 19px;
  display: inline-block;
  vertical-align: -4px;
}

.sub-charginST .in-tabbox {
  display: flex;
  flex-wrap: wrap;
  height: 80%;
}

.sub-charginST .ul-tablecont {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.sub-charginST .ul-tablecont li {
  width: calc(50% - 10px);
  box-sizing: border-box;
}

.sub-charginST .chargin-table {
  width: 100%;
  height: 100%;
  border-top: 2px solid #32374b;
  border-collapse: collapse;
}

.sub-charginST .chargin-table th {
  width: calc(30% - 15px);
  text-align: center;
  color: #a2a2a2;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  word-break: keep-all;
}

.sub-charginST .chargin-table td {
  width: calc(70% - 15px);
  padding: 1.3% 15px;
  border-bottom: 1px solid #ddd;
  background: #fff;
  font-size: 15px;
}

.sub-charginST .ul-tablecont li:nth-of-type(2) .chargin-table tr:nth-of-type(2) td ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.sub-charginST .ul-tablecont li:nth-of-type(2) .chargin-table tr:nth-of-type(2) td ul li {
  width: 33%;
  text-align: center;
  line-height: 18px;
}

.sub-charginST .ul-tablecont li:nth-of-type(2) .chargin-table tr:nth-of-type(2) td {
  padding: 0 15px;
}

.layer-chrginST {
  background: unset;
  padding: unset;
  border-radius: unset;
  height: unset;
}

.layer-chrginST .ul-tablecont {
  flex-wrap: wrap;
}

.layer-chrginST .ul-tablecont li {
  width: 100%;
}

.layer-chrginST .chargin-table th {
  background: #F2F6F9;
  width: 20%;
}

.layer-chrginST .chargin-table .td-wd {
  width: 30%;
}


.board-cont-write {
  border-radius: 5px;
  height: calc(100% - 40px);
  box-sizing: border-box;
  position: relative;
  padding-top: 5px;
}

.board-cont {
  background: #fff;
  border-radius: 5px;
  height: calc(100% - 40px);
  box-sizing: border-box;
  position: relative;

  border: 1px solid #f1f5f9;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 통계 페이지: 차트+테이블 길이에 맞춰 컨테이너 확장 → .contents 스크롤 정상 동작 */
.nd-wrap:has(.chart-box) {
  height: auto;
  min-height: 100%;
}

.board-cont:has(.chart-box) {
  height: auto;
  min-height: calc(100% - 40px);
}

.chart-box {
  padding: 15px 0 30px;
}

.board-cont .board-table {
  height: 100%;
  overflow-y: auto;
  border-top: 2px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.board-cont .option_tit {
  display: block;
  color: #005aff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

.board-cont .option_box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.board-cont .option_box.flx-end {
  justify-content: flex-end
}

.board-cont .option_box.basic-optionST {
  height: 67px;
}

.board-cont .option_box .sub-optionbox2 {
  display: flex;
  flex-wrap: wrap;
}

.board-cont .option_box .sub-optionbox2 .charging-option {
  margin-right: 50px;
}

.board-cont .option_box .sub-optionbox2 .event-option {}

.mob-eventSET-BOX {
  height: calc(100% - 195px);
}

/* 검색영역이 2줄 이상인 화면(이벤트 등): 고정 높이(195px) 대신 flex로 목록이 남는 공간을
   자동 차지하며 스크롤 → 하단 페이징과 겹침 방지.
   페이징(.pagenation/.page-box)은 position:absolute; bottom:0 이므로, 목록이 그 위에서
   끝나도록 board-cont 하단에 padding-bottom 으로 페이징 영역을 확보한다.
   ※ board-cont 의 기존 height(calc(100% - 40px))는 유지(덮어쓰지 않음). */
.board-cont.list-flex {
  display: flex;
  flex-direction: column;
  padding-bottom: 95px;
}

.board-cont.list-flex .mob-eventSET-BOX {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.board-cont.list-flex .mob-eventSET-board {
  height: 100%;
  min-height: 0;
}

.mob-eventSET-board {
  height: 100%;
}

.mob-pushSET-BOX {
  height: calc(100% - 195px);
}

.mob-pushSET-board {
  height: 100%;
}

.search-contBOX {
  position: relative
}

.search-input::placeholder {
  font-size: 13px;
  color: #ddd;
  font-weight: 200;
}

.board-table .thead {
  /* padding:0 30px; */
  border-bottom: 1px solid #ddd;
}

.board-table .thead .tr {
  display: flex;
  align-items: center;
  width: 100%;
}

.board-table .thead .th {
  padding: 7px 0;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 500;
  color: #a8b9ce;
  text-align: center;
}

.board-table .thead .th:nth-child(1) {
  width: 2%;
  padding: 5px 0 5px 30px;
  box-sizing: border-box;
  z-index: 9;
}

.board-table .thead .th:nth-child(2) {
  width: 10%;
}

.board-table .thead .th:nth-child(3) {
  width: 15%;
}

.board-table .thead .th:nth-child(4) {
  width: 20%;
}

.board-table .thead .th:nth-child(5) {
  width: 10%;
}

.board-table .thead .th:nth-child(6) {
  width: 8%;
}

.board-table .thead .th:nth-child(7) {
  width: 10%;
}

.board-table .thead .th:nth-child(8) {
  width: 15%;
}

.board-table .thead .th:nth-child(9) {
  width: 10%;
}

.board-table .notice-row {
  background-color: #f7faff;
}

.board-table .notice-row strong {
  font-weight: 600;
}

.board-table .notice-badge {
  display: inline-block;
  min-width: 40px;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: #2a6edb;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* .board-table .tbody {padding:0 30px;} */
.board-table .tbody .tr {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #f1f3f6;
}

.board-table .tbody .tr:hover {
  background: #ebf0f6;
}

.board-table .tbody a:last-child .tr {
  border-bottom: 0;
}

.board-table .tbody a:last-child .tr .td {
  border-bottom: 0;
}

.board-table .tbody .td {
  font-size: 14px;
  padding: 13px 0;
  box-sizing: border-box;
  text-align: center;
  word-break: keep-all;
}

.board-table .tbody .td:nth-child(1) {
  width: 2%;
  padding: 17px 0 17px 30px;
  z-index: 9;
}

.board-table .tbody .td:nth-child(2) {
  width: 10%;
}

.board-table .tbody .td:nth-child(3) {
  width: 15%;
}

.board-table .tbody .td:nth-child(4) {
  width: 20%;
}

.board-table .tbody .td:nth-child(5) {
  width: 10%;
}

.board-table .tbody .td:nth-child(6) {
  width: 8%;
}

.board-table .tbody .td:nth-child(7) {
  width: 10%;
}

.board-table .tbody .td:nth-child(8) {
  width: 15%;
  word-break: keep-all;
}

.board-table .tbody .td:nth-child(9) {
  width: 10%;
}

.board-table .tbody .td button+button {
  margin-left: 0px;
}

/* 장소 목록(mob-device-tb): 사이트 컬럼 추가(10컬럼)에 맞춘 폭 재정의 — 헤더/본문 정렬.
   .board-cont 추가로 글로벌 .board-table 및 반응형 규칙보다 우선 적용. 합계 100%. */
.board-cont .mob-device-tb .thead .th:nth-child(1),
.board-cont .mob-device-tb .tbody .td:nth-child(1) { width: 2%; }
.board-cont .mob-device-tb .thead .th:nth-child(2),
.board-cont .mob-device-tb .tbody .td:nth-child(2) { width: 9%; }
.board-cont .mob-device-tb .thead .th:nth-child(3),
.board-cont .mob-device-tb .tbody .td:nth-child(3) { width: 10%; }
.board-cont .mob-device-tb .thead .th:nth-child(4),
.board-cont .mob-device-tb .tbody .td:nth-child(4) { width: 13%; }
.board-cont .mob-device-tb .thead .th:nth-child(5),
.board-cont .mob-device-tb .tbody .td:nth-child(5) { width: 18%; }
.board-cont .mob-device-tb .thead .th:nth-child(6),
.board-cont .mob-device-tb .tbody .td:nth-child(6) { width: 9%; }
.board-cont .mob-device-tb .thead .th:nth-child(7),
.board-cont .mob-device-tb .tbody .td:nth-child(7) { width: 7%; }
.board-cont .mob-device-tb .thead .th:nth-child(8),
.board-cont .mob-device-tb .tbody .td:nth-child(8) { width: 9%; }
.board-cont .mob-device-tb .thead .th:nth-child(9),
.board-cont .mob-device-tb .tbody .td:nth-child(9) { width: 11%; }
.board-cont .mob-device-tb .thead .th:nth-child(10),
.board-cont .mob-device-tb .tbody .td:nth-child(10) { width: 12%; }

/* CCTV 목록(cctv-list-tb): 8컬럼 전용 폭 — 장소/CCTV명 넓게, 우측 빈공간 제거.
   .mob-device-tb.cctv-list-tb 로 위 장소목록(10컬럼) 규칙보다 우선 적용. 합계 100%. */
.board-cont .mob-device-tb.cctv-list-tb .thead .th:nth-child(1),
.board-cont .mob-device-tb.cctv-list-tb .tbody .td:nth-child(1) { width: 4%; }
.board-cont .mob-device-tb.cctv-list-tb .thead .th:nth-child(2),
.board-cont .mob-device-tb.cctv-list-tb .tbody .td:nth-child(2) { width: 16%; }
.board-cont .mob-device-tb.cctv-list-tb .thead .th:nth-child(3),
.board-cont .mob-device-tb.cctv-list-tb .tbody .td:nth-child(3) { width: 18%; }
.board-cont .mob-device-tb.cctv-list-tb .thead .th:nth-child(4),
.board-cont .mob-device-tb.cctv-list-tb .tbody .td:nth-child(4) { width: 18%; }
.board-cont .mob-device-tb.cctv-list-tb .thead .th:nth-child(5),
.board-cont .mob-device-tb.cctv-list-tb .tbody .td:nth-child(5) { width: 11%; }
.board-cont .mob-device-tb.cctv-list-tb .thead .th:nth-child(6),
.board-cont .mob-device-tb.cctv-list-tb .tbody .td:nth-child(6) { width: 9%; }
.board-cont .mob-device-tb.cctv-list-tb .thead .th:nth-child(7),
.board-cont .mob-device-tb.cctv-list-tb .tbody .td:nth-child(7) { width: 11%; }
.board-cont .mob-device-tb.cctv-list-tb .thead .th:nth-child(8),
.board-cont .mob-device-tb.cctv-list-tb .tbody .td:nth-child(8) { width: 13%; }

.board-table .tbody .td .mob-txt2 {
  font-size: 12px;
}

.board-table .tbody .td .mob-btnBOX {
  display: flex;
}

.board-table .tbody .td .mob-btnBOX button {
  width: 34%;
  margin-left: -1px;
  border-radius: 0;
  margin-top: 5px;
}

.board-table .tbody .td .mob-btnBOX button:nth-child(1) {
  margin-left: 0;
}

.board-table .tbody .td .cont-box .mob-txt2 {
  font-size: 12px;
}

.board-table .tbody .td .cont-box li:nth-child(1) {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-table .tbody .td .cont-box li:nth-child(2) {
  font-weight: 300;
}

.board-table .tbody .td .cont-box li:nth-child(2) span:after {
  content: '|';
  display: inline-block;
  margin: 0 10px;
  color: #ddd;
  font-size: 10px;
  vertical-align: 2px;
}

.board-table .tbody .td .cont-box li:nth-child(2) span:last-child:after {
  content: unset;
}

/**/
.eventSET-board {}

.eventSET-board .thead .th:nth-child(1) {
  width: 2%;
  padding: 5px 0 5px 30px;
  box-sizing: border-box;
  z-index: 9;
}

.eventSET-board .thead .th:nth-child(2) {
  width: 10%;
}

.eventSET-board .thead .th:nth-child(3) {
  width: 25%;
}

.eventSET-board .thead .th:nth-child(4) {
  width: 10%;
}

.eventSET-board .thead .th:nth-child(5) {
  width: 18%;
}

.eventSET-board .thead .th:nth-child(6) {
  width: 15%;
}

.eventSET-board .thead .th:nth-child(7) {
  width: 10%;
}

.eventSET-board .thead .th:nth-child(8) {
  width: 10%;
}

.eventSET-board .tbody .tr:last-child {
  border-bottom: 0;
}

.eventSET-board .tbody .td:nth-child(1) {
  width: 2%;
  padding: 13px 0 13px 30px;
  z-index: 9;
}

.eventSET-board .tbody .td:nth-child(2) {
  width: 10%;
}

.eventSET-board .tbody .td:nth-child(3) {
  width: 25%;
}

.eventSET-board .tbody .td:nth-child(4) {
  width: 10%;
}

.eventSET-board .tbody .td:nth-child(5) {
  width: 18%;
}

.eventSET-board .tbody .td:nth-child(6) {
  width: 15%;
}

.eventSET-board .tbody .td:nth-child(7) {
  width: 10%;
}

.eventSET-board .tbody .td:nth-child(8) {
  width: 10%;
}

/**/

/**/
.basicSET .tbody a .tr:hover {
  background: #ebf0f6;
}

.basicSET .tbody a:last-child .tr {
  border-bottom: 0;
}

.basicSET .thead .th:nth-child(1) {
  width: 5%;
  padding: 5px 0 5px 10px;
}

.basicSET .thead .th:nth-child(2) {
  width: 71%;
}

.basicSET .thead .th:nth-child(3) {
  width: 10%;
}

.basicSET .thead .th:nth-child(4) {
  width: 10%;
}

.basicSET .thead .th:nth-child(5) {
  width: 5%;
}

.basicSET .tbody .td:nth-child(1) {
  width: 5%;
  padding: 18.5px 0 18.5px 10px;
}

.basicSET .tbody .td:nth-child(2) {
  width: 71%;
  text-align: left;
  padding-left: 15px;
}

.basicSET .tbody .td:nth-child(3) {
  width: 10%;
}

.basicSET .tbody .td:nth-child(4) {
  width: 10%;
}

.basicSET .tbody .td:nth-child(5) {
  width: 5%;
}

/**/

/**/
.tab-boardSET .tbody .tr:hover {
  background: #ebf0f6;
}

.tab-boardSET .tbody .tr:last-child {
  border-bottom: 1px solid #f1f3f6;
}

.tab-boardSET .thead .th:nth-child(1) {
  width: 5%;
  padding: 5px 0 5px 10px;
}

.tab-boardSET .thead .th:nth-child(2) {
  width: 10%;
}

.tab-boardSET .thead .th:nth-child(3) {
  width: 15%;
}

.tab-boardSET .thead .th:nth-child(4) {
  width: 40%;
}

.tab-boardSET .thead .th:nth-child(5) {
  width: 15%;
}

.tab-boardSET .thead .th:nth-child(6) {
  width: 5%;
}

.tab-boardSET .thead .th:nth-child(7) {
  width: 10%;
}

.tab-boardSET .tbody .td:nth-child(1) {
  width: 5%;
  padding: 18.5px 0 18.5px 10px;
}

.tab-boardSET .tbody .td:nth-child(2) {
  width: 10%;
}

.tab-boardSET .tbody .td:nth-child(3) {
  width: 15%;
}

.tab-boardSET .tbody .td:nth-child(4) {
  width: 40%;
}

.tab-boardSET .tbody .td:nth-child(5) {
  width: 15%;
}

.tab-boardSET .tbody .td:nth-child(6) {
  width: 5%;
}

.tab-boardSET .tbody .td:nth-child(7) {
  width: 10%;
}

.tab-boardSET .tbody .td {
  color: #32374b;
}

/**/

/**/
.tab-boardSET2 .tbody .tr:hover {
  background: #ebf0f6;
}

.tab-boardSET2 .tbody .tr:last-child {
  border-bottom: 1px solid #f1f3f6;
}

.tab-boardSET2 .thead .th:nth-child(1) {
  width: 6%;
  padding: 5px 0 5px 10px;
}

.tab-boardSET2 .thead .th:nth-child(2) {
  width: 15%;
}

.tab-boardSET2 .thead .th:nth-child(3) {
  width: 15%;
}

.tab-boardSET2 .thead .th:nth-child(4) {
  width: 15%;
}

.tab-boardSET2 .thead .th:nth-child(5) {
  width: 5%;
}

.tab-boardSET2 .thead .th:nth-child(6) {
  width: 15%;
}

.tab-boardSET2 .thead .th:nth-child(7) {
  width: 10%;
}

.tab-boardSET2 .thead .th:nth-child(8) {
  width: 9%;
}

.tab-boardSET2 .thead .th:nth-child(9) {
  width: 10%;
}

.tab-boardSET2 .tbody .td:nth-child(1) {
  width: 6%;
  padding: 18.5px 0 18.5px 10px;
}

.tab-boardSET2 .tbody .td:nth-child(2) {
  width: 15%;
}

.tab-boardSET2 .tbody .td:nth-child(3) {
  width: 15%;
}

.tab-boardSET2 .tbody .td:nth-child(4) {
  width: 15%;
}

.tab-boardSET2 .tbody .td:nth-child(5) {
  width: 5%;
}

.tab-boardSET2 .tbody .td:nth-child(6) {
  width: 15%;
}

.tab-boardSET2 .tbody .td:nth-child(7) {
  width: 10%;
}

.tab-boardSET2 .tbody .td:nth-child(8) {
  width: 9%;
}

.tab-boardSET2 .tbody .td:nth-child(9) {
  width: 10%;
}

.tab-boardSET2 .tbody .td {
  color: #32374b;
}

.tab-boardSET2 .okay-bt {
  border: 1px solid #005AFF;
  border-radius: 5px;
  color: #005AFF;
  font-weight: bold;
  padding: 5px 15px;
}

/**/

/**/
.tab-boardSET3 .tbody .tr:hover {
  background: #ebf0f6;
}

.tab-boardSET3 .tbody .tr:last-child {
  border-bottom: 1px solid #f1f3f6;
}

.tab-boardSET3 .thead .th:nth-child(1) {
  width: 6%;
  padding: 5px 0 5px 10px;
}

.tab-boardSET3 .thead .th:nth-child(2) {
  width: 10%;
}

.tab-boardSET3 .thead .th:nth-child(3) {
  width: 25%;
}

.tab-boardSET3 .thead .th:nth-child(4) {
  width: 25%;
}

.tab-boardSET3 .thead .th:nth-child(5) {
  width: 15%;
}

.tab-boardSET3 .thead .th:nth-child(6) {
  width: 9%;
}

.tab-boardSET3 .thead .th:nth-child(7) {
  width: 10%;
}

.tab-boardSET3 .tbody .td:nth-child(1) {
  width: 6%;
  padding: 18.5px 0 18.5px 10px;
}

.tab-boardSET3 .tbody .td:nth-child(2) {
  width: 10%;
}

.tab-boardSET3 .tbody .td:nth-child(3) {
  width: 25%;
}

.tab-boardSET3 .tbody .td:nth-child(4) {
  width: 25%;
}

.tab-boardSET3 .tbody .td:nth-child(5) {
  width: 15%;
}

.tab-boardSET3 .tbody .td:nth-child(6) {
  width: 9%;
}

.tab-boardSET3 .tbody .td:nth-child(7) {
  width: 10%;
}

.tab-boardSET3 .tbody .td {
  color: #32374b;
}

/**/

/**/
.tab-boardSET4 .tbody .tr:hover {
  background: #ebf0f6;
}

.tab-boardSET4 .tbody a:last-child .tr {
  border-bottom: 0;
}

.tab-boardSET4 .thead .th:nth-child(1) {
  width: 5%;
  padding: 5px 0 5px 10px;
}

.tab-boardSET4 .thead .th:nth-child(2) {
  width: 10%;
}

.tab-boardSET4 .thead .th:nth-child(3) {
  width: 40%;
}

.tab-boardSET4 .thead .th:nth-child(4) {
  width: 15%;
}

.tab-boardSET4 .thead .th:nth-child(5) {
  width: 15%;
}

.tab-boardSET4 .thead .th:nth-child(6) {
  width: 15%;
}

.tab-boardSET4 .tbody .td:nth-child(1) {
  width: 5%;
  padding: 18.5px 0 18.5px 10px;
}

.tab-boardSET4 .tbody .td:nth-child(2) {
  width: 10%;
}

.tab-boardSET4 .tbody .td:nth-child(3) {
  width: 40%;
}

.tab-boardSET4 .tbody .td:nth-child(4) {
  width: 15%;
}

.tab-boardSET4 .tbody .td:nth-child(5) {
  width: 15%;
}

.tab-boardSET4 .tbody .td:nth-child(6) {
  width: 15%;
}

.tab-boardSET4 .tbody .td {
  color: #32374b;
}

/**/

/**/
.tab-boardSET5 .tbody .tr:hover {
  background: #ebf0f6;
}

.tab-boardSET5 .tbody a:last-child .tr {
  border-bottom: 0;
}

.tab-boardSET5 .thead .th:nth-child(1) {
  width: 5%;
  padding: 5px 0 5px 10px;
}

.tab-boardSET5 .thead .th:nth-child(2) {
  width: 10%;
}

.tab-boardSET5 .thead .th:nth-child(3) {
  width: 40%;
}

.tab-boardSET5 .thead .th:nth-child(4) {
  width: 15%;
}

.tab-boardSET5 .thead .th:nth-child(5) {
  width: 15%;
}

.tab-boardSET5 .thead .th:nth-child(6) {
  width: 15%;
}

.tab-boardSET5 .tbody .td:nth-child(1) {
  width: 5%;
  padding: 18.5px 0 18.5px 10px;
}

.tab-boardSET5 .tbody .td:nth-child(2) {
  width: 10%;
}

.tab-boardSET5 .tbody .td:nth-child(3) {
  width: 40%;
}

.tab-boardSET5 .tbody .td:nth-child(4) {
  width: 15%;
}

.tab-boardSET5 .tbody .td:nth-child(5) {
  width: 15%;
}

.tab-boardSET5 .tbody .td:nth-child(6) {
  width: 15%;
}

.tab-boardSET5 .tbody .td {
  color: #32374b;
}

/**/


/**/
.push-board {}

.push-board .thead .th:nth-child(1) {
  width: 5%;
  padding: 5px 0 5px 30px;
  box-sizing: border-box;
  z-index: 9;
}

.push-board .thead .th:nth-child(2) {
  width: 10%;
}

.push-board .thead .th:nth-child(3) {
  width: 25%;
}

.push-board .thead .th:nth-child(4) {
  width: 20%;
}

.push-board .thead .th:nth-child(5) {
  width: 10%;
}

.push-board .thead .th:nth-child(6) {
  width: 8%;
}

.push-board .thead .th:nth-child(7) {
  width: 12%;
}

.push-board .thead .th:nth-child(8) {
  width: 10%;
}

.push-board .tbody .tr:last-child {
  border-bottom: 0;
}

.push-board .tbody .td:nth-child(1) {
  width: 5%;
  padding: 13px 0 13px 30px;
  z-index: 9;
}

.push-board .tbody .td:nth-child(2) {
  width: 10%;
}

.push-board .tbody .td:nth-child(3) {
  width: 25%;
}

.push-board .tbody .td:nth-child(4) {
  width: 20%;
}

.push-board .tbody .td:nth-child(5) {
  width: 10%;
}

.push-board .tbody .td:nth-child(6) {
  width: 8%;
}

.push-board .tbody .td:nth-child(7) {
  width: 12%;
}

.push-board .tbody .td:nth-child(8) {
  width: 10%;
}

/**/



.board-viewHD {
  padding: 20px 0;
  border-bottom: 1px solid #a8b9ce;
  margin: 0 30px;
}

.board-viewHD .tit {
  font-size: 27px;
  margin-bottom: 17px;
}

.board-viewHD .sm-txt {
  color: #a8b9ce;
  font-size: 14px;
}

.board-viewHD .sm-txt span:first-child {
  margin-right: 20px;
}

.board-view-cont {
  height: calc(100% - 236px);
  padding: 20px 0;
  margin: 0 30px;
  line-height: 31px;
  border-bottom: 1px solid #a8b9ce;
}

.board-btBOX {
  padding: 24px 30px;
  text-align: center;
}

/* .tab-bt-border {border-top:1px solid #ddd;margin-top:25px;} */
.board-write-tit {
  font-size: 13px;
  font-weight: 500;
  color: #a8b9ce;
}

.inp-txt {
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  line-height: 36px;
}

.write-txtbox {
  height: calc(100% - 163px);
}

.write-txtbox textarea {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 15px;
  box-sizing: border-box;
}

.pagenation {
  font-size: 0;
  padding: 24px 30px;
  position: absolute;
  bottom: 0;
}

.pagenation.pop-pageST {
  padding: 24px 30px 24px 0;
}

.pagenation a,
.pagenation button {
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
}

.pagenation button {
  background: no-repeat center;
  height: 40px;
  line-height: 40px;
  font-weight: 300;
  width: 40px;
  border: 1px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  background-color: #fff;
  box-sizing: border-box;
  color: #999;
  font-size: 14px;
  transition: all .2s;
}

.pagenation .page-next {
  margin-left: -1px;
  border-radius: 0 5px 5px 0;
}

.pagenation .page-prev {
  border-radius: 5px 0 0 5px;
}

.pagenation button[class*='page-']:hover {
  background-color: #fff;
}

.pagenation .page-prev span {
  background-image: url('../images/pagenation-prev.png');
  width: 6px;
  height: 11px;
  display: inline-block;
  background-repeat: no-repeat;
}

.pagenation .page-next span {
  background-image: url('../images/pagenation-next.png');
  width: 6px;
  height: 11px;
  display: inline-block;
  background-repeat: no-repeat;
}

.pagenation .page-num {
  display: inline-block;
}

.pagenation .page-num a {
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-weight: 300;
  margin-left: -1px;
  border: 1px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  background-color: #fff;
  box-sizing: border-box;
  color: #ddd;
  font-size: 14px;
  transition: all .2s;
  text-align: center;
}

.pagenation .page-num a:hover,
.pagenation .page-num a.active {
  color: #32374B;
  font-weight: bold;
  background-color: #fff;
  z-index: 9;
  position: relative;
}

.pop-page {
  padding: 0;
  bottom: 25px;
}

.page-box {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 24px 30px;
  font-size: 13px;
}

.blind {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(42, 44, 50, 0.95);
  z-index: 10;
  display: none;
}

.blind2 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(42, 44, 50, 0.75);
  z-index: 10;
  display: block;
}

.charging-set-pop {
  width: 45%;
  min-width: 890px;
}

.charging-set-pop .pop-cont {
  padding: 25px 30px;
}

.charging-set-pop .option_box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.charging-set-pop .option_box .option_tit {
  display: block;
  color: #005aff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

/* CCTV 등록/수정 통합 팝업 */
/* SentryEye 폼 팝업 공통 스타일 (CCTV 등록/수정, 장소 등록, 장소 상세정보) */
.sentryeye-form-pop {
  max-height: 90vh;
  min-width: 500px;
  width: 40%;
  background: #fff;
  border-radius: 5px;
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
}

.sentryeye-form-pop .poptit-box {
  padding: 25px 30px 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.sentryeye-form-pop .pop-title {
  font-weight: 800;
  font-size: 18px;
}

.sentryeye-form-pop .btn-close,
.sentryeye-form-pop .btn-close2 {
  width: 16px;
  height: 16px;
  display: block;
  background: url(../images/pop-close2.png) top left no-repeat;
  cursor: pointer;
  border: none;
}

.sentryeye-form-pop .pop-cont {
  padding: 25px 30px;
  max-height: calc(90vh - 70px);
  overflow-y: auto;
  box-sizing: border-box;
}

.sentryeye-form-pop .sub-info-table2 {
  display: block;
  margin-top: 10px;
}

.sentryeye-form-pop p {
  font-weight: 500;
  font-size: 18px;
}

.sentryeye-form-pop .in-subBOX1,
.sentryeye-form-pop .in-subBOX2 {
  width: 100%;
}

.sentryeye-form-pop .chargin-table {
  width: 100%;
  border-top: 2px solid #32374b;
  border-collapse: collapse;
}

.sentryeye-form-pop .chargin-table th {
  background: #f2f6f9;
  width: 30%;
  color: #a2a2a2;
  font-size: 13px;
  padding: 1.3% 15px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.sentryeye-form-pop .chargin-table td {
  width: 70%;
  padding: 1.3% 15px;
  border-bottom: 1px solid #ddd;
  background: #fff;
  font-size: 14px;
}

/* 입력칸(input/select) 크기 통일 — 셀렉트박스만 넓던 문제 해소 (폭/높이/폰트 일치) */
.sentryeye-form-pop .chargin-table td .input-st1 {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  font-size: 14px;
  padding: 0 10px;
  vertical-align: middle;
}

.sentryeye-form-pop .btn-area {
  text-align: center;
  margin-top: 20px;
}

.sentryeye-form-pop .btn-area .btn-comp {
  font-size: 14px;
  height: 40px;
  width: 105px;
  background: #32374b;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.charging-info-pop {
  width: 45%;
}

.charging-info-pop .pop-cont {
  padding: 25px 30px;
}

.charging-info-pop .chargin-table {
  width: calc(50% - 25px);
  /* height:100%; */
  border-top: 2px solid #32374b;
  border-collapse: collapse;
}

.charging-info-pop .chargin-table th {
  background: #f2f6f9;
  width: 30%;
  /* width:calc(30% - 15px);padding-left:15px; */
  color: #a2a2a2;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.charging-info-pop .chargin-table td {
  width: 70%;
  /* width:calc(70% - 15px); */
  padding: 1.3% 15px;
  border-bottom: 1px solid #ddd;
  background: #fff;
  font-size: 15px;
}

.charging-info-pop p {
  font-weight: 500;
  font-size: 18px;
}

.charging-info-pop .sub-info-table2 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.charging-info-pop .option_box {
  margin-top: 5px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.charging-info-pop .option_box .device-input-box {
  display: flex;
}

.charging-info-pop .option_box .device-input-box .pop-device-cont {
  display: flex;
}

.station-pop {
  width: 45%;
}

.station-pop .pop-cont {
  padding: 25px 30px;
}

.station-pop .chargin-table {
  width: calc(50% - 25px);
  /* height:100%; */
  border-top: 2px solid #32374b;
  border-collapse: collapse;
}

.station-pop .chargin-table th {
  background: #f2f6f9;
  width: 30%;
  /* width:calc(30% - 15px);padding-left:15px; */
  color: #a2a2a2;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.station-pop .chargin-table td {
  width: 70%;
  /* width:calc(70% - 15px); */
  padding: 1.3% 15px;
  border-bottom: 1px solid #ddd;
  background: #fff;
  font-size: 15px;
}

.station-pop p {
  font-weight: 500;
  font-size: 18px;
}

.station-pop .sub-info-table2 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.live-video-pop {
  width: 45%;
}

.live-video-pop .live-video {
  width: 100%;
  height: 400px;
  background: #ececec;
  margin-bottom: 20px;
}

.live-video-pop .pop-cont {
  padding: 25px 30px;
}

.live-video-pop .chargin-table {
  width: calc(50% - 25px);
  /* height:100%; */
  border-top: 2px solid #32374b;
  border-collapse: collapse;
}

.live-video-pop .chargin-table th {
  background: #f2f6f9;
  width: 30%;
  /* width:calc(30% - 15px);padding-left:15px; */
  color: #a2a2a2;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.live-video-pop .chargin-table td {
  width: 70%;
  /* width:calc(70% - 15px); */
  padding: 1.3% 15px;
  border-bottom: 1px solid #ddd;
  background: #fff;
  font-size: 15px;
}

.live-video-pop p {
  font-weight: 500;
  font-size: 18px;
}

.live-video-pop .sub-info-table2 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.live-video-pop .option_box {
  margin-top: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.continfo-pop {
  width: 30%;
}

.continfo-pop .pop-cont {
  padding: 25px 30px;
  max-height: 300px;
  overflow-y: auto;
}

.continfo-pop .pop-cont .in-subBOX1 {
  height: 100%;
}

.event-video-pop {
  width: 45%;
}

.event-video-pop .live-video {
  width: 100%;
  height: 100%;
  background: #000;
  margin-bottom: 20px;
  position: relative;
}

.event-video-pop .live-video-energychartbox {
  position: absolute;
  bottom: 15%;
  left: 20px;
}

.event-video-pop .live-video-energychartbox .live-video-heatenergy {
  height: 200px;
  width: 320px;
  margin-bottom: 10px;
}

.event-video-pop .live-video-energychartbox .live-video-heatenergy video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  margin-bottom: 15px;
}

.event-video-pop .live-video-energychartbox .live-video-chart {
  height: 200px;
  width: 320px;
  background: rgba(255, 255, 255, 0.75);
}

.event-video-pop .pop-cont {
  padding: 25px 30px;
}

.event-video-pop .chargin-table {
  width: calc(50% - 25px);
  border-top: 2px solid #32374b;
  border-collapse: collapse;
}

.event-video-pop .chargin-table th {
  background: #f2f6f9;
  width: 30%;
  /* width:calc(30% - 15px); padding-left:15px; */
  color: #a2a2a2;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.event-video-pop .chargin-table td {
  width: 70%;
  /* width:calc(70% - 15px); */
  padding: 1.3% 15px;
  border-bottom: 1px solid #ddd;
  background: #fff;
  font-size: 15px;
}

.event-video-pop p {
  font-weight: 500;
  font-size: 18px;
}

.event-video-pop .sub-info-table2 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.event-video-pop .option_box {
  margin-top: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.mypage-pop {
  width: 45%;
}

.mypage-pop .live-video {
  width: 100%;
  height: 400px;
  background: #ececec;
  margin-bottom: 20px;
}

.mypage-pop .pop-cont {
  padding: 25px 30px;
}

.mypage-pop .chargin-table {
  width: calc(50% - 25px);
  /* height:100%; */
  border-top: 2px solid #32374b;
  border-collapse: collapse;
}

.mypage-pop .chargin-table th {
  background: #f2f6f9;
  width: 30%;
  /* width:calc(30% - 15px);padding-left:15px; */
  color: #a2a2a2;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.mypage-pop .chargin-table td {
  width: 70%;
  /* width:calc(70% - 15px); */
  padding: 1.3% 15px;
  border-bottom: 1px solid #ddd;
  background: #fff;
  font-size: 15px;
}

.mypage-pop p {
  font-weight: 500;
  font-size: 18px;
}

.mypage-pop .sub-info-table2 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.mypage-pop .option_box {
  margin-top: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.pop-tab3-2 {
  width: 45%;
}

.pop-tab3-2 .pop-cont {
  padding: 25px 30px;
}

.pop-tab3-2 .option_box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.pop-tab3-2 .option_box .option_tit {
  display: block;
  color: #005aff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

.pop-tab3-2 .chargin-table {
  width: calc(50% - 25px);
  /* height:100%; */
  border-top: 2px solid #32374b;
  border-collapse: collapse;
}

.pop-tab3-2 .chargin-table th {
  background: #f2f6f9;
  width: 30%;
  /* width:calc(30% - 15px);padding-left:15px; */
  color: #a2a2a2;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.pop-tab3-2 .chargin-table td {
  width: 70%;
  /* width:calc(70% - 15px); */
  padding: 1.3% 15px;
  border-bottom: 1px solid #ddd;
  background: #fff;
  font-size: 15px;
}

.pop-tab3-2 p {
  font-weight: 500;
  font-size: 18px;
}

.pop-tab3-2 .sub-info-table2 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.pop-tab3-2 .option_box {
  margin-top: 5px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.pop-tab3-2 .option_box .device-input-box {
  display: flex;
}

.pop-tab3-2 .group-contsele {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.pop-tab3-2 .input-type-txt {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 0 10px;
  box-sizing: border-box;
}

.pop-tab3-2 .inputtxt-box-info1 {
  width: 20%;
}

.pop-tab3-2 .inputtxt-box-info2 {
  width: calc(80% - 361px);
}

.pop-wrap {
  background: #fff;
  border-radius: 5px;
  top: calc(50% - 40px);
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 11;
  display: none;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.pop-wrap.event-video-pop {
  top: 50%;
}

.pop-wrap.continfo-pop {
  top: 50%;
}

.pop-wrap .poptit-box {
  padding: 25px 30px 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.pop-wrap .btn-close {
  width: 16px;
  height: 16px;
  display: block;
  background: url(../images/pop-close2.png) top left no-repeat;
}

.pop-wrap .pop-title {
  font-weight: 800;
  font-size: 18px;
}

.pop-wrap .pop-title .btn-RTSP {
  border-radius: 4px;
  background: #a8b9ce;
  color: #fff;
  padding: 2.7px 7px;
  vertical-align: 2px;
  margin-left: 10px;
}

.pop-wrap .btn-area {
  text-align: center;
  margin-top: 20px;
}

.pop-wrap .btn-area.fileup-btarea {
  text-align: right;
}

.pop-wrap .btn-area .btn-comp {
  font-size: 14px;
  height: 40px;
  width: 105px;
  line-height: 0;
  padding: 13px 0;
  font-weight: bold;
  background: #005AFF;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
}

.pop-wrap .btn-area .btn-gray {
  font-size: 14px;
  height: 40px;
  width: 105px;
  line-height: 0;
  padding: 13px 0;
  font-weight: bold;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  text-align: center;
  color: #32374b;
  box-sizing: border-box;
}

.pop-wrap .board-table {
  /* height:calc(100% - 195px); */
  margin-top: 10px;
  overflow-y: auto;
  height: 300px;
  border-bottom: 1px solid #ddd;
  border-top: 2px solid #ddd;
}

.pop-wrap .board-table .thead {
  border-top: 0;
}

.pop-wrap .board-table .thead .th:nth-child(1) {
  width: 2%;
  padding: 5px 0 5px 15px;
  box-sizing: border-box;
}

.pop-wrap .board-table .thead .th:nth-child(2) {
  width: 45%;
}

.pop-wrap .board-table .thead .th:nth-child(3) {
  width: 53%;
}

.rtsp-btBOX {
  display: flex;
}

.rtsp-btBOX li {
  margin-right: 15px;
}

.rtsp-btBOX li:last-child {
  margin-right: 0;
}

.rtsp-btBOX .rtspbt-st {
  font-size: 14px;
  width: 110px;
  height: 40px;
  line-height: 0;
  padding: 13px 0;
  font-weight: bold;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  text-align: center;
  color: #32374b;
  box-sizing: border-box;
}

.rtsp-inpBOX {
  display: flex;
}

.rtsp-inpBOX li:first-child {
  margin-right: 20px;
}

.rtsp-inpBOX li {
  width: calc(50% - 10px);
}

.rtsp-inpBOX li .rtsp-inp {
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 100%;
  padding: 0 60px 0 10px;
  box-sizing: border-box;
}

.rtsp-inpBOX li .rtsp-inp::placeholder {
  font-weight: 200;
  color: #777;
}

/* .pop-wrap .board-table .tbody {padding:13px 30px;} */
.pop-wrap .board-table .tbody .tr {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #f1f3f6;
}

.pop-wrap .board-table .tbody .tr:hover {
  background: #ebf0f6;
}

.pop-wrap .board-table .tbody a:last-child .tr .td {
  border-bottom: 0;
}

.pop-wrap .board-table .tbody .td {
  font-size: 14px;
  padding: 13px 0;
  box-sizing: border-box;
  text-align: center;
}

.pop-wrap .board-table .tbody .td:nth-child(1) {
  width: 2%;
  padding: 5px 0 5px 15px;
  box-sizing: border-box;
}

.pop-wrap .board-table .tbody .td:nth-child(2) {
  width: 45%;
}

.pop-wrap .board-table .tbody .td:nth-child(3) {
  width: 53%;
}


.charging-info-pop .board-table .thead .th:nth-child(1) {
  width: 2%;
  padding: 5px 0 5px 15px;
  box-sizing: border-box;
}

.charging-info-pop .board-table .thead .th:nth-child(2) {
  width: 14%;
}

.charging-info-pop .board-table .thead .th:nth-child(3) {
  width: 33%;
}

.charging-info-pop .board-table .thead .th:nth-child(4) {
  width: 31%;
}

.charging-info-pop .board-table .thead .th:nth-child(5) {
  width: 20%;
}

.charging-info-pop .board-table .tbody .td:nth-child(1) {
  width: 2%;
  padding: 13px 0 13px 15px;
}

.charging-info-pop .board-table .tbody .td:nth-child(2) {
  width: 14%;
}

.charging-info-pop .board-table .tbody .td:nth-child(3) {
  width: 33%;
}

.charging-info-pop .board-table .tbody .td:nth-child(4) {
  width: 31%;
}

.charging-info-pop .board-table .tbody .td:nth-child(5) {
  width: 20%;
}

.pop-tab3-2 .board-table .thead .th:nth-child(1) {
  width: 7%;
  padding: 5px 0 5px 15px;
  box-sizing: border-box;
}

.pop-tab3-2 .board-table .thead .th:nth-child(2) {
  width: 18%;
}

.pop-tab3-2 .board-table .thead .th:nth-child(3) {
  width: 40%;
}

.pop-tab3-2 .board-table .thead .th:nth-child(4) {
  width: 15%;
}

.pop-tab3-2 .board-table .thead .th:nth-child(5) {
  width: 20%;
}

.pop-tab3-2 .board-table .tbody .td:nth-child(1) {
  width: 7%;
  padding: 5px 0 5px 15px;
  box-sizing: border-box;
}

.pop-tab3-2 .board-table .tbody .td:nth-child(2) {
  width: 18%;
}

.pop-tab3-2 .board-table .tbody .td:nth-child(3) {
  width: 40%;
}

.pop-tab3-2 .board-table .tbody .td:nth-child(4) {
  width: 15%;
}

.pop-tab3-2 .board-table .tbody .td:nth-child(5) {
  width: 20%;
}

.pop-tab3-2 .board-table .tbody .tr:last-child {
  border-bottom: 0;
}

.pop-tab4 .board-table .thead .th:nth-child(1) {
  width: 7%;
  padding: 5px 0 5px 15px;
  box-sizing: border-box;
}

.pop-tab4 .board-table .thead .th:nth-child(2) {
  width: 19%;
}

.pop-tab4 .board-table .thead .th:nth-child(3) {
  width: 28%;
}

.pop-tab4 .board-table .thead .th:nth-child(4) {
  width: 10%;
}

.pop-tab4 .board-table .thead .th:nth-child(5) {
  width: 28%;
}

.pop-tab4 .board-table .thead .th:nth-child(6) {
  width: 8%;
}

.pop-tab4 .board-table .tbody .td:nth-child(1) {
  width: 7%;
  padding: 5px 0 5px 15px;
  box-sizing: border-box;
}

.pop-tab4 .board-table .tbody .td:nth-child(2) {
  width: 19%;
}

.pop-tab4 .board-table .tbody .td:nth-child(3) {
  width: 28%;
}

.pop-tab4 .board-table .tbody .td:nth-child(4) {
  width: 10%;
}

.pop-tab4 .board-table .tbody .td:nth-child(5) {
  width: 28%;
}

.pop-tab4 .board-table .tbody .td:nth-child(6) {
  width: 8%;
}

.pop-tab4 .board-table .tbody .tr:last-child {
  border-bottom: 0;
}

.pop-tab4 .board-table .tbody .re {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pop-tab4 .board-table .tbody .re .reset {
  width: unset;
  margin-right: 10px;
}

.pop-tab4 .board-table .tbody .re .reset select {
  padding: 10px 35px 10px 10px;
}


.pop-tab4 .fileup-boardST .thead .th:nth-child(1) {
  width: 7%;
  padding: 5px 0 5px 15px;
  box-sizing: border-box;
}

.pop-tab4 .fileup-boardST .thead .th:nth-child(2) {
  width: 30%;
}

.pop-tab4 .fileup-boardST .thead .th:nth-child(3) {
  width: 15%;
}

.pop-tab4 .fileup-boardST .thead .th:nth-child(4) {
  width: 48%;
}

.fileup-boardST .pop-tab4 .fileup-boardST .tbody .td:nth-child(1) {
  width: 7%;
  padding: 5px 0 5px 15px;
  box-sizing: border-box;
}

.pop-tab4 .fileup-boardST .tbody .td:nth-child(2) {
  width: 30%;
}

.pop-tab4 .fileup-boardST .tbody .td:nth-child(3) {
  width: 15%;
}

.pop-tab4 .fileup-boardST .tbody .td:nth-child(4) {
  width: 48%;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 12px;
  box-sizing: border-box;
}

/* .pop-tab4 .board-table .tbody .re .reset2 {width:100px;margin-right:10px;}
.pop-tab4 .board-table .tbody .re .reset2 select {padding:10px 25px 10px 10px;} */

.warning-pop {
  width: 25%;
}

.warning-pop .btbox {
  text-align: center;
}

@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

.warning-cont {
  padding: 25px 30px;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.warning-cont img {
  animation: blink-effect 1s step-end infinite;
}

.warning-cont .warning-tit {
  font-weight: 800;
  font-size: 30px;
  width: 100%;
  padding: 15px 0 5px;
}

.warning-cont .charging-name {
  font-size: 24px;
  margin-bottom: 3px;
}

.warning-cont .charging-date {
  font-size: 17px;
  color: #777;
}


.cont-list-wrap .cont-page .btn-charging-register {
  position: absolute;
  right: 40px;
  top: 50px;
  display: block;
  width: 300px;
  height: 60px;
  box-sizing: border-box;
  border-radius: 3px;
  background: #ffcc00;
  line-height: 60px;
  font-size: 16px;
  font-weight: 700;
  color: #2a2c32;
  font-family: 'Gotham Rounded', sans-serif;
  text-align: left;
  padding-left: 23px;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.cont-list-wrap .cont-page .btn-charging-register:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-register.png) left top no-repeat;
  position: absolute;
  right: 16px;
  top: 21px;
}

.cont-list-wrap .cont-page .btn-charging-info {
  position: absolute;
  right: 40px;
  top: 50px;
  display: block;
  width: 300px;
  height: 60px;
  box-sizing: border-box;
  border-radius: 3px;
  background: #ffcc00;
  line-height: 60px;
  font-size: 16px;
  font-weight: 700;
  color: #2a2c32;
  font-family: 'Gotham Rounded', sans-serif;
  text-align: left;
  padding-left: 23px;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.cont-list-wrap .cont-page .btn-charging-info:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-register.png) left top no-repeat;
  position: absolute;
  right: 16px;
  top: 21px;
}

.date-area {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 40px;
}

.date-area .period-date {
  width: 140px;
  height: 40px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 15px;
  font-family: 'Apple SD Gothic Neo', 'Barlow', 'Noto Sans KR', sans-serif;
  font-weight: bold;
  font-size: 13px;
}

.date-area .ui-datepicker-trigger {
  position: absolute;
  right: 15px;
  top: 11px;
}

.in-contBOX {
  border-top: 1px solid #ddd;
}

#event-chart {
  height: calc(100% - 107px) !important;
  padding: 20px 30px;
  box-sizing: border-box;
}

#event-chart div {
  width: 100% !important;
  height: 100% !important;
}

#event-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

/**del-start**/

/* robot monitoring */
.robot-monitor-cont {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.robot-monitor-cont .bottom-cont {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  height: 390px;
  box-sizing: border-box;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -ms-transition: 500ms;
  transition: 500ms;
  z-index: 2;
  -webkit-box-shadow: 0px 5px 30px 0px rgba(96, 103, 131, 0.2);
  -moz-box-shadow: 0px 5px 30px 0px rgba(96, 103, 131, 0.2);
  box-shadow: 0px 5px 30px 0px rgba(96, 103, 131, 0.2);
}


.robot-monitor-cont.close-bottom .drawing-area {
  height: 100%;
  /* calc(100% - 50px); */
}

.robot-monitor-cont.open-bottom .drawing-area {
  height: calc(100% - 390px);
}

.robot-monitor-cont .drawing-area .btn-alert {
  position: absolute;
  left: 100px;
  top: 180px;
  width: 100px;
  height: 100px;
  background: #ffcc00 url(../images/icon-drawing-alert1.png) center no-repeat;
  font-size: 0;
  line-height: 0;
  overflow: visible;
  -webkit-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.2);
}

.robot-monitor-cont .drawing-area .btn-alert:after {
  content: "ALERT";
  display: block;
  position: absolute;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 20px;
  height: 20px;
  background: #2a2c32;
  width: 60px;
  text-align: center;
  bottom: -10px;
  left: 50%;
  margin-left: -30px;
}

@keyframes alert-bg {
  0% {
    background: #ffcc00 url(../images/icon-drawing-alert1.png) center no-repeat;
  }

  100% {
    background: #f00c0c url(../images/icon-drawing-alert2.png) center no-repeat;
  }
}

@-webkit-keyframes alert-bg {
  0% {
    background: #ffcc00 url(../images/icon-drawing-alert1.png) center no-repeat;
  }

  100% {
    background: #f00c0c url(../images/icon-drawing-alert2.png) center no-repeat;
  }
}

.robot-monitor-cont .drawing-area .btn-alert.non-reading-alert {
  animation: alert-bg 800ms linear alternate-reverse infinite both;
  -webkit-animation: alert-bg 800ms linear alternate-reverse infinite both;
}

.robot-monitor-cont .drawing-area .drawing-magnification {
  position: absolute;
  left: 100px;
  bottom: 40px;
  width: 40px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  color: #2a2c32;
}

.robot-monitor-cont .drawing-area .drawing-magnification:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: 4px solid #2a2c32;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  margin: 0 auto;
}

.robot-monitor-cont .drawing-area .drawing-magnification:after {
  content: "";
  display: block;
  width: 40px;
  height: 7px;
  border: 1px solid #2a2c32;
  border-top: 0;
  box-sizing: border-box;
  margin-top: -7px;
}

.robot-monitor-cont .drawing-area .drawing-logo {
  position: absolute;
  right: 80px;
  bottom: 40px;
  font-size: 0;
  line-height: 0;
}

.drawing-area .zoom-control {
  width: 194px;
  transform: rotate(-90deg);
  transform-origin: 100% 15px;
}

.robot-monitor-cont .drawing-area .zoom-control {
  position: absolute;
  top: 60px;
  right: 125px;
}

.drawing-area .zoom-control datalist.zoom-disc {
  display: block;
  position: absolute;
  transform: rotate(90deg);
  left: 89px;
  top: -40px;
  text-align: right;
  font-size: 10px;
  line-height: 1.85em;
  color: #a9b1c6;
}

.drawing-area .zoom-control datalist.zoom-disc option {
  position: relative;
  font-weight: 300;
}

.drawing-area .zoom-control datalist.zoom-disc option:before {
  content: "-";
  position: absolute;
  left: -7px;
  top: 0;
}

.drawing-area .zoom-control datalist.zoom-disc option.active-range {
  color: #2a2c32;
  font-weight: 800;
}

.drawing-area .zoom-control input[type=range].zoom-bar {
  width: 194px;
  -webkit-appearance: none;
  background: none;
}

.drawing-area .zoom-control input[type=range].zoom-bar:focus {
  outline: none;
}


/*webkit (Chrome)의 경우*/
.drawing-area .zoom-control input[type=range].zoom-bar::-webkit-slider-runnable-track {
  width: 194px;
  height: 12px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent url(../images/zoom-bar-bg.png) top left no-repeat;
}

.drawing-area .zoom-control input[type=range].zoom-bar::-webkit-slider-thumb {
  width: 25px;
  height: 25px;
  cursor: pointer;
  -webkit-appearance: none;
  background: url(../images/zoom-slider-icon.png) top left no-repeat;
  margin-top: -6px;
  /*chrome의 경우 margin-top값을 부여해야합니다.*/
}

.customizing input[type=range]:focus::-webkit-slider-runnable-track {
  background: #2497E3;
  /*네모버튼에 포커스를 줬을때 뒤에 라인(ㅡ)의 효과*/
}

/*Firefox의 경우*/
.drawing-area .zoom-control input[type=range].zoom-bar::-moz-range-track {
  width: 194px;
  height: 12px;
  cursor: pointer;
  animate: 0.2s;
  background: url(../images/zoom-bar-bg.png) top left no-repeat;
}

.drawing-area .zoom-control input[type=range].zoom-bar::-moz-range-thumb {
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: url(../images/zoom-slider-icon.png) top left no-repeat;
}

/*IE의 경우*/
.drawing-area .zoom-control input[type=range].zoom-bar::-ms-track {
  width: 194px;
  height: 25px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.drawing-area .zoom-control input[type=range].zoom-bar::-ms-fill-lower {
  background: transparent url(../images/zoom-bar-bg.png) left 6px no-repeat;
}

.drawing-area .zoom-control input[type=range].zoom-bar::-ms-fill-upper {
  background: transparent url(../images/zoom-bar-bg.png) right 6px no-repeat;
}

.drawing-area .zoom-control input[type=range].zoom-bar::-ms-thumb {
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: url(../images/zoom-slider-icon.png) top center no-repeat;
  border: 0;
  display: block;
}

.drawing-area .zoom-control input[type=range].zoom-bar:focus::-ms-fill-lower {
  background: transparent url(../images/zoom-bar-bg.png) left 6px no-repeat;
  /*네모버튼에 포커스를 줬을때 뒤에 라인(ㅡ)의 효과*/
}

.drawing-area .zoom-control input[type=range].zoom-bar:focus::-ms-fill-upper {
  background: transparent url(../images/zoom-bar-bg.png) right 6px no-repeat;
  /*네모버튼에 포커스를 줬을때 뒤에 라인(ㅡ)의 효과*/
}



.robot-monitoring-cont .infomation-sec {
  border-bottom: 1px solid #e1e5ed;
  padding: 25px 0;
}

.robot-monitoring-cont .infomation-sec dl {
  float: left;
  width: 10%;
  box-sizing: border-box;
  border-left: 1px solid #e1e5ed;
  padding: 3px 20px;
}

.robot-monitoring-cont .infomation-sec dl:first-child {
  border-left: 0;
  padding: 0;
}

.robot-monitoring-cont .infomation-sec dl dt {
  font-size: 11px;
  font-weight: 500;
  color: #a9b1c6;
  line-height: 13px;
  text-transform: uppercase;
}

.robot-monitoring-cont .infomation-sec dl dd {
  font-size: 14px;
  font-weight: 500;
  color: #2a2c32;
  line-height: 16px;
  margin-top: 10px;
}

.robot-monitoring-cont .robot-state {
  padding: 0 0 60px;
}

.robot-monitoring-cont .robot-state .cont-title {
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  height: 25px;
  line-height: 25px;
  margin-bottom: 20px;
  color: #2a2c32;
}

.robot-monitoring-cont .robot-state .cont-title span.today {
  display: inline-block;
  font-size: 10px;
  color: #fff;
  padding: 0 10px;
  border-radius: 20px;
  height: 23px;
  line-height: 23px;
  background: #92b0f5;
  vertical-align: middle;
  margin-left: 10px;
  font-weight: 400;
  margin-top: -3px;
}

.robot-monitoring-cont .robot-state .cont-title .btn-cal {
  position: absolute;
  right: 0;
  top: 2px;
  width: 30px;
  height: 23px;
  font-size: 0;
  line-height: 0;
  background: url(../images/icon-cal.png) top left no-repeat;
  display: block;
}

.robot-monitoring-cont .robot-state .state-box {
  background: #fff;
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(33, 35, 40, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(33, 35, 40, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(33, 35, 40, 0.1);
}

.robot-monitoring-cont .robot-state>.clear-fix {
  padding-top: 45px;
}

.robot-monitoring-cont .robot-state .fl-right {
  float: right;
  width: 300px;
}

.robot-monitoring-cont .robot-state .daily-report {
  float: left;
  width: 740px;
}

.robot-monitoring-cont .robot-state .daily-report .state-box {
  height: 260px;
}

.robot-monitoring-cont .daily-report .report-date-area {
  text-align: left;
  font-size: 0;
  line-height: 0;
  padding: 50px 0 0 40px;
  float: left;
  width: 200px;
  box-sizing: border-box;
}

.robot-monitoring-cont .daily-report .report-date-area .today-date {
  display: inline-block;
  position: relative;
}

.robot-monitoring-cont .daily-report .report-date-area .today-date .date-live {
  font-size: 30px;
  line-height: 32px;
  font-weight: 500;
  color: #2a2c32;
}

.robot-monitoring-cont .daily-report .report-date-area .machine-id {
  border-top: 1px solid #f1f3f7;
  margin-top: 72px;
  width: 140px;
  padding-top: 20px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}

.robot-monitoring-cont .daily-report .report-date-area .machine-id .label {
  color: #a9b1c6;
}

.robot-monitoring-cont .daily-report .report-date-area .machine-id .id-name {
  color: #2a2c32;
}

.robot-monitoring-cont .daily-report .repoer-info-area {
  width: 540px;
  float: left;
  padding-top: 15px;
}

.robot-monitoring-cont .daily-report .report-info-box {
  float: left;
  width: 250px;
  position: relative;
  margin: 0 5px;
}

.robot-monitoring-cont .daily-report .report-info-box .progress-left {
  position: absolute;
  left: 20px;
  bottom: 25px;
  font-size: 10px;
  font-weight: 600;
  color: #a9b1c6;
}

.robot-monitoring-cont .daily-report .report-info-box .progress-right {
  position: absolute;
  right: 20px;
  bottom: 25px;
  font-size: 10px;
  font-weight: 600;
  color: #a9b1c6;
}

.robot-monitoring-cont .daily-report .report-info-box dl {
  position: absolute;
  width: 122px;
  text-align: center;
  bottom: 25px;
  left: 66px;
}

.robot-monitoring-cont .daily-report .report-info-box dl dt {
  font-size: 12px;
  font-weight: 600;
  color: #2a2c32;
  line-height: 13px;
  text-transform: uppercase;
}

.robot-monitoring-cont .daily-report .report-info-box dl dd {
  position: absolute;
  bottom: 25px;
  left: 0;
  width: 100%;
}

.robot-monitoring-cont .daily-report .report-info-box dl dd span {
  display: block;
}

.robot-monitoring-cont .daily-report .report-info-box dl dd span.report-icon {
  margin-bottom: 5px;
}

.robot-monitoring-cont .daily-report .report-info-box dl dd span.report-state-chart em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #a9b1c6;
  line-height: 18px;
}

.robot-monitoring-cont .daily-report .report-info-box dl dd span.report-state-chart {
  font-size: 40px;
  color: #2a2c32;
  font-weight: 400;
  line-height: 40px;
}

.robot-monitoring-cont .daily-report .report-info-box svg path {
  will-change: auto;
  stroke-width: 10px;
  stroke-miterlimit: round;
  stroke-linecap: round;
  transition: stroke-dashoffset 850ms ease-in-out;
}

.robot-monitoring-cont .daily-report .report-info-box svg path.bg {
  stroke: #eff2f5;
}

.robot-monitoring-cont .daily-report .report-info-box svg path.meter {
  stroke: #7d83fe;
}

.robot-monitoring-cont .robot-state .machine-info {
  float: left;
  width: 410px;
  margin-left: 30px;
}

.robot-monitoring-cont .robot-state .machine-info .state-box {
  height: 260px;
  box-sizing: border-box;
  padding: 0 30px;
}

.robot-monitoring-cont .robot-state .machine-info .state-box .text-info {
  border-top: 1px solid #f1f3f7;
  padding: 25px 0;
}

.robot-monitoring-cont .robot-state .machine-info .state-box dl {
  float: left;
  width: 160px;
  position: relative;
}

.robot-monitoring-cont .robot-state .machine-info .state-box dl+dl {
  margin-left: 30px;
}

.robot-monitoring-cont .robot-state .machine-info .state-box dl dt {
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: #a9b1c6;
  text-transform: uppercase;
}

.robot-monitoring-cont .robot-state .machine-info .state-box .icon-info {
  padding: 25px 0;
}

.robot-monitoring-cont .robot-state .machine-info .state-box .icon-info dl {
  position: relative;
}

.robot-monitoring-cont .robot-state .machine-info .state-box .icon-info dl dd {
  padding-left: 35px;
  font-size: 20px;
  color: #a9b1c6;
  text-align: right;
  height: 37px;
  line-height: 37px;
  margin-top: 5px;
}

.robot-monitoring-cont .robot-state .machine-info .state-box .icon-info dl dd strong {
  font-size: 30px;
  color: #2a2c32;
  font-weight: 400;
}

.robot-monitoring-cont .robot-state .machine-info .state-box .icon-info dl .machine-icon {
  position: absolute;
  left: 0;
  bottom: 0;
}

.robot-monitoring-cont .robot-state .machine-info .state-box .text-info dl {
  position: relative;
  padding-left: 75px;
  box-sizing: border-box;
}

.robot-monitoring-cont .robot-state .machine-info .state-box .text-info dl dt {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -10px;
}

.robot-monitoring-cont .robot-state .machine-info .state-box .text-info dl dd {
  text-align: right;
  font-size: 12px;
  line-height: 20px;
  color: #a9b1c6;
  font-weight: 500;
}

.robot-monitoring-cont .robot-state .machine-info .state-box .text-info dl dd strong {
  font-size: 20px;
  color: #2a2c32;
  font-weight: 400;
}



.robot-monitoring-cont .robot-state .work-status {
  float: left;
  width: 300px;
  margin-left: 30px;
}

.robot-monitoring-cont .robot-state .work-status .state-box {
  height: 260px;
  box-sizing: border-box;
  position: relative;
  padding: 0 0 0 70px;
}

.robot-monitoring-cont .robot-state .work-status .day-switch {
  position: absolute;
  left: 27px;
  top: 105px;
  width: 26px;
  height: 49px;
  display: block;
  background: url(../images/day-switch-bg.png) top left no-repeat;
}

.robot-monitoring-cont .robot-state .work-status .day-switch .set-label-am {
  font-size: 11px;
  color: #a9b1c6;
  position: absolute;
  left: 0;
  top: -16px;
  font-weight: 500;
  width: 100%;
  text-align: center;
  line-height: 12px;
}

.robot-monitoring-cont .robot-state .work-status .day-switch .set-label-pm {
  font-size: 11px;
  color: #a9b1c6;
  position: absolute;
  left: 0;
  bottom: -16px;
  font-weight: 500;
  width: 100%;
  text-align: center;
  line-height: 12px;
}

.robot-monitoring-cont .robot-state .work-status .day-switch .btn-set-change {
  position: absolute;
  width: 27px;
  height: 27px;
  background: url(../images/day-switch-btn.png) top left no-repeat;
  top: 0;
  left: 0;
  font-size: 0;
  line-height: 0;
  -moz-transition: 200ms;
  -webkit-transition: 200ms;
  -ms-transition: 200ms;
  transition: 200ms;
}

.robot-monitoring-cont .robot-state .work-status .day-switch.type-am .btn-set-change {
  top: 0;
}

.robot-monitoring-cont .robot-state .work-status .day-switch.type-pm .btn-set-change {
  top: 21px;
}

.robot-monitoring-cont .robot-state .work-status .day-switch.type-am .set-label-am {
  color: #2a2c32;
}

.robot-monitoring-cont .robot-state .work-status .day-switch.type-pm .set-label-pm {
  color: #2a2c32;
}

.robot-monitoring-cont .robot-state .work-status svg circle {
  will-change: auto;
  stroke-width: 2px;
  stroke-miterlimit: round;
  stroke-linecap: round;
  transition: stroke-dashoffset 850ms ease-in-out;
}

.robot-monitoring-cont .robot-state .work-status svg circle.bg {
  stroke: #eff2f5;
}

.robot-monitoring-cont .robot-state .work-status svg circle.meter {
  stroke: #7d83fe;
}

.robot-monitoring-cont .robot-state .work-status .clock-img {
  position: relative;
  background: url(../images/clock-bg.png) 20px 45px no-repeat;
  padding-top: 12px;
}

.robot-monitoring-cont .robot-state .work-status .clock-img .total-hour {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 186px;
  text-align: center;
  font-size: 20px;
  line-height: 20px;
  color: #2a2c32;
  margin-top: -1px;
  font-weight: 400;
}

.state-box {
  margin-top: 2%;
  /* height:calc(100% - 48px); */
  height: 90%;
}

.state-box table {
  height: 100%;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.state-box table tr:last-child td:nth-child(2) li {
  float: left;
  width: 16.6%;
  line-height: 14px;
  position: relative;
  text-align: right;
  margin-top: 10px;
}

.state-box table tr:last-child td:first-child {
  position: relative;
}

/* .state-box table tr:last-child td:first-child::before {content:"";display:block;width:1px;height:205px;background:#ddd;position:absolute;bottom:24px;right:0;} */
.state-box table tbody tr:last-child td {
  height: 15px;
}

.state-box table tbody td {
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  color: #a8b9ce;
  line-height: 10px;
  text-transform: uppercase;
  border-right: 1px solid #ddd;
}

.state-box table tbody td:last-child {
  border-right: 0;
}

.state-box table tbody tr:last-child td:first-child {
  border-right: 0;
}

.state-box table tbody td .chart-bar-box {
  height: 25px;
  position: relative;
}

.state-box table tbody tr:nth-last-child(2) td:last-child {
  border-bottom: 1px solid #ddd;
}

.state-box table tbody td .chart-bar-box .chart-bar {
  height: 12px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -6px;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(135deg, #00389f 0%, #005aff 100%);
  padding-left: 5px;
}

.state-box table tbody td .chart-bar-box .chart-bar .chart-label {
  position: absolute;
  right: 7px;
  top: 1px;
  font-size: 11px;
  line-height: 12px;
  color: #ffffff;
  font-weight: 400;
}


.pop-tab1,
.pop-tab2,
.pop-tab3,
.pop-tab3-2,
.pop-tab4,
.pop-tab5 {
  width: 45%;
}

.pop-tab1 .pop-cont {
  padding: 25px 30px;
}

.pop-tab2 .pop-cont {
  padding: 25px 30px;
}

.pop-tab3 .pop-cont {
  padding: 25px 30px;
}

.pop-tab3-2 .pop-cont {
  padding: 25px 30px;
  position: relative;
}

.pop-tab4 .pop-cont {
  padding: 25px 30px;
}

.pop-tab5 .pop-cont {
  padding: 25px 30px;
}

.pop-tab1 .pop-cont .in-box {}

.pop-tab1 .pop-cont .in-box .li-cont {
  display: flex;
  justify-content: space-between;
}

.pop-tab1 .pop-cont .in-box .li-cont .cont-wd {
  width: calc(50% - 15px);
}

.pop-tab2 .pop-cont .in-box .li-cont {
  display: flex;
  justify-content: space-between;
}

.pop-tab2 .pop-cont .in-box .li-cont .cont-wd {
  width: calc(33% - 15px);
}

.pop-tab2 .pop-cont .in-box .li-cont .cont-wd2 {
  width: calc(67% - 15px);
}

.pop-tab2 .pop-cont .in-box .li-cont .cont-wd3-posi {
  width: 100%;
  position: relative;
}

.pop-tab2 .pop-cont .in-box .setting_sel {
  width: 100%;
}

.pop-tab2 .station-select#stationList span {
  margin-left: 15px;
}

.pop-tab2 .station-select#stationList span:nth-child(1) {
  margin-left: 0;
}

.pop-tab2 .station-select {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px 10px;
  margin-top: 10px;
  display: flex;
}

.pop-tab2 .station-select span {
  position: relative;
  background: #ececec;
  font-size: 13px;
  padding: 5px 25px 5px 5px;
  border-radius: 4px;
}

.pop-tab2 .station-X {
  background: url(../images/btn_close01.png);
  width: 12px;
  height: 12px;
  background-size: 100%;
  position: absolute;
  top: 7px;
  right: 5px;
}

.pop-tab3 .pop-cont .in-box .li-cont {
  display: flex;
  justify-content: space-between;
}

.pop-tab3 .pop-cont .in-box .li-cont .cont-wd {
  width: calc(50% - 15px);
}

.pop-tab3 .pop-cont .in-box .li-cont .cont-wd2 {
  width: 100%;
}

.pop-tab3-2 .pop-cont .del_bt.pop3-2 {
  width: 120px;
  font-size: 18px;
  padding: 13px 0;
  font-weight: bold;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  margin-right: 15px;
  color: #32374b;
  border: 1px solid #b1b1b1;
  height: unset;
  box-sizing: border-box;
}

.pop-tab4 .board-table {
  margin-top: 0;
}

.pop-tab4 .pop-cont .in-box {}

.pop-tab4 .pop-cont .in-box .li-cont {
  display: flex;
  flex-wrap: wrap;
}

.pop-tab4 .pop-cont .in-box .li-cont .cont-wd {}

.pop-tab4 .pop-cont .file-buttonBOX {
  z-index: 9;
  position: absolute;
  right: 0;
  top: 5px;
}

.pop-tab4 .pop-cont .file-container {
  position: relative;
}

.pop-tab4 .pop-cont #chooseFile {
  visibility: hidden;
}

.pop-tab4 .pop-cont .fileInput {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 36px;
  border-radius: 4px;
  padding: 0 2px;
}

.pop-tab4 .pop-cont #fileName {
  margin-left: 10px;
  width: 80%;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: #777;
}

.pop-tab4 .pop-cont .fileup-box {
  width: 21%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.pop-tab5 .pop-cont .in-box .li-cont {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ececec;
  padding-top: 20px;
}

.pop-tab5 .pop-cont .in-box .li-cont2 {
  display: flex;
}

.pop-tab5 .pop-cont .in-box .li-cont3 {
  display: flex;
  margin-top: 20px;
  border-top: 1px solid #ececec;
  padding-top: 20px;
}

.pop-tab5 .pop-cont .in-box .cont-wd5 {
  width: calc(50% - 15px);
}

.pop-tab5 .pop-cont .in-box .cont-wd3 {
  width: calc(33% - 15px);
}

.pop-tab5 .pop-cont .in-box .cont-wd2 {
  width: 100%;
}

.pop-tab5 .pop-check-st1 {
  display: flex;
  margin-top: 10px;
}

.pop-tab5 .pop-check-st1 label span {
  font-size: 14px;
}

.pop-tab5 .pop-check-st1 label>input[type="checkbox"]+*::before {
  margin-right: 5px;
  vertical-align: -5px;
}

.pop-tab5 .pop-check-st1 li {
  margin-right: 25px;
}

.pop-tab5 .pop-check-st1 li:last-child {
  margin-right: 0;
}

.pop-tab5 .pop-check-st2 .check-cont {
  display: flex;
  margin-top: 10px;
}

.radio-ST {
  margin-right: 15px;
}

.radio-ST label {
  cursor: pointer;
  font-size: 14px;
}

.radio-ST:last-of-type {
  margin-right: 0;
}

.radio-ST input[type=radio] {
  position: absolute;
  opacity: 0;
}

.radio-ST input[type=radio]+.radio-ST-label:before {
  content: "";
  background: #f4f4f4;
  font-size: 14px;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: 0;
  margin-right: 5px;
  vertical-align: -6px;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}

.radio-ST input[type=radio]:checked+.radio-ST-label:before {
  background-color: #005AFF;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}

.btn-search {
  display: inline-block;
  width: 46px;
  height: 46px;
  border: 1px solid #d7def0;
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
  position: relative;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  background: rgba(247, 248, 251, 1);
  background: -moz-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(247, 248, 251, 1)), color-stop(100%, rgba(239, 240, 243, 1)));
  background: -webkit-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: -o-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: -ms-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: linear-gradient(to bottom, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8fb', endColorstr='#eff0f3', GradientType=0);
}

.btn-search:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-search.png) center no-repeat;
  position: absolute;
  top: 13px;
  left: 13px;
}

.btn-down {
  display: inline-block;
  width: 46px;
  height: 46px;
  border: 1px solid #d7def0;
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
  position: relative;
  margin-left: 5px;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  background: rgba(247, 248, 251, 1);
  background: -moz-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(247, 248, 251, 1)), color-stop(100%, rgba(239, 240, 243, 1)));
  background: -webkit-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: -o-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: -ms-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: linear-gradient(to bottom, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8fb', endColorstr='#eff0f3', GradientType=0);
}

.btn-down:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-down.png) center no-repeat;
  position: absolute;
  top: 13px;
  left: 13px;
}

/*********/


/* robot management */
.robot-state-wrap {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  background: #fff;
  height: 510px;
  box-sizing: border-box;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -ms-transition: 500ms;
  transition: 500ms;
  z-index: 1;
  border-top: 1px solid #e1e5ed;
  -webkit-box-shadow: 0px 5px 30px 0px rgba(96, 103, 131, 0.2);
  -moz-box-shadow: 0px 5px 30px 0px rgba(96, 103, 131, 0.2);
  box-shadow: 0px 5px 30px 0px rgba(96, 103, 131, 0.2);
}

.robot-state-wrap .btn-robot-state {
  position: absolute;
  bottom: -26px;
  width: 64px;
  height: 0;
  left: 50%;
  margin-left: -52px;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 26px solid #fff;
  text-align: center;
  overflow: visible;
  font-size: 0;
  line-height: 0;
}

.robot-state-wrap .btn-robot-state:before {
  content: "";
  display: block;
  width: 10px;
  height: 14px;
  background: url(../images/icon-btm-arrow.png) top left no-repeat;
  position: absolute;
  left: 50%;
  margin: 0 0 0 -5px;
  top: -22px;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -ms-transition: 300ms;
  transition: 300ms;
}

.robot-state-wrap.open-state .btn-robot-state:before {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.robot-state-wrap.close-state .btn-robot-state:before {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.robot-state-wrap.open-state {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

.robot-state-wrap.close-state {
  -webkit-transform: translate(0, -510px);
  -moz-transform: translate(0, -510px);
  -ms-transform: translate(0, -510px);
  transform: translate(0, -510px);
}

.robot-state-wrap .robot-state-cont {
  width: 850px;
  margin: 0 auto;
  padding-top: 35px;
}

.robot-state-wrap .robot-state-cont .robot-img {
  width: 400px;
  height: 400px;
}

.robot-state-wrap .robot-state-cont .robot-state-info {
  width: 400px;
  padding-top: 35px;
}

.robot-state-wrap .robot-state-cont .robot-state-info .robot-name {
  font-size: 25px;
  line-height: 30px;
  font-weight: 700;
  color: #2a2c32;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.robot-state-wrap .robot-state-cont .robot-state-info .sec-half {
  width: 200px;
}

.robot-state-wrap .robot-state-cont .robot-state-info .sec-3quarter {
  width: 33.33%;
}

.robot-state-wrap .robot-state-cont .robot-state-info .sec-3quarter:last-child {
  width: 33.34%;
}

.robot-state-wrap .robot-state-cont .robot-state-info dl {
  border-bottom: 1px solid #e5e5e5;
  padding: 15px 0;
}

.robot-state-wrap .robot-state-cont .robot-state-info dl dt {
  font-size: 11px;
  font-weight: 700;
  color: #a9b1c6;
  line-height: 12px;
  text-transform: uppercase;
}

.robot-state-wrap .robot-state-cont .robot-state-info dl dd {
  font-size: 14px;
  font-weight: 500;
  color: #2a2c32;
  margin-top: 10px;
  line-height: 14px
}

.robot-management-cont {
  overflow: hidden;
  box-sizing: border-box;
  padding: 100px 0 90px;
}

.robot-management-cont .section {
  height: 100%;
  padding: 50px 0 0;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
}

.robot-management-cont .robot-management-tab {
  padding-left: 22px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.robot-management-cont .robot-management-tab li {
  float: left;
  width: 250px;
  height: 50px;
  background: url(../images/tab-off.png) left top no-repeat;
  cursor: pointer;
  font-size: 17px;
  line-height: 50px;
  padding-left: 19px;
  color: #fff;
  font-weight: 700;
  margin-left: -22px;
  box-sizing: border-box;
  position: relative;
}

.robot-management-cont .robot-management-tab li.current {
  background: url(../images/tab-on.png) left top no-repeat;
  color: #2a2c32;
  z-index: 4 !important;
}

.robot-management-cont .robot-management-tab li:nth-child(1) {
  z-index: 3;
}

.robot-management-cont .robot-management-tab li:nth-child(2) {
  z-index: 2;
}

.robot-management-cont .robot-management-tab li:nth-child(3) {
  z-index: 1;
}

.cont-list-wrap {
  display: none;
  height: 100%;
  background: #fff;
  border-radius: 0 5px 5px 5px;
  position: relative;
  padding-bottom: 120px;
  box-sizing: border-box;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.cont-list-wrap.current {
  display: block;
}

.cont-list-wrap .cont-list {
  height: 100%;
  overflow-y: auto;
  padding-top: 35px;
  box-sizing: border-box;
}

.cont-list-wrap .cont-list table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cont-list-wrap .cont-list table thead th {
  font-size: 12px;
  color: #a9b1c6;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid #c1c6d5;
}

.cont-list-wrap .cont-list table thead th:first-child {
  padding-left: 40px;
}

.cont-list-wrap .cont-list table thead th:last-child {
  padding-right: 40px;
}

.cont-list-wrap .cont-list table tbody td {
  font-size: 16px;
  color: #606783;
  font-weight: 300;
  line-height: 30px;
  text-align: left;
  border-bottom: 1px solid #f1f3f7;
  padding: 10px 0;
}

.cont-list-wrap .cont-list table tbody tr:last-child td {
  border-bottom: 1px solid #c1c6d5;
}

.cont-list-wrap .cont-list table tbody td:first-child {
  padding-left: 40px;
}

.cont-list-wrap .cont-list table tbody td * {
  vertical-align: middle;
}

.cont-list-wrap .cont-list table tbody td:last-child {
  padding-right: 40px;
}

.cont-list-wrap .cont-list table tbody tr.select-tr td {
  background: #2a2c32;
  color: #fff;
  font-weight: 400;
}

.cont-list-wrap .cont-list table tbody tr:hover td {
  color: #2a2c32;
  font-weight: 400;
}

.cont-list-wrap .cont-list table tbody tr.select-tr:hover td {
  background: #2a2c32;
  color: #fff;
  font-weight: 400;
}

.cont-list-wrap .btn-edit {
  height: 30px;
  padding: 0 10px 0 30px;
  border: 1px solid #d7def0;
  border-radius: 3px;
  font-size: 13px;
  line-height: 30px;
  font-weight: 600;
  color: #606783;
  position: relative;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  background: rgba(255, 255, 255, 1);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(248, 248, 248, 1)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f8f8f8', GradientType=0);
}

.cont-list-wrap .btn-edit:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url(../images/icon-edit.png) top left no-repeat;
  position: absolute;
  left: 10px;
  top: 9px;
}

.cont-list-wrap .btn-cancel {
  height: 30px;
  padding: 0 10px 0 30px;
  border: 1px solid #d7def0;
  border-radius: 3px;
  font-size: 13px;
  line-height: 30px;
  font-weight: 600;
  color: #606783;
  position: relative;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  background: rgba(255, 255, 255, 1);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(248, 248, 248, 1)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f8f8f8', GradientType=0);
}

.cont-list-wrap .btn-cancel:before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  background: url(../images/icon-cancel.png) top left no-repeat;
  position: absolute;
  left: 9px;
  top: 9px;
}


.cont-list-wrap .form-rd {
  display: none;
}

.cont-list-wrap .form-rd+label {
  display: inline-block;
  padding-left: 20px;
  height: 18px;
  background: url(../images/radio-off.png) left no-repeat;
  vertical-align: middle;
}

.cont-list-wrap .form-rd:checked+label {
  background: url(../images/radio-on.png) left no-repeat;
}

.cont-list-wrap .form-rd.no-txt+label {
  font-size: 0;
  line-height: 0;
  margin-top: -3px;
}

.cont-list .table-select {
  display: inline-block;
  width: 120px;
}

.cont-list .table-select select {
  width: 100%;
  font-size: 14px;
  line-height: 28px;
  height: 30px;
  color: #2a2c32;
  background: transparent;
  box-sizing: border-box;
  background: url(../images/icon-select-arrow.png) calc(100% - 10px) no-repeat;
  border: 1px solid #d7def0;
  border-radius: 3px;
  padding-left: 10px;
}

.cont-list .table-select option {
  background: #f1f3f6;
}

.period-setting {
  position: absolute;
  top: -100px;
  right: 0;
}

.period-setting .period-tt {
  font-size: 11px;
  font-weight: 700;
  color: #a9b1c6;
}

.period-setting .setting-cont {
  font-size: 0;
  line-height: 0;
  margin-top: 10px;
}

.period-setting .setting-cont * {
  vertical-align: middle;
}

.period-setting .setting-cont .select-area {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 46px;
  margin-right: 10px;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  background: rgba(247, 248, 251, 1);
  background: -moz-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(247, 248, 251, 1)), color-stop(100%, rgba(239, 240, 243, 1)));
  background: -webkit-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: -o-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: -ms-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: linear-gradient(to bottom, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8fb', endColorstr='#eff0f3', GradientType=0);
  border: 1px solid #d7def0;
  border-radius: 3px;
}

.period-setting .setting-cont .select-area select {
  width: 140px;
  height: 46px;
  padding: 0 0 0 15px;
  line-height: 44px;
  box-sizing: border-box;
  font-size: 14px;
  color: #2a2c32;
  background: url(../images/period-select-icon.png) calc(100% - 10px) no-repeat;
}


.period-setting .setting-cont .btn-search:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-search.png) center no-repeat;
  position: absolute;
  top: 13px;
  left: 13px;
}

.period-setting .setting-cont .btn-down {
  display: inline-block;
  width: 46px;
  height: 46px;
  border: 1px solid #d7def0;
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
  position: relative;
  margin-left: 5px;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  background: rgba(247, 248, 251, 1);
  background: -moz-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(247, 248, 251, 1)), color-stop(100%, rgba(239, 240, 243, 1)));
  background: -webkit-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: -o-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: -ms-linear-gradient(top, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  background: linear-gradient(to bottom, rgba(247, 248, 251, 1) 0%, rgba(239, 240, 243, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8fb', endColorstr='#eff0f3', GradientType=0);
}

.period-setting .setting-cont .btn-down:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-down.png) center no-repeat;
  position: absolute;
  top: 13px;
  left: 13px;
}

.cont-list-wrap .cont-page {
  position: absolute;
  bottom: 60px;
  left: 30px;
  width: calc(100% - 30px);
}

.cont-list-wrap .cont-page .btn-delete:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-del.png) left top no-repeat;
  position: absolute;
  right: 16px;
  top: 21px;
}

.cont-list-wrap .cont-page .btn-manual {
  display: inline-block;
  height: 60px;
  box-sizing: border-box;
  border-radius: 3px;
  background: #ffcc00;
  line-height: 60px;
  font-size: 16px;
  font-weight: 700;
  color: #2a2c32;
  font-family: 'Gotham Rounded', sans-serif;
  text-align: left;
  padding: 0 110px 0 23px;
  position: relative;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.cont-list-wrap .cont-page .btn-manual:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-manual.png) left top no-repeat;
  position: absolute;
  right: 16px;
  top: 21px;
}

.cont-list-wrap .cont-page .btn-assign {
  display: inline-block;
  height: 60px;
  box-sizing: border-box;
  border-radius: 3px;
  background: #ffcc00;
  line-height: 60px;
  font-size: 16px;
  font-weight: 700;
  color: #2a2c32;
  font-family: 'Gotham Rounded', sans-serif;
  text-align: left;
  padding: 0 110px 0 23px;
  position: relative;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.cont-list-wrap .cont-page .btn-assign:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-assign.png) left top no-repeat;
  position: absolute;
  right: 16px;
  top: 21px;
}

.cont-list-wrap .cont-page .btn-comp {
  display: inline-block;
  height: 60px;
  box-sizing: border-box;
  border-radius: 3px;
  background: #ffcc00;
  line-height: 60px;
  font-size: 16px;
  font-weight: 700;
  color: #2a2c32;
  font-family: 'Gotham Rounded', sans-serif;
  text-align: left;
  padding: 0 110px 0 23px;
  position: relative;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.cont-list-wrap .cont-page .btn-comp:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-register.png) left top no-repeat;
  position: absolute;
  right: 16px;
  top: 21px;
}

.cont-list-wrap .cont-page .btn-down {
  display: inline-block;
  height: 60px;
  box-sizing: border-box;
  border-radius: 3px;
  background: #ffcc00;
  line-height: 60px;
  font-size: 16px;
  font-weight: 700;
  color: #2a2c32;
  font-family: 'Gotham Rounded', sans-serif;
  text-align: left;
  padding: 0 110px 0 23px;
  position: relative;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.cont-list-wrap .cont-page .btn-down:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-down2.png) left top no-repeat;
  position: absolute;
  right: 16px;
  top: 21px;
}

.cont-list-wrap .cont-page .btn-right-area {
  position: absolute;
  right: 40px;
  top: 50px;
}

.cont-list-wrap .cont-page .btn-right-area button+button {
  margin-left: 15px;
}


.filebox {
  position: relative;
}

.filebox .upload-hidden {
  display: none;
}

.filebox .pop-ip {
  padding-right: 115px;
}

.filebox .btn-file {
  position: absolute;
  top: 0;
  right: 0;
  height: 30px;
  padding: 0 10px 0 30px;
  border: 1px solid #d7def0;
  border-radius: 3px;
  font-size: 12px;
  line-height: 30px;
  font-weight: 600;
  color: #2a2c32;
  display: block;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  background: rgba(255, 255, 255, 1);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(248, 248, 248, 1)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f8f8f8', GradientType=0);
}

.filebox .btn-file:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url(../images/icon-find.png) top left no-repeat;
  position: absolute;
  left: 10px;
  top: 10px;
}


.job-cont {
  overflow: hidden;
  box-sizing: border-box;
  padding: 50px 0 90px;
}

.job-cont .section {
  height: 100%;
  padding: 100px 0 0;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
}

.job-cont .title-sec {
  font-size: 31px;
  font-weight: 700;
  color: #2a2c32;
  padding: 35px 0 0;
  position: absolute;
  left: 0;
  top: 0;
}

.job-cont .title-sec.tt-job {
  background: url(../images/tt-job-icon.png) left top no-repeat;
}

.job-cont .title-sec.tt-log {
  background: url(../images/tt-log-icon.png) left top no-repeat;
}

.cont-list-wrap .form-chk {
  display: none;
}

.cont-list-wrap .form-chk+label {
  display: inline-block;
  padding-left: 20px;
  height: 19px;
  background: url(../images/chk-off.png) left no-repeat;
  vertical-align: middle;
}

.cont-list-wrap .form-chk:checked+label {
  background: url(../images/chk-on.png) left no-repeat;
}

.cont-list-wrap .form-chk.no-txt+label {
  font-size: 0;
  line-height: 0;
  margin-top: -3px;
}

.user-management-cont {
  height: 100%;
  padding: 150px 0 90px;
  position: relative;
  box-sizing: border-box;
}

.user-management-cont .infomation-sec {
  border-bottom: 1px solid #e1e5ed;
  padding: 25px 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.user-management-cont .infomation-sec dl {
  float: left;
  width: 15%;
  box-sizing: border-box;
  border-left: 1px solid #e1e5ed;
  padding: 3px 20px;
}

.user-management-cont .infomation-sec dl:first-child {
  border-left: 0;
  padding: 0;
}

.user-management-cont .infomation-sec dl dt {
  font-size: 11px;
  font-weight: 500;
  color: #a9b1c6;
  line-height: 13px;
  text-transform: uppercase;
}

.user-management-cont .infomation-sec dl dd {
  font-size: 14px;
  font-weight: 500;
  color: #2a2c32;
  line-height: 16px;
  margin-top: 10px;
}

.user-management-cont>.section {
  height: 100%;
}


.map-editor-cont {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.map-editor-cont .drawing-area {
  background: url(../images/drawing-grid.png) top left repeat;
  position: relative;
  height: 100%;
}

.map-editor-cont .drawing-area .drawing-magnification {
  position: absolute;
  left: 100px;
  bottom: 30px;
  width: 40px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  color: #2a2c32;
}

.map-editor-cont .drawing-area .drawing-magnification:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: 4px solid #2a2c32;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  margin: 0 auto;
}

.map-editor-cont .drawing-area .drawing-magnification:after {
  content: "";
  display: block;
  width: 40px;
  height: 7px;
  border: 1px solid #2a2c32;
  border-top: 0;
  box-sizing: border-box;
  margin-top: -7px;
}

.map-editor-cont .drawing-area .drawing-logo {
  position: absolute;
  right: 80px;
  bottom: 30px;
  font-size: 0;
  line-height: 0;
}

.map-editor-cont .drawing-area .reload-control {
  position: absolute;
  top: 60px;
  right: 40px;
  width: 320px;
  height: calc(100% - 140px);
  padding-top: 95px;
  box-sizing: border-box;
  display: none;
}

.map-editor-cont .reload-control .zoom-control {
  position: absolute;
  top: 0;
  left: -325px;
}

.map-editor-cont .reload-control .reload-btn-area {
  *zoom: 1;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
}

.map-editor-cont .reload-control .reload-btn-area:after {
  content: "";
  display: block;
  clear: both;
}

.map-editor-cont .reload-control .reload-btn-area .btn-reload {
  display: block;
  float: left;
  width: calc(50% - 10px);
  height: 60px;
  background: #ffcc00;
  border-radius: 3px;
  text-align: left;
  line-height: 60px;
  color: #2a2c32;
  box-sizing: border-box;
  position: relative;
  font-size: 16px;
  padding-left: 23px;
  font-weight: bold;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.map-editor-cont .reload-control .reload-btn-area .btn-reload+.btn-reload {
  margin-left: 10px;
}

.map-editor-cont .reload-control .reload-btn-area .btn-reload.btn-down:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-down2.png) left top no-repeat;
  position: absolute;
  right: 16px;
  top: 21px;
}

.map-editor-cont .reload-control .reload-btn-area .btn-reload.btn-load:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-up2.png) left top no-repeat;
  position: absolute;
  right: 16px;
  top: 21px;
}

.map-editor-cont .reload-control .reload-create {
  height: 100%;
}

.map-editor-cont .reload-control .reload-create .reload-tab ul {
  *zoom: 1;
  padding-left: 22px;
}

.map-editor-cont .reload-control .reload-create .reload-tab ul:after {
  content: "";
  display: block;
  clear: both;
}

.map-editor-cont .reload-control .reload-create .reload-tab li {
  float: left;
  width: 150px;
  height: 50px;
  background: url(../images/tab2-off.png) left top no-repeat;
  cursor: pointer;
  font-size: 17px;
  line-height: 50px;
  padding-left: 19px;
  color: #fff;
  font-weight: 700;
  margin-left: -22px;
  box-sizing: border-box;
  position: relative;
}

.map-editor-cont .reload-control .reload-create .reload-tab li.current {
  background: url(../images/tab2-on.png) left top no-repeat;
  color: #2a2c32;
  z-index: 3 !important;
}

.map-editor-cont .reload-control .reload-create .reload-tab li:nth-child(1) {
  z-index: 2;
}

.map-editor-cont .reload-control .reload-create .reload-tab li:nth-child(2) {
  z-index: 1;
}

.map-editor-cont .reload-control .reload-create .reload-cont {
  display: none;
  height: calc(100% - 50px);
}

.map-editor-cont .reload-control .reload-create .reload-cont.current {
  display: block;
}

.map-editor-cont .reload-control .reload-create .reload-inner-btn {
  background: #fff;
  border-radius: 0 3px 3px 3px;
  height: 50px;
  position: relative;
  padding: 0 20px;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.map-editor-cont .reload-control .reload-inner-btn .btn-node-create {
  display: block;
  width: calc(50% - 25px);
  height: 50px;
  background: #2a2c32;
  border-radius: 3px;
  text-align: left;
  line-height: 50px;
  color: #fff;
  box-sizing: border-box;
  position: absolute;
  font-size: 14px;
  padding-left: 23px;
  font-weight: bold;
  top: 15px;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.map-editor-cont .reload-control .reload-inner-btn .btn-link-create {
  display: block;
  width: calc(50% - 25px);
  height: 50px;
  background: #ffcc00;
  border-radius: 3px;
  text-align: left;
  line-height: 50px;
  color: #2a2c32;
  box-sizing: border-box;
  position: absolute;
  font-size: 14px;
  padding-left: 23px;
  font-weight: bold;
  top: 15px;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.map-editor-cont .reload-control .reload-inner-btn button.icon-create {
  left: 20px;
}

.map-editor-cont .reload-control .reload-inner-btn button.icon-select {
  right: 20px;
}

.map-editor-cont .reload-control .reload-inner-btn button:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
}

.map-editor-cont .reload-control .reload-inner-btn button.btn-node-create.icon-create:after {
  background: url(../images/icon-create.png) top left no-repeat;
}

.map-editor-cont .reload-control .reload-inner-btn button.btn-node-create.icon-select:after {
  background: url(../images/icon-select.png) top left no-repeat;
}

.map-editor-cont .reload-control .reload-inner-btn button.btn-link-create.icon-create:after {
  background: url(../images/icon-create2.png) top left no-repeat;
}

.map-editor-cont .reload-control .reload-inner-btn button.btn-link-create.icon-select:after {
  background: url(../images/icon-select2.png) top left no-repeat;
}

.map-editor-cont .reload-control .reload-info {
  margin-top: 35px;
  background: #fff;
  border-radius: 3px;
  padding: 35px 30px 60px;
  box-sizing: border-box;
  height: calc(100% - 85px);
  position: relative;
}

.map-editor-cont .reload-control .reload-info .reload-title {
  font-size: 17px;
  font-weight: 700;
  color: #2a2c32;
  height: 45px;
}

.map-editor-cont .reload-info dl {
  border-top: 1px solid #e5e5e5;
  padding: 10px 0 10px;
}

.map-editor-cont .reload-info dl.btm-bd {
  border-bottom: 1px solid #e5e5e5;
}

.map-editor-cont .reload-info dl dt {
  font-size: 11px;
  font-weight: 600;
  color: #a9b1c6;
  margin-bottom: 5px;
}

.map-editor-cont .reload-info dl dd {
  position: relative;
}

.map-editor-cont .reload-info .reload-ip {
  width: 100%;
  font-size: 14px;
  line-height: 30px;
  height: 30px;
  color: #2a2c32;
  background: transparent;
  box-sizing: border-box;
}

.map-editor-cont .reload-info .reload-ip::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #2a2c32;
}

.map-editor-cont .reload-info .reload-ip::-moz-placeholder {
  /* Firefox 19+ */
  color: #2a2c32;
}

.map-editor-cont .reload-info .reload-ip:-ms-input-placeholder {
  /* IE 10+ */
  color: #2a2c32;
}

.map-editor-cont .reload-info .reload-ip:-moz-placeholder {
  /* Firefox 18- */
  color: #2a2c32;
}

.map-editor-cont .reload-info .reload-select {
  width: 100%;
  font-size: 14px;
  line-height: 30px;
  height: 30px;
  color: #2a2c32;
  background: transparent;
  box-sizing: border-box;
  background: url(../images/icon-select-arrow.png) calc(100% - 10px) no-repeat;
}

.map-editor-cont .reload-info .reload-select option {
  background: #f1f3f6;
}

.map-editor-cont .reload-control .reload-info .btn-map-del {
  position: absolute;
  bottom: 28px;
  right: 30px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #606783;
  display: inline-block;
  padding-left: 22px;
  background: url(../images/icon-del2.png) left no-repeat;
}


.map-editor-cont .drawing-area .firstload-control {
  position: absolute;
  bottom: 80px;
  right: 40px;
  height: 60px;
  width: 320px;
}

.map-editor-cont .drawing-area .firstload-control .btn-load-map {
  display: block;
  width: 100%;
  height: 60px;
  background: #ffcc00;
  border-radius: 3px;
  text-align: left;
  line-height: 60px;
  color: #2a2c32;
  box-sizing: border-box;
  font-size: 14px;
  padding-left: 23px;
  font-weight: bold;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.map-editor-cont .drawing-area .firstload-control .btn-load-map:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/icon-up2.png) left top no-repeat;
  position: absolute;
  right: 16px;
  top: 21px;
}

#dataName {
  box-sizing: border-box;
  border-top: 1px solid #ddd;
  width: 100%;
  height: calc(100% - 137px);
}

.bb-ygrid-line line {
  stroke: #ddd;
}

/*SETTING*/
.set_tab_cont a {
  text-decoration: none;
  color: #A8A8A8;
}

.set_tab_cont {
  letter-spacing: -0.5px;
  height: 100%;
}

.set_tab_cont .set_tabBOX {
  position: relative;
  height: 100%;
}

.set_tab_cont .set_tabBOX .set_tab_TIT {
  overflow: hidden;
  padding: 10px 0 0 0;
}

.set_tab_cont .set_tabBOX .set_tab_TIT .set_liBOX {
  float: left;
  margin-right: 25px;
}

.set_tab_cont .set_tabBOX .set_tab_TIT .set_liBOX.is_on .set_btn {
  font-weight: 800;
  color: #005aff;
  border-bottom: 5px solid #005aff;
  display: inline-block;
  padding-bottom: 5px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.set_tab_cont .set_tabBOX .set_tab_TIT .set_btn {
  font-size: 17px;
}

.set_tab_cont .set_tabBOX .cont_area {
  height: calc(100% - 44px);
}

.set_tab_cont .set_tabBOX .cont_area .hd-box {
  margin-bottom: 10px;
}

.set_tab_cont .set_tabBOX .cont_area .cont {
  display: none;
  width: 100%;
  height: 100%;
}

/*//SETTING*/

@media screen and (min-width:1199px) {
  #mob {
    display: none;
  }
}

@media screen and (max-width:1280px) {
  .contents .card-body1 {
    width: 100%;
    height: unset;
    /*min-height:175px; */
    display: flex;
    background: #fff;
    border-radius: 25px;
    -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.1);
  }

  .contents .card-body2 {
    width: 100%;
    height: unset;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .contents .card-body3 {
    height: unset;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .contents .situation_box1 .cont-box {
    height: unset;
    height: 75%;
    background: #ebf0f6;
    padding: 15px;
    margin: 10px 12px 0 0;
    border-radius: 10px;
    width: 30%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }

  .sub-charginST {
    width: 100%;
    background: #f2f6f9;
    padding: 12px 30px;
    border-radius: 0 0 25px 25px;
    height: unset;
  }

  .layer-chrginST {
    background: unset;
    padding: unset;
    border-radius: unset;
    height: unset;
  }

  .layer-chrginST .ul-tablecont {
    flex-wrap: wrap;
  }

  .layer-chrginST .ul-tablecont li {
    width: 100%;
  }

  .layer-chrginST .chargin-table th {
    background: #F2F6F9;
    width: 20%;
  }

  .layer-chrginST .chargin-table .td-wd {
    width: 30%;
  }

  .contents .main-Card-body2 {
    width: 65%;
  }

  .contents .main-Card-body3 {
    width: calc(35% - 30px)
  }

  .contents .situation_box4 .live-push-box .tit {
    width: 50%;
  }
}

@media screen and (min-width:1399px) {
  #login-mob {
    display: none;
  }
}

@media screen and (max-width:1400px) {
  #login-pc {
    display: none;
  }

  #login-mob.m-login_wrap {
    background: url(../images/mob/m-login-bg.png) no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
  }

  #login-mob.m-login_wrap .body_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-between;
    height: 100%;
    width: calc(100% - 50px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    padding: 15% 0 25px 0;
    box-sizing: border-box;
  }

  #login-mob.m-login_wrap .body_wrap .tit {
    text-align: center;
    width: 100%
  }

  #login-mob.m-login_wrap .body_wrap .tit img {
    width: 200px;
    height: auto;
  }

  #login-mob.m-login_wrap .body_wrap .tit p {
    font-size: 37px;
    margin-top: 25px;
    line-height: 41px;
    font-weight: 800;
    text-shadow: 0px 0px 7px rgb(255 255 255);
  }

  #login-mob.m-login_wrap .body_wrap .tit p span {
    font-size: 34px;
  }

  #login-mob.m-login_wrap .tit h1 {
    font-size: 37px;
    margin-top: 25px;
    color: white;
  }

  #login-mob.m-login_wrap .body_wrap .container {
    width: 100%;
  }

  /* #login-mob.m-login_wrap .container .login-input-title {
    display: block;
    margin-bottom: 34px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }

  #login-mob.m-login_wrap .container .login-input-title p {
    color: #08142b;
    font-size: 37px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
  } */

  .login-chk-area .login-chk+label {
    color: #fff;
    filter: drop-shadow(1px 0px 2px black);
    background: url(../images/Wlogin-chk-off.png) left 0 no-repeat;
  }

  .login-chk-area .login-chk:checked+label {
    background: url(../images/Wlogin-chk-on.png) left 0 no-repeat;
  }

  #login-mob.m-login_wrap .body_wrap .login-id {
    font-family: 'Apple SD Gothic Neo', 'Barlow', 'Noto Sans KR', sans-serif;
    font-size: 15px;
    width: 100%;
    height: 55px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 20px 40px;
    background: rgb(255, 255, 255) url(../images/login-icon1.png) 15px center no-repeat;
    background-position: 15px 15px;
  }

  #login-mob.m-login_wrap .body_wrap .login-pw {
    font-family: 'Apple SD Gothic Neo', 'Barlow', 'Noto Sans KR', sans-serif;
    font-size: 15px;
    width: 100%;
    height: 55px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 20px 40px;
    background: rgb(255, 255, 255) url(../images/login-icon2.png) 15px center no-repeat;
    background-position: 15px 15px;
  }

  #login-mob.m-login_wrap .body_wrap .copy {
    font-size: 13px;
    color: #fff;
    text-align: center;
  }

  #login-mob.m-login_wrap .body_wrap .login-sm-txt {
    font-size: 13px;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
  }

  #login-mob.m-login_wrap .body_wrap .login-sm-txt span:after {
    content: '|';
    font-weight: 100;
    margin: 0 15px;
    color: #fff;
  }

  #login-mob.m-login_wrap .body_wrap .login-sm-txt span:last-child::after {
    content: unset;
  }

  .contents .situation_box3 .cont-box.board-list .lati-txt {
    flex-wrap: wrap;
  }

  .contents .situation_box3 .cont-box.board-list .lati-txt div:nth-child(1) {
    width: 100%;
    font-weight: 700;
  }

  .contents .situation_box3 .cont-box.board-list .lati-txt div:nth-child(2) {
    width: 100%;
    text-align: unset;
  }

  .contents .situation_box2 .psh-cont {
    width: 33%;
  }
}

@media screen and (max-width:1200px) {
  html {
    height: unset;
  }

  #pc {
    display: none;
  }

  #left-menu {
    display: none;
  }

  /* html {height:unset;} */

  /*--head--*/
  .header {
    border-bottom: 1px solid #ddd;
    height: 59px;
    z-index: 999;
    position: relative;
  }

  .header .side-icon {
    cursor: pointer;
    background: url(../images/mob/menu_icon.png) no-repeat;
    width: 17px;
    height: 18px;
    background-size: 100%;
  }

  .header .push-icon {
    position: relative;
    cursor: pointer;
    background: url(../images/mob/push_icon.png) no-repeat;
    width: 17px;
    height: 22px;
    background-position: right;
    background-size: 100%;
  }

  .header .push-icon.on:after {
    position: absolute;
    top: 2px;
    right: -2px;
    content: '';
    background: #E60012;
    width: 7px;
    height: 7px;
    border-radius: 50px;
    display: inline-block;
  }

  .header .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  /* .header .header-container li {width:20%;} */
  .header .header-container li:nth-child(2) {
    width: calc(100% - 20%);
  }

  .header .header-container .logo {
    text-align: center;
    padding: 10px 0;
    font-size: 15px;
  }

  .header .header-container .logo img {
    /* width:85%;max-width:150px; */
  }

  .sidenav {
    display: flex;
    flex-direction: column;
    height: calc(100% - 85px);
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    /* transition:0.5s; */
    padding: 60px 0 25px 0;
  }

  .sidenav>.menu-list {
    flex: 1 0 auto;
  }

  .sidenav>.footer {
    flex: 0 0 auto;
  }

  .sidenav .menu-list-hd-cont {
    width: 100%;
  }

  .sidenav .closebtn {
    position: absolute;
    top: 30px;
    right: 30px;
    background: url(../images/mob/menu-close.png) no-repeat;
    width: 18px;
    height: 18px;
    background-size: 100%;
  }

  #mySidenav .menu-list-hd-cont ul {
    display: flex;
    justify-content: space-around;
    padding: 0 15px 15px 15px;
    margin: 15px 30px 25px 30px;
    border-bottom: 1px solid #ddd;
  }

  #mySidenav .menu-list-hd-cont li {
    text-align: center;
    line-height: 30px;
    color: #999;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: -0.5px;
  }

  #mySidenav .menu-list-hd-cont li img {
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 15px;
    display: block;
    width: 37%;
    margin: 0 auto;
  }

  #mySidenav .menu-list {
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    padding: 0 30px;
    box-sizing: border-box;
  }

  #mySidenav .menu-list li {
    margin-bottom: 15px;
  }

  #mySidenav .menu-list li:last-child {
    margin-bottom: 0;
  }

  #mySidenav .menu-list a {
    width: 100%;
    display: block;
    position: relative;
    padding: 15px 0 15px 40px;
    box-sizing: border-box;
    color: #a8a8a8;
  }

  #mySidenav .menu-list a:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 15px;
    top: 16px;
    background-repeat: no-repeat;
    background-image: url(../images/lnb-icon.png);
  }

  #mySidenav .menu-list a:after {
    content: "";
    display: block;
    width: 15px;
    height: 26px;
    position: absolute;
    right: 15px;
    top: 19px;
    background-repeat: no-repeat;
    background-image: url(../images/mob/menu-arrow.png);
    background-size: 65%;
  }

  #mySidenav .menu-list a.active-nav {
    color: #2563EB;
    background: #EFF6FF;
    border-radius: 10px;
    letter-spacing: -1px
  }

  #mySidenav .menu-list a:hover {
    color: #a8a8a8;
    background: #f4f4f4;
    border-radius: 10px;
  }

  #mySidenav .menu-list li a:hover:after {
    content: "";
    display: block;
    width: 15px;
    height: 26px;
    position: absolute;
    right: 15px;
    top: 19px;
    background-repeat: no-repeat;
    background-image: url(../images/mob/menu-arrow_on.png);
    background-size: 65%;
  }

  #mySidenav .menu-list li:nth-child(1) a:hover:before,
  #mySidenav .menu-list li:nth-child(1) a:before {
    background-position: 0 0;
  }

  #mySidenav .menu-list li:nth-child(2) a:hover:before,
  #mySidenav .menu-list li:nth-child(2) a:before {
    background-position: 0 -268px;
  }

  #mySidenav .menu-list li:nth-child(3) a:hover:before,
  #mySidenav .menu-list li:nth-child(3) a:before {
    background-position: 0 -470px;
  }

  #mySidenav .menu-list li:nth-child(4) a:hover:before,
  #mySidenav .menu-list li:nth-child(4) a:before {
    background-position: 0 -334px;
  }

  /* #mySidenav .menu-list li:nth-child(5) a:before {background-position:0 -280px;} */
  #mySidenav .menu-list li:nth-child(5) a:hover:before,
  #mySidenav .menu-list li:nth-child(5) a:before {
    background-position: 0 -536px;
  }

  #mySidenav .menu-list li:nth-child(6) a:hover:before,
  #mySidenav .menu-list li:nth-child(6) a:before {
    background-position: 0 -200px;
  }

  #mySidenav .menu-list li:nth-child(7) a:hover:before,
  #mySidenav .menu-list li:nth-child(7) a:before {
    background-position: 0 -67px;
  }

  #mySidenav .menu-list li:nth-child(8) a:hover:before,
  #mySidenav .menu-list li:nth-child(8) a:before {
    background-position: 0 -402px;
  }

  #mySidenav .menu-list li:nth-child(1) a.active-nav::before {
    background-position: -20px 0;
  }

  #mySidenav .menu-list li:nth-child(2) a.active-nav:before {
    background-position: -20px -268px;
  }

  #mySidenav .menu-list li:nth-child(3) a.active-nav:before {
    background-position: -20px -470px;
  }

  #mySidenav .menu-list li:nth-child(4) a.active-nav:before {
    background-position: -20px -334px;
  }

  /* #mySidenav .menu-list li:nth-child(5) a.active-nav:before {background-position:-20px -280px;} */
  #mySidenav .menu-list li:nth-child(5) a.active-nav:before {
    background-position: -20px -536px;
  }

  #mySidenav .menu-list li:nth-child(6) a.active-nav:before {
    background-position: -20px -200px;
  }

  #mySidenav .menu-list li:nth-child(7) a.active-nav:before {
    background-position: -20px -67px;
  }

  #mySidenav .menu-list li:nth-child(8) a.active-nav:before {
    background-position: -20px -402px;
  }

  #mySidenav .menu-list li a.active-nav:after {
    content: "";
    display: block;
    width: 15px;
    height: 26px;
    position: absolute;
    right: 15px;
    top: 19px;
    background-repeat: no-repeat;
    background-image: url(../images/mob/menu-arrow_on.png);
    background-size: 65%;
  }

  /*--//head--*/

  /*--login--*/
  #join {
    height: unset;
  }

  .findlayer_wrap {
    width: 90%;
  }

  .join_wrap {
    width: 100%;
    padding: 30px 0;
  }

  .join_wrap.mob-H {
    position: unset;
    transform: unset;
  }

  .join_wrap .pro-number {
    width: 100%;
  }

  .join_wrap .join-content .in-contbox1 {
    flex-wrap: wrap;
  }

  .join_wrap .join-content .in-contbox1 li {
    width: 100%;
  }

  .join_wrap .join-content .in-contbox1 li:nth-of-type(1) {
    margin: 0 0 15px 0;
  }

  .join_wrap .join-content .input-contbox1 input {
    width: 100%;
  }

  .join_wrap .join-tit p {
    font-size: 25px;
  }

  .join_wrap .join-content h4 {
    font-size: 20px;
  }

  .join_wrap .pro-number .number-txtbox p {
    font-size: 17px;
  }

  .join_wrap .pro-number span {
    font-size: 13px;
  }

  .join_wrap .join-content {
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .join_wrap .join-content .tit-form {
    flex-wrap: wrap;
  }

  .join_wrap .join-content .tit-form p {
    margin-bottom: -5px;
    width: 100%;
  }

  .join_wrap .join-content .tit-form div {
    width: 100%;
    text-align: right;
  }

  .join_wrap .join-content label>input[type="checkbox"]+* {
    font-size: 12px;
  }

  .join_wrap .join-content label>input[type="checkbox"]+*::before {
    vertical-align: -6px;
  }

  .join_wrap .join-content .in-contbox2 .join-inputBOX2 {
    width: 100%;
  }

  .join_wrap .join-content .join-inputBOX3 .station-select span {
    margin-bottom: 5px;
    display: block;
  }

  .join_wrap .join-content .join-inputBOX3 .station-select span:last-child {
    margin-bottom: 0;
  }

  .join_wrap .join-content .tit-form3 {
    flex-wrap: wrap;
  }

  .join_wrap .join-content .tit-form3 .mgr20:nth-of-type(2) {
    margin-right: 0 !important;
  }

  .join_wrap .join-content .join-inputBOX4 {
    flex-wrap: wrap;
    width: 100%;
  }

  .join_wrap .join-content .join-inputBOX4 .tit {
    width: 100%;
    margin: 25px 0 10px;
  }

  .join_wrap .join-content .join-inputBOX4 .input-contbox1 {
    width: 100%;
  }

  .join3-hd .txt1 {
    font-size: 27px;
    line-height: 31px;
  }

  .join3-hd .txt2 {
    border-radius: 4px;
    line-height: 15px;
  }

  .join-table {
    width: 100%;
  }

  .join-table .tr .th {
    font-size: 12px;
    width: 20%;
  }

  .join-table .tr .td {
    width: 80%;
    font-size: 13px;
  }

  .join_wrap .join-content.pd5030 {
    padding: 20px 30px !important;
  }


  .loginsecurity_wrap {
    width: 90%;
  }

  .loginsecurity_wrap .security-hd {
    font-size: 25px;
  }

  .loginsecurity_wrap .security-hd img {
    max-width: 50px;
  }

  .loginsecurity_wrap h4 {
    font-size: 20px;
  }

  .loginsecurity_wrap .security-input-cont .secu-input {
    font-size: 15px;
  }

  /*--page1--*/
  #wrap {
    padding-left: 0;
    height: calc(100% - 60px);
  }

  .tit1 {
    /* padding: 15px 0px 5px 30px; */
    padding: 10px 0 0 0;
    font-size: 24px;
    letter-spacing: -1px;
  }

  #mob.btn-poptab3-2 {
    letter-spacing: -1.2px;
  }

  #container.sub-container {
    overflow: auto;
  }

  #container.sub-container.board-view {
    overflow: unset;
    position: absolute;
    width: 100%;
  }

  .contents {
    padding: 0;
    margin-top: 0;
    overflow-y: unset;
    height: 100%;
  }

  .contents .container-box {
    flex-wrap: wrap;
  }

  .contents .main-Card-body2 {
    width: 100%;
  }

  .contents .main-Card-body3 {
    width: 100%;
  }

  .contents .card-body1 {
    flex-wrap: wrap;
    border-radius: 0;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
  }

  .contents .situation_box1 {
    width: 100%;
  }

  .contents .situation_box1 .cont-box {
    text-align: center;
    justify-content: center;
  }

  .contents .y-line {
    width: 100%;
    border-bottom: 1px solid #ddd;
    margin: 0 30px;
    padding: 0;
  }

  .contents .y-line:before {
    content: unset;
  }

  .contents .situation_box1 .cont-box .t-info {
    letter-spacing: -1px;
  }

  .contents .situation_box2 {
    width: 100%;
  }

  .contents .situation_box2 .psh-cont {
    width: 30%;
  }

  .contents .situation_box2 .psh-cont .iconbox {
    width: 27%;
  }

  .contents .situation_box2 .psh-cont .iconbox img {
    width: 100%;
  }

  .contents .situation_box2 .txtbox {
    width: 50%;
  }

  .contents .situation_box2 .cont-box {
    justify-content: space-between;
  }

  .contents .situation_box2 .psh-cont:nth-of-type(n + 3) {
    margin-top: 12px;
  }

  .contents .card-body2 {
    flex-wrap: wrap;
  }

  .contents .situation_box3 {
    width: 100%;
    border-radius: 0;
    padding: 20px 0;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
  }

  .contents .situation_box3 h3 {
    border-bottom: 1px solid #ddd;
    padding: 0 30px 10px;
    box-sizing: border-box;
  }

  .board-bt {
    right: 30px;
    bottom: 20px;
  }

  .contents .situation_box3 .cont-box {
    padding: 0 30px;
    margin-top: 5px;
  }

  .contents .situation_box3 .cont-box.board-list .lati-txt {
    flex-wrap: wrap;
    line-height: 20px;
    border-bottom: 1px solid #ddd;
    height: unset;
    padding: 10px 0;
  }

  .contents .situation_box3 .cont-box.board-list .lati-txt .sub-txt {
    font-size: 13px;
    width: 100%;
  }

  .contents .situation_box3 .cont-box.board-list .lati-txt div {
    width: 100%;
  }

  .contents .situation_box3 .cont-box.board-list .lati-txt div:nth-child(1) {
    font-weight: 700;
    width: 100%;
  }

  .contents .situation_box3 h3 {
    padding: 0 0 10px 30px;
  }

  .contents .situation_box3 .servertimebox {
    border-bottom: 1px solid #ddd;
    width: 100%;
    align-items: center;
  }

  .contents .situation_box3 .servertimebox p {
    padding-right: 30px;
    font-size: 13px;
  }


  .contents .situation_box4 {
    width: 100%;
    padding: 20px 0;
    border-radius: 0;
    margin-top: 20px;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
  }

  .contents .situation_box4 .cont-box {
    padding: 0 30px;
    height: unset;
    margin-top: 20px;
  }

  .contents .situation_box4 h3 {
    border-bottom: 1px solid #ddd;
    padding: 0 30px 10px;
    box-sizing: border-box;
  }

  .contents .situation_box4 .live-push-box {
    width: 100%;
  }

  .contents .situation_box4 .live-push-box .tit {
    width: 65%;
  }

  .contents .situation_box4 .live-push-box .txt-date {
    font-size: 13px;
  }

  .contents .situation_box4 .live-push-box li:last-child {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  /* .contents .situation_box4 .live-push-box li:last-child {width:30%;font-size:13px;text-align:right;} */
  .contents .situation_box4 .cont-box .live-push-box:nth-last-child(-n+2) {
    margin-bottom: 10px;
  }

  .contents .situation_box4 .cont-box .live-push-box:nth-last-child(-n+1) {
    margin-bottom: 0;
  }

  .state-box {
    padding: 0 30px;
    height: unset;
  }

  .contents .card-body3 {
    width: 100%;
    flex-wrap: wrap;
  }

  .contents .situation_box4 .in-contbox {
    padding: 20px 0;
    height: unset;
  }

  .chargingST-box {
    width: 100%;
  }

  .chargingST-box .chST-tit {
    font-size: 15px;
  }

  .chargingST-box .chST-sta1 {
    line-height: 21px;
    width: 50px;
    margin-right: 3px;
    font-size: 12px;
  }

  .chargingST-box .chST-sta2 {
    line-height: 21px;
    width: 50px;
    font-size: 12px;
  }

  .chargingST-box:nth-last-child(-n+2) {
    margin-bottom: 7px;
  }

  .chargingST-box:nth-last-child(-n+1) {
    margin-bottom: 0;
  }

  .sub-charginST {
    height: unset;
    border-radius: 0;
    padding: 20px 30px;
  }

  .sub-charginST .ul-tablecont {
    flex-wrap: wrap;
  }

  .sub-charginST .ul-tablecont li {
    width: 100%;
    margin-bottom: 15px;
  }

  .sub-charginST .ul-tablecont li:last-child {
    margin-bottom: 0;
  }

  .sub-charginST .chargin-table th {
    padding: 7px 5px;
    width: 22%;
    font-size: 12px;
  }

  .sub-charginST .chargin-table td {
    font-size: 13px;
    padding: 1.3% 5px;
  }

  .sub-charginST .chargin-table .td-wd {
    width: 30%;
    word-break: keep-all;
  }

  .sub-charginST .ul-tablecont .cod-contbox li {
    margin-bottom: 0;
    width: 33%;
  }

  .sub-charginST .ul-tablecont .cod-contbox li img {
    width: 60%;
  }

  .layer-chrginST {
    padding: 0;
  }

  .hd-box {
    align-items: center;
    width: 100%;
    padding: 4px;
    /* padding-right: 30px; */
    box-sizing: border-box;
    /* flex-wrap:wrap; */
  }

  .mypage_wrap {
    width: 90%;
    height: 90%;
    overflow-y: auto;
  }

  .mypage_wrap .in-contbox1 .my-inputBOX {
    width: 100%;
    margin-bottom: 15px;
  }

  .mypage_wrap .in-contbox1 .my-inputBOX:nth-child(n+4) {
    margin-top: 0;
  }

  .mypage_wrap .in-contbox1 .my-inputBOX:nth-last-of-type(1) {
    margin-bottom: 0;
  }

  .mypage_wrap .my-pushbox .ul-box {
    flex-wrap: wrap;
  }

  .mypage_wrap .my-pushbox li {
    margin-right: 0;
    width: 50%;
  }

  .mypage_wrap .my-pushbox li:nth-child(n+3) {
    margin-top: 10px;
  }

  .live-video-pop {
    position: fixed !important;
  }

  .live-video-pop .pop-cont {
    height: calc(100% - 61px);
    overflow-y: auto;
  }

  .live-video-pop .live-video {
    height: 45%;
  }

  .live-video-pop .sub-info-table2 {
    flex-wrap: wrap;
  }

  .live-video-pop .chargin-table {
    width: 100%;
  }

  .live-video-pop .chargin-table:nth-of-type(1) {
    margin-bottom: 10px;
  }

  .live-video-pop .chargin-table th {
    padding-left: 0;
    width: 25%;
  }

  .board-cont {
    border-radius: 0;
    /* height:unset; */
    /* height: calc(100% - 51px); */
    height: 100%;
  }

  .board-cont .option_box {
    flex-wrap: wrap;
    height: unset !important;
  }

  .board-cont .option_box .sub-optionbox2 {
    flex-wrap: wrap;
    width: 100%;
  }

  .board-cont .option_box .sub-optionbox2 .charging-option {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-right: 0;
  }

  .board-cont .option_tit {
    width: 100%;
    margin-bottom: 5px;
  }

  .board-cont .option_box .sub-optionbox2 .event-option {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .date-area {
    width: 45%;
  }

  .date-area .period-date {
    width: 100%;
  }

  .board-cont .option_box .sub-optionbox2 .selectbox {
    width: 100%;
    margin-right: 0;
  }

  .board-cont .option_box .sub-optionbox2 .selectbox {
    margin-bottom: 10px;
  }

  .board-cont .option_box .sub-optionbox2 .selectbox:last-of-type {
    margin-bottom: 0;
  }

  .board-cont .mob-eventSET-BOX {
    padding: 0 30px;
    box-sizing: border-box;
  }

  .board-cont .mob-eventSET-BOX .mob-eventSET-board {
    overflow-x: auto;
    width: 100%;
  }

  .board-cont .mob-eventSET-board .board-table {
    min-width: 720px;
    overflow-x: auto;
    height: unset;
  }

  .board-cont .mob-pushSET-BOX {
    padding: 0 30px;
    box-sizing: border-box;
  }

  .board-cont .mob-pushSET-BOX .mob-pushSET-board {
    overflow-x: auto;
    width: 100%;
  }

  .board-cont .mob-pushSET-board .board-table {
    min-width: 720px;
    overflow-x: auto;
    height: unset;
  }

  .eventSET-board .thead .th:nth-child(1) {
    padding: 5px 0 5px 10px;
  }

  .eventSET-board .tbody .td:nth-child(1) {
    padding: 5px 0 5px 10px;
  }

  /* .board-cont .option_box.basic-optionST {justify-content:space-between;}
.board-cont .option_box.basic-optionST .search-contBOX {width:62%;margin:0;} */
  .board-sel {
    margin: 0;
    width: 100% !important;
  }

  .board-table .thead .th:nth-child(1) {
    width: 4%;
    padding: 0 0 0 10px;
  }

  .board-table .thead .th:nth-child(2) {
    width: 7%;
  }

  .board-table .thead .th:nth-child(3) {
    width: 10%;
  }

  .board-table .thead .th:nth-child(4) {
    width: 17%;
  }

  .board-table .thead .th:nth-child(5) {
    width: 10%;
  }

  .board-table .thead .th:nth-child(6) {
    width: 11%;
  }

  .board-table .thead .th:nth-child(7) {
    width: 11%;
  }

  .board-table .thead .th:nth-child(8) {
    width: 17%;
  }

  .board-table .thead .th:nth-child(10) {
    width: 13%;
  }

  .board-table .tbody .td:nth-child(1) {
    width: 4%;
    padding: 0 0 0 10px;
  }

  .board-table .tbody .td:nth-child(2) {
    width: 7%;
  }

  .board-table .tbody .td:nth-child(3) {
    width: 10%;
  }

  .board-table .tbody .td:nth-child(4) {
    width: 17%;
  }

  .board-table .tbody .td:nth-child(5) {
    width: 10%;
  }

  .board-table .tbody .td:nth-child(6) {
    width: 11%;
  }

  .board-table .tbody .td:nth-child(7) {
    width: 11%;
  }

  .board-table .tbody .td:nth-child(8) {
    width: 17%;
  }

  .board-table .tbody .td:nth-child(9) {
    width: 13%;
  }

  .board-viewHD .tit {
    font-size: 20px;
  }

  .board-view-cont {
    font-size: 14px;
    line-height: 24px;
    font-weight: 300;
  }

  #container.sub-container.board-view .board-view-cont {
    height: calc(100% - 237px);
  }

  .eventSET-board {}

  .eventSET-board .thead .th:nth-child(1) {
    width: 4%;
    padding: 0 0 0 10px;
  }

  .eventSET-board .thead .th:nth-child(2) {
    width: 10%;
  }

  .eventSET-board .thead .th:nth-child(3) {
    width: 25%;
  }

  .eventSET-board .thead .th:nth-child(4) {
    width: 10%;
  }

  .eventSET-board .thead .th:nth-child(5) {
    width: 16%;
  }

  .eventSET-board .thead .th:nth-child(6) {
    width: 15%;
  }

  .eventSET-board .thead .th:nth-child(7) {
    width: 10%;
  }

  .eventSET-board .thead .th:nth-child(8) {
    width: 10%;
  }

  .eventSET-board .tbody .tr:last-child {
    border-bottom: 0;
  }

  .eventSET-board .tbody .td:nth-child(1) {
    width: 4%;
    padding: 0 0 0 10px;
  }

  .eventSET-board .tbody .td:nth-child(2) {
    width: 10%;
  }

  .eventSET-board .tbody .td:nth-child(3) {
    width: 25%;
  }

  .eventSET-board .tbody .td:nth-child(4) {
    width: 10%;
  }

  .eventSET-board .tbody .td:nth-child(5) {
    width: 16%;
  }

  .eventSET-board .tbody .td:nth-child(6) {
    width: 15%;
  }

  .eventSET-board .tbody .td:nth-child(7) {
    width: 10%;
  }

  .eventSET-board .tbody .td:nth-child(8) {
    width: 10%;
  }

  .mob-eventSET-board .mob-device-tb .thead .th:nth-child(1) {
    width: 4%;
  }

  .mob-eventSET-board .mob-device-tb .thead .th:nth-child(2) {
    width: 12%;
  }

  .mob-eventSET-board .mob-device-tb .thead .th:nth-child(3) {
    width: 10%;
  }

  .mob-eventSET-board .mob-device-tb .thead .th:nth-child(4) {
    width: 20%;
  }

  .mob-eventSET-board .mob-device-tb .thead .th:nth-child(5) {
    width: 7%;
  }

  .mob-eventSET-board .mob-device-tb .thead .th:nth-child(6) {
    width: 10%;
  }

  .mob-eventSET-board .mob-device-tb .thead .th:nth-child(7) {
    width: 10%;
  }

  .mob-eventSET-board .mob-device-tb .thead .th:nth-child(8) {
    width: 17%;
  }

  .mob-eventSET-board .mob-device-tb .thead #mob.th {
    width: 10%;
  }

  .mob-eventSET-board .mob-device-tb .tbody .td:nth-child(1) {
    width: 4%;
  }

  .mob-eventSET-board .mob-device-tb .tbody .td:nth-child(2) {
    width: 12%;
  }

  .mob-eventSET-board .mob-device-tb .tbody .td:nth-child(3) {
    width: 10%;
  }

  .mob-eventSET-board .mob-device-tb .tbody .td:nth-child(4) {
    width: 20%;
  }

  .mob-eventSET-board .mob-device-tb .tbody .td:nth-child(5) {
    width: 7%;
  }

  .mob-eventSET-board .mob-device-tb .tbody .td:nth-child(6) {
    width: 10%;
  }

  .mob-eventSET-board .mob-device-tb .tbody .td:nth-child(7) {
    width: 10%;
  }

  .mob-eventSET-board .mob-device-tb .tbody .td:nth-child(8) {
    width: 17%;
  }

  .mob-eventSET-board .mob-device-tb .tbody .td:nth-child(9) {
    width: 10%;
  }

  .pop-wrap.continfo-pop {
    top: 0;
  }

  .pop-wrap.event-video-pop {
    top: 0;
  }

  .event-video-pop {
    position: fixed !important;
  }

  .event-video-pop .pop-cont {
    height: calc(100% - 111px);
    overflow-y: auto;
  }

  .event-video-pop .live-video-energychartbox {
    display: none;
  }

  .event-video-pop .sub-info-table2 {
    flex-wrap: wrap;
    width: 100%;
  }

  .event-video-pop .chargin-table {
    width: 100%;
  }

  .event-video-pop .live-video {
    height: unset;
    display: flex;
    justify-content: center;
  }

  .event-video-pop .live-video video {
    width: 90% !important;
  }

  .event-video-pop .chargin-table:nth-of-type(1) {
    margin-bottom: 10px;
  }

  .event-video-pop .chargin-table th {
    width: 25%;
    padding-left: 0;
  }

  .board-table .thead .th {
    font-size: 11px;
  }

  .board-table .tbody .td {
    font-size: 13px;
  }

  .board-table .tbody .tr {
    flex-wrap: wrap;
  }

  .basicSET .tbody .td {
    text-align: left;
  }

  .basicSET .tbody .td:nth-child(1) {
    width: 100%;
    padding: 13px 0 5px 10px;
    font-size: 15px;
  }

  .basicSET .tbody .td:nth-child(1) span {
    font-weight: bold;
    margin-left: 5px;
  }

  .basicSET .tbody .td:nth-child(2) {
    width: 100%;
    color: #999;
    padding: 0 0 13px 10px;
  }

  .basicSET .tbody .td:nth-child(2) span:nth-child(2) {
    margin: 0 10px;
  }

  /* .board-table .tbody .td:nth-child(1) {padding:0 0 0 10px;} */
  .board-more {
    margin-top: 10px;
    padding: 0 30px 20px;
    box-sizing: border-box;
    width: 100%;
  }

  .pop-tab3-2 .board-table .tbody .tr {
    border-bottom: 1px solid #f1f3f6 !important;
  }


  .push-board .thead .th:nth-child(1) {
    width: 5%;
    padding: 0 0 0 10px;
  }

  .push-board .thead .th:nth-child(2) {
    width: 10%;
  }

  .push-board .thead .th:nth-child(3) {
    width: 23%;
  }

  .push-board .thead .th:nth-child(4) {
    width: 18%;
  }

  .push-board .thead .th:nth-child(5) {
    width: 12%;
  }

  .push-board .thead .th:nth-child(6) {
    width: 8%;
  }

  .push-board .thead .th:nth-child(7) {
    width: 14%;
  }

  .push-board .thead .th:nth-child(8) {
    width: 10%;
  }

  .push-board .tbody .tr:last-child {
    border-bottom: 0;
  }

  .push-board .tbody .td:nth-child(1) {
    width: 5%;
    padding: 0 0 0 10px;
  }

  .push-board .tbody .td:nth-child(2) {
    width: 10%;
  }

  .push-board .tbody .td:nth-child(3) {
    width: 23%;
  }

  .push-board .tbody .td:nth-child(4) {
    width: 18%;
  }

  .push-board .tbody .td:nth-child(5) {
    width: 12%;
  }

  .push-board .tbody .td:nth-child(6) {
    width: 8%;
  }

  .push-board .tbody .td:nth-child(7) {
    width: 14%;
  }

  .push-board .tbody .td:nth-child(8) {
    width: 10%;
  }


  .pop-wrap .board-more .board-more-bt {
    font-size: 13px;
    padding: 7px 0;
  }

  .pop-tab1 .pop-cont .in-box .li-cont {
    flex-wrap: wrap;
  }

  .pop-tab1 .pop-cont .in-box .li-cont .cont-wd {
    width: 100%;
    margin-bottom: 20px;
  }

  .pop-tab1 .pop-cont .in-box .li-cont .cont-wd:last-of-type {
    margin-bottom: 0;
  }

  .setting_sel {
    width: 100%;
  }

  .pop-tab2 .pop-cont {
    height: calc(100% - 111px);
  }

  .pop-tab2 .pop-cont .in-box {
    height: calc(100% - 69px);
    overflow: auto;
  }

  .pop-tab2 .btn-area {
    display: flex;
  }

  .pop-tab2 .btn-area .btn-gray {
    width: 50%;
  }

  .pop-tab2 .btn-area .btn-comp {
    width: 50% !important;
  }

  .pop-tab2 .station-select {
    padding: 8px 10px;
  }

  .pop-tab2 .station-select span {
    font-size: 11px;
  }

  .pop-tab2 .pop-cont .in-box .li-cont {
    flex-wrap: wrap;
  }

  .pop-tab2 .pop-cont .in-box .li-cont .cont-wd {
    width: 100%;
    margin-bottom: 20px;
  }

  .pop-tab2 .pop-cont .in-box .li-cont .cont-wd:last-of-type {
    margin-bottom: 0;
  }

  .pop-tab2 .pop-cont .in-box .li-cont .cont-wd2 {
    width: 100%;
  }

  .tab-boardSET2 .thead .th:nth-child(1) {
    width: 6%;
    padding: 5px 0 5px 10px;
  }

  .tab-boardSET2 .thead .th:nth-child(2) {
    width: 15%;
  }

  .tab-boardSET2 .thead .th:nth-child(3) {
    width: 15%;
  }

  .tab-boardSET2 .thead .th:nth-child(4) {
    width: 15%;
  }

  .tab-boardSET2 .thead .th:nth-child(5) {
    width: 5%;
  }

  .tab-boardSET2 .thead .th:nth-child(6) {
    width: 15%;
  }

  .tab-boardSET2 .thead .th:nth-child(7) {
    width: 10%;
  }

  .tab-boardSET2 .thead .th:nth-child(8) {
    width: 9%;
  }

  .tab-boardSET2 .thead .th:nth-child(9) {
    width: 10%;
  }

  .tab-boardSET2 .tbody .td:nth-child(1) {
    width: 6%;
  }

  .tab-boardSET2 .tbody .td:nth-child(2) {
    width: 15%;
  }

  .tab-boardSET2 .tbody .td:nth-child(3) {
    width: 15%;
  }

  .tab-boardSET2 .tbody .td:nth-child(4) {
    width: 15%;
  }

  .tab-boardSET2 .tbody .td:nth-child(5) {
    width: 5%;
  }

  .tab-boardSET2 .tbody .td:nth-child(6) {
    width: 15%;
  }

  .tab-boardSET2 .tbody .td:nth-child(7) {
    width: 10%;
  }

  .tab-boardSET2 .tbody .td:nth-child(8) {
    width: 9%;
  }

  .tab-boardSET2 .tbody .td:nth-child(9) {
    width: 10%;
  }



  .tab-boardSET3 .thead .th:nth-child(1) {
    width: 6%;
    padding: 5px 0 5px 10px;
  }

  .tab-boardSET3 .thead .th:nth-child(2) {
    width: 10%;
  }

  .tab-boardSET3 .thead .th:nth-child(3) {
    width: 25%;
  }

  .tab-boardSET3 .thead .th:nth-child(4) {
    width: 25%;
  }

  .tab-boardSET3 .thead .th:nth-child(5) {
    width: 15%;
  }

  .tab-boardSET3 .thead .th:nth-child(6) {
    width: 9%;
  }

  .tab-boardSET3 .thead .th:nth-child(7) {
    width: 10%;
  }

  .tab-boardSET3 .tbody .td:nth-child(1) {
    width: 6%;
  }

  .tab-boardSET3 .tbody .td:nth-child(2) {
    width: 10%;
  }

  .tab-boardSET3 .tbody .td:nth-child(3) {
    width: 25%;
  }

  .tab-boardSET3 .tbody .td:nth-child(4) {
    width: 25%;
  }

  .tab-boardSET3 .tbody .td:nth-child(5) {
    width: 15%;
  }

  .tab-boardSET3 .tbody .td:nth-child(6) {
    width: 9%;
  }

  .tab-boardSET3 .tbody .td:nth-child(7) {
    width: 10%;
  }

  .pop-tab3 .pop-cont {
    height: calc(100% - 111px);
  }

  .pop-tab3 .pop-cont .in-box {
    height: calc(100% - 69px);
  }

  .pop-tab3 .pop-cont .in-box .li-cont {
    flex-wrap: wrap;
  }

  .pop-tab3 .pop-cont .in-box .li-cont .cont-wd {
    width: 100%;
    margin-bottom: 20px;
  }

  .pop-tab3 .pop-cont .in-box .li-cont .cont-wd:last-of-type {
    margin-bottom: 0;
  }

  .pop-tab3 .pop-cont .in-box .li-cont .cont-wd .selectbox {
    width: 100%;
  }

  .pop-tab3 .btn-area {
    display: flex;
    justify-content: space-between;
  }

  .pop-tab3 .btn-area .btn-gray {
    width: 50%;
  }

  .pop-tab3 .btn-area .btn-comp {
    width: 50% !important;
  }

  .pop-tab3-2 .pop-cont {
    height: calc(100% - 111px);
    overflow: auto;
  }

  .pop-tab3-2 .option_box {
    display: unset;
  }

  .pop-tab3-2 .option_box .inputtxt-box-info1 {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .pop-tab3-2 .inputtxt-box-info2 {
    width: 100%;
  }

  .pop-tab3-2 .mob-cont-select .selectbox {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .pop-tab3-2 .mob-cont-select .selectbox:last-of-type {
    margin-bottom: 0;
  }

  .pop-tab3-2 .inputtxt-box-info {
    width: 100%;
  }

  .pop-tab3-2 .board-table .td {
    font-size: 13px !important;
  }

  .pop-tab3-2 .board-table .thead .th:nth-child(1) {
    width: 7% !important;
    padding: 5px 0 5px 15px;
  }

  .pop-tab3-2 .board-table .thead .th:nth-child(2) {
    width: 18% !important;
  }

  .pop-tab3-2 .board-table .thead .th:nth-child(3) {
    width: 40% !important;
  }

  .pop-tab3-2 .board-table .thead .th:nth-child(4) {
    width: 15% !important;
  }

  .pop-tab3-2 .board-table .thead .th:nth-child(5) {
    width: 20% !important;
  }

  .pop-tab3-2 .board-table .tbody .td:nth-child(1) {
    width: 7% !important;
    padding: 5px 0 5px 15px;
  }

  .pop-tab3-2 .board-table .tbody .td:nth-child(2) {
    width: 18% !important;
  }

  .pop-tab3-2 .board-table .tbody .td:nth-child(3) {
    width: 40% !important;
  }

  .pop-tab3-2 .board-table .tbody .td:nth-child(4) {
    width: 15% !important;
  }

  .pop-tab3-2 .board-table .tbody .td:nth-child(5) {
    width: 20% !important;
  }

  .pop-tab3-2 .pop-mob-board {
    overflow-x: auto;
    width: 100%;
    height: calc(100% - 287px);
  }

  .pop-tab3-2 .pop-mob-board .board-table {
    min-width: 720px;
    overflow-x: auto;
    height: 100%;
  }

  .pop-tab3-2 .board-more {
    padding: 0;
  }

  .tab-boardSET4 .thead .th:nth-child(1) {
    width: 5%;
    padding: 5px 0 5px 10px;
  }

  .tab-boardSET4 .thead .th:nth-child(2) {
    width: 10%;
  }

  .tab-boardSET4 .thead .th:nth-child(3) {
    width: 40%;
  }

  .tab-boardSET4 .thead .th:nth-child(4) {
    width: 15%;
  }

  .tab-boardSET4 .thead .th:nth-child(5) {
    width: 15%;
  }

  .tab-boardSET4 .thead .th:nth-child(6) {
    width: 15%;
  }

  .tab-boardSET4 .tbody .td:nth-child(1) {
    width: 5%;
  }

  .tab-boardSET4 .tbody .td:nth-child(2) {
    width: 10%;
  }

  .tab-boardSET4 .tbody .td:nth-child(3) {
    width: 40%;
  }

  .tab-boardSET4 .tbody .td:nth-child(4) {
    width: 15%;
  }

  .tab-boardSET4 .tbody .td:nth-child(5) {
    width: 15%;
  }

  .tab-boardSET4 .tbody .td:nth-child(6) {
    width: 15%;
  }

  .tab-boardSET5 .thead .th:nth-child(1) {
    width: 5%;
    padding: 5px 0 5px 10px;
  }

  .tab-boardSET5 .thead .th:nth-child(2) {
    width: 10%;
  }

  .tab-boardSET5 .thead .th:nth-child(3) {
    width: 30%;
  }

  .tab-boardSET5 .thead .th:nth-child(4) {
    width: 25%;
  }

  .tab-boardSET5 .thead .th:nth-child(5) {
    width: 15%;
  }

  .tab-boardSET5 .thead .th:nth-child(6) {
    width: 15%;
  }

  .tab-boardSET5 .tbody .td:nth-child(1) {
    width: 5%;
  }

  .tab-boardSET5 .tbody .td:nth-child(2) {
    width: 10%;
  }

  .tab-boardSET5 .tbody .td:nth-child(3) {
    width: 30%;
  }

  .tab-boardSET5 .tbody .td:nth-child(4) {
    width: 25%;
  }

  .tab-boardSET5 .tbody .td:nth-child(5) {
    width: 15%;
  }

  .tab-boardSET5 .tbody .td:nth-child(6) {
    width: 15%;
  }

  .pop-tab4 .pop-cont {
    height: calc(100% - 111px);
    /* overflow:auto; */
  }

  .pop-tab4 .pop-mob-board {
    overflow-x: auto;
    width: 100%;
    height: calc(100% - 100px);
  }

  .pop-tab4 .pop-mob-board .board-table {
    min-width: 810px;
    overflow-x: auto;
    height: 100%;
    margin-top: 0 !important;
  }

  .pop-tab4 .mob-cont-select .selectbox.reset2 {
    width: 100%;
    margin: 0 0 10px 0;
  }

  .pop-tab4 .board-table .thead .th:nth-child(1) {
    width: 7% !important;
  }

  .pop-tab4 .board-table .thead .th:nth-child(2) {
    width: 19% !important;
  }

  .pop-tab4 .board-table .thead .th:nth-child(3) {
    width: 28% !important;
  }

  .pop-tab4 .board-table .thead .th:nth-child(4) {
    width: 10% !important;
  }

  .pop-tab4 .board-table .thead .th:nth-child(5) {
    width: 28% !important;
  }

  .pop-tab4 .board-table .thead .th:nth-child(6) {
    width: 8% !important;
  }

  .pop-tab4 .board-table .tbody .re .reset {
    height: 30px;
  }

  .pop-tab4 .board-table .tbody .re .reset:before {
    top: 12px;
  }

  .pop-tab4 .board-table .tbody .re .reset label {
    top: -3px;
    font-size: 11px;
  }

  .pop-tab4 .board-table .tbody .td:nth-child(1) {
    width: 7% !important;
  }

  .pop-tab4 .board-table .tbody .td:nth-child(2) {
    width: 19% !important;
  }

  .pop-tab4 .board-table .tbody .td:nth-child(3) {
    width: 28% !important;
  }

  .pop-tab4 .board-table .tbody .td:nth-child(4) {
    width: 10% !important;
  }

  .pop-tab4 .board-table .tbody .td:nth-child(5) {
    width: 28% !important;
  }

  .pop-tab4 .board-table .tbody .td:nth-child(6) {
    width: 8% !important;
  }

  .pop-wrap .btn-area {
    width: 100%;
  }

  .pop-wrap .board-table .thead .th:nth-child(1) {
    width: 13%;
  }

  .pop-wrap .board-table .thead .th:nth-child(2) {
    width: 41%;
  }

  .pop-wrap .board-table .thead .th:nth-child(3) {
    width: 46%;
  }

  .pop-wrap .board-table .tbody .td:nth-child(1) {
    width: 13%;
  }

  .pop-wrap .board-table .tbody .td:nth-child(2) {
    width: 41%;
    padding: 0 5px;
    box-sizing: border-box;
    word-break: keep-all;
  }

  .pop-wrap .board-table .tbody .td:nth-child(3) {
    width: 46%;
  }

  .pop-wrap .btn-area .btn-comp {
    width: 100%;
  }

  .selectbox label {
    font-size: 12px;
  }

  .search-contBOX {
    width: 100%;
    margin-top: 10px;
  }

  .search-input {
    width: 100%;
  }

  .board-btBOX {
    padding: 24px 30px;
    display: flex;
    justify-content: center;
    /* justify-content:space-between; */
  }

  .del_bt {
    padding: 0 10px;
    width: unset;
    margin-right: 3px;
    height: 33px;
    font-size: 13px;
  }

  .del_bt2 {
    border: 1px solid #b1b1b1;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
    color: #32374b;
    height: 35px;
    width: unset;
    padding: 0 10px;
  }

  .blue-bt4 {
    border: 1px solid #005aff;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
    color: #005aff;
    height: 33px;
    width: unset;
    padding: 0 10px;
    margin-right: 3px;
  }

  .board-more-bt {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 0;
    font-size: 17px;
    font-weight: bold;
    color: #999;
  }

  .sj-bt {
    height: 33px;
  }

  .blue-bt3 {
    height: 33px;
    width: unset !important;
    padding: 0 20px;
  }

  .mob-blue-bt3 {
    font-size: 18px;
    padding: 13px 0;
    font-weight: bold;
    background: #005AFF;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    width: 50% !important;
    height: unset;
  }

  .reg_bt {
    width: 33px;
    height: 33px;
    background-size: 100%;
  }

  .list_bt {
    height: unset;
    width: 100%;
    font-size: 18px;
    padding: 13px 0;
    font-weight: bold;
    border-radius: 4px;
    text-align: center;
    color: #999;
    box-sizing: border-box;
  }

  .mob-list_bt {
    height: unset;
    width: calc(50% - 15px) !important;
  }

  .pop-wrap {
    height: 100%;
    background: #fff;
    width: 100%;
    border-radius: 0;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    position: fixed;
    z-index: 999;
    display: none;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
  }

  .pop-wrap.charging-set-pop {
    height: 100%;
  }

  .charging-set-pop {
    min-width: unset;
  }

  .pop-wrap .poptit-box {
    background: #F1F3F6;
    justify-content: center;
    padding: 20px 0;
    border-bottom: 0;
  }

  .pop-wrap .btn-close {
    position: absolute;
    right: 30px;
    background: url(../images/mob/menu-close.png) top left no-repeat;
    width: 19px;
    height: 19px;
    background-size: 100%;
  }

  .charging-set-pop .pop-cont {
    height: calc(100% - 111px);
  }

  .pop-wrap .board-table {
    height: calc(100% - 195px);
  }

  .pop-wrap .board-table.bd-t-2 {
    height: calc(100% - 433px);
  }

  .charging-set-pop .option_box {
    flex-wrap: wrap;
  }

  .charging-set-pop .option_box .mob-cont-select {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .charging-set-pop .option_box .option_tit {
    width: 100%;
  }

  .charging-set-pop .option_box .mob-cont-select .selectbox {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .charging-set-pop .option_box .mob-cont-select .selectbox:last-of-type {
    margin-bottom: 0;
  }

  /* .charging-set-pop .pop-cont {height:calc(100% - 195px);} */
  .in-subBOX1 {
    width: 100%;
  }

  .in-subBOX2 {
    width: 100%;
    height: calc(100% - 301px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .in-subBOX2 .option_box {
    width: 100%;
    margin-top: 0;
  }

  .in-subBOX2 .option_box.op-mob {
    flex-wrap: wrap
  }

  .charging-info-pop .option_box .device-input-box {
    width: 100%;
    justify-content: space-between;
    margin-right: 0;
    flex-wrap: wrap;
  }

  .charging-info-pop .option_box .device-input-box .pop-device-cont {
    width: 100%;
    margin-bottom: 10px;
  }

  .charging-info-pop .option_box .device-input-box .pop-device-cont .inp-device-cam {
    width: calc(50% - 5px);
    margin-right: 10px;
  }

  .charging-info-pop .option_box .device-input-box .pop-device-cont .inp-device-IMEI {
    width: calc(50% - 5px);
  }

  .charging-info-pop .option_box .device-input-box .pop-device-cont .input-st1 {
    width: 100%;
  }

  .charging-info-pop .option_box .device-input-box .pop-device-cont div:last-child .input-st1 {}

  .in-subBOX2 .pop-bdtableST2 .device-table-reg {
    min-width: 720px;
    overflow-x: auto;
  }

  .in-subBOX2 .pop-bdtableST2 .device-table-reg .thead .th:nth-child(1) {
    width: 4%;
  }

  .in-subBOX2 .pop-bdtableST2 .device-table-reg .thead .th:nth-child(2) {
    width: 10%;
  }

  .in-subBOX2 .pop-bdtableST2 .device-table-reg .thead .th:nth-child(3) {
    width: 33%;
  }

  .in-subBOX2 .pop-bdtableST2 .device-table-reg .thead .th:nth-child(4) {
    width: 33%;
  }

  .in-subBOX2 .pop-bdtableST2 .device-table-reg .thead .th:nth-child(5) {
    width: 20%;
  }

  .in-subBOX2 .pop-bdtableST2 .device-table-reg .tbody .td:nth-child(1) {
    width: 4%;
  }

  .in-subBOX2 .pop-bdtableST2 .device-table-reg .tbody .td:nth-child(2) {
    width: 10%;
    word-break: keep-all;
  }

  .in-subBOX2 .pop-bdtableST2 .device-table-reg .tbody .td:nth-child(3) {
    width: 33%;
  }

  .in-subBOX2 .pop-bdtableST2 .device-table-reg .tbody .td:nth-child(4) {
    width: 33%;
  }

  .in-subBOX2 .pop-bdtableST2 .device-table-reg .tbody .td:nth-child(5) {
    width: 20%;
  }

  .in-subBOX2 .pop-bdtableST2 {
    width: 100%;
    height: calc(100% - 10px);
  }

  .in-subBOX2 .pop-wrap .pop-bdtableST2 {
    height: calc(100% - 96px);
    width: 100%;
  }

  /* .charging-info-pop {height:calc(100% - 100px);} */
  .pop-wrap .pop-bdtableST2 .thead .th:nth-child(1) {
    width: 15%;
  }

  .pop-wrap .pop-bdtableST2 .thead .th:nth-child(2) {
    width: 10%;
  }

  .pop-wrap .pop-bdtableST2 .thead .th:nth-child(3) {
    width: 25%;
  }

  .pop-wrap .pop-bdtableST2 .thead .th:nth-child(4) {
    width: 30%;
  }

  .pop-wrap .pop-bdtableST2 .thead .th:nth-child(5) {
    width: 20%;
  }

  .pop-wrap .pop-bdtableST2 .tbody .td:nth-child(1) {
    width: 15%;
  }

  .pop-wrap .pop-bdtableST2 .tbody .td:nth-child(2) {
    width: 10%;
  }

  .pop-wrap .pop-bdtableST2 .tbody .td:nth-child(3) {
    width: 25%;
  }

  .pop-wrap .pop-bdtableST2 .tbody .td:nth-child(4) {
    width: 30%;
  }

  .pop-wrap .pop-bdtableST2 .tbody .td:nth-child(5) {
    width: 20%;
  }

  .pop-flx-st2 {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }

  .charging-info-pop .pop-cont {
    height: calc(100% - 86px);
    box-sizing: border-box;
    overflow-y: auto
  }

  .charging-info-pop .sub-info-table2 {
    flex-wrap: wrap;
  }

  .charging-info-pop .chargin-table {
    width: 100%;
  }

  .charging-info-pop .chargin-table:nth-of-type(2) {
    margin-top: 10px;
  }

  .charging-info-pop .chargin-table th {
    width: 25%;
    text-align: left;
    padding-left: 10px;
  }

  .charging-info-pop li:first-child {
    width: 60%;
  }

  .charging-info-pop .search-contBOX {
    text-align: right;
  }

  .set_tab_cont .set_tabBOX .set_tab_TIT {
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
  }

  .set_tab_cont .set_tabBOX .set_tab_TIT .set_btn {
    font-size: 15px;
    padding: 10px 0;
    display: block;
  }

  .set_tab_cont .set_tabBOX .set_tab_TIT .set_liBOX {
    background: #fff;
    width: calc(33% - 1px);
    text-align: center;
    margin-right: 0;
    border: 1px solid #ddd;
    margin-left: -1px;
    margin-top: -1px;
  }

  .set_tab_cont .set_tabBOX .set_tab_TIT .set_liBOX.is_on {
    border: 1px solid #005aff;
    z-index: 9;
  }

  .set_tab_cont .set_tabBOX .set_tab_TIT .set_liBOX.is_on .set_btn {
    border: 0;
  }

  .pop-tab1 .pop-cont {
    height: calc(100% - 61px);
    box-sizing: border-box;
  }

  .pop-tab1 .pop-cont .in-box {
    height: calc(100% - 67px);
  }

  .tab-boardSET .tbody .tr:hover {
    background: #ebf0f6;
  }

  .tab-boardSET .tbody .tr:last-child {
    border-bottom: 1px solid #f1f3f6;
  }

  .tab-boardSET .thead .th:nth-child(1) {
    width: 5%;
    padding: 5px 0 5px 10px;
  }

  .tab-boardSET .thead .th:nth-child(2) {
    width: 7%;
  }

  .tab-boardSET .thead .th:nth-child(3) {
    width: 12%;
  }

  .tab-boardSET .thead .th:nth-child(4) {
    width: 36%;
  }

  .tab-boardSET .thead .th:nth-child(5) {
    width: 15%;
  }

  .tab-boardSET .thead .th:nth-child(6) {
    width: 10%;
  }

  .tab-boardSET .thead .th:nth-child(7) {
    width: 10%;
  }

  .tab-boardSET .tbody .td:nth-child(1) {
    width: 5%;
  }

  .tab-boardSET .tbody .td:nth-child(2) {
    width: 7%;
  }

  .tab-boardSET .tbody .td:nth-child(3) {
    width: 12%;
  }

  .tab-boardSET .tbody .td:nth-child(4) {
    width: 36%;
  }

  .tab-boardSET .tbody .td:nth-child(5) {
    width: 15%;
  }

  .tab-boardSET .tbody .td:nth-child(6) {
    width: 10%;
  }

  .tab-boardSET .tbody .td:nth-child(7) {
    width: 10%;
  }

  .pop-tab5 .pop-cont {
    height: calc(100% - 110px);
    overflow: auto;
  }

  .pop-tab5 .pop-cont .in-box {
    height: calc(100% - 68px);
    overflow: auto;
  }

  .pop-tab5 .pop-cont .in-box .li-cont2 {
    flex-wrap: wrap;
  }

  .pop-tab5 .pop-cont .in-box .li-cont2 .cont-wd3.mgr30 {
    margin-right: 0;
  }

  .pop-tab5 .mb-cont {
    margin-top: 15px;
    width: calc(50% - 15px);
  }

  .pop-tab5 .pop-cont .in-box .cont-wd3 {
    width: 100%;
  }

  .pop-tab5 .pop-check-st1 {
    flex-wrap: wrap;
    margin-top: 0;
  }

  .pop-tab5 .pop-check-st1 li {
    width: calc(50% - 25px);
    margin-top: 10px;
  }

  .pop-tab5 .pop-cont .in-box .li-cont .cont-wd {
    width: 100%;
  }

  .pop-tab5 .pop-cont .in-box .li-cont3 {
    width: 100%;
    flex-wrap: wrap;
  }

  .pop-tab5 .pop-cont .in-box .li-cont3 .pop-check-st2 {
    width: 100%;
    margin-bottom: 20px;
  }

  .tab-boardSET .selectbox {
    height: 30px;
  }

  .tab-boardSET .selectbox:before {
    top: 12px;
  }

  .tab-boardSET .selectbox label {
    top: -3px;
    font-size: 11px;
  }

  /* .write-cont {
    padding: 0 30px;
  } */

  .write-txtbox {
    height: unset;
  }

  .write-txtbox textarea {
    min-height: 250px;
  }

  #dataName {
    box-sizing: unset !important;
    border-top: 1px solid #ddd;
    /* width:100%;height:calc(100% - 137px); */
  }

  .chart-box {
    width: 100%;
    min-height: 600px;
    padding: 15px 0 30px;
  }

  .chart-box #chart-container {
    width: 100%;
  }

  .footer {
    padding-top: 25px;
    border-top: 1px solid #ddd;
    margin: 30px 30px 0 30px;
    box-sizing: border-box;
    width: auto;
  }

  .footer img {
    max-width: 85px;
  }

  .footer span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
  }

  .scrollLock {
    overflow: hidden;
  }

  .slick-slide {
    transition: all ease-in-out .1s;
    opacity: .2;
  }

  .slick-current {
    opacity: 1;
  }

  .slick-next.slick-arrow {
    display: none !important;
  }

  .slick-prev.slick-arrow {
    display: none !important;
  }

  .darkMODE {
    height: 35px !important;
  }

  .dark_label {
    position: absolute;
    top: 21px;
    left: 110px;
  }

  .darkMODE::before {
    top: 2px;
  }

  .darkMODE:checked::before {
    top: 2px;
  }

  :root[color-theme='dark'] {
    --background: #272829 !important;
  }

  :root[color-theme='dark'] .dark_label {
    position: absolute;
    top: 21px;
    left: 110px;
  }

  :root[color-theme='dark'] .header {
    border-bottom: 1px solid #3c3c3c;
  }

  :root[color-theme='dark'] .sidenav .closebtn {
    filter: invert(1);
  }

  :root[color-theme='dark'] .header .side-icon {
    filter: invert(1);
  }

  :root[color-theme='dark'] .header .push-icon {
    filter: invert(1);
  }

  :root[color-theme='dark'] .set_tab_cont .set_tabBOX .set_tab_TIT .set_liBOX.is_on .set_btn {
    border: 1px solid #005aff;
    background: #005aff;
    color: #fff;
  }

  :root[color-theme='dark'] .set_tab_cont .set_tabBOX .set_tab_TIT .set_liBOX {
    border: 1px solid #005aff;
    background: rgba(0, 0, 0, 0);
  }

  :root[color-theme='dark'] .set_tab_cont .set_tabBOX .set_tab_TIT .set_btn {
    color: #005aff;
  }

  :root[color-theme='dark'] .sidenav {
    background: #2B2B2B;
  }

  :root[color-theme='dark'] #mySidenav .menu-list-hd-cont ul {
    border-bottom: 1px solid #777;
  }

  :root[color-theme='dark'] #mySidenav .menu-list a.active-nav {
    background: #3C3C3C;
  }

  :root[color-theme='dark'] #mySidenav .menu-list a.active-nav {
    color: #fff;
  }

  :root[color-theme='dark'] #mySidenav .menu-list a:before {
    background-image: url(../images/lnb-icon-dark.png);
  }

  :root[color-theme='dark'] #mySidenav .menu-list li a.active-nav:after {
    background-image: url(../images/mob/dark-menu-arrow_on.png)
  }

  :root[color-theme='dark'] #mySidenav .menu-list a:after {
    background-image: url(../images/mob/dark-menu-arrow.png)
  }
}

@media screen and (max-width:720px) {
  .chart-box #chart-container {
    width: 720px;
  }

  .pop-tab3-2 .btn-area {
    display: flex;
    justify-content: space-between;
  }

  .pop-tab3-2 .pop-cont .del_bt.pop3-2 {
    width: calc(50% - 10px);
    margin-right: 0;
  }

  .pop-wrap .btn-area .btn-comp {
    width: calc(50% - 10px);
  }
}

@media screen and (max-width:600px) {

  .contents .situation_box2 .psh-cont {
    width: 50%;
  }

  .set_tab_cont .set_tabBOX .set_tab_TIT .set_liBOX {
    width: calc(50% - 1px);
  }

  .event-video-pop .live-video video {
    width: 100% !important;
  }
}


/**test**/

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  font-size: 12px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 3px 5px;
  position: absolute;
  z-index: 1;
  top: 18px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}




/*dark-mode*/

.dark_label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.darkMODE {
  display: unset !important;
  cursor: pointer;
  appearance: none;
  position: relative;
  /* border:max(2px, 0.1em) solid #c3cedb; */
  border-radius: 55px;
  background: #aaa;
  width: 50px;
  height: 30px;
}

.darkMODE::before {
  content: "";
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: scale(0.8);
  background: url(../images/dark_off.png);
  transition: left 250ms linear;
}

/* .darkMODE:checked {background-color:#3C3C3C;border-color:#3C3C3C;} */
.darkMODE:checked::before {
  background: url(../images/dark_on.png);
  left: 20px;
}

.darkMODE:disabled {
  border-color: lightgray;
  opacity: 0.7;
  cursor: not-allowed;
}

.darkMODE:disabled:before {
  background-color: lightgray;
}

.darkMODE:disabled+span {
  opacity: 0.7;
  cursor: not-allowed;
}

.darkMODE:focus-visible {
  outline-offset: max(2px, 0.1em);
  outline: max(2px, 0.1em) solid tomato;
}

:root[color-theme='light'] {
  --background: #fff;
}

:root[color-theme='dark'] {
  --background: #2B2B2B;
}

.themed {
  display: block;
}

:root[color-theme='dark'] body {
  color: #fff;
}

:root[color-theme='dark'] .logo img {
  /* 다크모드: 전체 로고(logo.png 169x28)를 흰색으로 반전해 표시.
     (dark-logo.png 는 아이콘 일부만 담긴 35x28 깨진 이미지라 미사용) */
  filter: brightness(0) invert(1);
}

:root[color-theme='dark'] .logo {
  color: #fff;
}

:root[color-theme='dark'] .header-bt {
  color: #fff;
}

:root[color-theme='dark'] .language-bt {
  color: #fff;
  border: 1px solid #fff;
}

:root[color-theme='dark'] .btn-admin {
  border-color: #fff;
  color: #fff !important;
}

:root[color-theme='dark'] #container.sub-container {
  background: #3c3c3c;
}

:root[color-theme='dark'] #wrap #left-menu {
  background: #2B2B2B;
  border: 1px solid #3c3c3c;
}

:root[color-theme='dark'] .tit1 {
  color: #fff;
}

:root[color-theme='dark'] #wrap #left-menu .lnb li a {
  color: #666;
}

:root[color-theme='dark'] #wrap #left-menu .lnb li a.active-nav {
  color: #fff;
  background: #3C3C3C;
}

:root[color-theme='dark'] #wrap #left-menu .lnb li a:before {
  background-image: url(../images/lnb-icon-dark.png);
}

:root[color-theme='dark'] #wrap #left-menu .lnb li a:hover {
  background: #3C3C3C;
  color: #fff;
}

:root[color-theme='dark'] .contents .card-body1 {
  background: #313233;
}

:root[color-theme='dark'] .contents .situation_box1 .cont-box {
  background: #37393b;
}

:root[color-theme='dark'] .contents .situation_box1 .cont-box .t-tit {
  color: #ddd;
}

:root[color-theme='dark'] .contents .situation_box2 .psh-cont .psh-tit {
  color: #ddd;
}

:root[color-theme='dark'] .contents .situation_box2 .psh-cont .psh-num {
  color: #fff;
}

:root[color-theme='dark'] .contents .situation_box3 {
  background: #313233;
}

:root[color-theme='dark'] .contents .situation_box4 {
  background: #313233;
}

:root[color-theme='dark'] .contents .situation_box4 .live-push-box {
  background: #3C3C3C;
}

:root[color-theme='dark'] .contents .situation_box4 .live-push-box.on {
  background: #2b2b2b;
}

:root[color-theme='dark'] .contents .situation_box4 .live-push-box .livecam_bt.on {
  background: #666;
}

:root[color-theme='dark'] .livecam_bt {
  background: #575757;
}

:root[color-theme='dark'] .chargingST-box {
  background: #3C3C3C;
}

:root[color-theme='dark'] .chargingST-box .chST-sta2 {
  background: #666;
}

:root[color-theme='dark'] .mypage_wrap {
  background: #2B2B2B;
}

:root[color-theme='dark'] .mypage_wrap .poptit-box {
  border-bottom: 1px solid #3C3C3C;
}

:root[color-theme='dark'] .mypage_wrap .poptit-box .btn-close2 {
  filter: invert(1);
}

:root[color-theme='dark'] .mypage_wrap .pop-cont {
  background: #3C3C3C;
  border-radius: 0 0 5px 5px;
}

:root[color-theme='dark'] .mypage_wrap .my-pushbox {
  border-bottom: 1px solid #777;
}

:root[color-theme='dark'] .sub-charginST .chargin-table {
  border-top: 2px solid #252525;
}

:root[color-theme='dark'] .layer-chrginST .chargin-table th {
  background: #2b2b2b;
}

:root[color-theme='dark'] .sub-charginST .chargin-table th {
  color: #fff;
  border-bottom: 1px solid #434343;
  border-right: 1px solid #2b2b2b;
}

:root[color-theme='dark'] .sub-charginST .chargin-table td {
  background: #37393b;
  border-bottom: 1px solid #535353;
}

:root[color-theme='dark'] .mypage_wrap .my-inputST {
  border: 1px solid #333;
  background: #1E1F21;
  color: #fff;
}

:root[color-theme='dark'] .mypage_wrap .my-inputST:disabled {
  color: #777;
  background: #2B2B2B;
}

:root[color-theme='dark'] .colorMODE {
  border: max(2px, 0.1em) solid #c3c3c3;
  background: #c3c3c3;
}

:root[color-theme='dark'] label>input[type="checkbox"]:checked+*::before {
  content: url(../images/dark-bg_chk_on.png);
  filter: unset;
}

:root[color-theme='dark'] .header-bt .btn-mypage::before {
  background: url(../images/dark-my_icon.png) top left no-repeat;
}

:root[color-theme='dark'] .del_bt {
  color: #b1b1b1;
}

:root[color-theme='dark'] .board-cont {
  background: #272829;
}

:root[color-theme='dark'] .list_bt {
  border: 1px solid #3c3e3e;
  background: #343638;
  color: #fff;
}

:root[color-theme='dark'] .board-cont .board-table {
  border-top: 2px solid #777;
  border-bottom: 1px solid #777;
}

:root[color-theme='dark'] .board-table .thead {
  border-bottom: 1px solid #777;
}

:root[color-theme='dark'] .board-table .tbody .tr {
  border-bottom: 1px solid #535353;
}

:root[color-theme='dark'] .basicSET .tbody a .tr:hover {
  background: #3C3C3C;
}

:root[color-theme='dark'] .search-input {
  background: #1e1f21;
  border: 1px solid #121212;
  color: #fff;
}

:root[color-theme='dark'] .selectbox {
  background: #1e1f21;
  border: 1px solid #121212;
  color: #fff;
}

:root[color-theme='dark'] .selectbox label {
  color: #fff;
}

:root[color-theme='dark'] .selectbox:before {
  filter: invert(1);
}

:root[color-theme='dark'] .pagenation button {
  border: 1px solid #37393B;
  background: #37393B;
}

:root[color-theme='dark'] .pagenation .page-num a:hover {
  color: #fff;
  background-color: #37393b;
}

:root[color-theme='dark'] .pagenation .page-num a.active {
  color: #fff;
  background-color: #37393b;
}

:root[color-theme='dark'] .pagenation .page-num a {
  border: 1px solid #313233;
}

:root[color-theme='dark'] .pagenation button {
  border: 1px solid #313233;
  background-color: #37393B;
}

:root[color-theme='dark'] .pagenation .page-prev span {
  filter: invert(1);
}

:root[color-theme='dark'] .pagenation .page-next span {
  filter: invert(1);
}

:root[color-theme='dark'] .pagenation .page-num a {
  background-color: #414243;
}

:root[color-theme='dark'] .board-table .tbody .tr:hover {
  background: #3C3C3C;
}

/* 공지 상단 고정 행 다크 테마 */
:root[color-theme='dark'] .board-table .notice-row {
  background-color: #2e3442;
}

:root[color-theme='dark'] .board-table .notice-row strong {
  color: #e8ecf3;
}

:root[color-theme='dark'] .pop-wrap {
  background: #2B2B2B;
  border-bottom: 1px solid #3C3C3C;
  border-radius: 5px;
}

:root[color-theme='dark'] .continfo-pop .pop-cont {
  background: #3C3C3C;
  border-radius: 0 0 5px 5px;
}

:root[color-theme='dark'] .pop-wrap .poptit-box {
  border-bottom: 1px solid #3C3C3C;
  background: #2B2B2B;
  border-radius: 5px 5px 0 0;
}

:root[color-theme='dark'] .event-video-pop .pop-cont {
  background: #3c3c3c;
}

:root[color-theme='dark'] .pop-wrap .btn-close {
  filter: invert(1);
}

:root[color-theme='dark'] .event-video-pop .chargin-table {
  border-top: 2px solid #252525;
}

:root[color-theme='dark'] .event-video-pop .chargin-table th {
  background: #2B2B2B;
  color: #fff;
  border-bottom: 1px solid #434343;
  border-right: 1px solid #2b2b2b;
}

:root[color-theme='dark'] .event-video-pop .chargin-table td {
  background: #37393b;
  border-bottom: 1px solid #535353;
}

:root[color-theme='dark'] label>input[type="checkbox"]+*::before {
  filter: contrast(0.5);
}

:root[color-theme='dark'] .date-area .period-date {
  background: #1e1f21;
  border: 1px solid #121212;
  color: #fff;
}

:root[color-theme='dark'] .board-cont .option_box .sub-optionbox2 .event-option b {
  color: #aaa;
}

:root[color-theme='dark'] .tab-boardSET .tbody .td {
  color: #fff;
}

:root[color-theme='dark'] .tab-boardSET2 .tbody .td {
  color: #fff;
}

:root[color-theme='dark'] .tab-boardSET3 .tbody .td {
  color: #fff;
}

:root[color-theme='dark'] .tab-boardSET4 .tbody .td {
  color: #fff;
}

:root[color-theme='dark'] .tab-boardSET5 .tbody .td {
  color: #fff;
}

:root[color-theme='dark'] .inp-txt {
  background: #1E1F21;
  border: 1px solid #333;
  color: #fff;
}

:root[color-theme='dark'] .inp-txt:disabled {
  color: #777;
  background: #2B2B2B;
}

:root[color-theme='dark'] .pop-tab1 .pop-cont {
  background: #3C3C3C;
}

:root[color-theme='dark'] .pop-tab2 .pop-cont {
  background: #3C3C3C;
}

:root[color-theme='dark'] .pop-tab3 .pop-cont {
  background: #3C3C3C;
}

:root[color-theme='dark'] .pop-tab4 .pop-cont {
  background: #3C3C3C;
}

:root[color-theme='dark'] .pop-tab5 .pop-cont {
  background: #3C3C3C;
}

:root[color-theme='dark'] .btn-close3 {
  filter: invert(1);
}

:root[color-theme='dark'] .pop-wrap .btn-area .btn-gray {
  color: #b1b1b1;
}

:root[color-theme='dark'] .pop-tab2 .station-select span {
  background: #666;
}

:root[color-theme='dark'] .pop-station-select span {
  background: #666;
}

:root[color-theme='dark'] .pop-tab3-2 .input-type-txt {
  border: 1px solid #333;
  background: #1E1F21;
  color: #fff;
}

:root[color-theme='dark'] .fileup-bt {
  font-size: 14px;
  height: 40px;
  width: 105px;
  color: #fff;
  line-height: 0;
}

:root[color-theme='dark'] .file-bt {
  border: 1px solid #2B2B2B;
  background: #2B2B2B;
}

:root[color-theme='dark'] .pop-tab4 .pop-cont #fileName {
  color: #999;
}

:root[color-theme='dark'] .radio-ST input[type=radio]+.radio-ST-label:before {
  filter: contrast(0.5);
}

:root[color-theme='dark'] .charging-info-pop .pop-cont {
  background: #3C3C3C;
  border-radius: 0 0 5px 5px;
}

:root[color-theme='dark'] .charging-set-pop .pop-cont {
  background: #3C3C3C;
}

:root[color-theme='dark'] .ui-widget.ui-widget-content {
  filter: invert(1);
}

:root[color-theme='dark'] .blind {
  background: rgba(0, 0, 0, 0.75);
}

:root[color-theme='dark'] .blind2 {
  background: rgba(0, 0, 0, 0.75);
}

:root[color-theme='dark'] .charging-info-pop .chargin-table {
  border-top: 2px solid #252525;
}

:root[color-theme='dark'] .charging-info-pop .chargin-table th {
  background: #2b2b2b;
  color: #fff;
  border-bottom: 1px solid #434343;
  border-right: 1px solid #2b2b2b;
}

:root[color-theme='dark'] .charging-info-pop .chargin-table td {
  background: #37393b;
  border-bottom: 1px solid #535353;
}

:root[color-theme='dark'] .del_bt2 {
  color: #b1b1b1;
}

:root[color-theme='dark'] .gray_bt {
  color: #b1b1b1;
}

:root[color-theme='dark'] .input-st1 {
  border: 1px solid #333;
  background: #1E1F21;
  color: #fff;
}

:root[color-theme='dark'] .pop-wrap .board-table {
  border-top: 2px solid #777;
  border-bottom: 1px solid #777;
}

/* ===== New Dashboard (nd-) 다크 테마 ===== */
/* 통계 카드 */
:root[color-theme='dark'] .nd-stat-card {
  background: #272829;
  border-color: #3c3e3e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:root[color-theme='dark'] .nd-stat-card.nd-card-danger {
  background: #3a2323;
  border-color: #b84545;
}

:root[color-theme='dark'] .nd-stat-top,
:root[color-theme='dark'] .nd-stat-card .nd-stat-title,
:root[color-theme='dark'] .nd-stat-card .nd-stat-value {
  color: #e8ecf3;
}

/* 섹션 카드 */
:root[color-theme='dark'] .nd-section-card {
  background: #272829;
  border-color: #3c3e3e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:root[color-theme='dark'] .nd-section-header {
  border-bottom-color: #3c3e3e;
}

:root[color-theme='dark'] .nd-section-title {
  color: #e8ecf3;
}

/* 이벤트 테이블 */
:root[color-theme='dark'] .nd-event-table thead th {
  background: #1e1f21;
  color: #a8b0ba;
  border-bottom: 1px solid #3c3e3e;
}

:root[color-theme='dark'] .nd-event-table tbody tr {
  border-bottom: 1px solid #3c3e3e;
}

:root[color-theme='dark'] .nd-event-table tbody td {
  color: #d8dce3;
}

:root[color-theme='dark'] .nd-event-table tbody tr.nd-row-danger {
  background: #3a2323;
}

:root[color-theme='dark'] .nd-event-table tbody tr:hover {
  background: #3C3C3C;
}

/* 공지사항 */
:root[color-theme='dark'] .nd-notice-text {
  color: #e8ecf3;
}

:root[color-theme='dark'] .nd-notice-date {
  color: #a8b0ba;
}

:root[color-theme='dark'] .nd-notice-item:hover {
  background: #3C3C3C;
}

:root[color-theme='dark'] .nd-notice-list a+a .nd-notice-item {
  border-top-color: #3c3e3e;
}

/* "전체 보기" 버튼 */
:root[color-theme='dark'] .nd-btn-more {
  color: #a8b0ba;
}

:root[color-theme='dark'] .nd-btn-more:hover {
  color: #e8ecf3;
}

/* 모니터링 탭 헤더 + 탭 그룹 */
:root[color-theme='dark'] .nd-monitor-tabs {
  background: #1e1f21;
  border-bottom-color: #3c3e3e;
}

:root[color-theme='dark'] .nd-tab-group {
  background: rgba(60, 62, 62, 0.5);
  border-color: #3c3e3e;
}

:root[color-theme='dark'] .nd-tab-btn {
  color: #a8b0ba;
}

:root[color-theme='dark'] .nd-tab-btn.active {
  background: #37393b;
  color: #4a9eff;
  box-shadow: 0 0 0 1px rgba(60, 62, 62, 0.8), 0 1px 2px rgba(0, 0, 0, 0.3);
}

:root[color-theme='dark'] .nd-tab-btn:hover {
  color: #4a9eff;
}

:root[color-theme='dark'] .nd-monitor-btns button:hover {
  background: #3c3e3e;
}

/* CCTV 전체 화면 모달 */
:root[color-theme='dark'] .cctv-modal {
  background: #272829;
}

:root[color-theme='dark'] .cctv-modal-header {
  border-bottom-color: #3c3e3e;
}

:root[color-theme='dark'] .cctv-modal-title strong {
  color: #e8ecf3;
}

:root[color-theme='dark'] .cctv-modal-divider {
  color: #a8b0ba;
}

:root[color-theme='dark'] .cctv-modal-count {
  color: #a8b0ba;
}

:root[color-theme='dark'] .cctv-modal-channel-group {
  background: rgba(60, 62, 62, 0.5);
  border-color: #3c3e3e;
}

:root[color-theme='dark'] .cctv-modal-channel-btn {
  color: #a8b0ba;
}

:root[color-theme='dark'] .cctv-modal-channel-btn:hover {
  color: #4a9eff;
}

:root[color-theme='dark'] .cctv-modal-channel-btn.active {
  background: #37393b;
  color: #4a9eff;
}

:root[color-theme='dark'] .cctv-modal-page-btn {
  background: #26282a;
  border-color: #3c3e3e;
  color: #a8b0ba;
}

:root[color-theme='dark'] .cctv-modal-page-btn:hover:not(:disabled) {
  border-color: #4a9eff;
  color: #4a9eff;
}

:root[color-theme='dark'] .cctv-modal-page-btn:disabled {
  background: #1e1f21;
  color: #5f666e;
}

:root[color-theme='dark'] .cctv-modal-page-text {
  color: #a8b0ba;
}

:root[color-theme='dark'] .cctv-modal-sep {
  background: #3c3e3e;
}

:root[color-theme='dark'] .cctv-modal-action-btn {
  color: #a8b0ba;
}

:root[color-theme='dark'] .cctv-modal-action-btn:hover {
  background: #3c3e3e;
  color: #e8ecf3;
}

:root[color-theme='dark'] .cctv-modal-tabs {
  background: #1e1f21;
  border-bottom-color: #3c3e3e;
}

:root[color-theme='dark'] .cctv-modal-tab-group {
  background: rgba(60, 62, 62, 0.5);
  border-color: #3c3e3e;
}

:root[color-theme='dark'] .cctv-modal-tab {
  color: #a8b0ba;
}

:root[color-theme='dark'] .cctv-modal-tab.active {
  background: #37393b;
  color: #4a9eff;
  box-shadow: 0 0 0 1px rgba(60, 62, 62, 0.8), 0 1px 2px rgba(0, 0, 0, 0.3);
}

:root[color-theme='dark'] .cctv-modal-tab:hover {
  color: #4a9eff;
}

:root[color-theme='dark'] .cctv-modal-body {
  background: #1e1f21;
}


/*//dark-mode*/


/* ===== New Dashboard (nd-) Styles ===== */
.nd-dashboard .contents {
  padding: 0;
}

.nd-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* max-width: 1600px; */
  padding: 16px;
  box-sizing: border-box;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

/* 상단 통계 카드 */
.nd-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.nd-stat-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  padding: 19px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nd-stat-card.nd-card-danger {
  background: #fceaea;
  border-color: #ef4444;
}

.nd-stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.nd-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nd-stat-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.nd-card-danger .nd-stat-icon {
  background: #ef4444;
}

.nd-card-danger .nd-stat-icon img {
  filter: brightness(0) invert(1);
}

.nd-stat-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nd-stat-label {
  font-size: 13px;
  color: #64748b;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: 'Pretendard', sans-serif;
}

.nd-stat-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Pretendard', sans-serif;
}

.nd-stat-change.up {
  color: #10b981;
}

.nd-stat-change.down {
  color: #ef4444;
}

.nd-change-arrow {
  display: inline-block;
  width: 12px;
  height: 10px;
}

.nd-stat-change.up .nd-change-arrow {
  background: url(../images/icon-graph-up.svg) no-repeat center;
  background-size: contain;
}

.nd-stat-change.down .nd-change-arrow {
  background: url(../images/icon-graph-down.svg) no-repeat center;
  background-size: contain;
}

.nd-stat-value {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  font-family: 'Pretendard', sans-serif;
}

.nd-danger-text {
  color: #ef4444 !important;
}

/* 중단 + 하단 래퍼 */
.nd-bottom-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* 중단 영역 */
.nd-middle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* 공통 섹션 카드 */
.nd-section-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.nd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  min-height: 26px;
}

.nd-section-title {
  font-size: 14px;
  color: #0f172a;
  font-weight: 500;
  font-family: 'Pretendard', sans-serif;
}

.nd-btn-more {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  font-family: 'Pretendard', sans-serif;
  padding: 0;
}

.nd-btn-more:hover {
  color: #64748b;
}

/* 공지사항 */
.nd-notice-card {
  /* height: 219px; */
  height: 100%;
}

.nd-notice-list {
  padding: 8px;
  height: calc(100% - 51px);
  overflow-y: auto;
  box-sizing: border-box;
}

.nd-notice-list a {
  text-decoration: none;
}

.nd-notice-item {
  padding: 12px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nd-notice-item:hover {
  background: #f8fafc;
}

.nd-notice-list a+a .nd-notice-item {
  border-top: 1px solid #e2e8f0;
}

.nd-notice-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nd-notice-tag {
  font-size: 14px;
  font-family: 'Pretendard', sans-serif;
}

.nd-tag-blue {
  color: #2563eb;
}

.nd-tag-orange {
  color: #f97316;
}

.nd-notice-date {
  font-size: 14px;
  color: #94a3b8;
  font-family: 'Pretendard', sans-serif;
}

.nd-notice-text {
  font-size: 16px;
  color: #1e293b;
  font-family: 'Pretendard', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* 최근 이벤트 */
.nd-event-card {
  /* height: 219px; */
  height: 100%;
}

.nd-btn-export {
  background: #f1f5f9;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Pretendard', sans-serif;
}

.nd-btn-export:hover {
  background: #e2e8f0;
}

.nd-export-icon {
  font-size: 10px;
}

.nd-event-table {
  height: calc(100% - 51px);
  overflow-y: auto;
  box-sizing: border-box;
}

.nd-event-table table {
  width: 100%;
  border-collapse: collapse;
}

.nd-event-table thead th {
  font-size: 14px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 400;
  text-align: left;
  padding: 10px 12px;
  font-family: 'Pretendard', sans-serif;
  background: #fff;
  position: sticky;
  top: 0;
}

.nd-event-table tbody tr {
  height: 40px;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
  transition: background 0.15s ease;
}

.nd-event-table tbody tr:hover {
  background: #f8fafc;
}

.nd-event-table tbody tr.nd-row-danger {
  background: #fef2f2;
}

.nd-event-table tbody tr.nd-row-danger:hover {
  background: #fde8e8;
}

.nd-event-table tbody td {
  padding: 0 14px;
  font-size: 16px;
  font-family: 'Pretendard', sans-serif;
  color: #0f172a;
  vertical-align: middle;
}

.nd-event-table tbody .nd-event-li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
}

.nd-event-table tbody .nd-event-li div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nd-event-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.nd-dot-red {
  background: #dc2626;
}

.nd-dot-orange {
  background: #ff9042;
}

.nd-dot-blue {
  background: #2563eb;
}

.nd-event-type {
  vertical-align: middle;
  font-weight: 800;
}

.nd-muted-text {
  color: #475569;
}

.nd-bold {
  font-weight: 700;
}

/* 이벤트 상태 태그 */
.nd-tag {
  display: inline-block;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 12px;
  font-family: 'Pretendard', sans-serif;
}

.nd-tag-critical {
  background: #dc2626;
  color: #fff;
}

.nd-tag-require {
  background: #fee2e2;
  color: #dc2626;
}

.nd-tag-warning {
  background: #ffedd5;
  color: #ea580c;
}

/* 실시간 모니터링 */
.nd-monitor-card {
  height: auto;
  flex: none;
  display: flex;
  flex-direction: column;
}


.nd-monitor-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nd-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  display: inline-block;
  animation: nd-pulse 2s infinite;
}

@keyframes nd-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.nd-monitor-btns {
  display: flex;
  gap: 8px;
}

.nd-monitor-btns button {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  color: #64748b;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nd-monitor-btns button:hover {
  background: #f1f5f9;
}

.nd-monitor-tabs {
  display: flex;
  align-items: center;
  padding: 10px 16px 11px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.nd-tab-group {
  display: inline-flex;
  gap: 6px;
  background: rgba(226, 232, 240, 0.5);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 8px;
  padding: 5px;
}

.nd-tab-btn {
  background: none;
  border: none;
  border-bottom: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  font-family: 'Pretendard', sans-serif;
}

.nd-tab-btn.active {
  background: #fff;
  color: #2563eb;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.5), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nd-tab-btn:hover {
  color: #2563eb;
}

/* 공통 CCTV 아이템 */
.cctv-item {
  background: #000;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
}

.cctv-item.cctv-alert {
  border: 2px solid #dc2626;
  box-sizing: border-box;
}

.cctv-item.cctv-nosignal {
  border: 2px solid rgba(127, 29, 29, 0.5);
  box-sizing: border-box;
}

.cctv-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  pointer-events: none;
}

.cctv-name {
  display: inline-block;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 12px;
  font-family: 'Pretendard', sans-serif;
  align-self: flex-start;
}

.cctv-name.danger {
  background: #dc2626;
  font-weight: 700;
}

.cctv-name.nosignal {
  background: rgba(127, 29, 29, 0.8);
}

.cctv-event-tag {
  display: inline-block;
  background: rgba(220, 38, 38, 0.8);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 12px;
  font-family: 'Pretendard', sans-serif;
  align-self: flex-start;
}

.cctv-nosignal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 30px;
  z-index: 1;
}

.cctv-nosignal-content .cctv-nosignal-icon {
  font-size: 30px;
  color: #ef4444;
}

.cctv-nosignal-content span {
  font-size: 12px;
  color: #ef4444;
  font-family: 'Pretendard', sans-serif;
}

/* WebRTC 연결 실패 오버레이 (재시도 소진 후) */
.cctv-item.cctv-failed::after {
  content: '\26A0  연결 실패';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  color: #ff9f43;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Pretendard', sans-serif;
  letter-spacing: 0.5px;
  z-index: 5;
  pointer-events: none;
}

.cctv-item.cctv-failed video {
  opacity: 0.3;
}

/* 대시보드 CCTV 그리드 */
.nd-cctv-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: #e2e8f0;
  flex: 1;
  min-height: 0;
}

.nd-cctv-grid .cctv-item {
  flex: 0 0 calc(25% - 1px);
  min-height: 290px;
  aspect-ratio: auto;
}

@media screen and (min-width: 1201px) and (max-width: 1639px) {
  .nd-bottom-wrap {
    flex-direction: row;
  }

  .nd-middle-row {
    flex: 1;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1.5fr;
    max-width: 400px;
  }

  .nd-monitor-card {
    flex: 1;
  }
}

@media screen and (max-width: 1639px) {
  .nd-cctv-grid .cctv-item {
    flex: 0 0 calc(50% - 1px);
  }
}

/* 반응형 - 태블릿 */
@media screen and (max-width: 1200px) {
  .nd-stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .nd-bottom-wrap {
    flex-direction: column;
  }

  .nd-middle-row {
    grid-template-columns: 1fr;
  }

  .nd-notice-card,
  .nd-event-card {
    height: auto;
    min-height: 219px;
  }

  .nd-wrap {
    height: auto;
    min-height: calc(100vh - 60px);
    overflow: auto;
  }

  .nd-cctv-grid .cctv-item {
    min-height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* 반응형 - 모바일 */
@media screen and (max-width: 768px) {
  .nd-stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .nd-cctv-grid .cctv-item {
    min-width: 100%;
  }
}

/* ===== //New Dashboard ===== */

/* ===== CCTV More Modal ===== */
.cctv-modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(43, 43, 43, 0.8);
  backdrop-filter: blur(7px);
  z-index: 9999;
}

.cctv-modal-backdrop.open {
  display: block;
}

.cctv-modal {
  background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 헤더 */
.cctv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 64px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.cctv-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.cctv-modal-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: nd-pulse 2s infinite;
}

.cctv-modal-title strong {
  color: #0f172a;
  font-weight: 700;
  letter-spacing: -0.35px;
}

.cctv-modal-divider {
  color: #94a3b8;
  font-weight: 300;
}

.cctv-modal-count {
  color: #64748b;
  font-weight: 500;
}

.cctv-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cctv-modal-channel-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.cctv-modal-channel-btn {
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Pretendard', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.cctv-modal-channel-btn:hover {
  color: #2563eb;
}

.cctv-modal-channel-btn.active {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.cctv-modal-page-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
}

.cctv-modal-page-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #475569;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.cctv-modal-page-btn:hover:not(:disabled) {
  border-color: #2563eb;
  color: #2563eb;
}

.cctv-modal-page-btn:disabled {
  background: #f8fafc;
  color: #cbd5e1;
  cursor: not-allowed;
}

.cctv-modal-page-text {
  min-width: 42px;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.cctv-modal-sep {
  width: 1px;
  height: 24px;
  background: #e2e8f0;
}

.cctv-modal-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  font-size: 18px;
  color: #64748b;
  line-height: 1;
}

.cctv-modal-action-btn:hover {
  background: #f1f5f9;
}

.cctv-modal-close-btn {
  font-size: 22px;
}

/* 탭 */
.cctv-modal-tabs {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 20px 11px;
  flex-shrink: 0;
}

.cctv-modal-tab-group {
  display: inline-flex;
  gap: 6px;
  background: rgba(226, 232, 240, 0.5);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 8px;
  padding: 5px;
}

.cctv-modal-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  border-radius: 4px;
  font-family: 'Pretendard', sans-serif;
}

.cctv-modal-tab.active {
  background: #fff;
  color: #2563eb;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.5), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cctv-modal-tab:hover {
  color: #2563eb;
}

/* 바디 */
.cctv-modal-body {
  flex: 1;
  background: #f1f5f9;
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 그리드 */
.cctv-modal-grid {
  display: grid;
  grid-template-columns: repeat(var(--cctv-modal-cols, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--cctv-modal-rows, 4), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 10px;
  flex: 1;
  min-height: 0;
  height: 100%;
}

/* 모달 CCTV 아이템 (공통 cctv-item 위에 추가) */
.cctv-modal-body .cctv-item {
  border-radius: 10px;
  min-height: 0;
  aspect-ratio: auto;
}

/* 반응형 */
@media screen and (max-width: 1200px) {
  .cctv-modal-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 900px) {
  .cctv-modal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cctv-modal-title-txt {
    display: flex;
    flex-direction: column;
  }

  .cctv-modal-divider {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .cctv-modal-grid {
    grid-template-columns: 1fr;
  }

  .cctv-modal-backdrop .open {
    padding: 0;
  }

  .cctv-name {
    font-size: 12px;
    padding: 4px 8px;
  }

  .cctv-event-tag {
    font-size: 12px;
  }
}

.cctv-modal-grid[data-channel-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.cctv-modal-grid[data-channel-count="8"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.cctv-modal-grid[data-channel-count="16"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

/* 헤더 내 셀렉트박스 */
.cctv-modal-select {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Pretendard', sans-serif;
  color: #0f172a;
  background: #fff;
  cursor: pointer;
  outline: none;
}

.cctv-modal-select:focus {
  border-color: #2563eb;
}

/* ===== //CCTV More Modal ===== */

/* Login responsive overrides */
@media screen and (min-width: 901px) {
  #login-pc {
    display: block !important;
    height: 100%;
  }

  #login-mob {
    display: none !important;
  }
}

@media screen and (max-width: 900px) {
  #login-pc {
    display: none !important;
  }

  #login-mob.m-login_wrap {
    min-height: 100vh;
    height: auto;
    padding: 24px;
    box-sizing: border-box;
    background:
      linear-gradient(180deg, rgba(2, 10, 24, 0.4) 0%, rgba(2, 10, 24, 0.25) 30%, rgba(2, 10, 24, 0.68) 100%),
      url(../images/login-bg.png) center center / cover no-repeat;
  }

  #login-mob.m-login_wrap .body_wrap {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    min-height: calc(100vh - 48px);
    /* height: auto; */
    height: 100% !important;
    padding: 36px 0 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    /* justify-content: center; */
    justify-content: space-between;
    gap: 28px;
    box-sizing: border-box;
  }

  #login-mob.m-login_wrap .body_wrap .tit {
    width: min(420px, 100%);
  }

  #login-mob.m-login_wrap .body_wrap .tit img {
    width: 176px;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(2, 10, 24, 0.28));
  }

  #login-mob.m-login_wrap .body_wrap .tit p {
    margin-top: 22px;
    color: #fff;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 800;
    text-shadow: 0 4px 18px rgba(2, 10, 24, 0.48);
  }

  #login-mob.m-login_wrap .body_wrap .tit p span {
    font-size: 26px;
  }

  #login-mob.m-login_wrap .tit h1 {
    font-size: 30px;
    margin-top: 20px;
  }

  #login-mob.m-login_wrap .body_wrap .container {
    width: min(420px, 100%);
    padding: 20px 20px 20px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 22px;
    box-shadow: 0 22px 60px rgba(2, 10, 24, 0.34);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  /* #login-mob.m-login_wrap .container .login-input-title {
    margin-bottom: 16px;
  }

  #login-mob.m-login_wrap .container .login-input-title p {
    font-size: 30px;
    font-weight: 800;
  } */

  #login-mob.m-login_wrap .body_wrap .login-id,
  #login-mob.m-login_wrap .body_wrap .login-pw {
    height: 56px;
    border-color: #d8dee9;
    border-radius: 10px;
    padding: 0 16px 0 44px;
    background-position: 16px center;
    color: #0f172a;
    font-size: 14px;
  }

  #login-mob.m-login_wrap .body_wrap .login-sm-txt {
    margin: 10px 0 16px;
    color: #64748b;
  }

  #login-mob.m-login_wrap .body_wrap .login-sm-txt span:after {
    color: #e2e8f0;
  }

  #login-mob.m-login_wrap .body_wrap .login-sm-txt a {
    color: #64748b;
  }

  #login-mob.m-login_wrap .body_wrap .blue-bt {
    height: 56px;
    border-radius: 10px;
    /* background: #061a3a; */
    font-size: 16px;
    line-height: 56px;
    box-shadow: 0 12px 26px rgba(6, 26, 58, 0.25);
  }

  #login-mob.m-login_wrap .body_wrap .copy {
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 4px 16px rgba(2, 10, 24, 0.38);
  }
}