@import url(./bootstrap.css);
@import url(./reset.css);
@import url(./form.css);
@import url(./table.css);
@import url(./grid.css);
@import url(./btn.css);
@import url(./2.0/dashboard.css);
@import url(./fullCalendar.css);
@import url(./pretendard.css);

:root {
  --bg1-color: #f8faff;
  --bg2-color: #fff;
  --bg3-color: #f9f9f9;
  --bg4-color: #fff;
  --bg5-color: #fff;
  --bg6-color: #fff;
  --bg7-color: #f8f8f8;
  --bg8-color: #e5e5e5;
  --gradient1: linear-gradient(90deg, #435cbe 0%, #7ebcd4 41%, #8e7ed4 98%);
  --gradient2: linear-gradient(180deg, #0098ed 0%, #41b97f 100%);

  --black-color: #000;
  --black-a10: rgba(0, 0, 0, 0.1);
  --black-a20: rgba(0, 0, 0, 0.2);

  --dark-gray1: #1e1e1e;
  --dark-gray2: #333;
  --dark-gray3: #3c3c3c;
  --dark-gray4: #4a4a4a;
  --dark-gray5: #525252;
  --dark-gray6: #636363;

  --light-gray1: #7e7e7e;
  --light-gray2: #818181;
  --light-gray3: #999;
  --light-gray4: #ababab;
  --light-gray5: #bebebe;
  --light-gray6: #cecece;
  --light-gray7: #dadada;
  --light-gray8: #e9e9e9;
  --light-gray9: #f9f9f9;




  --white-color: #fff;
  --white-a10: rgba(255, 255, 255, 0.1);
  --white-a20: rgba(255, 255, 255, 0.2);
  --white-a30: rgba(255, 255, 255, 0.3);
  --white-a50: rgba(255, 255, 255, 0.5);
  --white-a60: rgba(255, 255, 255, 0.6);
  --white-a70: rgba(255, 255, 255, 0.7);
  --white-a90: rgba(255, 255, 255, 0.9);

  --primary-color: #758ae1;
  --sub1-color: #4ebbf7;
  --sub2-color: #0098ed;
  --sub3-color: #3d8361;
  --sub4-color: #359d6b;
  --sub5-color: #eaf0ff;
  --sub6-color: #c7e9fc;
  --sub7-color: #eff9ff;
  --sub8-color: #0064c0;
  --sub9-color: #dee4f5;
  --sub10-color: #EAF1FF;
  --sub11-color : #bac4f0;

  --graph-color1: #3355e3;
  --graph-color2: #6a91f4;
  --graph-color3: #92aef3;
  --graph-color4: #6fcb8c;
  --graph-color5: #98d77a;
  --graph-color6: #eeb76b;

  --point-sub1: #ce0000;
  --point-sub2: #fc1919;
  --point-sub3: #53cca6;
  --point-sub4: #ff9727;
  --point-sub5: #53a0de;
  --point-sub6: #5d6bd0;

  --lnb-menu: #000;
  --lnb-menu-on: #758ae1;
  --lnb-sub: #636363;
  --lnb-sub-on: #eaf0ff;
  --lnb-line: #dee4f5;
  --lnb-btn: url(/res/new/img/lnb/lnb_slide.svg);

  --small-menu-on: #eaf0ff;
  --small-sub-bg: #fff;
  --small-sub-line: rgba(83, 108, 214, 0.5);
  --small-sub-shadow: rgba(140, 140, 140, 0.2);

  --lnb-icon1: url(/res/new/img/lnb/ico_lnb_compute.svg);
  --lnb-icon2: url(/res/new/img/lnb/ico_lnb_storage.svg);
  --lnb-icon3: url(/res/new/img/lnb/ico_lnb_network.svg);
  --lnb-icon4: url(/res/new/img/lnb/ico_lnb_security.svg);
  --lnb-icon5: url(/res/new/img/lnb/ico_lnb_container.svg);
  --lnb-icon6: url(/res/new/img/lnb/ico_lnb_kubernetes.svg);
  --lnb-icon7: url(/res/new/img/lnb/ico_lnb_project.svg);
  --lnb-icon8: url(/res/new/img/lnb/ico_lnb_sign.svg);
  --lnb-icon9: url(/res/new/img/lnb/ico_lnb_monitoring.svg);
  --lnb-icon10: url(/res/new/img/lnb/ico_lnb_board.svg);

  --lnb-icon1-on: url(/res/new/img/lnb/ico_lnb_compute_on.svg);
  --lnb-icon2-on: url(/res/new/img/lnb/ico_lnb_storage_on.svg);
  --lnb-icon3-on: url(/res/new/img/lnb/ico_lnb_network_on.svg);
  --lnb-icon4-on: url(/res/new/img/lnb/ico_lnb_security_on.svg);
  --lnb-icon5-on: url(/res/new/img/lnb/ico_lnb_container_on.svg);
  --lnb-icon6-on: url(/res/new/img/lnb/ico_lnb_kubernetes_on.svg);
  --lnb-icon7-on: url(/res/new/img/lnb/ico_lnb_project_on.svg);
  --lnb-icon8-on: url(/res/new/img/lnb/ico_lnb_sign_on.svg);
  --lnb-icon9-on: url(/res/new/img/lnb/ico_lnb_monitoring_on.svg);
  --lnb-icon10-on: url(/res/new/img/lnb/ico_lnb_board_on.svg);

  --lnb-admin-icon1: url(/res/new/img/lnb/ico_lnb_admin_app.svg);
  --lnb-admin-icon2: url(/res/new/img/lnb/ico_lnb_admin_project.svg);
  --lnb-admin-icon3: url(/res/new/img/lnb/ico_lnb_admin_user.svg);
  --lnb-admin-icon4: url(/res/new/img/lnb/ico_lnb_admin_system.svg);

  --lnb-admin-icon1-on: url(/res/new/img/lnb/ico_lnb_admin_app_on.svg);
  --lnb-admin-icon2-on: url(/res/new/img/lnb/ico_lnb_admin_project_on.svg);
  --lnb-admin-icon3-on: url(/res/new/img/lnb/ico_lnb_admin_user_on.svg);
  --lnb-admin-icon4-on: url(/res/new/img/lnb/ico_lnb_admin_system_on.svg);

  --lnb-arrow: url(/res/new/img/lnb/ico_lnb_arrow.svg);
  --lnb-arrow-on: url(/res/new/img/lnb/ico_lnb_arrow_on.svg);

  --line-gray1: #bebebe;
  --line-gray2: #e9e9e9;
  --line-gray3: #000;
  --line-gray4: #cecece;
  --line-gray5: #909090;
  --line-gray6: #bfbfbf;
  --line-gray7: #dadada;
  --line-gray8: #000;
  --line-gray9: #d0d0d0;
  --line-gray10: #ECECEC;
  --line-gray11 :#666666;

  --line-a1: rgba(83, 108, 214, 0.5);
  --line-a2: rgba(117, 138, 225, 0.5);


  --line-bg1: #f2f4fc;

  --shodow-color1: rgba(59, 77, 191, 0.2);
  --shodow-color2: rgba(140, 140, 140, 0.2);
  --shodow-color3: rgba(137, 137, 137, 0.2);

  --ico-refresh: url(/res/new/img/ico_dashboard_refresh.svg);
  --ico-setting: url(/res/new/img/ico_dashboard_setting.svg);
  --ico-arrow1: url(/res/new/img/ico_tit_arrow.svg);
  --ico-home: url(/res/new/img/ico_navi_home.svg);
  --ico-select: url(/res/new/img/ico_select_arrow.svg);
  --ico-vm-refresh: url(/res/new/img/ico_vm_refresh.svg);
  --ico-grid-search: url(/res/new/img/ico_grid_search.svg);
  --ico-close: url(/res/new/img/ico_grid_search.svg);
  --ico-check-off: url(/res/new/img/ico_check_off.svg);
  --ico-check-on: url(/res/new/img/ico_check_on.svg);

  --navi-color1: #c7c7cc;
  --navi-color2: #525252;

  --tab-menu: #000;
  --tab-menu-on: rgba(117, 138, 225, 0.1);
  --tab-menu-arrow: url(/res/new/img/ico_tab_arrow.svg);

  --tab-list-bg: rgba(117, 138, 225, 0.1);
  --tab-list-tag: rgba(27, 31, 38, 0.72);

  --step-color1: #999;
  --step-color2: #666;

  --scrollbar-bar: rgba(183, 183, 183, 0.5);
  --scrollbar-bg: #fff;
}

.dark_mode {
  --bg1-color: #32323d;
  --bg2-color: #393947;
  --bg3-color: #333341;
  --bg4-color: #333341;
  --bg5-color: #464656;
  --bg6-color: #363645;
  --bg7-color: #484860;
  --bg8-color: #484860;
  --gradient1: linear-gradient(90deg, #435cbe 0%, #7ebcd4 41%, #8e7ed4 98%);
  --gradient2: linear-gradient(180deg, #0098ed 0%, #41b97f 100%);

  --black-color: #dfdfdf;
  --black-a10: rgba(0, 0, 0, 0.1);
  --black-a20: rgba(0, 0, 0, 0.2);

  --dark-gray1: #dfdfdf;
  --dark-gray2: #dfdfdf;
  --dark-gray3: #dfdfdf;
  --dark-gray4: #4a4a4a;
  --dark-gray5: #525252;
  --dark-gray6: #dfdfdf;

  --light-gray1: #7e7e7e;
  --light-gray2: #dfdfdf;
  --light-gray3: #6f6f8e;
  --light-gray4: #ababab;
  --light-gray5: #bebebe;
  --light-gray6: #cecece;
  --light-gray7: #dadada;
  --light-gray8: #e9e9e9;
  --light-gray9: #f9f9f9;

  --white-color: #fff;
  --white-a10: rgba(255, 255, 255, 0.1);
  --white-a20: rgba(255, 255, 255, 0.2);
  --white-a30: rgba(255, 255, 255, 0.3);
  --white-a50: rgba(255, 255, 255, 0.5);
  --white-a60: rgba(255, 255, 255, 0.6);
  --white-a70: rgba(255, 255, 255, 0.7);
  --white-a90: rgba(255, 255, 255, 0.9);

  --primary-color: #8ea4ff;
  --sub1-color: #4ebbf7;
  --sub2-color: #0098ed;
  --sub3-color: #3d8361;
  --sub4-color: #359d6b;
  --sub5-color: #eaf0ff;
  --sub6-color: #c7e9fc;
  --sub7-color: #eff9ff;
  --sub8-color: #0064c0;
  --sub9-color: #dee4f5;


  --graph-color1: #3355e3;
  --graph-color2: #6a91f4;
  --graph-color3: #92aef3;
  --graph-color4: #6fcb8c;
  --graph-color5: #98d77a;
  --graph-color6: #eeb76b;

  --point-sub1: #ce0000;
  --point-sub2: #fc1919;
  --point-sub3: #53cca6;
  --point-sub4: #ff9727;
  --point-sub5: #53a0de;
  --point-sub6: #5d6bd0;

  --lnb-menu: #8b8ba9;
  --lnb-menu-on: #8ea4ff;
  --lnb-sub: #8b8ba9;
  --lnb-sub-on: #3b3b45;
  --lnb-line: #3e3e4e;
  --lnb-btn: url(/res/new/dark/lnb/lnb_slide.svg);

  --small-menu-on: #3B3B45;
  --small-sub-bg: #3B3B45;
  --small-sub-line: #8EA4FF;
  --small-sub-shadow: rgba(0, 0, 0, 0.2);

  --lnb-icon1: url(/res/new/dark/lnb/ico_lnb_compute.svg);
  --lnb-icon2: url(/res/new/dark/lnb/ico_lnb_storage.svg);
  --lnb-icon3: url(/res/new/dark/lnb/ico_lnb_network.svg);
  --lnb-icon4: url(/res/new/dark/lnb/ico_lnb_security.svg);
  --lnb-icon5: url(/res/new/dark/lnb/ico_lnb_container.svg);
  --lnb-icon6: url(/res/new/dark/lnb/ico_lnb_kubernetes.svg);
  --lnb-icon7: url(/res/new/dark/lnb/ico_lnb_project.svg);
  --lnb-icon8: url(/res/new/dark/lnb/ico_lnb_sign.svg);
  --lnb-icon9: url(/res/new/dark/lnb/ico_lnb_monitoring.svg);
  --lnb-icon10: url(/res/new/dark/lnb/ico_lnb_board.svg);

  --lnb-icon1-on: url(/res/new/dark/lnb/ico_lnb_compute_on.svg);
  --lnb-icon2-on: url(/res/new/dark/lnb/ico_lnb_storage_on.svg);
  --lnb-icon3-on: url(/res/new/dark/lnb/ico_lnb_network_on.svg);
  --lnb-icon4-on: url(/res/new/dark/lnb/ico_lnb_security_on.svg);
  --lnb-icon5-on: url(/res/new/dark/lnb/ico_lnb_container_on.svg);
  --lnb-icon6-on: url(/res/new/dark/lnb/ico_lnb_kubernetes_on.svg);
  --lnb-icon7-on: url(/res/new/dark/lnb/ico_lnb_project_on.svg);
  --lnb-icon8-on: url(/res/new/dark/lnb/ico_lnb_sign_on.svg);
  --lnb-icon9-on: url(/res/new/dark/lnb/ico_lnb_monitoring_on.svg);
  --lnb-icon10-on: url(/res/new/dark/lnb/ico_lnb_board_on.svg);

  --lnb-admin-icon1: url(/res/new/dark/lnb/ico_lnb_admin_app.svg);
  --lnb-admin-icon2: url(/res/new/dark/lnb/ico_lnb_admin_project.svg);
  --lnb-admin-icon3: url(/res/new/dark/lnb/ico_lnb_admin_user.svg);
  --lnb-admin-icon4: url(/res/new/dark/lnb/ico_lnb_admin_system.svg);

  --lnb-admin-icon1-on: url(/res/new/dark/lnb/ico_lnb_admin_app_on.svg);
  --lnb-admin-icon2-on: url(/res/new/dark/lnb/ico_lnb_admin_project_on.svg);
  --lnb-admin-icon3-on: url(/res/new/dark/lnb/ico_lnb_admin_user_on.svg);
  --lnb-admin-icon4-on: url(/res/new/dark/lnb/ico_lnb_admin_system_on.svg);

  --lnb-arrow: url(/res/new/dark/lnb/ico_lnb_arrow.svg);
  --lnb-arrow-on: url(/res/new/dark/lnb/ico_lnb_arrow_on.svg);

  --line-gray1: #4e4e5e;
  --line-gray2: #53535f;
  --line-gray3: #53535f;
  --line-gray4: #53535f;
  --line-gray5: #6f6f8e;
  --line-gray6: #53535f;
  --line-gray7: #53535f;
  --line-gray8: rgba(255, 255, 255, 0.1);
  --line-gray9: #6f6f8e;

  --line-a1: #4e4e5e;
  --line-a2: #4e4e5e;

  --shodow-color1: rgba(0, 0, 0, 0.2);
  --shodow-color2: rgba(0, 0, 0, 0.2);
  --shodow-color3: rgba(0, 0, 0, 0.2);

  --ico-refresh: url(/res/new/dark/ico_dashboard_refresh.svg);
  --ico-setting: url(/res/new/dark/ico_dashboard_setting.svg);
  --ico-arrow1: url(/res/new/dark/ico_tit_arrow.svg);
  --ico-home: url(/res/new/dark/ico_navi_home.svg);
  --ico-select: url(/res/new/dark/ico_select_arrow.svg);
  --ico-vm-refresh: url(/res/new/dark/ico_vm_refresh.svg);
  --ico-grid-search: url(/res/new/dark/ico_grid_search.svg);
  --ico-check-off: url(/res/new/dark/ico_check_off.svg);
  --ico-check-on: url(/res/new/dark/ico_check_on.svg);

  --navi-color1: #8b8ba9;
  --navi-color2: #dfdfdf;

  --tab-menu: #8b8ba9;
  --tab-menu-on: rgba(142, 164, 255, 0.1);
  --tab-menu-arrow: url(/res/new/dark/ico_tab_arrow.svg);

  --tab-list-bg: rgba(142, 164, 255, 0.1);
  --tab-list-tag: rgba(255, 255, 255, 0.72);

  --step-color1: #8B8BA9;
  --step-color2: #8B8BA9;

  --scrollbar-bar: #575773;
  --scrollbar-bg: #393947;
}

html {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  line-height: 1.5;
  font-size: 13px;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  line-height: 1.5;
  font-size: 13px;
  min-width: 1680px;
  background: var(--bg1-color);
  color: var(--dark-gray2);
  transition: background-color 0.3s ease, color 0.3s ease;
}

a {
  color: inherit;
}

.gnb {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding: 0 30px 0 0;
  width: 100%;
  height: 50px;
  background: var(--gradient1);
  justify-content: space-between;
  z-index: 1100;
}

.gnb .menu {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: 48px;
  padding-left: 86px;
}

.gnb .menu a {
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  height: 30px;
  padding-bottom: 4px;
  box-sizing: border-box;
  display: block;
  color: var(--dark-gray6);
  border-bottom: 4px solid transparent;
}

.gnb .menu li {
  position: relative;
}

.gnb .menu .ac a {
  color: var(--black-color);
  border-bottom-color: var(--sub1-color);
}

.gnb .profile {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--white-color);
}

.gnb .profile .text {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 12px 0 5px;
}

.gnb .profile .name {
  position: relative;
  /* padding-left: 25px; */
  font-weight: 800;
}

/* .gnb .profile .name:before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: url(/res/new/img/ico_alarm.svg) center no-repeat;
  background-size: 20px 20px;
} */

.gnb .profile .after {
  color: var(--white-color);
}

.gnb .profile .profileImg {
  background: var(--white-a20);
  border-radius: 50%;
  border: 0.3px solid var(--white-a60);
  overflow: hidden;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  object-fit: cover;
}

#resources_search_input {
  position: absolute;
  left: 280px;
}

#resources_search_input input {
  position: relative;
  width: 240px;
  height: 30px;
  font-size: 13px;
  font-weight: 300;
  color: var(--white-color);
  background: var(--white-a10);
  border: 0.5px solid var(--white-a50);
  border-radius: 25px;
}

#resources_search_input input::-webkit-input-placeholder,
#resources_search_input input::placeholder {
  font-size: 13px;
  font-weight: 200;
  color: var(--white-a90) !important;
  -webkit-text-fill-color: var(--white-a90) !important;
}

