@charset "UTF-8";
@import url("../fonts/notokr/notoKR.css");
@import url("../fonts/fontello/css/fontello.css");
@import url("../fonts/openSans/stylesheet.css");
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
  color: #575e67;
  font-family: "notokr", "맑은 고딕", NanumGothic, 나눔고딕, "Spoqa Han Sans", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.03em;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 400; }

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: 500;
  letter-spacing: normal; }

h1.display-5, h1.display-6, h1.display-7 {
  font-weight: 300;
  line-height: 1.2; }

h1.display-5 {
  font-size: 3rem; }

h1.display-6 {
  font-size: 2.5rem; }

h1.display-7 {
  font-size: 2rem; }

.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #303240;
  margin: 0.5rem 0; }
  .h1.color-blue, .h2.color-blue, .h3.color-blue, .h4.color-blue, .h5.color-blue, .h6.color-blue {
    color: #36c8dd; }

.h3 {
  position: relative;
  font-size: 1.375rem; }
  .h3.point {
    padding-left: 24px; }
    .h3.point::before {
      content: '';
      position: absolute;
      display: inline-block;
      width: 14px;
      height: 14px;
      background-image: url("/assets/images/svg/title-point-page-a.svg");
      background-size: cover;
      left: 2px;
      top: 5px; }

.h4 {
  font-size: 1.25rem;
  margin-bottom: 0.3rem; }

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: 500;
  letter-spacing: normal; }

h1.display-5, h1.display-6, h1.display-7 {
  font-weight: 300;
  line-height: 1.2; }

h1.display-5 {
  font-size: 3rem; }

h1.display-6 {
  font-size: 2.5rem; }

h1.display-7 {
  font-size: 2rem; }

