body {
  min-width: 1440px;
  background: var(--gray200-color);
}

body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-thumb {
  height: 30%;
  background: var(--gray400-color);
  border-radius: 30px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

:root {
  --white-color: #fff;
  --black-color: #2f2f37;
  --bg-gray-color: #f7f7f7;
  --gray-color: #f9f9f9;
  --gray10-color: #fdfdfd;
  --gray100-color: #fafbfd;
  --gray200-color: #f7f8f9;
  --gray300-color: #e9ebee;
  --gray400-color: #c6c8cd;
  --gray500-color: #9aa1ab;
  --gray600-color: #666f7b;
  --gray700-color: #3a4552;
  --gray800-color: #2a323b;
  --gray900-color: #171d23;
  --gray2-color: #3f4246;
  --green100-color: #f2fdf3;
  --green200-color: #a7f0ba;
  --green300-color: #6fdc8c;
  --green400-color: #16be44;
  --green500-color: #18973e;
  --green600-color: #198038;
  --green700-color: #0e6027;
  --green800-color: #044317;
  --green900-color: #022d0d;
  --positive-light-color: #e5ecfa;
  --positive-color: #0043ce;
  --negative-light-color: #ffe1e3;
  --negative-color: #fa4d56;
  --font-header: 24px;
  --font-title: 20px;
  --font-subtitle: 18px;
  --font-body: 16px;
  --font-body2: 15px;
  --font-body3: 14px;
  --height-input: 60px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.ml10 {
  margin-left: 10px;
}

.mr10 {
  margin-right: 10px;
}

.ml15 {
  margin-left: 15px;
}

.mrl10 {
  margin-right: 10px;
  margin-left: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb50 {
  margin-bottom: 50px;
}

.w-100 {
  width: 100%;
}

.half {
  width: 50%;
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

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

.flex {
  display: flex;
}

.flex.center {
  align-items: center;
}

/****************** button ******************/
.btn-wrap {
  margin: 20px 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-small {
  display: block;
  min-width: 58px;
  padding: 8px 16px;
  border-radius: 5px;
  border: 1px solid var(--green400-color);
  font-size: var(--font-body2);
  font-weight: 500;
  color: var(--green400-color);
  transition: all 0.3s ease;
}

.btn-s {
  width: 90px;
  height: 46px;
  font-weight: 600;
  font-size: 16px;
  border-radius: 5px;
}

.btn-medium {
  display: block;
  min-width: 62px;
  min-height: 40px;
  padding: 10px 16px 8px;
  border-radius: 5px;
  border: 1px solid var(--green400-color);
  font-size: var(--font-body2);
  font-weight: 600;
  color: var(--green400-color);
  transition: all 0.3s ease;
}

.btn-m {
  width: 118px;
  height: 46px;
  font-weight: 600;
  border-radius: 5px;
}

.btn-large {
  display: block;
  min-width: 90px;
  padding: 14px 30px;
  border-radius: 5px;
  font-size: var(--font-body2);
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-l {
  width: 200px;
  height: 46px;
  font-weight: 600;
  border-radius: 5px;
}

.btn-full {
  border-radius: 5px;
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
}

.primary {
  background: var(--green400-color);
  color: var(--white-color);
}

.secondary {
  background: var(--gray300-color);
  color: var(--gray600-color);
}

.tertiary {
  background: var(--white-color);
  border: 1px solid var(--gray400-color);
  color: var(--gray600-color);
}

.tertiary-neg {
  background: var(--white-color);
  border: 1px solid var(--negative-light-color);
  color: var(--negative-color);
}

.primary:hover {
  background: #2cd45a;
}

.primary:active {
  background: #0da325;
}

.secondary:hover {
  background: var(--gray200-color);
}

.secondary:active {
  background: var(--gray400-color);
}

.tertiary:hover {
  color: var(--gray500-color);
  border: 1px solid var(--gray300-color);
}

.tertiary:active {
  color: var(--gray600-color);
  border: 1px solid var(--gray500-color);
}

.disabled {
  background: var(--gray300-color);
  color: var(--gray400-color);
}

.disabled:hover {
  color: var(--negative-color);
  border: 1px solid var(--negative-light-color);
}

.disabled:active {
  color: var(--negative-color);
  border: 1px solid var(--negative-light-color);
}

.con-top .b-list .flex.date-btn-wrap {
  gap: 10px;
}

.date-btn-wrap .btn-small {
  height: 40px;
  border: 1px solid var(--gray300-color);
  color: var(--gray600-color);
}

.date-btn-wrap .btn-small:hover {
  border: 1px solid var(--gray200-color);
  color: var(--gray500-color);
}

.date-btn-wrap .btn-small.selected {
  color: var(--green400-color);
  border: 1px solid var(--green300-color);
  background: var(--green100-color);
}

.date-btn-wrap .btn-small.disabled {
  color: var(--gray400-color);
  border: 1px solid var(--gray200-color);
}

.btn-disabled {
  background-color: #e9ebee;
  color: #666f7b;
  border: 1px solid #e9ebee;
}

.btn-disabled:hover {
  background-color: #f7f8f9;
  border: 1px solid #f7f8f9;
}

.btn-disabled:focus {
  background-color: #c6c8cd;
  border: 1px solid #c6c8cd;
}

.btn-disabled:disabled {
  color: #c6c8cd;
}
.btn-disabled:disabled:hover, .btn-disabled:disabled:focus {
  background-color: #e9ebee;
  border: 1px solid #e9ebee;
}

.btn-outlined {
  border: solid 1px #18973e;
  background-color: #fff;
  color: #18973e;
}

.btn-download {
  font-size: 20px;
  color: #18973e;
}

/****************** button ******************/
/****************** table ******************/
.table-wrap {
  padding-bottom: 45px;
  background: var(--white-color);
}

table.basic {
  width: 100%;
}
table.basic tr,
table.basic td,
table.basic th {
  text-align: center;
}

table.basic th,
table.basic td {
  padding: 12px 16px;
  vertical-align: middle;
}

table.basic th {
  font-size: var(--font-body2);
  color: var(--gray700-color);
  background: var(--gray300-color);
}

table.basic th:not(:last-child) {
  border-right: 1px solid var(--gray400-color);
}

table.basic td {
  font-size: var(--font-body2);
  color: var(--gray800-color);
  border: 1px solid var(--gray300-color);
  background: var(--white-color);
}

table.basic td:last-child {
  border-right: none;
}

table.basic td .link {
  font-size: var(--font-body2);
  color: var(--green500-color);
  cursor: pointer;
}

/****************** table ******************/
/****************** paging ******************/
.paging {
  margin: 30px 30px 0 0;
  align-items: center;
  gap: 6px;
}

.paging li {
  width: 30px;
  text-align: center;
}

.paging li a {
  display: inline-block;
  font-size: var(--font-body3);
  font-weight: 400;
  color: var(--gray500-color);
  cursor: pointer;
}

.paging li.on a {
  font-weight: 600;
  color: var(--green400-color);
}

/****************** paging ******************/
/****************** modal ******************/
.dimmed,
.dimmed2 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  transition: all 0.25s ease-in-out;
  z-index: 9;
}

.dimmed.open,
.dimmed2.open {
  opacity: 1;
  visibility: visible;
}

.dimmed2.open {
  z-index: 99;
}

.modal {
  padding: 40px;
  width: 714px;
  max-height: 650px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white-color);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  border-radius: 20px;
  z-index: 99;
}
.modal.S2 {
  height: auto;
  overflow: hidden;
  max-height: unset;
  max-height: calc(100vh - 130px);
}
.modal.S2 .l-con {
  max-height: unset;
  max-height: calc(100vh - 304px);
}

.modal.long {
  top: 30px;
  transform: translateX(-50%);
}

.modal-wrap2 .modal {
  max-width: 380px;
}

.modal-wrap.open .modal,
.modal-wrap2.open .modal {
  opacity: 1;
  visibility: visible;
}

.modal-wrap2.open .modal {
  z-index: 999;
}

.btn-close {
  margin-bottom: 30px;
}

.modal-wrap2 .btn-close {
  margin-bottom: 0;
}

.modal .btn-large.save {
  margin: 20px auto;
}

.modal .btn-large.save.center {
  margin: 40px auto 0;
}

.modal .explanation {
  font-size: var(--font-title);
  line-height: 28px;
  color: var(--gray700-color);
}

.modal-wrap span.info {
  display: block;
  margin: 5px 0 0 14px;
  font-size: var(--font-body3);
  line-height: 20px;
  color: var(--green400-color);
}

.modal-wrap .flex h6 {
  width: 140px;
  font-size: var(--font-body);
  line-height: 22px;
  color: var(--gray700-color);
}

.modal-wrap .select,
.modal-wrap .input-wrap,
.modal-wrap textarea {
  width: calc(100% - 140px);
}

.modal-wrap .select,
.modal-wrap input {
  height: 44px;
}

.modal-wrap .select ul {
  top: 41px;
  border: 1px solid var(--gray300-color);
}

.modal-wrap input {
  width: 100%;
}

.modal-wrap .content > li:not(:last-child) {
  margin-bottom: 20px;
}

.modal-wrap .pw-wrap {
  position: relative;
}

.modal-wrap .pw-wrap i {
  position: absolute;
  top: 12px;
  left: 92%;
}

.modal-wrap .pw-wrap i.on img:first-child,
.modal-wrap .pw-wrap i.off img:last-child {
  display: none;
}

.modal-wrap .pw-wrap i.on img:last-child {
  display: block;
}

.modal-wrap .btn-wrap {
  margin: 30px 0 0;
}

.modal-wrap2 .btn-wrap {
  margin-bottom: 0;
}

.modal-wrap2 strong {
  font-size: var(--font-title);
  font-weight: 600;
  line-height: 28px;
  color: var(--gray700-color);
}

.pop-wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.pop-wrap .input-area {
  margin-top: 0;
}
.pop-wrap .pop-header {
  display: flex;
  align-items: center;
}
.pop-wrap .pop-header h3 {
  flex-grow: 1;
  font-size: 20px;
  font-weight: 600;
  color: #3f4246;
}
.pop-wrap .pop-header button {
  font-size: 20px;
}
.pop-wrap .pop-header + .pop-cont {
  margin-top: 30px;
}
.pop-wrap .pop-cont + .btn-area {
  margin-top: 30px;
}
.pop-wrap .btn-area button + button {
  margin-left: 10px;
}

.pop-wrap .pop-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 360px;
  padding: 36px 40px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #707070;
}
.pop-wrap .pop-box.alert {
  min-width: 420px;
  padding: 40px;
}
.pop-wrap .pop-box.alert .btn-area {
  margin-top: 34px;
}
.pop-wrap .pop-box .alert-txt {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: #3a4552;
}

/****************** modal ******************/
/****************** scrollbar ******************/
.scrollbar::-webkit-scrollbar {
  width: 6px;
}

.scrollbar::-webkit-scrollbar-thumb {
  height: 30%;
  background: var(--gray400-color);
  border-radius: 30px;
}

.scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

/****************** scrollbar ******************/
.essential {
  color: var(--negative-color);
}

/****************** style ******************/
.btn-area {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}

.box-tit {
  color: var(--green500-color);
  font-size: var(--font-title);
  font-weight: 600;
  margin-bottom: 20px;
}

.mh-795 {
  min-height: 795px;
}

/****************** style ******************/
.spacer {
  flex-grow: 1;
}

.g-100 {
  gap: 100px !important;
}