#resources_search_input .btn-search {
  content: '';
  position: absolute;
  display: block;
  top: 7px;
  right: 12px;
  width: 16px;
  height: 16px;
  background: url(/res/new/img/ico_top_search.svg) center no-repeat;
  background-size: 16px 16px;
}

/* .left-menu-show-btn-dev {
  padding-top: 20px;
  position: fixed;
  bottom: 60px;
  transform: scaleX(-1);
  z-index: 1100;
} */

.btn.left-menu-hide-btn {
  position: fixed;
  left: 0;
  bottom: 60px;
  width: 30px;
  height: 30px;
  background: var(--lnb-btn) center no-repeat;
  background-size: 30px 30px;
  z-index: 1000;
}

.btn.left-menu-show-btn {
  position: fixed;
  left: 0;
  bottom: 60px;
  width: 30px;
  height: 30px;
  background: var(--lnb-btn) center no-repeat;
  background-size: 30px 30px;
  transform: scaleX(-1);
  z-index: 1100;
}

/* .btn.left-menu-show-btn:after {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  width: 30px;
  height: 30px;
  background: var(--lnb-btn) center no-repeat;
  background-size: 30px 30px;
} */

.lnb {
  position: static;
  margin-top: 50px;
  left: 0;
  width: 260px;
  min-height: calc(100vh - 126px);
  height: 93%;
  background: var(--bg1-color);
  box-sizing: border-box;
  z-index: 5;
}

.lnb .tit {
  /*margin-top: 8px;*/
  padding-left: 40px;
  background: var(--white-color) left 3px no-repeat;
  font-weight: 700;
  font-size: 18px;
  line-height: 2.0;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--dark-gray6);
  margin-bottom: 10px;
}

.lnb .menu {
  padding: 20px 10px 0 30px;
}

.lnb .menu li {
  display: block;
  background: 16px/24px no-repeat;
  overflow: hidden;
}

.lnb .menu>li~li {
  border-top: 0.5px solid var(--lnb-line);
}

.lnb .menu li:has(.depth3) {
  position: relative;
  overflow: hidden;
}

.lnb .menu li:has(.depth3)::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 0;
  width: 20px;
  height: 17px;
  background: var(--lnb-arrow) center/cover no-repeat;
}

.lnb .menu li:has(.depth3) .depth3 {
  height: 0;
  opacity: 0;
  transition: 0.3s;
}

.lnb .menu li.ac:has(.depth3)::after,
.lnb .menu li:hover:has(.depth3)::after {
  background-image: var(--lnb-arrow-on);
}

.lnb .menu li.ac>a,
.lnb .menu li:hover>a {
  color: var(--lnb-menu-on);
}

.lnb .menu li.ac>a {
  font-weight: 700;
}

.lnb .menu li.ac:has(.depth3) .depth3 {
  opacity: 1;
  height: auto;
  margin-bottom: 12px;
}

.lnb .menu li.ac:has(.depth3) .depth3 .depth3-item {
  margin-top: 0px;
}

.lnb .menu li.ac:has(.depth3) .depth3 .depth3-item a {
  height: 36px;
  background: none;
  color: var(--lnb-sub);
  font-weight: 300;
}

.lnb .menu li.ac:has(.depth3) .depth3 .depth3-item.ac a,
.lnb .menu li.ac:has(.depth3) .depth3 .depth3-item:hover a {
  position: relative;
  color: var(--primary-color);
  background: var(--lnb-sub-on) !important;
  border-radius: 6px;
}

.lnb .menu li.ac:has(.depth3) .depth3 .depth3-item.ac a {
  font-weight: 700;
}

.lnb .menu li.ac:has(.depth3) .depth3 .depth3-item.ac a:before,
.lnb .menu li.ac:has(.depth3) .depth3 .depth3-item:hover a:before {
  content: '';
  display: block;
  position: absolute;
  left: 16px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
}

.lnb .menu li a {
  display: flex;
  align-items: center;
  padding-left: 34px;
  height: 44px;
  font-size: 14px;
  font-weight: 300;
  color: var(--lnb-menu);
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 18px 18px;
  cursor: pointer;
}