.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #303240;
  margin: 0.5rem 0; }
  .h1.color-blue, .h2.color-blue, .h3.color-blue, .h4.color-blue, .h5.color-blue, .h6.color-blue {
    color: #36c8dd; }

.h3 {
  position: relative;
  font-size: 1.375rem; }
  .h3.point {
    padding-left: 24px; }
    .h3.point::before {
      content: '';
      position: absolute;
      display: inline-block;
      width: 14px;
      height: 14px;
      background-image: url("/assets/images/svg/title-point-page-a.svg");
      background-size: cover;
      left: 2px;
      top: 5px; }

.h4 {
  font-size: 1.25rem;
  margin-bottom: 0.3rem; }

a {
  color: #575e67; }
  a:visited {
    color: #575e67; }
  a:hover, a:focus, a:active {
    color: #575e67; }
  a:focus {
    outline: thin dotted; }
  a:hover, a:active {
    outline: 0; }

html {
  height: 100%; }

body {
  min-height: 100%;
  background-color: #f9fbfd;
  color: #575e67;
  letter-spacing: -.03em; }
  body.bg-login {
    height: 100%;
    overflow: hidden;
    background-image: url("/assets/images/jpg/bg-login.jpg");
    background-position: center center;
    background-size: auto;
    background-repeat: no-repeat; }
  body.bg-login-flat {
    background-color: #FFF; }
    body.bg-login-flat .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("/assets/images/jpg/bg-login-water-4-3.jpg");
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 0.95; }
    body.bg-login-flat.new-1 .bg {
      background-image: url("/assets/images/jpg/bg-login-water-4-4.jpg"); }
  body.body-admin {
    overflow-x: hidden;
    background: #728AA5; }

img {
  width: 100%;
  height: auto; }

ul.ul-info {
  padding: 0 0 0 1.5rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.75rem; }

ul.ul-default {
  margin: 0;
  padding: 0 0 0 1rem; }

ul.ul-step {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row; }
  ul.ul-step li {
    position: relative;
    width: 33%;
    text-align: center; }
    ul.ul-step li .desc {
      font-weight: 500;
      font-size: 1.025rem;
      background: #edf2f9;
      margin: 0 2px;
      padding: 0.5rem 0;
      color: #303240;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      background-clip: padding-box; }
      ul.ul-step li .desc span {
        font-weight: 300;
        display: block;
        font-size: 1.5rem;
        margin-top: 0.6rem; }
      ul.ul-step li .desc.bg-2 {
        background: #e1e6ed; }
      ul.ul-step li .desc.bg-3 {
        background: #d5dae0; }
    ul.ul-step li::before {
      content: '\f105';
      font-family: "fontello";
      width: 20px;
      height: 20px;
      line-height: 20px;
      font-size: 1.2rem;
      position: absolute;
      right: -10px;
      display: inline-block;
      top: 24px;
      background-color: white;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      background-clip: padding-box;
      z-index: 10; }
    ul.ul-step li:last-child::before {
      display: none; }

.container-fluid.admin {
  width: 100%;
  min-width: 1900px;
  max-width: inherit; }

.popup-header, .div-search {
  width: 100%;
  /* min-width: 1900px; */
  max-width: inherit; }

small {
  display: inline-block;
  line-height: 1.2rem; }

.no-data {
  text-align: center;
  font-size: 1rem; }
  .no-data figure {
    margin-bottom: 0; }
    .no-data figure img {
      width: 80px;
      height: 80px; }

#bg-over {
  position: fixed;
  z-index: -10;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: all;
  background-color: black;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;
  -ms-transition: opacity 0.25s ease;
  -o-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease; }
  #bg-over.active {
    opacity: 0.7;
    z-index: 2;
    right: 0;
    bottom: 0; }

.header-title {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .header-title .main {
    position: relative;
    font-size: 1.5rem;
    color: #303240;
    margin-bottom: 0;
    padding-left: 24px; }
    .header-title .main::before {
      content: '';
      position: absolute;
      display: inline-block;
      width: 18px;
      height: 18px;
      background-image: url("/assets/images/svg/title-point-page.svg");
      background-size: cover;
      left: 0;
      top: 3px; }
    .header-title .main.index::before {
      background-image: url("/assets/images/svg/title-point-main.svg"); }

.header-title-big {
  position: relative;
  font-size: 2rem;
  color: #303240;
  padding-left: 1rem; }
  .header-title-big::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 2rem;
    left: 0;
    top: 2px;
    display: inline-block;
    background-color: #36c8dd;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-clip: padding-box; }

.row-board .title-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block; }

.row-board .board-new {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }
  .row-board .board-new h4 {
    color: #303240; }
  .row-board .board-new p.lead {
    color: #303240;
    font-size: 1rem;
    font-weight: 400; }

.align-vertical-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.white-space-nowrap {
  white-space: nowrap; }

.section-center {
  left: 0;
  width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.ul-list {
  text-align: left; }

.icon {
  display: block;
  width: 28px;
  height: 28px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto; }
  .icon.icon-home {
    background-image: url("/assets/images/icon/icon-home.svg"); }
  .icon.icon-intro {
    background-image: url("/assets/images/icon/icon-intro.svg"); }
  .icon.icon-charge {
    background-image: url("/assets/images/icon/icon-charge.svg"); }
  .icon.icon-inquiry {
    background-image: url("/assets/images/icon/icon-inquiry.svg"); }
  .icon.icon-meter {
    background-image: url("/assets/images/icon/icon-meter.svg"); }
  .icon.icon-setting {
    background-image: url("/assets/images/icon/icon-setting.svg"); }
  .icon.icon-water-charge {
    background-image: url("/assets/images/icon/icon-water-charge.svg"); }
  .icon.icon-water-calculate {
    background-image: url("/assets/images/icon/icon-water-calculate.svg"); }
  .icon.icon-water-used {
    background-image: url("/assets/images/icon/icon-water-used.svg"); }
  .icon.icon-water-freeze {
    background-image: url("/assets/images/icon/icon-water-freeze.svg"); }
  .icon.icon-water-leak {
    background-image: url("/assets/images/icon/icon-water-leak.svg"); }
  .icon.icon-water-temperature {
    background-image: url("/assets/images/icon/icon-water-temperature.svg"); }
  .icon.icon-intro-1 {
    background-image: url("/assets/images/icon/icon-intro-1.svg"); }
  .icon.icon-intro-2 {
    background-image: url("/assets/images/icon/icon-intro-2.svg"); }
  .icon.icon-intro-3 {
    background-image: url("/assets/images/icon/icon-intro-3.svg"); }
  .icon.icon-intro-4 {
    background-image: url("/assets/images/icon/icon-intro-4.svg"); }
  .icon.icon-water-used-total {
    background-image: url("/assets/images/icon/icon-water-used-total.svg"); }
  .icon.icon-water-used-avg {
    background-image: url("/assets/images/icon/icon-water-used-avg.svg"); }
  .icon.icon-water-used-minmax {
    background-image: url("/assets/images/icon/icon-water-used-minmax.svg"); }
  .icon.icon-water-used-last {
    background-image: url("/assets/images/icon/icon-water-used-last.svg"); }
  .icon.icon-admin-1 {
    background-image: url("/assets/images/icon/icon-admin-1.svg"); }
    .icon.icon-admin-1.active {
      background-image: url("/assets/images/icon/icon-admin-1-white.svg"); }
  .icon.icon-admin-2 {
    background-image: url("/assets/images/icon/icon-admin-2.svg"); }
    .icon.icon-admin-2.active {
      background-image: url("/assets/images/icon/icon-admin-2-white.svg"); }
  .icon.icon-admin-3 {
    background-image: url("/assets/images/icon/icon-admin-3.svg"); }
    .icon.icon-admin-3.active {
      background-image: url("/assets/images/icon/icon-admin-3-white.svg"); }
  .icon.icon-admin-4 {
    background-image: url("/assets/images/icon/icon-admin-4.svg"); }
    .icon.icon-admin-4.active {
      background-image: url("/assets/images/icon/icon-admin-4-white.svg"); }
  .icon.icon-admin-5 {
    background-image: url("/assets/images/icon/icon-admin-5.svg"); }
    .icon.icon-admin-5.active {
      background-image: url("/assets/images/icon/icon-admin-5-white.svg"); }
  .icon.icon-admin-6 {
    background-image: url("/assets/images/icon/icon-admin-6.svg"); }
    .icon.icon-admin-6.active {
      background-image: url("/assets/images/icon/icon-admin-6-white.svg"); }
  .icon.icon-admin-7 {
    background-image: url("/assets/images/icon/icon-admin-7.svg"); }
  .icon.icon-admin-8 {
    background-image: url("/assets/images/icon/icon-admin-8.svg"); }
  .icon.icon-admin-main-1, .icon.icon-admin-main-2, .icon.icon-admin-main-3, .icon.icon-admin-main-4 {
    width: 40px;
    height: 40px; }
  .icon.icon-admin-main-1 {
    background-image: url("/assets/images/icon/icon-admin-main-1.svg"); }
  .icon.icon-admin-main-2 {
    background-image: url("/assets/images/icon/icon-admin-main-2.svg"); }
  .icon.icon-admin-main-3 {
    background-image: url("/assets/images/icon/icon-admin-main-3.svg"); }
  .icon.icon-admin-main-4 {
    background-image: url("/assets/images/icon/icon-admin-main-4.svg"); }

#bg-over {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: all;
  background-color: black;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;
  -ms-transition: opacity 0.25s ease;
  -o-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease; }
  #bg-over.active {
    opacity: 0.7;
    z-index: 2; }

.map-button .button-small {
  border: none;
  outline: none !important;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  cursor: pointer;
  background: transparent;
  display: inline-block;
  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;
  text-align: inherit;
  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: 0;
  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  background-clip: padding-box; }

.btn-default {
  background-color: #e9f3fd;
  border: 1px solid #b3cae2;
  color: #303240; }
  .btn-default:active, .btn-default:focus, .btn-default:hover {
    color: #2b2d3a;
    background-color: #dde7f0;
    border-color: #aac0d7; }
  .btn-default.disabled {
    opacity: 0.4; }

.button-light {
  color: rgba(255, 255, 255, 0.6); }
  .button-light:active, .button-light:focus, .button-light:hover {
    color: white; }

.btn-xs {
  font-size: 0.65rem;
  padding: 0.1rem 0.5rem;
  line-height: 16px;
  margin: 4px 0;
  background-color: #17a2b8; }

.btn-mid {
  height: 28px;
  line-height: 28px;
  padding: 0 1rem;
  position: relative;
  top: -4px; }

.btn-small {
  height: 24px;
  background-color: #e9f3fd;
  border: 1px solid #b3cae2;
  color: #303240;
  font-size: 0.875rem;
  line-height: 0.875rem;
  padding: 0 10px; }
  .btn-small:active, .btn-small:focus, .btn-small:hover {
    color: #2b2d3a;
    background-color: #dde7f0;
    border-color: #aac0d7; }
  .btn-small.dark {
    height: 30px;
    color: rgba(255, 255, 255, 0.7);
    background-color: #022755;
    border-color: #1C3D66;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-clip: padding-box; }
    .btn-small.dark:active, .btn-small.dark:focus, .btn-small.dark:hover {
      color: white; }

.btn-dark {
  font-size: 0.9375rem;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background-clip: padding-box;
  background-color: #303240;
  border-color: #2e303d;
  color: white; }

.box-round-wrap {
  background-color: white;
  padding: 0.5rem 1rem;
  -webkit-border-radius: 1000px;
  border-radius: 1000px;
  background-clip: padding-box; }

.box-oval-wrap {
  position: relative;
  width: 100%;
  height: 100%; }
  .box-oval-wrap .bg-basic {
    width: 100%;
    height: auto; }
  .box-oval-wrap .bg-water {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("/assets/images/svg/bg-water.svg");
    background-size: cover;
    top: 0;
    left: 0; }
    .box-oval-wrap .bg-water .icon {
      margin-top: 5%;
      width: 30%;
      height: 30%; }
  .box-oval-wrap .display-num {
    position: absolute;
    font-size: 2.5rem;
    font-weight: 600;
    color: #303240;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .box-oval-wrap .display-legend {
    position: absolute;
    font-size: 0.9375rem;
    bottom: 10%;
    color: white;
    left: 50%;
    white-space: nowrap;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }

.bg-point {
  background-color: #36c8dd;
  color: #4A4A4A; }
  .bg-point strong {
    font-weight: 500;
    color: white; }

.box {
  background-color: #f9fbfd;
  line-height: 40px;
  display: flex;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-clip: padding-box;
  margin-bottom: 5px; }
  .box__between {
    flex-flow: row;
    justify-content: space-around; }
  .box .num {
    color: #36c8dd;
    font-weight: 500; }

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #6c757d !important; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #6c757d !important; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #6c757d !important; }

::-ms-input-placeholder {
  /* IE Edge+ */
  color: #6c757d !important; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #6c757d !important; }

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #6c757d !important;
  opacity: 1;
  /* Firefox */ }

.input-group-text {
  background-color: #e9f3fd;
  color: #303240;
  border-color: #95c0e2; }

.custom-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #f9fbfd;
  border-color: #95c0e2;
  color: #303240;
  height: calc(2.25rem + 2px); }

.form-control {
  background-color: #f9fbfd;
  border-color: #95c0e2;
  color: #303240; }

.form-check-label {
  color: #575e67; }

.form-group {
  margin-bottom: 0; }

.textarea-comment {
  width: 100%;
  height: 150px;
  border-color: #e9e9e9;
  font-size: 1rem;
  padding: 0.5rem; }

.box-input-color {
  display: inline-block;
  border: 1px solid #28a745;
  width: 12px;
  height: 12px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background-clip: padding-box;
  margin-right: 4px; }

.form-inline-row {
  -ms-flex-flow: row;
  flex-flow: row; }

.bg-box {
  line-height: 20px;
  width: 40px;
  height: 20px;
  background-color: red;
  display: inline-block;
  margin: 0 3px;
  border: 1px solid #e9e9e9;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-clip: padding-box; }

.bg-alert {
  background-color: #949ca5;
  color: white; }

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin-bottom: 0; }
  .switch input {
    opacity: 0;
    width: 0;
    height: 0; }
  .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s; }
    .switch .slider::before {
      position: absolute;
      content: '';
      height: 16px;
      width: 16px;
      left: 2px;
      bottom: 2px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s; }
    .switch .slider.round {
      -webkit-border-radius: 34px;
      border-radius: 34px;
      background-clip: padding-box; }
      .switch .slider.round::before {
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background-clip: padding-box; }

input:checked + .slider {
  background-color: #2196F3; }

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3; }

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px); }

.w-inherit {
  width: inherit !important; }

.chosen-select,
.chosen-select-deselect {
  width: 100%; }

.chosen-container {
  display: inline-block;
  position: relative;
  width: 100% !important;
  min-width: 150px;
  font-size: 1rem;
  text-align: left;
  vertical-align: middle; }
  .chosen-container .chosen-drop {
    background: #fff;
    border: 1px solid rgba(0,0,0,.25);
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    margin-top: -1px;
    position: absolute;
    top: 100%;
    left: -9000px;
    z-index: 1060; }
  .chosen-container.chosen-with-drop .chosen-drop {
    left: 0;
    right: 0; }
  .chosen-container .chosen-results {
    margin: 0;
    position: relative;
    max-height: 15rem;
    padding: .5rem 0 0 0;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
    .chosen-container .chosen-results li {
      display: none;
      line-height: 1.5;
      list-style: none;
      margin: 0;
      padding: .25rem .25rem .25rem 1.5rem; }
      .chosen-container .chosen-results li em {
        font-style: normal;
        color: #6c757d; }
      .chosen-container .chosen-results li.group-result {
        display: list-item;
        cursor: default;
        padding-left: .75rem;
        color: #adb5bd;
        font-weight: normal;
        text-transform: uppercase; }
      .chosen-container .chosen-results li.group-option {
        padding-left: 1.5rem; }
      .chosen-container .chosen-results li.active-result {
        cursor: pointer;
        display: list-item; }
        .chosen-container .chosen-results li.result-selected:before {
          display: inline-block;
          position: relative;
          top: .3rem;
          width: 1.25rem;
          height: 1.25rem;
          margin-left: -1.25rem;
          content: "";
          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23495057' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
          background-size: 1.25rem 1.25rem;
          background-position: center center;
          background-repeat: no-repeat; }
      .chosen-container .chosen-results li.highlighted {
        color: #FFF;
        background-color: #007bff;
        background-image: none;}
        .chosen-container .chosen-results li.highlighted:before {
          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); }
        .chosen-container .chosen-results li.highlighted em {
          background: transparent;
          color: rgba(255, 255, 255, 0.8); }
      .chosen-container .chosen-results li.disabled-result {
        display: list-item;
        color: #ced4da; }
    .chosen-container .chosen-results .no-results {
      display: list-item;
      padding: .25rem 0 1rem 1.065rem;
      color: #dc3545; }
  .chosen-container .chosen-results-scroll {
    background: white;
    margin: 0 .25rem;
    position: absolute;
    text-align: center;
    width: 20rem;
    z-index: 1; }
    .chosen-container .chosen-results-scroll span {
      display: inline-block;
      height: 1.5;
      text-indent: -5000px;
      width: .5rem; }

.chosen-container-single .chosen-single {
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.25);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  color: #6c757d;
  display: block;
  height: calc(2.25rem + 2px);
  overflow: hidden;
  line-height: calc(2.25rem + 2px);
  padding: 0 0 0 .75rem;
  position: relative;
  text-decoration: none;
  white-space: nowrap; }
  .chosen-container-single .chosen-single abbr {
    display: inline-block;
    position: absolute;
    top: .45rem;
    right: 2.5rem;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dc3545' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    background-size: 1.5rem 1.5rem;
    background-position: center center;
    background-repeat: no-repeat; }
    .chosen-container-single .chosen-single abbr:hover {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23921925' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E"); }
  .chosen-container-single .chosen-single span {
    display: block;
    margin-right: 1.5rem;
    text-overflow: ellipsis; }
  .chosen-container-single .chosen-single.chosen-disabled .chosen-single abbr:hover {
    background-position: right 2px; }
  .chosen-container-single .chosen-single div {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem;
    height: 100%;
    padding-left: .5rem;
    background-color: #d7dfe8; }
    .chosen-container-single .chosen-single div:after {
      display: inline-block;
      position: relative;
      top: .25rem;
      left: -1rem;
      width: 2rem;
      height: 2rem;
      content: "";
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23adb5bd' d='M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z'/%3E%3C/svg%3E");
      background-size: 2rem 2rem;
      background-position: center center;
      background-repeat: no-repeat; }

.chosen-container-single .chosen-default {
  color: #adb5bd; }

.chosen-container-single a:not([href]):not([tabindex]) {
  color: #555 !important; }

.chosen-container-single a:not([href]):not([tabindex]).chosen-single:not(.chosen-default) {
  color: #555 !important; }

.chosen-container-single .chosen-search-input {
  display: none;
  border: none; }

.chosen-container-single .chosen-search {
  margin: 0;
  padding: .5rem .5rem 0 .5rem;
  position: relative;
  white-space: nowrap;
  z-index: 1000; }
  .chosen-container-single .chosen-search:after {
    display: inline-block;
    position: relative;
    top: .365rem;
    left: -1.75rem;
    width: 1.25rem;
    height: 1.25rem;
    content: "";
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23adb5bd' d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-size: 1.25rem 1.25rem;
    background-position: center center;
    background-repeat: no-repeat; }
  .chosen-container-single .chosen-search input[type="text"] {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    outline: none;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    padding: .25rem 1rem .25rem .5rem;
    width: 100%; }

.chosen-container-single .chosen-drop {
  margin-top: -1px;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  background-clip: padding-box; }

.chosen-container-single-nosearch .chosen-search {
  display: none; }

.chosen-container-multi .chosen-choices {
  background-color: #d7dfe8;
  border: 1px solid #ced4da;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  cursor: text;
  height: auto !important;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative; }
  .chosen-container-multi .chosen-choices li {
    float: left;
    list-style: none; }
  .chosen-container-multi .chosen-choices .search-field {
    margin: 0;
    padding: 0;
    white-space: nowrap; }
    .chosen-container-multi .chosen-choices .search-field input[type="text"] {
      background: transparent !important;
      border: 0 !important;
      color: #6c757d;
      height: calc(2.25rem + 2px);
      margin: 0;
      padding: 0 0 0 .75rem;
      outline: 0;
      width: 100% !important; }
    .chosen-container-multi .chosen-choices .search-field .default {
      color: #ced4da; }
  .chosen-container-multi .chosen-choices .search-choice {
    background-clip: padding-box;
    position: relative;
    margin: .35rem 0 0 .5rem;
    padding: .25rem 1.5rem .25rem .25rem;
    border: 1px solid #ced4da;
    background-color: #f8f9fa;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    cursor: default;
    font-size: 0.875rem;
    line-height: 1;
    color: #6c757d; }
    .chosen-container-multi .chosen-choices .search-choice .search-choice-close {
      display: inline-block;
      position: absolute;
      top: .2rem;
      right: .125rem;
      width: 1rem;
      height: 1rem;
      cursor: pointer;
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dc3545' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
      background-size: 1rem 1rem;
      background-position: center center;
      background-repeat: no-repeat; }
      .chosen-container-multi .chosen-choices .search-choice .search-choice-close:hover {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23921925' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E"); }
  .chosen-container-multi .chosen-choices .search-choice-focus {
    background: #dee2e6; }
    .chosen-container-multi .chosen-choices .search-choice-focus .search-choice-close {
      background-position: right -11px; }

.chosen-container-multi .chosen-drop .result-selected {
  display: none; }

.chosen-container-active .chosen-single {
  border: 1px solid #80bdff;
  transition: border linear 0ms, box-shadow linear 0ms; }
  @media screen and (prefers-reduced-motion: reduce) {
    .chosen-container-active .chosen-single {
      transition: none; } }

.chosen-container-active.chosen-with-drop .chosen-single {
  background-color: #FFF;
  border: 1px solid rgba(0,0,0,.25);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  transition: border linear 0ms, box-shadow linear 0ms; }
  @media screen and (prefers-reduced-motion: reduce) {
    .chosen-container-active.chosen-with-drop .chosen-single {
      transition: none; } }
  .chosen-container-active.chosen-with-drop .chosen-single div:after {
    display: inline-block;
    position: relative;
    top: .25rem;
    left: -1rem;
    width: 2rem;
    height: 2rem;
    content: "";
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23adb5bd' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
    background-size: 2rem 2rem;
    background-position: center center;
    background-repeat: no-repeat; }

.chosen-container-active .chosen-choices {
  border: 1px solid #80bdff;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  transition: border linear 0ms, box-shadow linear 0ms; }
  @media screen and (prefers-reduced-motion: reduce) {
    .chosen-container-active .chosen-choices {
      transition: none; } }
  .chosen-container-active .chosen-choices .search-field input[type="text"] {
    color: #6c757d !important; }

.chosen-container-active.chosen-with-drop .chosen-choices {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; }

.chosen-container-active.chosen-with-drop .chosen-search-input {
  display: inline-block; }

.chosen-disabled {
  cursor: default;
  opacity: .5 !important; }
  .chosen-disabled .chosen-single {
    cursor: default; }
  .chosen-disabled .chosen-choices .search-choice .search-choice-close {
    cursor: default; }

.chosen-container-optgroup-clickable li.group-result {
  text-transform: none !important; }
  .chosen-container-optgroup-clickable li.group-result:hover {
    background-color: #007bff;
    color: white;
    cursor: pointer; }

.chosen-container.is-valid .chosen-single,
.chosen-container.is-valid .chosen-choices,
.chosen-container.is-valid .chosen-drop, .chosen-container:valid .chosen-single,
.chosen-container:valid .chosen-choices,
.chosen-container:valid .chosen-drop {
  border-color: #28a745; }

.chosen-container.is-invalid .chosen-single,
.chosen-container.is-invalid .chosen-choices,
.chosen-container.is-invalid .chosen-drop, .chosen-container:invalid .chosen-single,
.chosen-container:invalid .chosen-choices,
.chosen-container:invalid .chosen-drop {
  border-color: #dc3545; }

input[type="text"].chosen-focus-input {
  position: absolute;
  top: -9000px;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  outline: 0; }

.input-group:nth-of-type(1) .chosen-container .chosen-choices {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

.input-group:not(:nth-of-type(1)) .chosen-container .chosen-choices {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.input-group:not(:nth-of-type(1)) .input-group-prepend .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.input-group .chosen-container {
  position: relative;
  flex: 1 1 auto;
  width: 1% !important; }

.input-group .chosen-single {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-color: #728aa5; }

.card {
  position: relative;
  border: none;
  padding: 10px 15px; }
  .card.card-left-icon {
    flex-direction: row;
    height: 100%;
    padding: 10px; }
    .card.card-left-icon .div-icon {
      background-color: #f9fbfd;
      min-width: 70px;
      height: 70px;
      overflow: hidden;
      position: relative;
      margin-left: -10px;
      margin-top: -10px;
      margin-bottom: -10px;
      text-align: center;
      padding-top: 10px;
      font-size: 1rem;
      font-weight: 500; }
      .card.card-left-icon .div-icon .icon {
        margin-bottom: 4px;
        opacity: 0.5; }
    .card.card-left-icon .div-txt {
      font-size: 1.25rem;
      line-height: 50px;
      width: 100%;
      text-align: center;
      white-space: nowrap;
      font-weight: 500; }
  .card__dark {
    background-color: #303240;
    color: white; }
    .card__dark .div-privacy a {
      color: #44a7fb !important;
      font-weight: 600;
      font-size: 1rem;
      border-bottom: 1px solid #44a7fb;
      text-decoration: none; }
  .card__bar_top {
    padding: 20px 15px; }
    .card__bar_top::before {
      content: '';
      position: absolute;
      display: inline-block;
      width: 40px;
      height: 4px;
      background-color: #EAEDFF;
      border-radius: 5px;
      top: 10px;
      left: 15px; }
    .card__bar_top a {
      text-decoration: none; }
      .card__bar_top a:hover, .card__bar_top a:focus {
        color: #303240; }
  .card__popup {
    color: #303240; }
    .card__popup-header {
      background-color: transparent;
      padding: 2rem; }
      .card__popup-header h1 {
        margin-bottom: 0; }
  .card__search {
    margin: 1rem 0; }
  .card__point {
    height: calc(100% - (28px + 8px));
    display: flex;
    justify-content: center; }
    .card__point::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 6px;
      height: 100%;
      display: inline-block;
      background-color: #ff8800;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px; }
    .card__point-text {
      padding: 1rem 0;
      font-size: 1.25rem;
      text-align: center;
      line-height: 2rem; }
      .card__point-text strong {
        font-weight: 400;
        color: black; }
      .card__point-text em {
        font-style: normal;
        font-size: 1.875rem;
        font-weight: 500;
        color: #36c8dd; }
        .card__point-text em.black {
          color: black; }
      .card__point-text small {
        font-size: 0.75rem; }
  .card__fixed {
    overflow: hidden;
    overflow-y: auto; }
    @media screen and (max-width: 767px) {
      .card__fixed {
        max-height: inherit !important; } }
  .card__bg {
    padding: 15px;
    background-color: #36c8dd;
    color: white; }
    .card__bg .icon-num-wrap {
      display: flex;
      flex-flow: row;
      align-items: center; }
      .card__bg .icon-num-wrap .icon-wrap {
        padding-right: 15px; }
        .card__bg .icon-num-wrap .icon-wrap .icon {
          opacity: 0.5;
          width: 40px;
          height: 40px; }
      .card__bg .icon-num-wrap .num-wrap {
        text-align: center;
        font-size: 2.5rem;
        width: 100%; }
  .card__login {
    position: relative;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 20px; }
    .card__login .login-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: calc(50% - 50px);
      top: -50px;
      width: 100px;
      height: 100px;
      background: #f9fbfd;
      overflow: hidden;
      border: 1px solid white;
      border-radius: 80px; }
      .card__login .login-logo img {
        position: relative;
        width: 80px;
        height: 80px; }
    .card__login h1 {
      font-size: 3rem;
      margin-top: 2rem;
      font-weight: 300;
      font-family: "Open Sans", "notokr", "맑은 고딕", NanumGothic, 나눔고딕, "Spoqa Han Sans", "Helvetica Neue", Arial, sans-serif;
      color: white; }
    .card__login .form-control {
      border-radius: 50px; }
    .card__login .form-check-label {
      color: white; }
    .card__login .btn {
      font-size: 0.9375rem;
      border-radius: 100px;
      background-color: #303240;
      border-color: #2e303d;
      color: white; }
  .card .pagination-wrap {
    margin-top: 1rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between; }
    .card .pagination-wrap .pagination {
      margin-bottom: 0; }
      .card .pagination-wrap .pagination .page-item .page-link {
        border-color: #e9e9e9;
        color: #575e67; }
        .card .pagination-wrap .pagination .page-item .page-link:hover, .card .pagination-wrap .pagination .page-item .page-link:focus {
          color: #303240; }
      .card .pagination-wrap .pagination .page-item.active .page-link {
        background-color: #f7f8fa;
        color: #303240; }

table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {
  bottom: 20%;
  opacity: 0.2; }

table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:after {
  opacity: 1; }

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
  content: "\2b06"; }

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
  right: 0.2rem;
  content: "\2b07"; }

.table__normal {
  background-color: white;
  width: 100%;
  margin-bottom: 0; }
  .table__normal thead th {
    border-top-color: #e9e9e9;
    border-top-width: 1px;
    border-bottom-color: #e9e9e9;
    border-bottom-width: 1px;
    border-right: none;
    padding-left: 2px;
    padding-right: 2px; }
  .table__normal thead.word-break-keep-all th {
    word-break: keep-all; }
  .table__normal thead.white-space-nowrap th {
    white-space: nowrap; }
  .table__normal tr.has-line-top {
    border-top: 1px solid #e9e9e9; }
  @media screen and (max-width: 991px) {
    .table__normal tr.line-top-disable-mobile {
      border-top: none; } }
  .table__normal th, .table__normal td {
    border-bottom: 1px solid #e9e9e9;
    border-top-color: #e9e9e9;
    border-top-width: 0;
    padding: 5px 10px;
    vertical-align: middle !important; }
  .table__normal th {
    background-color: #f9fbfd;
    font-weight: 500;
    color: #303240;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    vertical-align: middle; }
    .table__normal th:first-child {
      border-left: none; }
    .table__normal th.border-left-solid {
      border-left: 1px solid #e9e9e9; }
  .table__normal td {
    /* border-left: 1px solid #e9e9e9; */
    border: 1px solid #e9e9e9;
    }
    .table__normal td:first-child {
      border-left: none; }
  .table__normal .vertical-align-middle {
    vertical-align: middle; }
  .table__normal caption {
    text-align: right;
    caption-side: top;
    padding: 0.2rem 0 0.1rem;
    font-size: 80%;
    line-height: 1rem; }
  .table__normal .form-control {
    width: 100px;
    margin: 0 auto; }
  .table__normal.with-auto .form-control {
    width: 100%; }

.table__data-dark {
  background-color: transparent; }
  .table__data-dark th {
    background-color: rgba(0, 0, 0, 0.2); }
  .table__data-dark thead th {
    color: rgba(255, 255, 255, 0.7);
    border-color: #061832; }
    .table__data-dark thead th.border-left-solid {
      border-left-color: #061832; }
  .table__data-dark th, .table__data-dark td {
    border-color: #061832; }
  .table__data-dark td {
    text-align: center; }

.table__data-light {
  background-color: white; }
  .table__data-light th {
    background-color: rgba(0, 0, 0, 0.05); }

.table__data-opacity {
  opacity: 0; }

.table__mid_height th, .table__mid_height td {
  line-height: 39px; }

.table__line-light {
  border-color: #f4f4f4; }
  .table__line-light th, .table__line-light td {
    border-color: #f4f4f4; }

.table__noline {
  border: none; }
  .table__noline th, .table__noline td {
    border: none;
    vertical-align: middle; }
  .table__noline th {
    background-color: noone;
    border: none; }

.table__form {
  width: 100%; }
  .table__form th {
    font-weight: 400;
    color: #303240; }
  .table__form td {
    padding: 4px 2px; }

.table__form_input tr {
  height: 45px; }

.table__form_input th, .table__form_input td {
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle; }

.table__fixed {
  opacity: 0; }
  .table__fixed.is-visible {
    opacity: 1; }
  .table__fixed thead th[rowspan] {
    position: relative;
    border-bottom: 1px solid #0E2747;
    overflow: inherit; }
    .table__fixed thead th[rowspan] span {
      position: absolute;
      top: 17px;
      margin-left: -7px; }
  .table__fixed tbody {
    position: relative;
    height: 224px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%; }
    .table__fixed tbody::-webkit-scrollbar {
      width: 0; }
    @media screen and (max-width: 767px) {
      .table__fixed tbody {
        height: inherit !important; } }
  .table__fixed thead, .table__fixed tbody, .table__fixed tr, .table__fixed td, .table__fixed th {
    display: block; }
  .table__fixed tr::after {
    content: '';
    display: block;
    visibility: hidden;
    clear: both; }
  .table__fixed tbody td, .table__fixed thead > tr > th {
    float: left;
    white-space: nowrap;
    overflow: hidden; }

.table .split-wrap {
  display: flex;
  flex-flow: row;
  align-items: center; }
  .table .split-wrap span {
    flex: 1 1 50%;
    overflow: hidden;
    white-space: nowrap;
    border-left: 1px solid #e9e9e9; }
    .table .split-wrap span:first-child {
      border-left: none; }

.table .comment-textarea {
  width: 100%;
  padding: 1rem;
  max-height: 500px;
  overflow-y: auto;
  display: block;
  height: 100vh;
  outline: none;
  border-color: #e9e9e9; }

.table .comment-area {
  width: 100%;
  padding: 1rem;
  max-height: 500px;
  overflow-y: auto;
  display: block; }
  .table .comment-area.half {
    max-height: 200px; }
  .table .comment-area.question {
    max-height: 200px; }
  .table .comment-area.answer {
    margin-top: 10px;
    position: relative;
    padding-top: 30px;
    background-color: #f9fbfd;
    max-height: 240px; }
    .table .comment-area.answer::before {
      position: absolute;
      content: '답변';
      background-color: #e0e2e4;
      top: 0;
      left: 0;
      width: 100%;
      height: 30px;
      text-align: center;
      line-height: 30px; }

.table .bg-meter-empty {
  background-color: #f0f0f0; }

.table .bg-meter-ok {
  background-color: #ffd957;
  color: #303240; }

.table .bg-answer {
  background-color: #edeef0; }

.table ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left; }

@media screen and (max-width: 767px) {
  .table-responsive .table {
    min-width: 640px; } }

.border-right-none {
  border-right: none !important; }

.border-top-none {
  border-top: none !important; }

.datatables-responsive .dataTables_wrapper {
  display: none; }

@media screen and (max-width: 767px) {
  .datatables-responsive .DTFC_ScrollWrapper {
    height: auto !important; }
    .datatables-responsive .DTFC_ScrollWrapper .dataTables_scrollBody {
      height: auto !important; } }

div.DTFC_LeftHeadWrapper table, div.DTFC_RightHeadWrapper table {
  background-color: #10294c; }

div.DTFC_LeftHeadWrapper table.table__data-light, div.DTFC_RightHeadWrapper table.table__data-light {
  background-color: #ebebeb;
  color: #303240; }

table.table__data-light.DTFC_Cloned tr {
  background-color: rgba(0, 0, 0, 0.05);
  color: #303240; }

.container-fluid {
  max-width: 1440px; }

.font-weight-semi-bold {
  font-weight: 500; }

.nav-pills .nav-link {
  color: #36c8dd; }
  .nav-pills .nav-link.active {
    color: white;
    background-color: #949ca5; }

.ui-datepicker-title select {
  color: black; }

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: block;
  overflow-x: hidden;
  width: 100%;
  max-width: 80px;
  background-color: #303240;
  padding: 0;
  margin: 0;
  z-index: 100;
  transition: left 0.3s ease; }
  @media screen and (prefers-reduced-motion: reduce) {
    .navbar {
      transition: none; } }
  .navbar .navbar-nav .nav-item {
    position: relative;
    height: 80px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
    .navbar .navbar-nav .nav-item .nav-link {
      padding: 15px 0;
      text-align: center;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.3);
      font-weight: 500;
      transition: color 0.3s ease; }
      @media screen and (prefers-reduced-motion: reduce) {
        .navbar .navbar-nav .nav-item .nav-link {
          transition: none; } }
      .navbar .navbar-nav .nav-item .nav-link i {
        opacity: 0.5;
        transition: opacity 0.3s ease; }
        @media screen and (prefers-reduced-motion: reduce) {
          .navbar .navbar-nav .nav-item .nav-link i {
            transition: none; } }
    .navbar .navbar-nav .nav-item .sub-menu {
      display: none;
      position: fixed;
      background-color: #2b2d3a;
      margin-top: -82px;
      margin-left: 80px;
      list-style: none;
      padding: 0;
      z-index: 100; }
      .navbar .navbar-nav .nav-item .sub-menu .sub-menu-item {
        position: relative; }
        .navbar .navbar-nav .nav-item .sub-menu .sub-menu-item .sub-menu-link {
          display: block;
          line-height: 40px;
          word-break: keep-all;
          color: rgba(255, 255, 255, 0.3);
          padding: 0 20px;
          text-decoration: none;
          transition: color 0.3s ease; }
          @media screen and (prefers-reduced-motion: reduce) {
            .navbar .navbar-nav .nav-item .sub-menu .sub-menu-item .sub-menu-link {
              transition: none; } }
          .navbar .navbar-nav .nav-item .sub-menu .sub-menu-item .sub-menu-link:focus, .navbar .navbar-nav .nav-item .sub-menu .sub-menu-item .sub-menu-link:hover {
            color: white; }
        .navbar .navbar-nav .nav-item .sub-menu .sub-menu-item.active .sub-menu-link {
          color: white; }
        .navbar .navbar-nav .nav-item .sub-menu .sub-menu-item:focus::before, .navbar .navbar-nav .nav-item .sub-menu .sub-menu-item:hover::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: inline-block;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: -1; }
    .navbar .navbar-nav .nav-item.active .nav-link {
      color: #36c8dd; }
      .navbar .navbar-nav .nav-item.active .nav-link::after {
        content: '';
        position: absolute;
        right: -16px;
        top: 28px;
        width: 20px;
        height: 20px;
        display: inline-block;
        background-color: #f9fbfd;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        transition: right 0.4s ease; }
        @media screen and (prefers-reduced-motion: reduce) {
          .navbar .navbar-nav .nav-item.active .nav-link::after {
            transition: none; } }
      .navbar .navbar-nav .nav-item.active .nav-link i {
        opacity: 1; }
    .navbar .navbar-nav .nav-item:focus::before, .navbar .navbar-nav .nav-item:hover::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: inline-block;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: -1; }
    .navbar .navbar-nav .nav-item:focus .nav-link, .navbar .navbar-nav .nav-item:hover .nav-link {
      color: white; }
      .navbar .navbar-nav .nav-item:focus .nav-link i, .navbar .navbar-nav .nav-item:hover .nav-link i {
        opacity: 1; }
      .navbar .navbar-nav .nav-item:focus .nav-link::after, .navbar .navbar-nav .nav-item:hover .nav-link::after {
        right: -40px; }
    .navbar .navbar-nav .nav-item:focus .sub-menu, .navbar .navbar-nav .nav-item:hover .sub-menu {
      display: block; }
  @media screen and (max-width: 767px) {
    .navbar {
      top: 60px;
      left: calc( 70% * -1);
      margin-left: 0;
      max-width: 70%;
      transition: margin-left 0.4s ease; } }
  @media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .navbar {
      transition: none; } }
  @media screen and (max-width: 767px) {
      .navbar .navbar-nav .nav-item {
        height: inherit; }
        .navbar .navbar-nav .nav-item.nav-item-home {
          display: none; }
        .navbar .navbar-nav .nav-item .nav-link {
          text-align: inherit;
          padding: 0 15px;
          display: flex;
          align-items: center;
          line-height: 40px; }
          .navbar .navbar-nav .nav-item .nav-link i {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            margin-left: 0; }
          .navbar .navbar-nav .nav-item .nav-link::after {
            opacity: 0; }
        .navbar .navbar-nav .nav-item.nav-item-has-children::after {
          content: '\f107';
          position: absolute;
          font-family: "fontello";
          right: 0;
          top: 0;
          width: 40px;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.1);
          text-align: center;
          padding-top: 8px; }
        .navbar .navbar-nav .nav-item.nav-item-has-children.is-active::after {
          content: '\f106'; }
        .navbar .navbar-nav .nav-item.nav-item-has-children .sub-menu {
          position: relative;
          display: none;
          margin-top: inherit;
          margin-left: inherit; }
          .navbar .navbar-nav .nav-item.nav-item-has-children .sub-menu .sub-menu-item {
            border-top: 1px solid rgba(255, 255, 255, 0.02); } }
  .navbar.active {
    margin-left: 70%; }

.main-content {
  margin-left: 80px; }
  .main-content .main-content-header {
    height: 80px;
    background-color: white;
    width: 100%;
    padding: 0 40px; }
  .main-content .content-area {
    padding: 10px 40px 0; }
  @media screen and (max-width: 1439px) {
    .main-content .main-content-header, .main-content .content-area {
      padding-left: 10px;
      padding-right: 10px; } }
  @media screen and (max-width: 767px) {
    .main-content {
      margin-left: 0;
      margin-top: 60px; }
      .main-content .main-content-header, .main-content .content-area {
        padding-left: 0;
        padding-right: 0; }
      .main-content .main-content-header {
        height: 60px;
        top: 0;
        position: fixed;
        z-index: 100; } }

.site-header {
  min-width: 1900px; }
  .site-header .navbar-wrapper {
    background-color: white;
    height: 60px;
    border-bottom: 1px solid #e9e9e9; }
    .site-header .navbar-wrapper .navbar-header {
      display: flex;
      justify-content: space-around; }
      .site-header .navbar-wrapper .navbar-header .site-logo {
        width: 270px;
        margin-bottom: 0; }
        .site-header .navbar-wrapper .navbar-header .site-logo a {
          display: block;
          width: 87px;
          margin: 5px auto; }
          .site-header .navbar-wrapper .navbar-header .site-logo a img {
            width: 87px;
            height: 40px; }
      .site-header .navbar-wrapper .navbar-header .navbar-nav {
        display: flex;
        flex-flow: row;
        z-index: 10000; }
        .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item {
          position: relative; }
          .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .nav-link {
            padding: 0;
            width: 230px;
            height: 60px;
            line-height: 60px;
            overflow: hidden;
            font-size: 20px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.7);
            border-right: 1px solid #e9e9e9;
            transition: all 0.3s ease; }
            @media screen and (prefers-reduced-motion: reduce) {
              .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .nav-link {
                transition: none; } }
            .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .nav-link .icon {
              position: relative;
              width: 24px;
              height: 24px;
              display: inline-block;
              margin: 0 10px 0 15px;
              top: 5px; }
            .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .nav-link:active, .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .nav-link:focus, .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .nav-link:hover {
              color: white;
              background-color: #44a7fb; }
          .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .span-cross {
            position: absolute;
            right: 15px;
            top: 26px;
            display: inline-block;
            width: 10px;
            height: 5px;
            background-image: url("/assets/images/icon/icon-admin-cross.svg");
            background-repeat: no-repeat;
            background-size: cover; }
            .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .span-cross.active {
              background-image: url("/assets/images/icon/icon-admin-cross-white.svg"); }
          .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item:first-child .nav-link {
            border-left: 1px solid #e9e9e9; }
          .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .sub-menu {
            z-index: 100;
            position: absolute;
            left: -9999px;
            width: 230px;
            display: flex;
            flex-flow: column;
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: white;
            overflow: hidden;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px; }
            .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .sub-menu .sub-menu-item .sub-menu-link {
              position: relative;
              display: block;
              width: 100%;
              line-height: 40px;
              padding: 0 0 0 20px;
              font-size: 18px;
              border-bottom: 1px solid #e9e9e9;
              color: #73809C;
              text-decoration: none;
              transition: all 0.3s ease; }
              @media screen and (prefers-reduced-motion: reduce) {
                .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .sub-menu .sub-menu-item .sub-menu-link {
                  transition: none; } }
              .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .sub-menu .sub-menu-item .sub-menu-link:active, .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .sub-menu .sub-menu-item .sub-menu-link:hover, .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .sub-menu .sub-menu-item .sub-menu-link:focus {
                background-color: #f4f4f4; }
            .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .sub-menu .sub-menu-item.active .sub-menu-link::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 5px;
              height: 40px;
              display: inline-block;
              background-color: #44a7fb; }
            .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .sub-menu .sub-menu-item:last-child .sub-menu-link {
              border-bottom: none; }
          .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item.active .nav-link {
            color: white;
            background-color: #44a7fb; }
          .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item:active .nav-link, .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item:hover .nav-link, .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item:focus .nav-link {
            color: white;
            background-color: #44a7fb; }
          .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item:active .sub-menu, .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item:hover .sub-menu, .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item:focus .sub-menu {
            left: 0; }
      .site-header .navbar-wrapper .navbar-header .navbar-login {
        width: 270px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
        font-size: 1.25rem;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.7); }
        .site-header .navbar-wrapper .navbar-header .navbar-login a {
          opacity: 0.8;
          transition: opacity 0.3s ease; }
          .site-header .navbar-wrapper .navbar-header .navbar-login a .icon {
            margin-left: 15px;
            margin-right: 0; }
          @media screen and (prefers-reduced-motion: reduce) {
            .site-header .navbar-wrapper .navbar-header .navbar-login a {
              transition: none; } }
          .site-header .navbar-wrapper .navbar-header .navbar-login a:active, .site-header .navbar-wrapper .navbar-header .navbar-login a:focus, .site-header .navbar-wrapper .navbar-header .navbar-login a:hover {
            opacity: 1; }

.body-admin-new.new .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .nav-link:active, .body-admin-new.new .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .nav-link:focus, .body-admin-new.new .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .nav-link:hover {
  color: white;
  background-color: #ff7412; }

.body-admin-new.new .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item .sub-menu .sub-menu-item.active .sub-menu-link::before {
  background-color: #ff7412; }

.body-admin-new.new .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item.active .nav-link {
  color: white;
  background-color: #ff7412; }
  .body-admin-new.new .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item.active .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 1px);
    height: 5px;
    background-color: #803a09; }

.body-admin-new.new .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item:active .nav-link, .body-admin-new.new .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item:hover .nav-link, .body-admin-new.new .site-header .navbar-wrapper .navbar-header .navbar-nav .nav-item:focus .nav-link {
  color: white;
  background-color: #ff7412; }

.main-content.login-bg {
  margin: 0;
  height: 100vh;
  background-color: white;
  background-image: url("../images/jpg/bg-login-water-0.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: left; }
  .main-content.login-bg::before {
    content: ''; }
  @media screen and (max-width: 991px) {
    .main-content.login-bg {
      background-size: cover; } }
  .main-content.login-bg .logo-kwater {
    width: 180px;
    height: auto; }
  .main-content.login-bg h1 {
    font-size: 3.5rem;
    color: #002E6D; }
    @media screen and (max-width: 1439px) {
      .main-content.login-bg h1 {
        font-size: 2.8rem; } }
    @media screen and (max-width: 1199px) {
      .main-content.login-bg h1 {
        font-size: 2.6rem; } }
    @media screen and (max-width: 767px) {
      .main-content.login-bg h1 {
        font-size: 2.4rem; } }
    @media screen and (max-width: 575px) {
      .main-content.login-bg h1 {
        font-size: 1.8rem; } }
  .main-content.login-bg .form-control {
    height: 50px;
    line-height: 50px; }
  @media screen and (max-width: 1199px) {
    .main-content.login-bg .custom-control-label {
      color: white;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); } }
  .main-content.login-bg .btn-default {
    background-color: #048AE6;
    color: white;
    font-size: 15px;
    font-weight: 500;
    height: 50px;
    min-width: 100px; }
    .main-content.login-bg .btn-default.btn-big {
      height: 100%; }
      @media screen and (max-width: 575px) {
        .main-content.login-bg .btn-default.btn-big {
          height: 50px; } }
  .main-content.login-bg .container-fluid {
    max-width: none; }
  .main-content.login-bg .login-privacy {
    margin-left: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #303240;
    border-bottom: 1px solid #303240;
    text-decoration: none; }

.main-content-header .navbar-toggle-mobile {
  position: absolute;
  cursor: pointer;
  width: 40px;
  height: 60px;
  background-color: transparent;
  border: none;
  text-indent: -9999px;
  outline: none;
  padding: 0;
  transition: background-color 0.3s ease; }
  @media screen and (prefers-reduced-motion: reduce) {
    .main-content-header .navbar-toggle-mobile {
      transition: none; } }
  .main-content-header .navbar-toggle-mobile span {
    display: block;
    position: absolute;
    top: 28px;
    left: 5px;
    right: 5px;
    height: 3px;
    background: #303240;
    transition: background 0s, 0.12s; }
    @media screen and (prefers-reduced-motion: reduce) {
      .main-content-header .navbar-toggle-mobile span {
        transition: none; } }
    .main-content-header .navbar-toggle-mobile span::before, .main-content-header .navbar-toggle-mobile span::after {
      content: '';
      position: absolute;
      display: block;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: #303240;
      -webkit-transition-duration: 0.12s, 0.12s;
      transition-duration: 0.12s, 0.12s;
      -webkit-transition-delay: 0.12s, 0s;
      transition-delay: 0.12s, 0s; }
    .main-content-header .navbar-toggle-mobile span::before {
      top: -8px;
      -webkit-transition-property: top, transform;
      transition-property: top, transform; }
    .main-content-header .navbar-toggle-mobile span::after {
      bottom: -8px;
      -webkit-transition-property: bottom, transform;
      transition-property: bottom, transform; }
  .main-content-header .navbar-toggle-mobile.active span {
    background-color: transparent; }
    .main-content-header .navbar-toggle-mobile.active span::before, .main-content-header .navbar-toggle-mobile.active span::after {
      -webkit-transition-delay: 0s, 0.12s;
      transition-delay: 0s, 0.12s; }
    .main-content-header .navbar-toggle-mobile.active span::before {
      top: 0;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
    .main-content-header .navbar-toggle-mobile.active span::after {
      bottom: 0;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg); }

.main-content-header .site-logo {
  margin-bottom: 0; }
  .main-content-header .site-logo a img {
    width: 110px;
    height: 50px; }
    @media screen and (max-width: 767px) {
      .main-content-header .site-logo a img {
        width: 88px;
        height: 40px; } }
  @media screen and (max-width: 767px) {
    .main-content-header .site-logo {
      margin: 0 auto; } }

.main-content-header .user-info .user-info-pc {
  font-size: 1.25rem; }

.main-content-header .user-info .user-info-mobile {
  font-size: 1.5rem; }
  .main-content-header .user-info .user-info-mobile .ul-user-info {
    display: none;
    font-size: 0.875rem;
    position: absolute;
    margin: 0;
    top: calc( 60px - 10px);
    right: 15px;
    list-style: none;
    padding: 0.5rem 1rem;
    background-color: white;
    border: 1px solid #e9f3fd;
    border-radius: 3px; }
    .main-content-header .user-info .user-info-mobile .ul-user-info .menu-item {
      line-height: 30px; }
      .main-content-header .user-info .user-info-mobile .ul-user-info .menu-item a:focus, .main-content-header .user-info .user-info-mobile .ul-user-info .menu-item a:hover {
        color: #303240; }
    .main-content-header .user-info .user-info-mobile .ul-user-info::before {
      content: '';
      position: absolute;
      right: 5px;
      top: -3px;
      width: 20px;
      height: 20px;
      background-color: #e9f3fd;
      display: inline-block;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      z-index: -2; }
    .main-content-header .user-info .user-info-mobile .ul-user-info::after {
      content: '';
      position: absolute;
      right: 6px;
      top: -2px;
      width: 19px;
      height: 20px;
      background-color: white;
      display: inline-block;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      z-index: 1; }
  .main-content-header .user-info .user-info-mobile.active .ul-user-info {
    display: block; }

@media screen and (max-width: 767px) {
  .row-charge p.lead {
    font-size: 1rem; } }

.box-oval-wrap-group {
  padding: 0 31px;
  height: 198px;
  min-height: 200px; }
  @media screen and (max-width: 1199px) {
    .box-oval-wrap-group {
      padding: 0 15px;
      min-height: inherit;
      height: inherit; } }
  @media screen and (max-width: 575px) {
    .box-oval-wrap-group {
      padding: 0 15px; } }

.main-contact {
  font-size: 0.8125rem;
  line-height: 20px; }

.modal {
  z-index: 100000; }
  .modal .modal-dialog:not(.modal-sm) {
    max-width: 600px; }
  .modal .modal-lg {
    max-width: 900px; }
    @media screen and (max-width: 991px) {
      .modal .modal-lg {
        max-width: 550px; } }
  .modal__trans .modal-content {
    border-radius: 22px; }
    .modal__trans .modal-content .form-control {
      border-radius: 50px; }
    .modal__trans .modal-content .modal-header {
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      background-color: #303240; }
      .modal__trans .modal-content .modal-header .modal-title {
        color: white; }
    .modal__trans .modal-content .modal-footer {
      background-color: #303240;
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px; }
      .modal__trans .modal-content .modal-footer .btn {
        font-size: 0.9375rem;
        border-radius: 100px;
        background-color: #f9fbfd;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        border-color: #edeef0;
        color: #303240; }
  .modal__flat .modal-content {
    background-color: #3d9ad4;
    border-radius: 0; }
    .modal__flat .modal-content .modal-header {
      border-radius: 0;
      border: none; }
    .modal__flat .modal-content .form-control {
      border-color: rgba(0, 0, 0, 0.05);
      height: 50px;
      margin-bottom: 1rem;
      border-radius: 0; }
    .modal__flat .modal-content .modal-body {
      color: white; }
    .modal__flat .modal-content .modal-footer {
      padding: 0;
      display: flex;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      background-color: rgba(0, 0, 0, 0.05); }
      .modal__flat .modal-content .modal-footer .btn {
        flex: 1 1 1%;
        margin: 0;
        border: none;
        height: 50px;
        background-color: transparent;
        border-radius: 0;
        border-left: 1px solid rgba(0, 0, 0, 0.05); }
        .modal__flat .modal-content .modal-footer .btn.btn-point {
          background-color: rgba(255, 255, 255, 0.2); }
        .modal__flat .modal-content .modal-footer .btn:first-child {
          border-left: none; }
        .modal__flat .modal-content .modal-footer .btn:active, .modal__flat .modal-content .modal-footer .btn:hover {
          color: white;
          background-color: rgba(0, 46, 109, 0.95); }

.modal-content {
  background-color: white;
  color: #000;
  border-radius: 5px; }
  .modal-content .modal-header {
    background-color: #f9fbfd;
    border-bottom: 1px solid #e9e9e9;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; }
    .modal-content .modal-header .modal-title {
      font-weight: 500;
      color: #303240; }
    .modal-content .modal-header .close {
      color: #949ca5;
      opacity: 1;
      text-shadow: none;
      outline: none; }
  .modal-dialog:not(.modal-sm) .modal-body {
    min-height: 400px;
    padding: 2rem; }
    .modal-content .modal-body.wide-mode {
      padding: 1rem 0; }
    @media screen and (max-width: 767px) {
      .modal-content .modal-body {
        padding: 2rem 1rem; } }
    .modal-content .modal-body span.point {
      color: #36c8dd;
      font-size: 1.2rem; }
    .modal-content .modal-body.min-height-100p {
      min-height: inherit; }
    .modal-content .modal-body .modal-body-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      color: white;
      font-size: 1.2rem;
      margin-bottom: 1rem; }
      .modal-content .modal-body .modal-body-header h5 {
        font-size: 1.2rem;
        display: inline-block;
        opacity: 0.4;
        font-weight: 400;
        margin-right: 0.625rem;
        margin-bottom: 0; }
      .modal-content .modal-body .modal-body-header i {
        font-style: normal; }
    .modal-content .modal-body .modal-body-search {
      background: #F2F8FF;
      padding: 10px 1.4rem;
      margin-left: -1rem;
      margin-right: -1rem; }
  .modal-content .modal-footer {
    justify-content: center;
    background-color: #f9fbfd;
    border-top: 1px solid #e9e9e9;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px; }
  .modal-content .privacy-box p {
    margin-bottom: 0.2rem; }
    .modal-content .privacy-box p.strong {
      font-weight: 600; }
  .modal-content .privacy-box .div-box {
    border: 1px solid #e9e9e9;
    padding: 1rem;
    font-size: 1rem; }
  .modal-content .privacy-box h6 {
    font-size: 1rem;
    margin: 1rem 0 0.2rem;
    font-weight: 600;
    color: black; }
  .modal-content .privacy-box ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    .modal-content .privacy-box ul li {
      padding-left: 1rem; }
  .modal-content .div-agree-wrap {
    font-size: 1rem;
    color: black; }
    .modal-content .div-agree-wrap input {
      margin: 0 5px 0 10px;
      position: relative;
      top: -2px; }

.body-admin .modal-content {
  border-radius: 0; }
  .body-admin .modal-content .modal-body {
    background-color: #728AA5;
    padding: 1rem; }

.body-admin .modal .modal-lg {
  max-width: 1300px; }

.chart-warp {
  width: 100%;
  margin-bottom: 0.2rem;
  letter-spacing: normal; }

.greeting {
  font-size: 1rem; }
  .greeting .lead {
    color: #303240; }
  .greeting strong {
    font-weight: 600;
    color: #34383e; }

.round-box {
  position: relative;
  background-color: white;
  border: 1px solid #edeef0;
  padding: 0.2rem 1.5rem;
  text-align: center;
  border-radius: 5px;
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center; }
  .round-box.compare {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-height: 120px; }
  .round-box.bg-blue {
    background-color: #29abe2; }
    .round-box.bg-blue .h4 {
      color: white; }
  .round-box.bg-red {
    background-color: #f7bc4f; }
    .round-box.bg-red .h4 {
      color: white; }
  .round-box.line-blue {
    border-color: #29abe2; }
  .round-box.line-red {
    border-color: #f7bc4f; }
  .round-box .compare-title {
    display: none; }
  @media screen and (max-width: 767px) {
    .round-box {
      border-width: 2px; }
      .round-box .compare-title {
        position: absolute;
        display: inline-block;
        top: 0;
        left: 0;
        width: 60px;
        height: 24px;
        color: white; }
        .round-box .compare-title.blue {
          background-color: #29abe2; }
        .round-box .compare-title.red {
          background-color: #f7bc4f; } }

.container-compare .icon-title h5 {
  color: #303240;
  margin-bottom: 0.2rem; }

.container-compare .icon-title img {
  width: 40px;
  height: 40px; }

.container-compare .icon-wrap {
  width: 100px;
  height: 100px;
  border: 1px solid #e9e9e9;
  border-radius: 200px;
  background-color: white;
  z-index: 10;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  .container-compare .icon-wrap h5 {
    font-size: 1rem;
    margin: 1rem 0 0;
    font-weight: 600;
    color: #303240; }
  .container-compare .icon-wrap figure img {
    width: 60px;
    height: 60px; }
    .container-compare .icon-wrap figure img.draw {
      width: 250px;
      height: auto; }
  @media screen and (max-width: 767px) {
    .container-compare .icon-wrap {
      display: none; } }

.container-compare figure {
  margin-bottom: 0; }
  .container-compare figure img.draw {
    width: 250px;
    height: auto; }

.container-compare table th, .container-compare table td, .container-cost table th, .container-cost table td {
  padding-top: 2px;
  padding-bottom: 2px; }

footer {
  position: relative;
  width: 100%;
  text-align: center; }
  footer.main-content-footer {
    padding: 5px; }

.copyright {
  display: none;
  margin-top: 10px;
  font-size: 0.75rem;
  text-align: center;
  font-weight: 300;
  padding-bottom: 5px;
  line-height: 20px;
  letter-spacing: normal; }
  .copyright span {
    color: white;
    opacity: 0.7; }
  .copyright img {
    display: inline-block;
    width: 57px;
    height: 24px; }

.main-content-header {
  border-bottom: 1px solid #e9e9e9; }

.card {
  border: 1px solid #d2d2d2; }
  .card.card-left-icon .div-icon {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px; }
  .card__login {
    border: 1px solid rgba(255, 255, 255, 0.45); }
  .card__login-flat {
    border: none;
    color: white;
    background-color: #3d9ad4;
    border-radius: 0; }
    .card__login-flat .login-logo {
      background-color: white;
      width: calc(100% + 30px);
      margin: -10px -15px 0;
      padding: 1rem;
      display: flex;
      justify-content: space-around; }
      .card__login-flat .login-logo img {
        width: 160px;
        height: 73px;
        display: block; }
    .card__login-flat h1 {
      margin-top: 1.5rem;
      font-weight: 300;
      font-size: 1.6rem;
      color: white; }
    .card__login-flat hr {
      background-color: rgba(255, 255, 255, 0.5);
      width: calc( 100% + 30px);
      border: none;
      margin: 0 -15px;
      height: 1px; }
    .card__login-flat .form-control {
      border-color: rgba(0, 0, 0, 0.05);
      height: 50px;
      margin-bottom: 1rem;
      border-radius: 0; }
    .card__login-flat .form-check-label {
      color: white; }
    .card__login-flat button {
      border-radius: 0;
      border-color: #002e6d;
      background-color: rgba(0, 46, 109, 0.85);
      height: 60px;
      font-size: 0.9375rem;
      font-weight: 600;
      cursor: pointer;
      color: white; }
      .card__login-flat button:active, .card__login-flat button:focus, .card__login-flat button:hover {
        color: white;
        border-color: #002e6d;
        background-color: rgba(0, 46, 109, 0.95); }
    .card__login-flat .card-body {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem; }
    .card__login-flat .card-footer {
      border: none;
      width: calc(100% + 30px);
      margin: 0 -15px -10px;
      background-color: rgba(0, 0, 0, 0.05);
      padding: 0; }
      .card__login-flat .card-footer .button-group ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none; }
        .card__login-flat .card-footer .button-group ul li {
          flex: 1 1 1%;
          text-align: center;
          border-left: 1px solid rgba(0, 0, 0, 0.05); }
          .card__login-flat .card-footer .button-group ul li:first-child {
            border-left: none; }
          .card__login-flat .card-footer .button-group ul li a {
            outline: none;
            line-height: 50px;
            display: block;
            color: rgba(0, 0, 0, 0.85);
            text-decoration: none; }
            .card__login-flat .card-footer .button-group ul li a:active, .card__login-flat .card-footer .button-group ul li a:hover {
              color: white;
              border-color: rgba(0, 0, 0, 0.1);
              background-color: rgba(0, 46, 109, 0.95); }
  .card__bg {
    border-color: white; }

@keyframes move-mascot {
  0% {
    top: -60px; }
  50% {
    top: -65px; }
  100% {
    top: -60px; } }

.img-mascot {
  margin: 0;
  width: 120px;
  position: absolute;
  z-index: 10;
  top: -60px;
  right: 0;
  animation-name: move-mascot;
  animation-duration: 1.4s;
  animation-iteration-count: infinite; }
  .img-mascot img {
    width: 100%;
    height: auto; }

.title-swm {
  color: #303240;
  font-size: 1.5rem;
  font-weight: 600; }
  @media screen and (max-width: 1199px) {
    .title-swm {
      font-size: 1.3rem; } }
  @media screen and (max-width: 575px) {
    .title-swm {
      font-size: 1.2rem; } }
  .title-swm.big {
    font-size: 1.7rem; }
    @media screen and (max-width: 1199px) {
      .title-swm.big {
        font-size: 1.35rem; } }

.title-swm-big {
  color: #303240;
  position: absolute;
  top: -60px;
  left: -15px;
  font-size: 2.4rem;
  width: calc(100% + 30px);
  text-align: center;
  letter-spacing: -1px; }
  @media screen and (max-width: 1199px) {
    .title-swm-big {
      top: -50px;
      font-size: 2rem; } }
  @media screen and (max-width: 575px) {
    .title-swm-big {
      width: 100%;
      left: 0;
      font-size: 1.8rem; } }

.big-title .img-mascot-wrap {
  position: absolute;
  top: 150px;
  right: 0; }
  .big-title .img-mascot-wrap .img-mascot {
    width: 100px; }

.map-button {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem; }
  .map-button .button-small {
    font-size: 0.9375rem;
    font-weight: 500;
    background-color: #D7DFE9;
    border: 1px solid #9FBBDB;
    display: inline-block;
    padding: 0 20px;
    line-height: 30px;
    border-radius: 3px;
    height: 30px; }

.div-breadcrumb {
  display: flex;
  height: 60px;
  align-items: center; }
  .div-breadcrumb h1 {
    width: 270px;
    text-align: center;
    color: white;
    font-size: 1.625rem;
    margin-bottom: 0; }
  .div-breadcrumb .ul-breadcrumb {
    margin: 0;
    padding: 0 10px;
    list-style: none;
    display: flex;
    background-color: #D7DFE9;
    height: 40px;
    align-items: center;
    min-width: 460px;
    color: #728AA5;
    border-radius: 3px; }
    .div-breadcrumb .ul-breadcrumb li {
      position: relative;
      padding: 0 10px;
      opacity: 0.7; }
      .div-breadcrumb .ul-breadcrumb li.current {
        opacity: 1;
        font-weight: 600; }
      .div-breadcrumb .ul-breadcrumb li::before {
        content: '/';
        position: absolute;
        left: 0;
        top: 0; }
      .div-breadcrumb .ul-breadcrumb li:last-child {
        padding-right: 0
      }
      .div-breadcrumb .ul-breadcrumb li:first-child::before {
        display: none; }

.div-search {
  width: 100%;
  padding: 15px 20px;
  background-color: white; }
  .div-search .input-group-text {
    color: #021B3B;
    border-color: #728aa5;
    background-color: #9fbbdb; }
  .div-search .custom-select, .div-search .form-control {
    color: #728AA5;
    border-color: #728aa5;
    background-color: #d7dfe9; }

.popup-header {
  width: 100%;
  position: relative;
  font-size: 1.25rem;
  padding: 10px 10px 15px;
  color: white; }
  .popup-header h1 {
    font-size: inherit;
    display: inline-block;
    font-weight: 400;
    margin-right: 0.5rem;
    margin-bottom: 0; }
  .popup-header h1:after {
    content: ':'
  }
  .popup-header i {
    font-weight: 500;
    font-style: normal; }

.report-big-header {
  color: #26358B }
  .report-big-header div {
    font-size: 2rem;
    font-weight: 500;
    line-height: 40px; }
  .report-big-header.gray-color {
    color: inherit; }

.body-admin .card {
  position: relative;
  border-color: #EEF2F8;
  overflow: hidden; }
  .body-admin .card .card-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0;
    height: 38px;
    border: none;
    background-color: transparent;
    align-items: baseline; }
    .body-admin .card .card-header::before {
      content: '';
      position: absolute;
      width: 100%;
      bottom: 5px;
      height: 1px;
      display: inline-block;
      background-color: #728AA5; }
    .body-admin .card .card-header::after {
      content: '';
      position: absolute; }
    .body-admin .card .card-header .title {
      font-size: 20px;
      line-height: 38px;
      color: #4260d8;
      margin-bottom: 0;
      flex-grow: 1 }
    .body-admin .card .card-header.button-type {
      height: 50px; }
  .body-admin .card .card-body {
    padding: 0;
    position: relative; }
    .body-admin .card .card-body .card-body-title {
      display: flex;
      justify-content: space-between; }
      .body-admin .card .card-body .card-body-title .title {
        font-size: 18px;
        line-height: 40px;
        color: #4260d8;
        margin-bottom: 0; }
  .body-admin .card.type-a {
    border-color: #5b6e84; }
    .body-admin .card.type-a .card-header::before {
      display: none; }
    .body-admin .card.type-a .card-header .title {
      margin-top: -6px;
      color: #13404a; }
    .body-admin .card.type-a .report-big-header {
      color: #3bbcdc; }
  .body-admin .card.type-b {
    border-color: #5b6e84; }
    .body-admin .card.type-b::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 7px;
      height: 100%;
      background-color: #9966FF; }
    .body-admin .card.type-b .report-big-header {
      color: #6027c5; }
  .body-admin .card.type-c {
    border-color: #5b6e84; }
    .body-admin .card.type-c::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 7px;
      background-color: #FF6384; }
    .body-admin .card.type-c .report-big-header {
      color: #cc193e; }
  .body-admin .card.type-d {
    background-image: url("/assets/images/png/bg-pattern-gray.png");
    background-repeat: repeat;
    background-size: 10px 10px;
    border-color: #5b6e84; }
    .body-admin .card.type-d::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 42px;
      background-color: #2c2e55;
      border-top: 1px solid #5b6e84; }
    .body-admin .card.type-d .card-header::before {
      display: none; }
    .body-admin .card.type-d .card-header .title {
      margin-top: 8px;
      color: #fff;
      margin-left: auto;
      margin-right: auto; }
    .body-admin .card.type-d .report-big-header {
      color: #6027c5; }
  .body-admin .card.bar-blue::before {
    background-color: #06a0fd; }
  .body-admin .card.bar-green::before {
    background-color: #02ca01; }
  .body-admin .card.dark {
    border-color: #242949;
    background-color: #2b3d5f; }
    .body-admin .card.dark .card-header .title {
      color: white; }

.body-admin .ul-step .desc {
  padding: 4px 0; }
  .body-admin .ul-step .desc span {
    font-size: 2rem;
    color: #2F6DB5; }
  .body-admin .ul-step .desc.bg-2 {
    background-color: #c1d3e9; }
  .body-admin .ul-step .desc.bg-3 {
    color: white;
    background-color: #2F6DB5; }
    .body-admin .ul-step .desc.bg-3 span {
      color: white; }

.body-admin .table__data thead tr th {
  padding-left: 10px;
  background-color: #f0f0f0; }

.body-admin .table__data .bg-red {
  background-color: rgba(242, 0, 0, 0.4);
  color: black; }

.body-admin .table__data .bg-yellow {
  background-color: rgba(255, 205, 86, 0.4);
  color: black; }

.body-admin .table__data .bg-blue {
  background-color: rgba(68, 167, 251, 0.4);
  color: black; }

.body-admin .table__data .bg-red a,
.body-admin .table__data .bg-yellow a,
.body-admin .table__data .bg-blue a {
  color: black; }

.body-admin .table__data.gray thead tr th {
  padding-left: 10px;
  background-color: #e7e8ea; }

.body-admin .table__data.mint thead tr th {
  padding-left: 10px;
  background-color: #cae8e8; }

.body-admin form .table__normal tbody tr {
  height: 52px; }

.body-admin form .table__normal-small tbody tr {
  height: inherit; }

.body-admin .chart-wrap {
  margin: 10px 0;
  background-color: #Fafafa;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 3px; }

.body-admin .popup-header i {
  color: white; }

.body-admin .div-legend {
  font-size: 0.625rem;
  display: flex;
  align-items: center; }
  .body-admin .div-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 2px; }
    .body-admin .div-legend i.red {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: rgba(242, 0, 0, 0.4);
      margin: 2px; }
    .body-admin .div-legend i.yellow {
      background-color: rgba(255, 205, 86, 0.4); }

.body-admin .btn {
  min-width: 90px;
  font-weight: 500;
  line-height: 1;
  padding-top: 4px;
  padding-bottom: 4px;
}
.body-admin .btn:not(.btn-sm) {
  height: 34px
}
.body-admin .btn-default {
  color: #021B3B;
  border-color: #728aa5;
  background-color: #9fbbdb;
}
.body-admin .btn-primary {
  background-color: #0062cc;
  border-color: #0062cc
}
  .body-admin .btn-default:active, .body-admin .btn-default:focus, .body-admin .btn-default:hover {
    background-color: #8fa8c5; }

.body-admin .div-legend {
  font-size: 0.625rem;
  display: flex;
  align-items: center; }
  .body-admin .div-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 2px; }
    .body-admin .div-legend i.red {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: rgba(242, 0, 0, 0.4);
      margin: 2px; }
    .body-admin .div-legend i.yellow {
      background-color: rgba(255, 205, 86, 0.4); }

.body-admin .card .card-body {
  padding: 0;
  position: relative; }

.body-admin .table__data thead tr th {
  padding-left: 10px; }

.body-admin .table__data .bg-red {
  background-color: rgba(242, 0, 0, 0.4);
  color: black; }

.body-admin .table__data .bg-yellow {
  background-color: rgba(255, 205, 86, 0.4);
  color: black; }

.new .report-big-header {
  color: #09bbef; }

.row-admin-main-install {
  padding: 5px 15px 6px; }
  .row-admin-main-install .col {
    padding-left: 5px;
    padding-right: 5px; }

.div-result h4 {
  color: white; }

.div-result .span-result {
  display: block;
  background-color: white;
  padding: 5px 8px;
  color: black;
  border-radius: 3px; }

.div-result .form-control {
  height: 44px; }

.ui-datepicker {
  z-index: 100000 !important; }

dl.list-style {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0; }
  dl.list-style dt, dl.list-style dd {
    width: 50%;
    line-height: 25px;
    margin-bottom: 0;
    border-top: 1px solid #e4e4e4;
    font-weight: normal; }
    dl.list-style dt.border-top-none, dl.list-style dd.border-top-none {
      border-top: none; }

ul.ul-status {
  margin: 0;
  padding: 5px 0 2px;
  list-style: none;
  font-size: 1.0625rem;
  line-height: 40px;
  position: relative;
  background-color: #c1d3e9;
  border-radius: 5px; }
  ul.ul-status .icon {
    margin-right: inherit;
    margin-left: inherit; }
  ul.ul-status li {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.5); }
    ul.ul-status li:first-child, ul.ul-status li:nth-child(2) {
      border-top: none; }
    ul.ul-status li.title {
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 60px;
      color: white; }
      ul.ul-status li.title::before {
        content: '';
        display: inline-block;
        position: absolute;
        background-color: #2F6DB5;
        top: 10px;
        left: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        border-radius: 3px; }
      ul.ul-status li.title span {
        z-index: 10; }
  ul.ul-status.first li {
    margin-left: -4px; }
    ul.ul-status.first li:first-child {
      margin-left: 0; }

ul.ul-status-checkbox {
  height: 100%; }
  ul.ul-status-checkbox li i {
    width: 50px;
    text-align: center; }
  ul.ul-status-checkbox li:nth-child(n+2) {
    justify-content: flex-start; }

ul.ul-col {
  display: flex;
  flex-flow: row;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%; }
  ul.ul-col li {
    position: relative;
    padding: 2rem 0;
    text-align: center;
    flex-grow: 1;
    flex-basis: 0; }
    ul.ul-col li h5 {
      position: relative;
      font-size: 1.5rem;
      font-weight: 400;
      color: #000; }
    ul.ul-col li span {
      position: relative;
      font-size: 1.2rem;
      color: black; }
    ul.ul-col li:first-child {
      border-left: none; }
    ul.ul-col li::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      background-color: #F00;
      border-radius: 5px; }
    ul.ul-col li:nth-child(1)::before {
      background-color: rgba(255, 99, 132, 0.6); }
    ul.ul-col li:nth-child(2)::before {
      background-color: rgba(255, 159, 64, 0.6); }
    ul.ul-col li:nth-child(3)::before {
      background-color: rgba(255, 205, 86, 0.6); }
    ul.ul-col li:nth-child(4)::before {
      background-color: rgba(75, 192, 192, 0.6); }
    ul.ul-col li:nth-child(5)::before {
      background-color: rgba(54, 162, 235, 0.6); }
    ul.ul-col li:nth-child(6)::before {
      background-color: rgba(153, 102, 255, 0.6); }

ul.ul-point {
  padding-left: 1.5rem;
  list-style: circle; }

.ul-title {
  font-size: 18px;
  line-height: 20px;
  color: #4260d8;
  margin-bottom: 0; }

dl.dl-complaint {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 5px;
  height: 106px;
  padding-bottom: 10px;
  overflow-y: auto; }
  dl.dl-complaint dt, dl.dl-complaint dd {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e9e9e9;
    line-height: 40px;
    font-size: 1rem; }
  dl.dl-complaint dt {
    width: 20%;
    text-align: center;
    font-weight: 400; }
  dl.dl-complaint dd {
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; }
  dl.dl-complaint span {
    font-size: 0.8rem;
    padding: 4px 8px;
    background-color: #ecf2f9;
    margin-right: 5px;
    color: black;
    border-radius: 3px; }
    dl.dl-complaint span.step-1 {
      background-color: #ecf2f9; }
    dl.dl-complaint span.step-2 {
      background-color: #c0d2e9; }
    dl.dl-complaint span.step-3 {
      color: white;
      background-color: #306db5; }

dl.dl-input {
  display: flex;
  flex-wrap: wrap;
  width: 100%; }
  dl.dl-input dt, dl.dl-input dd {
    margin: 0;
    padding: 0;
    line-height: 45px; }
  dl.dl-input dt {
    width: 25%;
    color: black;
    font-weight: 500; }
  dl.dl-input dd {
    width: 75%; }

.ul-list {
  margin: 0;
  padding-left: 2rem;
  text-align: left; }
  .ul-list .date {
    color: #36c8dd;
    margin-right: 10px; }
  .ul-list .work-end {
    text-decoration: line-through; }

.status-end {
  color: #36c8dd; }

.status-ing {
  color: rgba(255, 255, 255, 0.1); }

.page-error {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center; }
  .page-error .div-bg {
    position: relative;
    text-align: center; }
    .page-error .div-bg h2 {
      font-family: "Open Sans", "notokr", "맑은 고딕", NanumGothic, 나눔고딕, "Spoqa Han Sans", "Helvetica Neue", Arial, sans-serif;
      color: white;
      font-weight: 800;
      font-size: 180px;
      opacity: 0.1;
      z-index: -1;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    .page-error .div-bg h3 {
      color: black;
      font-weight: 600;
      font-size: 40px; }
      .page-error .div-bg h3 em {
        font-weight: 300;
        font-style: normal; }
    .page-error .div-bg p {
      color: white; }
  .page-error.white .div-bg h2 {
    color: black;
    opacity: 0.05; }
  .page-error.white p {
    color: black; }