.lnb .menu li.subPage1-01 a {
  background-image: url(/res/new/img/lnb/IC_left_satus.svg);
}

.lnb .menu li.subPage1-01.ac a {
  background-image: url(/res/new/img/lnb/IC_left_satus_b.svg);
}

.lnb .menu li.subPage1-02 a {
  background-image: url(/res/new/img/lnb/IC_left_release.svg);
}

.lnb .menu li.subPage1-02.ac a {
  background-image: url(/res/new/img/lnb/IC_left_release_b.svg);
}

.lnb .menu li.subPage1-03 a {
  background-image: url(/res/new/img/lnb/IC_left_addnew.svg);
}

.lnb .menu li.subPage1-03.ac a {
  background-image: url(/res/new/img/lnb/IC_left_addnew_b.svg);
}

.lnb .menu li.subPage1-04 a {
  background-image: url(/res/new/img/lnb/IC_left_newcicd.svg);
}

.lnb .menu li.subPage1-04.ac a {
  background-image: url(/res/new/img/lnb/IC_left_newcicd_b.svg);
}

.lnb .menu li.subPage2-01 a {
  background-image: url(/res/new/img/lnb/IC_left_satuspro.svg);
}

.lnb .menu li.subPage2-01.ac a {
  background-image: url(/res/new/img/lnb/IC_left_satuspro_b.svg);
}

.lnb .menu li.subPage2-02 a {
  background-image: url(/res/new/img/lnb/IC_left_addpro.svg);
}

.lnb .menu li.subPage2-02.ac a {
  background-image: url(/res/new/img/lnb/IC_left_addpro_b.svg);
}

.lnb .menu li.subPage3-01 a {
  background-image: url(/res/new/img/lnb/IC_left_wait.svg);
}

.lnb .menu li.subPage3-01.ac a {
  background-image: url(/res/new/img/lnb/IC_left_wait_b.svg);
}

.lnb .menu li.subPage3-02 a {
  background-image: url(/res/new/img/lnb/IC_left_request.svg);
}

.lnb .menu li.subPage3-02.ac a {
  background-image: url(/res/new/img/lnb/IC_left_request_b.svg);
}

.lnb .menu li.subPage3-03 a {
  background-image: url(/res/new/img/lnb/IC_left_approval.svg);
}

.lnb .menu li.subPage3-03.ac a {
  background-image: url(/res/new/img/lnb/IC_left_approval_b.svg);
}

.lnb .menu li.subPage4-01 a {
  background-image: url(/res/new/img/lnb/IC_left_userset.svg);
}

.lnb .menu li.subPage4-01.ac a {
  background-image: url(/res/new/img/lnb/IC_left_userset_b.svg);
}

.lnb .menu li.subPage4-02 a {
  background-image: url(/res/new/img/lnb/IC_left_authority.svg);
}

.lnb .menu li.subPage4-02.ac a {
  background-image: url(/res/new/img/lnb/IC_left_authority_b.svg);
}

.lnb .menu li.subPage4-03 a {
  background-image: url(/res/new/img/lnb/IC_left_work.svg);
}

.lnb .menu li.subPage4-03.ac a {
  background-image: url(/res/new/img/lnb/IC_left_work_b.svg);
}

.lnb .menu li.subPage4-04 a {
  background-image: url(/res/new/img/lnb/IC_left_orga.svg);
}

.lnb .menu li.subPage4-04.ac a {
  background-image: url(/res/new/img/lnb/IC_left_orga_b.svg);
}

.lnb .menu li.subPage4-05 a {
  background-image: url(/res/new/img/lnb/IC_left_approval.svg);
}

.lnb .menu li.subPage4-05.ac a {
  background-image: url(/res/new/img/lnb/IC_left_approval_b.svg);
}

.lnb .menu li.subPage5-01 a {
  background-image: url(/res/new/img/lnb/IC_left_zoneset.svg);
}

.lnb .menu li.subPage5-01.ac a {
  background-image: url(/res/new/img/lnb/IC_left_zoneset_b.svg);
}

.lnb .menu li.subPage5-02 a {
  background-image: url(/res/new/img/lnb/IC_left_outsystemsry.svg);
}

.lnb .menu li.subPage5-02.ac a {
  background-image: url(/res/new/img/lnb/IC_left_outsystemsry_b.svg);
}

.lnb .menu li.subPage5-03 a {
  background-image: url(/res/new/img/lnb/IC_left_pipe.svg);
}

.lnb .menu li.subPage5-03.ac a {
  background-image: url(/res/new/img/lnb/IC_left_pipe_b.svg);
}

.lnb .menu li.subPage5-04 a {
  background-image: url(/res/new/img/lnb/IC_left_template.svg);
}

.lnb .menu li.subPage5-04.ac a {
  background-image: url(/res/new/img/lnb/IC_left_template_b.svg);
}

.lnb .menu li.subPage6-01 a {
  background-image: url(/res/new/img/lnb/IC_left_statussystem.svg);
}

.lnb .menu li.subPage6-01.ac a {
  background-image: url(/res/new/img/lnb/IC_left_statussystem_b.svg);
}

.lnb .menu li.subPage6-02 a {
  background-image: url(/res/new/img/lnb/IC_left_audit.svg);
}

.lnb .menu li.subPage6-02.ac a {
  background-image: url(/res/new/img/lnb/IC_left_audit_b.svg);
}

.lnb .menu li.subPage6-03 a {
  background-image: url(/res/new/img/lnb/IC_left_alert.svg);
}

.lnb .menu li.subPage6-03.ac a {
  background-image: url(/res/new/img/lnb/IC_left_alert_b.svg);
}

.content-body {
  background: var(--bg1-color);
}

.cmContent {
  position: absolute;
  top: 50px;
  left: 280px;
  padding: 10px 30px 0 0;
  width: calc(100% - 280px);
  min-width: 1394px;
  min-height: 800px;
  background: var(--bg1-color);
  z-index: 1050;
}

.navi {
  position: relative;
}

.h1 {
  font-weight: 700;
  font-size: 20px;
  line-height: 2.0;
  margin-bottom: 10px;
  color: var(--black-color);
}

.h1:has(.control) {
  display: flex;
  justify-content: space-between;
}

.navi+div {
  position: absolute;
  top: 10px;
  right: 30px;
}

.breadcrumb {
  background-color: transparent;
}

.breadcrumb>li {
  position: relative;
  padding-left: 28px;
  font-size: 12px;
  color: var(--navi-color1);
}

.breadcrumb>li:last-child {
  color: var(--navi-color2);
}

.breadcrumb>li+li:before {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 8px;
  width: 12px;
  height: 12px;
  background: url(/res/new/img/ico_navi_arrow.svg) center no-repeat;
}

.mainSearch {
  display: flex;
  margin-bottom: 20px;
}

.mainSearch .searchBtn {
  flex: 0 0 178px;
  width: 178px;
  background: var(--bg1-color);
  border: 1px solid var(--sub6-color);
  font-weight: 700;
  font-size: 16px;
  color: var(--sub8-color);
}

.mainSearch .searchBtn:hover {
  flex: 0 0 178px;
  width: 178px;
  background: var(--sub7-color);
  border: 1px solid var(--sub6-color);
  font-weight: 700;
  font-size: 16px;
  color: var(--sub8-color);
}

.gridWrap .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-right: 2px;
  min-height: 28px;
}

.gridWrap .top~.grid.infinite-wrapper {
  margin-top: 10px !important;
}

.gridWrap .top .result {
  font-size: 12px;
  color: var(--black-color);
}

.gridWrap .top .result span {
  margin-right: 4px;
}

.gridWrap .top .result .value {
  font-weight: 800;
}

.gridWrap .result {
  font-size: 12px;
  color: var(--black-color);
}

.gridWrap .result span {
  margin-right: 4px;
}

.gridWrap .result .value {
  font-weight: 800;
}

.gridWrap .top .control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 auto;
  gap: 8px;
  font-size: 12px;
}

.gridWrap .top .control .new {
  display: flex;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  width: 86px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: var(--white-color);
  background: var(--primary-color);
  border-radius: 4px;
}

.gridWrap .top .control .sub {
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  padding: 0 16px;
  color: var(--primary2, #758AE1);
  background: #758AE10D;
  border: 1px solid var(--primary2, #758AE1);
  gap: 4px;
}


.gridWrap .top .control .ok {
  display: flex;
  align-items: center;
  height: 28px;
  background: var(--sub1-color);
  border-radius: 4px;
  padding: 0 16px;
  color: var(--white-color);
  border: 0;
  gap: 4px;
  font-weight: 500;
}

.gridWrap .top .control .ok::before {
  content: "";
  width: 12px;
  height: 12px;
  background: center/cover no-repeat;
}

.gridWrap .top .control .ok::before {
  background-image: url(/res/new/img/ic_gridControl_ok.svg);
}

.gridWrap .top .control .line,
.gridWrap .top .control .combobox {
  display: flex;
  align-items: center;
  height: 28px;
  border-radius: 4px;
  padding: 0 16px;
  color: var(--sub2-color);
  border: 1px solid var(--sub6-color);
  background-color: var(--bg1-color);
}

.gridWrap .top .control .combobox {
  padding-right: 32px;
  background: var(--bg1-color) url(/res/new/img/ic_gridControl_combobox.svg) right 16px center/12px no-repeat;
}

.gridWrap .top .control .df {
  display: flex;
  align-items: center;
  height: 28px;
  border-radius: 4px;
  padding: 0 16px;
  border: 1px solid var(--light-gray8);
  background-color: var(--white-color);
}

.gridWrap .top .control .view {
  border: 0;
  height: 28px;
  padding-left: 24px;
  padding-right: 16px;
  background: url(/res/new/img/ic_gridControl_view.svg) right center/12px no-repeat;
}

.gridWrap .top .control .excel {
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(/res/new/img/ico_grid_excel.svg) center no-repeat var(--bg5-color);
  border: 0.5px solid var(--line-gray5);
  border-radius: 4px;
}

.excel {
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(/res/new/img/ico_grid_excel.svg) center no-repeat var(--bg5-color);
  border: 0.5px solid var(--line-gray5);
  border-radius: 4px;
}


.sync {
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(/res/new/img/sync.svg) center no-repeat var(--bg5-color);
  border: 0.5px solid var(--line-gray5);
  border-radius: 4px;
}

.syncAll {
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(/res/new/img/sync_all.svg) center no-repeat var(--bg5-color);
  border: 0.5px solid var(--line-gray5);
  border-radius: 4px;
}

.setting {
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(/res/new/img/setting-01.svg) center no-repeat var(--bg5-color);
  border: 0.5px solid var(--line-gray5);
  border-radius: 4px;
}

.sync:disabled{
  background: url(/res/new/img/sync.svg) center no-repeat var(--bg5-color) !important;
  color: var(--light-gray2) !important;
  cursor: not-allowed !important;
  pointer-events: none;
  border: var(--light-gray6) 1px solid;
  background-color: var(--light-gray9) !important;
}

.syncAll:disabled{
  background: url(/res/new/img/sync_all.svg) center no-repeat var(--bg5-color) !important;
  color: var(--light-gray2) !important;
  cursor: not-allowed !important;
  pointer-events: none;
  border: var(--light-gray6) 1px solid;
  background-color: var(--light-gray9) !important;
}

.gridWrap .top .control .cont-list {
  width: 28px;
  height: 28px;
  background: var(--white-color) center no-repeat;
  border: 1px solid var(--light-gray8);
  border-radius: 4px;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url(/res/new/img/ic_list.svg);
}

.gridWrap .top .control .cont-list.selected {
  background-color: var(--sub6-color);
  border: none;
  cursor: auto;
}

.gridWrap .top .control .cont-grid {
  width: 28px;
  height: 28px;
  background: var(--white-color) center no-repeat;
  border: 1px solid var(--light-gray8);
  border-radius: 4px;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url(/res/new/img/ic_grid.svg);
}

.gridWrap .top .control .cont-grid.selected {
  background-color: var(--sub6-color);
  border: none;
  cursor: auto;
}

.pagination {
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

.pagination .active .page-link {
  border-radius: 50%;
  background: var(--white-color);
  border: 1px solid var(--sub1-color);
  color: var(--sub2-color);
  font-weight: 700;
  padding-bottom: 2px;
}

.pagination .page-link {
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 0;
  font-size: 12px;
  color: var(--dark-gray4);
  margin: 0 9px;
}

.pagination .page-link:hover {
  background-color: inherit;
}

.pagination .arr {
  width: 20px;
  height: 20px;
  margin: 0 3px;
}

.pagination .prev {
  background: url(/res/new/img/ic_pagination_arr1.svg) center/20px no-repeat;
}

.pagination .prev-most {
  background: url(/res/new/img/ic_pagination_arr2.svg) center/20px no-repeat;
}

.pagination .next {
  background: url(/res/new/img/ic_pagination_arr1.svg) center/20px no-repeat;
  transform: rotate(180deg);
}

.pagination .next-most {
  background: url(/res/new/img/ic_pagination_arr2.svg) center/20px no-repeat;
  transform: rotate(180deg);
}

.status {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 28px;
  width: 66px;
  border-radius: 28px;
  color: var(--white-color);
  font-size: 12px;
  border: 0;
}


.status.gray,
.status.expired {
  background-color: var(--light-gray1);
}

.status.navy,
.status.expired {
  background-color: #455579;
}

.btn-minus {
  overflow: hidden;
  text-indent: -9999px;
  width: 32px;
  height: 32px;
  border: 0;
  background: url(/res/new/img/ic_20_cirlce_minus.svg) center no-repeat;
}

.btn-plus {
  overflow: hidden;
  text-indent: -9999px;
  width: 32px;
  height: 32px;
  border: 0;
  background: url(/res/new/img/ic_20_cirlce_plus.svg) center no-repeat;
}

.modal-xl {
  width: 100vw;
  max-width: 1599px;
}

.modal-l {
  width: 100vw;
  max-width: 1260px;
}

.modal-m {
  width: 100vw;
  max-width: 680px;
}


.modal-content {
  border: 0;
  border-radius: 5px;
}

.modal-content .modal-header {
  padding: 30px 30px 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 제목 왼쪽, 닫기 버튼 오른쪽 정렬 */
  position: relative; /* 필요 시 유지 */
  border: 0;
  width: 100%;
}

.modal-content .modal-header .modal-title {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.42;
  color: var(--black-color);
}

.modal-content .modal-header .close {
  width: 35px;
  height: 35px;
  background: url(/res/new/img/ic_modalClose.svg) center/cover no-repeat;
  margin-left: auto;
  padding: 0;
  text-indent: -9999px;
  overflow: hidden;
  opacity: 1 !important;
  border: none;
  background-color: transparent;
  margin-right: 0px;
}

.modal-content .modal-body {
  padding: 0 32px;
  width: 100%;
}

.modal-content .modal-footer {
  border-top: 0;
  padding: 30px 30px 30px 25px;
  justify-content: center;
  gap: 8px;
}

.step {
  background: var(--white-color);
  border: 1px solid var(--light-gray8);
  padding: 0 20px;
  height: 65px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.step .item {
  flex: 0 0 auto;
  min-width: 160px;
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.step.scrolling-step {
  background: var(--white-color);
  border-bottom: 0.5px solid var(--line-gray10);
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.step.scrolling-step .item.focus{
  border-bottom: 2px solid var(--black-color);
}

.step.scrolling-step .item{
  height: 50px;
  flex: 0 0 auto;
  min-width: 100px;
  max-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}


.step .item .tapNameWrapper {
  cursor: pointer;
}

.step .item .numbering {
  width: 24px;
  height: 24px;
  background: #acacac;
  border-radius: 50%;
  color: var(--white-color);
  font-weight: 500;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.step .item.complete .numbering {
  background: var(--dark-gray4) url(/res/new/img/ic_step_complete.svg) center no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}

.step .item.complete .text {
  font-weight: 700;
  color: var(--dark-gray4);
}

.step .item.focus .numbering {
  width: 26px;
  height: 27px;
  background: transparent url(/res/new/img/ic_step_focus.svg) center no-repeat;
  color: var(--sub2-color);
  font-weight: 700;
  font-size: 15px;
}

.step .item.focus .text {
  color: var(--black-color);
  font-size: 13px;
  font-weight: 700;
}

.step .item .text {
  color: var(--light-gray2);
}

.step-contents-06 img {
  width: 100%;
}

.step-contents-06 .yaml {
  height: 382px;
  overflow-y: auto;
  background-color: var(--dark-gray1);
  border: 1px solid var(--light-gray8);
  border-radius: 8px;
}

.btnWrap {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.newAppCard {
  margin: 0 auto;
  margin-top: 40px;
  display: flex;
  max-width: 1128px;
  flex-wrap: wrap;
  gap: 24px;
}

.newAppCard .tit {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 25px;
  margin-left: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 500px;
}

.newAppCard .badge {
  position: absolute;
  top: 24px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--gradient2);
}

.newAppCard .badge span {
  color: var(--white-color);
  font-weight: 800;
  font-size: 12px;
  text-align: center;
}

.newAppCard ul li {
  position: relative;
  line-height: 1.43;
  padding-left: 12px;
  margin-bottom: 12px;
}

.newAppCard ul li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--sub1-color);
}

.newAppCard .tagWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.newAppCard .tag {
  box-sizing: border-box;
  padding: 4px 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--white-color);
  border: 1px solid var(--light-gray8);
  border-radius: 8px;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  color: var(--light-gray1);
}

.newAppCard p {
  font-weight: 500;
  font-size: 12px;
  line-height: 22px;
  color: var(--dark-gray4);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.newAppCard .item {
  flex: 0 0 auto;
  width: 360px;
  height: 324px;
  padding: 24px;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid var(--sub1-color);
  position: relative;
  color: var(--sub2-color);
}

.newAppCard .cicd-line {
  border: 1px solid #41b97f;
  color: var(--sub3-color);
}

.newAppCard .cicd-line li::before {
  background-color: var(--sub3-color);
}

.newAppCard .pack-line {
  border: 1px solid var(--sub8-color);
  color: #004ca0;
}

.newAppCard .pack-line li::before {
  background-color: #004ca0;
}

.newAppCard .app-fill {
  border: 0;
  box-shadow: 0px 4px 10px var(--black-a10);
  color: var(--white-color);
  background-color: var(--sub2-color);
}

.newAppCard .app-fill li::before {
  background-color: var(--white-color);
}

.newAppCard .app-fill .badge {
  background-image: none;
  background-color: var(--white-color);
}

.newAppCard .app-fill .badge span {
  background: var(--gradient2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -text-fill-color: transparent;
}

.newAppCard .app-fill p {
  color: var(--white-color);
}

.newAppCard .cicd-fill {
  border: 0;
  box-shadow: 0px 4px 10px var(--black-a10);
  color: var(--white-color);
  background-color: var(--sub4-color);
}

.newAppCard .cicd-fill li::before {
  background-color: var(--white-color);
}

.newAppCard .cicd-fill .badge {
  background-image: none;
  background-color: var(--white-color);
}

.newAppCard .cicd-fill .badge span {
  background: var(--gradient2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -text-fill-color: transparent;
}

.newAppCard .cicd-fill p {
  color: var(--white-color);
}

.newAppCard .pack-fill {
  border: 0;
  box-shadow: 0px 4px 10px var(--black-a10);
  color: var(--white-color);
  background-color: var(--sub8-color);
}

.newAppCard .pack-fill li::before {
  background-color: var(--white-color);
}

.newAppCard .pack-fill .badge {
  background-image: none;
  background-color: var(--white-color);
}

.newAppCard .pack-fill .badge span {
  background: var(--gradient2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -text-fill-color: transparent;
}

.newAppCard .pack-fill p {
  color: var(--white-color);
}

.notUseAppCard {
  margin: 0 auto;
  margin-top: 40px;
  display: flex;
  max-width: 1128px;
  flex-wrap: wrap;
  gap: 24px;
}

.notUseAppCard .tit {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 25px;
  margin-left: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 500px;
}

.notUseAppCard .badge {
  position: absolute;
  top: 24px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.notUseAppCard .badge span {
  color: var(--white-color);
  font-weight: 800;
  font-size: 10px;
  text-align: center;
}

.notUseAppCard ul li {
  position: relative;
  line-height: 1.43;
  padding-left: 12px;
  margin-bottom: 12px;
}

.notUseAppCard ul li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--dark-gray6);
}

.notUseAppCard .tagWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.notUseAppCard .tag {
  box-sizing: border-box;
  padding: 4px 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  color: gray;
}

.notUseAppCard p {
  font-weight: 500;
  font-size: 12px;
  line-height: 22px;
  color: var(--dark-gray4);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.notUseAppCard .item {
  flex: 0 0 auto;
  width: 360px;
  height: 324px;
  padding: 24px;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid lightgrey;
  background-color: var(--light-gray9);
  position: relative;
  color: var(--dark-gray6);
}

.apply-step-success {
  text-align: center;
}

.apply-step-success .mesg {
  margin: 30px 0 20px 0;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.44;
  color: var(--black-color);
}

.apply-step-success .mesg b {
  color: var(--black-color);
  font-weight: 700;
}

.treeViewWrap {
  max-width: 720px;
  border-top: 1px solid var(--dark-gray6);
  padding-top: 32px;
}

.folderViewWrap {
  max-width: 720px;
}

.treeView {
  padding: 22px 32px;
  border: 1px solid var(--light-gray8);
  border-radius: 12px;
  height: 395px;
  overflow-y: auto;
}

.treeView .group.open>ul:has(.item) {
  display: block;
  margin-top: 3px;
  margin-bottom: 10px;
  padding-left: 28px;
}

.treeView .group.open>.groupTit {
  background: url(/res/new/img/ic_24_lowlink.svg) left 6px center no-repeat;
}

.treeView .groupTit {
  display: block;
  width: 100%;
  border: 0;
  text-align: left;
  font-size: 16px;
  padding-left: 37px;
  background: url(/res/new/img/ic_24_highlink.svg) left 6px center no-repeat;
  border-radius: 6px;
  margin-left: -5px;
  cursor: pointer;
}

.treeView .groupTit.selected,
.treeView .groupTit:hover {
  color: var(--sub8-color);
  background-color: var(--sub7-color) !important;
}

.treeView ul:has(.item) {
  display: none;
}

.treeView .item {
  text-align: left;
  padding: 8px 0 8px 24px;
  background: url(/res/new/img/ic_24_linking.svg) left 4px center no-repeat;
  cursor: pointer;
  border-radius: 6px;
  width: 100%;
  margin-left: -5px;
}

.folderTreeView .item {
  text-align: left;
  padding: 8px 0 8px 24px;
  background: url(/res/custom/img/ico_file.svg) left 4px center no-repeat;
  cursor: pointer;
  border-radius: 6px;
  width: 100%;
  margin-left: -5px;
}

.treeView .item+.item {
  margin-top: 4px;
}

.treeView .item.selected,
.treeView .item:hover {
  color: var(--sub8-color);
  background-color: var(--sub7-color);
}

.treeView .addTree {
  height: 32px;
  font-size: 12px;
}

.treeView .caption {
  margin-left: 32px;
  margin-top: 24px;
}

.treeView .caption+.caption {
  margin-top: 12px;
}

.grid .group.open>ul:has(.item) {
  display: block;
  margin-top: 3px;
  margin-bottom: 10px;
  padding-left: 28px;
}

.grid .group.open>.groupTit {
  background: url(/res/new/img/ic_24_lowlink.svg) left 5px center no-repeat;
}

.grid .group.no>.groupTit {
  background: url(/res/new/img/ic_24_nolink.svg) left 5px center no-repeat;
}

.grid .groupTit {
  display: block;
  width: 100%;
  border: 0;
  text-align: left;
  padding: 10px 0;
  font-size: 16px;
  padding-left: 37px;
  background: url(/res/new/img/ic_24_highlink.svg) left 5px center no-repeat;
  border-radius: 6px;
  margin-left: -5px;
  cursor: pointer;
}

.grid .groupTit.selected,
.grid .groupTit:hover {
  color: var(--sub8-color);
  background-color: var(--sub7-color) !important;
}

.grid ul:has(.item) {
  display: none;
}

.grid .item {
  text-align: left;
  padding: 5px 0;
  padding-left: 24px;
  background: url(/res/new/img/ic_24_linking.svg) left center no-repeat;
  cursor: pointer;
  border-radius: 6px;
}

.grid .item+.item {
  margin-top: 4px;
}

.grid .item.selected,
.grid .item:hover {
  color: var(--sub8-color);
  background-color: var(--sub7-color);
}

.grid .addTree {
  height: 32px;
  font-size: 12px;
}

.grid .caption {
  margin-left: 32px;
  margin-top: 24px;
}

.grid .caption+.caption {
  margin-top: 12px;
}

.grid .groupTit {
  color: var(--dark-gray4);
  font-size: 14px;
  font-weight: 400;
}

.grid ul:has(.item) {
  display: block !important;
  padding-left: 20px;
}

.grid ul:has(.item) .item {
  color: var(--dark-gray4);
  padding-left: 32px;
  font-weight: 400;
}

.divisionWrap {
  /* border: 1px solid var(--light-gray8);
  border-radius: 12px;
  padding: 32px; */
  display: flex;
}

.divisionWrap .control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 auto;
  gap: 8px;
  font-size: 12px;
}

.divisionWrap .control .new {
  display: flex;
  align-items: center;
  height: 28px;
  background: var(--sub1-color);
  border-radius: 4px;
  padding: 0 16px;
  color: var(--white-color);
  border: 0;
  gap: 4px;
  font-weight: 500;
}

.divisionWrap .control .new::before {
  content: "";
  width: 12px;
  height: 12px;
  background: center/cover no-repeat;
}

.divisionWrap .control .new::before {
  background-image: url(/res/new/img/ic_gridControl_new.svg);
}

.divisionWrap .control .ok {
  display: flex;
  align-items: center;
  height: 28px;
  background: var(--sub1-color);
  border-radius: 4px;
  padding: 0 16px;
  color: var(--white-color);
  border: 0;
  gap: 4px;
  font-weight: 500;
}

.divisionWrap .control .ok::before {
  content: "";
  width: 12px;
  height: 12px;
  background: center/cover no-repeat;
}

.divisionWrap .control .ok::before {
  background-image: url(/res/new/img/ic_gridControl_ok.svg);
}

.divisionWrap .control .line,
.divisionWrap .control .combobox {
  display: flex;
  align-items: center;
  height: 28px;
  border-radius: 4px;
  padding: 0 16px;
  color: var(--sub2-color);
  border: 1px solid var(--sub6-color);
  background-color: var(--bg1-color);
}

.divisionWrap .control .combobox {
  padding-right: 32px;
  background: var(--bg1-color) url(/res/new/img/ic_gridControl_combobox.svg) right 16px center/12px no-repeat;
}

.divisionWrap .control .df {
  display: flex;
  align-items: center;
  height: 28px;
  border-radius: 4px;
  padding: 0 16px;
  border: 1px solid var(--light-gray8);
  background-color: var(--white-color);
}

.divisionWrap .control .view {
  border: 0;
  height: 28px;
  padding-left: 24px;
  padding-right: 16px;
  background: url(/res/new/img/ic_gridControl_view.svg) right center/12px no-repeat;
}

.divisionWrap .control .excel {
  background: url(/res/new/img/ic_excel.svg) center no-repeat;
  border: 1px solid var(--light-gray8);
  border-radius: 4px;
  height: 28px;
  width: 42px;
  text-indent: -9999px;
  overflow: hidden;
}

.divisionWrap .control .cont-list {
  width: 28px;
  height: 28px;
  background: var(--white-color) center no-repeat;
  border: 1px solid var(--light-gray8);
  border-radius: 4px;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url(/res/new/img/ic_list.svg);
}

.divisionWrap .control .cont-grid {
  width: 28px;
  height: 28px;
  background: var(--white-color) center no-repeat;
  border: 1px solid var(--light-gray8);
  border-radius: 4px;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url(/res/new/img/ic_grid.svg);
}

.divisionWrap .dividerWrap {
  padding: 16px 88px 0;
  position: relative;
}

.divisionWrap .dividerWrap .divider {
  width: 1px;
  height: 100%;
  background: var(--light-gray8);
}

.divisionWrap .dividerWrap .arrowImg {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: var(--white-color) url(/res/new/img/ic_division_arr.svg) center/cover no-repeat;
}

.divisionWrap .dividerWrap .folderArrowImg {
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 70px;
  background: var(--white-color) url(/res/custom/img/arrow.svg) center/cover no-repeat;
}

.divisionWrap .left {
  flex: 1 0 0;
  padding-bottom: 20px;
}

.divisionWrap .left .flexWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.divisionWrap .left .flexWrap .searchInputWrap {
  margin-bottom: 0;
}

.divisionWrap .left .flexWrap .table-tit {
  margin: 0;
}

.divisionWrap .right {
  flex: 1 0 0;
  padding-bottom: 20px;
}

.divisionWrap .right .grid-tit {
  margin-top: 10px;
}

[attr=arrow] {
  display: inline-block;
  margin: 0 20px;
  width: 20px;
  height: 20px;
  background: url(/res/new/img/ic_arrow_right.svg) center no-repeat;
  vertical-align: bottom;
}

.tab-round {
  gap: 4px;
  padding: 0px 0px 13px 0px;
  border: 0;
}

.popup .tab-round{
  border-top: 1px solid #cbcbcb;
  padding: 13px 0px

}

.tab-round .nav-link {
  font-weight: 400;
  font-size: 13px;
  line-height: 0.2;
  color: var(--light-gray2);
  padding: 10px 16px;
  min-width: 120px;
  background: var(--white-color);
  border-radius: 5px !important;
  height: 36px;
  vertical-align: middle;
  border: 0.5px solid #c9c9c9;
}

.tab-round .nav-link.active {
  background: var(--sub1-color);
  color: var(--white-color);
  font-weight: 700;
}

.tab-round-content {
  margin-bottom: 20px;
}

.flexWrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flexWrap:has(.checkbox) {
  gap: 0;
}

.caption {
  margin-left: 24px;
  padding-left: 14px;
  font-weight: 400;
  font-size: 12px;
  color: var(--dark-gray6);
  position: relative;
}

.caption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  background-color: var(--light-gray6);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.flexWrap-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.appPackaging-nav {
  background-color: var(--bg1-color);
  padding: 22px;
  padding-right: 0;
  width: auto;
  position: absolute;
  top: 126px;
  left: 0;
  border: 0;
  flex-direction: column;
  gap: 8px;
  counter-reset: list-number;
}

.appPackaging-nav .nav-link {
  background: var(--white-color);
  border: 1px solid var(--light-gray8) !important;
  border-radius: 4px;
  width: 240px;
  margin: 0;
  padding: 16px 20px;
  text-align: left;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-gray4);
  counter-increment: list-number;
  display: flex;
  gap: 12px;
  position: relative;
}

.appPackaging-nav .nav-link::before {
  content: counter(list-number);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--light-gray9);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--light-gray1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.appPackaging-nav .nav-link.active {
  background-color: var(--sub7-color);
  border-color: var(--sub6-color) !important;
  color: var(--sub2-color);
  font-weight: 700;
}

.appPackaging-nav .nav-link.active::before {
  font-weight: 700;
  color: var(--sub2-color);
  background: var(--bg1-color);
  border: 1px solid var(--sub6-color);
}

.appPackaging-nav .nav-link.active::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25px;
  transform: rotate(45deg) translate(3px, -50%);
  width: 12px;
  height: 12px;
  background-color: var(--sub7-color);
  border: 1px solid var(--sub6-color);
  border-left-color: transparent;
  border-bottom-color: transparent;
  display: block;
}

.addTag .result {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.addTag .result .tagItem {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--sub11-color);
  border-radius: 8px;
  font-weight: 500;
  font-size: 12px;
  color: var(--primary-color);
}

.addTag .result .tagItem .tagRemove {
  width: 12px;
  height: 12px;
  background: url(/res/new/img/ic_12_delete.svg) center/cover no-repeat;
  text-indent: -9999px;
  cursor: pointer;
}

.addImg {
  display: flex;
  align-items: center;
  gap: 24px;
}

.addImg .caption {
  margin-left: 3px;
}

.addImg input {
  background: var(--white-color) !important;
  border: 1px solid var(--light-gray8) !important;
}

.appPackaginDesc {
  margin-top: -4px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43;
  color: var(--dark-gray4);
  margin-bottom: 32px;
}

.codeView {
  width: 100%;
  height: 600px;
  border-radius: 8px;
  overflow: auto;
}


.appPackaging-nav .template-nav .li {
  background-color: var(--white-color);
  padding: 22px;
  padding-right: 0;
  width: auto;
  min-height: calc(100vh - 126px);
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 126px;
  left: 0;
  border: 0;
  flex-direction: column;
  gap: 8px;
  counter-reset: list-number;
}


.appPackaging-nav .template-nav {
  background-color: var(--white-color);
  /*padding-left: 40px;*/
  padding-top: 5px;
  padding-right: 0;
  width: auto;
  box-sizing: border-box;
  position: relative;
  left: 0;
  border: 0;
  flex-direction: column;
  gap: 8px;
  counter-reset: sub-list;
}

.appPackaging-nav .template-nav .nav-link {
  background: var(--white-color);
  border: 1px solid var(--light-gray8) !important;
  border-radius: 4px;
  width: 240px;
  margin: 0;
  padding: 16px 23px;
  text-align: left;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dark-gray4);
  counter-increment: sub-list;
  display: flex;
  gap: 10px;
  position: relative;
}

.appPackaging-nav .template-nav .nav-link::before {
  content: "";
  /*width: 46px;*/
  /*height: 30px;*/
  /*border-radius: 50%;*/
  /*background-color: var(--light-gray9);*/
  /*font-weight: 400;*/
  /*font-size: 12px;*/
  /*line-height: 1.5;*/
  /*color: var(--light-gray1);*/
  display: inline-flex;
  background: url(../../custom/img/ic_16_linking.svg) no-repeat;
  /*align-items: center;*/

  /*justify-content: center;*/
}


.appPackaging-nav .template-nav .nav-link.active {
  background-color: var(--sub7-color);
  border-color: var(--sub6-color) !important;
  color: var(--sub2-color);
  font-weight: 500;
}

.appPackaging-nav .template-nav .nav-link.active::before {
  display: inline-flex;
  background: url(../../custom/img/ic_16_linking.svg) no-repeat;
  border: none;
  color: var(--sub7-color);
}

.appPackaging-nav .template-nav .nav-link.active::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25px;
  transform: rotate(45deg) translate(3px, -50%);
  width: 12px;
  height: 12px;
  background-color: var(--sub7-color);
  border: 1px solid var(--sub6-color);
  border-left-color: transparent;
  border-bottom-color: transparent;
  display: block;
}

.ruleRemove {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(/res/new/img/ic_12_delete.svg) center/cover no-repeat;
  text-indent: -9999px;
  cursor: pointer;
  float: right;
}

.none-pointer {
  pointer-events: none;
}

.step>.item>div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
}

.readonly-select {
  background-color: var(--light-gray9) !important;
  pointer-events: none;
}

#left_menu::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera*/
}

#left_menu {
  overflow: auto;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  height: calc(100vh - 136px);
}

.selectedMenu {
  color: var(--white-color) !important;
}

.page-item.active .page-link {
  z-index: unset;
}

.header-no {
  width: 5% !important;
}

.caption-span {
  max-width: 600px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.disabled-button {
  color: var(--dark-gray6) !important;
  background-color: var(--light-gray9) !important;
  cursor: not-allowed !important;
  border: 1px solid lightgrey;
}

/* 대시보드 - 2025/05/09 */
table {
  width: auto;
  empty-cells: show;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

table th {
  font-weight: normal;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: rgba(183, 183, 183, 0.5);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-bar);
  border-radius: 10px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: 10px;
}

/* PAGE : INDEX */
.dashboard_header {
  display: flex;
  padding: 10px 0;
  justify-self: end;
  align-items: center;
  gap: 6px;
}

.dashboard_header>span {
  font-size: 11px;
  font-weight: 300;
  color: var(--light-gray2);
}

.dashboard_header>span>strong {
  margin-left: 6px;
  color: var(--black-color);
}

.btn-refresh {
  width: 20px;
  height: 20px;
  background: var(--ico-refresh) center no-repeat;
  background-size: 20px 20px;
}

.btn-setting {
  width: 20px;
  height: 20px;
  background: var(--ico-setting) center no-repeat;
  background-size: 20px 20px;
}

.dashboard_wrap {
  display: flex;
  gap: 17px;
}

.dashboard_wrap~.dashboard_wrap {
  margin-top: 17px;
}

.con_box {
  position: relative;
  padding: 20px;
  width: 25%;
  height: 270px;
  background: var(--bg2-color);
  border: 0.5px solid var(--line-gray1);
  border-radius: 10px;
  box-shadow: 0px 5px 10px 0px var(--shodow-color1);
  box-sizing: border-box;
}

.con_box.w_50 {
  width: calc(50% + 17px);
}

h2.tit {
  position: relative;
  margin: 0;
  padding: 0 23px 0 0;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark-gray3);
}

h2.tit>a {
  color: var(--dark-gray3);
  text-decoration: none;
}

h2.tit a:after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: 3px;
  width: 17px;
  height: 20px;
  background-size: 17px 20px;
}

.dashboard_wrap .date {
  position: absolute;
  top: 26px;
  right: 22px;
  font-size: 12px;
  font-weight: 300;
  color: var(--light-gray2);
}

.dashboard_wrap [class*="_con"] {
  margin-top: 10px;
  padding: 5px 5px 0;
  border-top: 1px solid var(--line-gray2);
}

.data_con1 {
  font-size: 14px;
  font-weight: 300;
  color: var(--black-color);
}

.total_amount {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin: 14px 0 20px;
  font-size: 20px;
}

.total_amount>strong {
  font-size: 30px;
  font-weight: 800;
}

.amount_list li {
  display: flex;
  padding: 9px 0;
  justify-content: space-between;
  align-items: center;
}

.amount_list li~li,
.notice_con li~li {
  border-top: 0.5px solid var(--line-gray2);
}

.amount_list li .period {
  font-size: 14px;
  color: var(--light-gray2);
}

.amount_list li .period>strong {
  font-weight: 700;
  color: var(--black-color);
}

.amount_list li .amount {
  font-size: 11px;
}

.amount_list li .amount>strong {
  margin: 0 3px;
  font-size: 16px;
  font-weight: 800;
}

.notice_con li {
  display: flex;
  padding: 8px 0;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 300;
}

.notice_con li a.notice_title {
  display: -webkit-box;
  padding-right: 1.2rem;
  color: var(--dark-gray6);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
}

.notice_con li .notice_date {
  color: var(--light-gray5);
}

.data_con2 {
  display: flex;
  padding-top: 15px;
  justify-content: space-between;
  align-items: center;
}

.data_con2>p {
  width: 106px;
  height: 106px;
}

.data_list {
  padding-left: 15px;
  width: calc(100% - 106px);
}

.data_list>li {
  display: flex;
  padding: 8px 0 0;
  justify-content: space-between;
  font-weight: 300;
}

.data_list .tit {
  position: relative;
  padding-left: 13px;
  font-size: 12px;
}

.data_list .tit:before {
  content: '';
  display: block;
  position: absolute;
  top: 7px;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--dark-gray6);
  border-radius: 50%;
}

.data_list .amount {
  font-size: 11px;
}

.data_list .amount>strong {
  padding: 0 3px;
  font-size: 16px;
  font-weight: 600;
}

.data_list li.lv1 {
  color: var(--graph-color1);
}

.data_list li.lv2 {
  color: var(--graph-color2);
}

.data_list li.lv3 {
  color: var(--graph-color3);
}

.data_list li.lv4 {
  color: var(--graph-color4);
}

.data_list li.lv5 {
  color: var(--graph-color5);
}

.data_list li.lv6 {
  color: var(--graph-color6);
}

.data_list li.lv1>.tit:before {
  background: var(--graph-color1);
}

.data_list li.lv2>.tit:before {
  background: var(--graph-color2);
}

.data_list li.lv3>.tit:before {
  background: var(--graph-color3);
}

.data_list li.lv4>.tit:before {
  background: var(--graph-color4);
}

.data_list li.lv5>.tit:before {
  background: var(--graph-color5);
}

.data_list li.lv6>.tit:before {
  background: var(--graph-color6);
}

.list_con:has(.resource_list) {
  padding: 5px 0 0;
}

.resource_list {
  display: flex;
  flex-wrap: wrap;
}

.resource_list li {
  margin-top: 5px;
  min-width: 82px;
  width: 25%;
  height: 64px;
  text-align: center;
  border-bottom: 0.5px solid var(--line-gray2);
}

.resource_list li:nth-child(10),
.resource_list li:nth-child(11),
.resource_list li:nth-child(12) {
  border-bottom: 0 none;
}

.resource_list .tit {
  padding-top: 8px;
  font-size: 11px;
  color: var(--light-gray2);
}

.resource_list .num {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--black-color);
}

.resource_list .tit~.num {
  padding: 5px 0;
}

.resource_list li:hover .tit,
.resource_list li:hover .num {
  color: var(--primary-color);
  background: var(--bg1-color);
  border-radius: 6px;
}

.resource_list li:hover .tit {
  border-radius: 6px 6px 0 0;
}

.resource_list li:hover .num {
  border-radius: 0 0 6px 6px;
}

.list_con:has(.app_list),
.list_con:has(.log_list) {
  padding: 5px 0 0;
}

.app_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 25px;
  padding-top: 15px;
}

.app_list li {
  text-align: center;
}

.app_list li .tit {
  font-size: 11px;
  color: var(--light-gray2);
}

.log_list {
  padding: 0 10px;
  height: 200px;
  overflow: auto;
}

.log_list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--line-gray2);
}

.log_list li .log_info {
  padding-left: 13px;
  color: var(--dark-gray6);
}

.log_list li .log_info>.tit {
  position: relative;
  font-size: 13px;
  font-weight: 600;
}

.log_list li .log_info>.tit:before {
  content: '';
  display: block;
  position: absolute;
  top: 6px;
  left: -13px;
  width: 6px;
  height: 6px;
  background: var(--graph-color4);
  border-radius: 50%;
}

.log_list li .log_info>.state {
  padding-top: 3px;
  font-size: 12px;
  font-weight: 300;
}

.log_list li .log_date {
  font-size: 12px;
  color: var(--light-gray5);
}

[class*="tbl_data"] {
  position: relative;
  margin-top: 10px;
  padding-top: 5px;
}

[class*="tbl_data"] table {
  border-top: 0.5px solid var(--line-gray3);
}

[class*="tbl_data"] table th,
[class*="tbl_data"] table td {
  position: relative;
  padding: 0;
  height: 32px;
  line-height: 1.6;
  font-size: 12px;
  font-weight: 300;
  color: var(--black-color);
  white-space: nowrap;
}

[class*="tbl_data"] table th {
  color: var(--dark-gray6);
  background: var(--bg3-color);
  border-bottom: 0.5px solid var(--line-gray4);
}

[class*="tbl_data"] table td {
  text-align: center;
  border-bottom: 0.5px solid var(--line-gray2);
}

[class*="tbl_data"] table tr:hover {
  background: var(--bg1-color);
}

[class*="res_type"] {
  display: inline-flex;
  min-width: 44px;
  height: 20px;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: var(--primary-color);
  background: rgba(117, 138, 225, 0.1);
  border: 0.5px solid var(--primary-color);
  border-radius: 25px;
}

.res_type1 {
  color: var(--primary-color);
  background: rgba(117, 138, 225, 0.1);
  border: 0.5px solid var(--primary-color);
}

.res_type2 {
  color: var(--point-sub5);
  background: rgba(83, 160, 222, 0.1);
  border: 0.5px solid var(--point-sub5);
}

.txt_b700 {
  font-weight: 700 !important;
}

/* TOP : UTIL */
.user_mode~.lang_mode {
  margin-left: 15px;
}

.user_mode ul {
  display: flex;
  align-items: center;
  width: 100px;
  height: 24px;
  background: var(--white-a10);
  border: 0.5px solid var(--white-a20);
  border-radius: 3px;
}

.user_mode li {
  width: 50%;
  text-align: center;
}

.user_mode li a {
  display: block;
  line-height: 2.4;
  font-size: 12px;
  font-weight: 300;
  color: var(--white-color);
  text-decoration: none;
}

.user_mode li a.active {
  height: 24px;
  line-height: 2.1;
  font-weight: 500;
  color: var(--point-sub6);
  background: var(--white-color);
}

.user_mode li:first-child a.active {
  border-radius: 3px 0 0 3px;
}

.user_mode li:last-child a.active {
  border-radius: 0 3px 3px 0;
}

.lang_mode ul {
  display: flex;
  align-items: center;
}

.lang_mode li {
  position: relative;
  padding: 0 10px;
  width: 50%;
  text-align: center;
}

.lang_mode li:before {
  content: '';
  position: absolute;
  display: block;
  top: 10px;
  left: 0;
  width: 0.5px;
  height: 9px;
  background: var(--white-a30);
}

.lang_mode li:first-child:before {
  display: none;
}

.lang_mode li a {
  display: block;
  line-height: 2.4;
  font-size: 13px;
  font-weight: 300;
  color: var(--white-a70);
  text-decoration: none;
}

.lang_mode li a.active {
  font-weight: 800;
  color: var(--white-color);
}

/* .lnb.lnb_small {
  width: 80px;
} */

.lnb.lnb_small .menu {
  padding: 20px 10px 0 21px;
}

.lnb.lnb_small .menu li {
  width: 36px;
  overflow: visible;
  z-index: 1200;
}

.lnb.lnb_small .menu li a {
  padding-left: 0;
  font-size: 0;
  background-position: 9px center;
}

.lnb.lnb_small .menu>li.ac>a,
.lnb.lnb_small .menu>li:hover>a {
  position: relative;
}

.lnb.lnb_small .menu>li>a span.depth1 {
  display: none;
}

.lnb.lnb_small .menu>li.ac>a span.depth1,
.lnb.lnb_small .menu>li:hover>a span.depth1 {
  position: absolute;
  display: block;
  left: 36px;
  padding: 2px 8px;
  width: auto;
  height: 24px;
  font-size: 12px;
  font-weight: 400;
  color: var(--primary-color);
  white-space: nowrap;
  background: var(--small-sub-bg);
  border: 0.5px solid var(--small-sub-line);
  border-radius: 3px;
  box-shadow: 0px 2px 5px 0px var(--small-sub-shadow);
  z-index: 1000;
}

.lnb.lnb_small .menu>li.ac>a:after,
.lnb.lnb_small .menu>li:hover>a:after {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  width: 36px;
  height: 36px;
  background-color: var(--small-menu-on);
  border-radius: 3px;
  z-index: -1;
}

.lnb.lnb_small .menu li:has(.depth3) .depth3,
.lnb.lnb_small .menu li:has(.depth3)::after {
  display: none;
}

/* PAGE : 신청안내 */
.tit_page>h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--black-color);
  letter-spacing: -0.5px;
}

.tit_page>.sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--dark-gray2);
  letter-spacing: -0.2;
}

.tit_page>h1+.sub {
  margin-top: 10px;
}

.info_txt {
  padding: 12px 40px;
  border: 0.5px solid var(--line-gray6);
  border-radius: 10px;
}

.info_txt>dl {
  display: flex;
  padding: 18px 0;
  align-items: center;
  border-bottom: 0.5px solid var(--line-gray7);
}

.info_txt>dl:last-child {
  border-bottom: 0;
}

.info_txt>dl>dt {
  width: 134px;
  font-size: 15px;
  font-weight: 700;
  color: var(--black-color);
}

.info_txt>dl>dd {
  width: calc(100% - 134px);
}

.info_txt>dl>dd ul li {
  position: relative;
  padding-left: 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--dark-gray2);
}

.info_txt>dl>dd ul li:before {
  content: '';
  position: absolute;
  display: block;
  top: 9px;
  left: -10px;
  width: 3px;
  height: 3px;
  background: var(--dark-gray2);
}

.step_txt {
  display: flex;
  justify-content: start;
}

.step_txt>li {
  position: relative;
  padding-left: 70px;
  width: auto;
  font-size: 14px;
  font-weight: 400;
  color: var(--dark-gray2);
  text-align: left;
}

.step_txt>li:first-child {
  padding-left: 0;
}

.step_txt>li:after {
  content: '';
  position: absolute;
  display: block;
  top: 50%;
  right: -35px;
  margin: -15px -18px 0 0;
  width: 36px;
  height: 31px;
  background: url(/res/new/img/ico_step_arrow.svg) center no-repeat;
  background-size: 36px 31px;
}

.step_txt>li:last-child:after {
  display: none;
}

.step_txt>li>span {
  display: block;
}

.step_txt>li .s_tit {
  position: relative;
  display: block;
  padding-left: 27px;
  font-size: 15px;
  font-weight: 700;
  color: var(--black-color);
}

.step_txt>li .s_tit:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  font-weight: 700;
  color: var(--white-color);
  text-align: center;
  background: var(--bg5-color);
  border-radius: 50%;
}

.step_txt>li:first-child .s_tit:before {
  content: '1';
}

.step_txt>li:nth-child(2) .s_tit:before {
  content: '2';
}

.step_txt>li:nth-child(3) .s_tit:before {
  content: '3';
}
.step_txt>li:nth-child(4) .s_tit:before {
  content: '4';
}
.step_txt>li:nth-child(5) .s_tit:before {
  content: '5';
}

.step_txt>li>span~span {
  margin-top: 10px;
}

.tab_area~.info_txt {
  margin-top: 30px;
}

/* TAB */
.tit_page~.tab_area {
  margin-top: 30px;
}

.tab_wrap {
  display: flex;
  width: 100%;
  height: auto;
  align-items: start;
}

.tab_head {
  width: 230px;
}

#vm_search_input {
  position: relative;
  margin-bottom: 15px;
}

#vm_search_input label {
  display: block;
}

#vm_search_input input {
  position: relative;
  width: 100%;
  height: 36px;
  font-size: 13px;
  font-weight: 300;
  color: var(--dark-gray2);
  background: var(--bg5-color);
  border: 0.5px solid var(--line-gray5);
  border-radius: 4px;
}

#vm_search_input input::-webkit-input-placeholder {
  font-size: 13px;
  font-weight: 300;
  color: var(--light-gray4);
}

#vm_search_input .btn-search {
  content: '';
  position: absolute;
  display: block;
  top: 8px;
  right: 12px;
  width: 20px;
  height: 20px;
  background: url(/res/new/img/ico_btn_search2.svg) center no-repeat;
  background-size: 20px 20px;
}

.tab_menu {
  height: 240px;
  overflow: auto;
  margin-bottom: 20px;
}

.tab_menu li {
  display: block;
  width: 200px;
  height: 36px;
  text-align: left;
}

.tab_menu li~li {
  margin-top: 3px;
}

.tab_menu li a {
  position: relative;
  display: block;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 300;
  color: var(--tab-menu);
  line-height: 36px;
  text-decoration: none;
}

.tab_menu li a:hover,
.tab_menu li a.active {
  color: var(--primary-color);
  background: var(--tab-menu-on);
  border-radius: 6px;
}

.tab_menu li a.active {
  font-weight: 700;
}

.tab_menu li a:hover:after,
.tab_menu li a.active:after {
  content: '';
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 17px;
  background: var(--tab-menu-arrow) center no-repeat;
  background-size: 20px 17px;
}

.tab_content {
  padding-left: 40px;
  width: calc(100% - 230px);
}

.tab_content .total {
  font-size: 12px;
  font-weight: 300;
  color: var(--black-color);
}

.tab_content .total>strong {
  margin-left: 8px;
  font-weight: 800;
}

.tab_content .total~.tab_list {
  margin-top: 8px;
}

.tab_list>ul {
  display: flex;
  padding-bottom: 10px;
  gap: 8px;
  overflow: auto;
}

.tab_list .info_box {
  position: relative;
  display: block;
  padding: 15px 20px;
  width: 250px;
  height: 140px;
  background: var(--bg6-color);
  border: 0.5px solid var(--line-gray6);
  border-radius: 10px;
  text-decoration: none;
}

.tab_list .info_box .type {
  display: inline-block;
  width: auto;
  min-width: 40px;
  height: 20px;
  font-size: 11px;
  font-weight: 400;
  color: var(--primary-color);
  text-align: center;
  background: rgba(117, 138, 225, 0.1);
  border: 0.5px solid var(--primary-color);
  border-radius: 2px;
}

.tab_list .info_box .tit {
  margin: 10px 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
}

.tab_list .info_box .tag {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--tab-list-tag);
}

.tab_list~.tab_list_txt {
  margin-top: 20px;
}

.tab_list_txt>p {
  height: 105px;
  overflow: auto;
  font-size: 14px;
  font-weight: 400;
  color: var(--dark-gray2);
}

.info_box[data-info*="project_"]:after {
  content: '';
  position: absolute;
  display: block;
  bottom: 15px;
  right: 20px;
  width: 56px;
  height: 55px;
  background-size: 56px 55px;
}

.info_box[data-info="project_redhat"]:after {
  background: url(/res/new/img/ico_redhat.svg) center no-repeat;
}

.info_box[data-info="project_win2022"]:after {
  background: url(/res/new/img/ico_win2022.svg) center no-repeat;
}

.info_box[data-info="project_ubuntu"]:after {
  background: url(/res/new/img/ico_ubuntu.svg) center no-repeat;
}

.info_box[data-info="project_centos"]:after {
  background: url(/res/new/img/ico_centos.svg) center no-repeat;
}

.info_box[data-info="project_mysql"]:after {
  width: 56px;
  height: 60px;
  background: url(/res/new/img/ico_mysql.svg) center no-repeat;
  background-size: 56px 60px;
}

.tab_list .info_box:hover,
.tab_list .info_box.active {
  background: var(--tab-list-bg);
}

/* FORM */
.inline_form {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.inline_form [class*="el_text"],
.inline_form [class*="el-select"] {
  position: relative;
}

.inline_form>span {
  display: inline-flex;
  padding: 0 10px;
  font-size: 14px;
  justify-content: center;
  align-items: center;
}

input[type="search"] {
  position: relative;
}

input[type="search"]::-webkit-search-cancel-button {
  width: 38px;
  height: 38px;
  appearance: none;
  -webkit-appearance: none;
}

.el_text1 input,
.el_select1 select,
.el_text1 textarea {
  padding: 8px 12px;
  width: 495px;
  height: 40px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--dark-gray6);
  background: var(--white-color);
  border: 0.5px solid var(--light-gray7);
  border-radius: 4px;
}

.el_text1 input:focus,
.el_select1 select:focus,
.el_text1 textarea:focus {
  border: 2px solid var(--primary-color);
}

.el_text1 textarea {
  height: auto;
}

[class*="el-text"] input:focus,
[class*="el-text"] textarea:focus,
[class*="el-select"] select:focus,
[class*="el-select"] input:focus {
  outline: 0;
}

.el_select1 select {
  background: url(/res/new/img/ico_select_arrow.svg) center right 10px no-repeat;
}

/* BUTTON */
.area_btn1 {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 5px;
}

.area_space {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[class*="btn_action"] {
  position: relative;
  vertical-align: top;
  white-space: nowrap;
}

.btn_action1 {
  display: flex;
  min-width: 86px;
  height: 36px;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 400;
  color: var(--white-color);
  border-radius: 5px;
}

.btn_action1.btn_default {
  font-weight: 500;
  color: var(--white-color);
  background: var(--primary-color);
}

.btn_action1.btn_inline {
  color: var(--light-gray3);
  background: var(--white-color);
  border: 0.5px solid var(--light-gray7);
}

/* PAGE : 신규신청폼 */
.apply_step {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.apply_step>ol {
  display: flex;
  justify-content: center;

}

.apply_step li {
  position: relative;
  width: 156px;
}

.apply_step li:after {
  content: '';
  position: absolute;
  display: block;
  right: 0;
  top: 10px;
  width: 130px;
  height: 1.5px;
  border-bottom-style: dashed;
  border-color: var(--line-gray7);
}

.apply_step li:last-child:after {
  display: none;
}

.apply_step li .num {
  display: inline-block;
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-size: 16px;
  font-weight: 300;
  color: var(--step-color1);
  text-align: center;
  background: var(--bg8-color);
  border-radius: 50%;
}

.apply_step li .name {
  display: block;
  line-height: 2.4;
  font-size: 15px;
  font-weight: 200;
  color: var(--step-color2);
}

.apply_step li.active .num {
  font-weight: 700;
  color: var(--white-color);
  background: var(--primary-color);
}

.apply_step li.done .num {
  font-size: 0;
  background: url(/res/new/img/ico_step_done.svg) center no-repeat var(--primary-color);
}

.apply_step li.active .name,
.apply_step li.done .name {
  font-weight: 700;
  color: var(--primary-color);
}

.apply_step li.done .name {
  font-weight: 300;
}

.apply_step li.active:after,
.apply_step li.done:after {
  border-bottom-style: solid;
  border-color: var(--primary-color);
}

.apply_form>form {
  position: relative;
}

.apply_form .inline_form.col3>.form {
  width: 33.333%;
}

.apply_form .inline_form.col2>.form {
  width: 50%;
}

.apply_form .inline_form>.form {
  display: flex;
  padding: 5px 14px;
  width: 100%;
  align-items: center;
  border-bottom: 0.5px solid var(--line-gray7);
}

.apply_form .inline_form>.form:first-child {
  border-top: 0.5px solid var(--line-gray7);
}

.apply_form .inline_form dt {
  position: relative;
  width: 160px;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  color: var(--dark-gray2);
}

.apply_form .inline_form dd {
  position: relative;
  width: calc(100% - 160px);
  background: transparent;
}

.apply_form>form~.area_btn1 {
  margin-top: 20px;
}

.asterisk {
  position: relative;
}

.asterisk:after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: -7px;
  width: 4px;
  height: 4px;
  background: var(--point-sub1);
  border-radius: 50%;
}

.apply_form dd.inline_form .txt {
  font-size: 12px;
  color: var(--light-gray4);
}

/* TOOLTIP */
.tooltip {
  position: relative;
  display: inline-block;
  margin-left: 7px;
}

.tooltip .ic1 {
  display: block;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 800;
  color: var(--white-color);
  text-align: center;
  background: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
}


.tooltip_wrap {
  position: absolute;
  left: -9px;
  top: 20px;
  width: 150px;
  visibility: hidden;
}

.tooltip_wrap .txt {
  position: relative;
  margin-top: 6.8px;
  padding: 5px 10px;
  width: fit-content;
  height: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--primary-color);
  letter-spacing: -0.25px;
  background-color: var(--white-color);
  border: 0.5px solid var(--primary-color);
  border-radius: 5px;
  box-shadow: 5px 5px 5px 0px var(--shodow-color3);
  z-index: 100;
}

.tooltip_wrap .txt::after {
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  top: -7px;
  width: 0;
  border-color: var(--primary-color) transparent;
  border-style: solid;
  border-width: 0 6px 8px 6.5px;
  z-index: 1;
}

.tooltip_wrap .txt::before {
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  top: -8px;
  width: 0;
  border-color: var(--primary-color) transparent;
  border-style: solid;
  border-width: 0 6px 8px 6.5px;
  z-index: 0;
}

.tooltip:hover .tooltip_wrap {
  visibility: visible;
}

/* SWITCH */
input,
textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

.custom_control {
  position: absolute;
  display: inline-block;
  bottom: 30px;
  left: 95px;
  z-index: 100;
}

.custom_control>input {
  position: absolute;
  height: 26px;
  border: 0 none !important;
}

.custom_control_label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}

.custom_switch .custom_control_input:checked~.custom_control_label::after {
  -webkit-transform: translateX(12px);
  transform: translateX(12px);
}

.custom_switch .custom_control_label::before {
  content: 'LIGHT';
  display: block;
  top: 0;
  left: 0;
  padding-left: 25px;
  width: 70px;
  height: 26px;
  line-height: 1.8;
  font-size: 13px;
  font-weight: 300;
  color: #32323d;
  background: var(--white-a20);
  border: 0.5px solid rgba(50, 50, 61, 0.3);
  box-shadow: 0px 3px 3px 0px var(--black-a20) inset;
  border-radius: 30px;
  box-sizing: border-box;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}

.custom_switch .custom_control_label::after {
  content: '';
  position: absolute;
  display: block;
  top: 5px;
  left: 5px;
  width: 16px;
  height: 16px;
  background: #32323d;
  border-radius: 50%;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}

.custom_control_input:checked~.custom_control_label::before {
  content: 'DARK';
  padding-left: 10px;
  color: var(--white-color);
  background: #323245;
  border: 0.5px solid #4e4e65;
  box-shadow: 0px 3px 3px 0px var(--black-a20) inset;
}

.custom_switch .custom_control_input:checked~.custom_control_label::after {
  top: 5px;
  left: 37px;
  background: var(--white-color);
  box-shadow: 0px 4px 4px 0px var(--black-a20) inset;
}

/* POPUP LAYER : 알림 */
.popup_layer {
  position: absolute;
  display: none;
  padding: 0 20px 15px;
  right: 30px;
  width: 350px;
  height: 540px;
  background: #FFFFFF;
  border: 0.5px solid var(--line-gray1);
  border-radius: 10px;
  box-shadow: 0px 3px 7px 0px var(--black-a20);
  z-index: 0;
}

.popup_head {
  height: 34px;
  line-height: 34px;
  border-bottom: 0.5px solid var(--line-gray2);
}

.popup_head .tit {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark-gray2);
}

.popup_head .btn_popup_close {
  right: 0;
}

.popup_body .alarm_area {
  display: flex;
  margin-top: 14px;
  align-items: center;
  gap: 3px;
}

.popup_body .alarm_area li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 60px;
  height: 24px;
  font-size: 12px;
  font-weight: 400;
  color: var(--light-gray2);
  background: var(--white-color);
  border: 0.5px solid var(--light-gray6);
  border-radius: 20px;
}

.popup_body .alarm_area li.active a {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.popup_body .alarm_num {
  position: absolute;
  top: -8px;
  right: 3px;
  padding: 0 5px;
  width: auto;
  min-width: 13px;
  height: 13px;
  line-height: 12px;
  font-size: 7.5px;
  font-weight: 600;
  color: var(--white-color);
  background: var(--light-gray2);
  border-radius: 13px;
  box-sizing: border-box;
}

.popup_content {
  margin-top: 12px;
  margin-right: -10px;
  padding-right: 10px;
  height: 440px;
  overflow: auto;
}

.alarm_list .s_tit {
  position: relative;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dark-gray2);
}

.alarm_list .s_tit:after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: 3px;
  width: 17px;
  height: 20px;
  background: url(/res/new/img/ico_tit_arrow.svg) center no-repeat;
  background-size: 17px 20px;
}

.alarm_list~.alarm_list {
  margin-top: 12px;
}

.alarm_list li {
  padding: 7px;
  background: var(--light-gray9);
  border-radius: 4px;
}

.alarm_list li~li {
  margin-top: 2px;
}

.alarm_list li .title {
  position: relative;
  padding-left: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dark-gray2);
}

.alarm_list li .title:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--light-gray2);
}

[data-type="faild"] .alarm_num,
[data-type="faild"].alarm_list li .title:before {
  background: var(--point-sub2);
}

[data-type="ing"] .alarm_num,
[data-type="ing"].alarm_list li .title:before {
  background: var(--primary-color);
}

[data-type="system"] .alarm_num,
[data-type="system"].alarm_list li .title:before {
  background: var(--point-sub3);
}

[data-type="sign"] .alarm_num,
[data-type="sign"].alarm_list li .title:before {
  background: var(--point-sub4);
}

.alarm_list li .date {
  padding-left: 10px;
  font-size: 10px;
  font-weight: 300;
  color: var(--light-gray3);
}

/* POPUP LAYER : setting */
.label-chk input[type="checkbox"] {
  appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.label-chk {
  position: relative;
  background: var(--white-color);
}

.label-chk label {
  position: relative;
  display: inline-block;
  line-height: 26px;
  font-size: 13px;
  font-weight: 300;
  color: var(--light-gray3);
  vertical-align: top;
}

.label-chk input {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
  cursor: pointer;
}

.chk-form {
  position: relative;
  padding-left: 25px;
}

.chk-form>input:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
}

.chk-form>input[type="checkbox"]:before {
  width: 14px;
  height: 14px;
  background: var(--ico-check-off) center no-repeat;
  background-size: 14px 14px;
}

.chk-form>input[type="checkbox"]:checked:before {
  background: var(--ico-check-on) center no-repeat;
  background-size: 14px 14px;
}

.popup_layer .area_btn1 {
  justify-content: center;
  border: 0.5px solid var(--light-gray6);
}

.popup_layer .btn_action1 {
  min-width: 60px;
  height: 26px;
  padding: 6px 12px;
  font-size: 12px;
}

.popup_layer .btn_action1.btn_default {
  font-weight: 400;
}

/* SLIDE-POPUP : summary */
#summaryWrap .card {
  padding: 0 20px;
  width: 400px;
  background-color: #fff;
  border: 0.5px solid rgba(83, 108, 214, 0.5);
  border-radius: 10px;
  box-shadow: 0px 3px 7px 0px var(--black-a20);
}

#summaryWrap .card-header {
  padding: 0;
  line-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: #333;
  background: 0;
  border-bottom: 0;
}

#summaryWrap .summary-section {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

#summaryWrap .summary-section~.summary-section {
  margin-top: 10px;
}

#summaryWrap.summary-section-title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  border-left: 0;
  padding-left: 10px;
}

#summaryWrap.summary-section-title>span {
  padding-right: 5px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background-color: #758ae1;
  border-radius: 50%;
}

#summaryWrap .summary-list {
  padding: 5px 20px;
  background: rgba(117, 138, 225, 0.06);
  border: 0.5px solid rgba(83, 108, 214, 0.5);
  border-radius: 7px;
}

#summaryWrap .summary-list dl {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 300;
}

#summaryWrap .summary-list dl~dl {
  border-top: 0.5px solid #e9e9e9;
}

#summaryWrap .summary-list dt {
  width: 150px;
  color: #999;
}

#summaryWrap .summary-list dd {
  width: calc(100% - 150px);
  color: #333;
}

#summaryWrap .summary-total {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}

#summaryWrap .summary-total>.tit {
  font-size: 13px;
  font-weight: 300;
  color: #999;
}

#summaryWrap .summary-total>.amount {
  font-size: 16px;
  font-weight: 300;
  color: #000;
}

#summaryWrap .summary-total>.amount strong {
  font-size: 26px;
  font-weight: 800;
}

/* NODATA */
.data_result {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}

.no_data {
  position: relative;
  padding-top: 60px;
  font-size: 13px;
  font-weight: 300;
  color: #000;
}

.no_data:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 50px;
  margin-left: -20px;
  background: url(/res/new/img/no_data.svg) center !important;
}