@charset "UTF-8";

.back-drop{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 999;background: rgba(0,0,0,0.5);display: none}

.w-16 {width: 16px !important; }
.w-20 {width: 20px !important; }
.w-24 {width: 24px !important; }
.w-30 {width: 30px !important; }
.w-40 {width: 40px !important; }
.w-48 {width: 48px !important; }
.w-50 {width: 50px !important; }
.w-60 {width: 60px !important; }
.w-70 {width: 70px !important; }
.w-80 {width: 80px !important; }
.w-90 {width: 90px !important; }
.w-96 {width: 96px !important; }
.w-110 {width: 110px !important; }
.w-120 {width: 120px !important; }
.w-128 {width: 128px !important; }
.w-130 {width: 130px !important; }
.w-140 {width: 140px !important; }
.w-150 {width: 150px !important; }
.w-160 {width: 160px !important; }
.w-180 {width: 180px !important; }
.w-200 {width: 200px !important; }
.w-210 {width: 210px !important; }
.w-220 {width: 220px !important; }
.w-240 {width: 240px !important; }
.w-280 {width: 280px !important; }
.w-300 {width: 300px !important; }
.w-310 {width: 310px !important; }
.w-320 {width: 320px !important; }
.w-350 {width: 350px !important; }
.w-400 {width: 400px !important; }
.w-440 {width: 440px !important; }
.w-500 {width: 500px !important; }
.w-650 {width: 650px !important; }
.w-800 {width: 800px !important; }
.w-xs {width: 90px !important; }
.w-sm {width: 120px !important; }
.w {width: 190px !important; }
.w-md {width: 240px !important; }
.w-lg {width: 280px !important; }
.w-xl {width: 320px !important; }
.w-auto {width: auto !important; }

.max-w-80{max-width: 80% !important; }
.max-w-300{max-width: 300px !important; }
.max-w-400{max-width: 400px !important; }

.h-20 {height: 20px !important; }
.h-24 {height: 24px !important; }
.h-30 {height: 30px !important; }
.h-40 {height: 40px !important; }
.h-48 {height: 48px !important; }
.h-50 {height: 50px !important; }
.h-60 {height: 60px !important; }
.h-80 {height: 80px !important; }
.h-96 {height: 96px !important; }
.h-128 {height: 128px !important; }
.h-140 {height: 140px !important; }
.h-160 {height: 160px !important; }
.h-180 {height: 180px !important; }
.h-190 {height: 190px !important; }
.h-200 {height: 200px !important; }
.h-230 {height: 230px !important; }
.h-280 {height: 280px !important; }
.h-300 {height: 300px !important; }
.h-350 {height: 350px !important; }
.h-400 {height: 400px !important; }
.h-450 {height: 450px !important; }
.h-484 {height: 484px !important; }
.h-500 {height: 500px !important; }
.h-650 {height: 650px !important; }
.h-xs {height: 90px !important; }
.h-sm {height: 120px !important; }
.h {height: 190px !important; }
.h-md {height: 240px !important; }
.h-lg {height: 280px !important; }
.h-xl {height: 320px !important; }
.h-auto {height: auto !important; }

.text-100{font-weight: 100 !important}
.text-200{font-weight: 200 !important}
.text-300{font-weight: 300 !important}
.text-400{font-weight: 400 !important}
.text-500{font-weight: 500 !important}
.text-600{font-weight: 600 !important}
.text-700{font-weight: 700 !important}
.text-800{font-weight: 800 !important}
.text-900{font-weight: 900 !important}

.text-10{font-size: 10px !important}
.text-11{font-size: 11px !important}
.text-12{font-size: 12px !important}
.text-14{font-size: 14px !important}
.text-15{font-size: 15px !important}
.text-16{font-size: 16px !important}
.text-18{font-size: 18px !important}
.text-20{font-size: 20px !important}
.text-22{font-size: 22px !important}
.text-24{font-size: 24px !important}
.text-28{font-size: 28px !important}
.text-30{font-size: 30px !important}
.text-36{font-size: 36px !important}
.text-42{font-size: 42px !important}
.text-46{font-size: 46px !important}
.text-50{font-size: 50px !important}

.thead-css{background-color: #f3f3f4;}
.table.align-middle th,
.table.align-middle td{vertical-align: middle;}

.word-break-all{word-break:break-all}
.break-word{word-wrap: break-word}

.ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.pagination{justify-content: center; align-items: center;}  

.page-loading{position: fixed;left: 0;top: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.5);display: none;z-index: 9999;}
.page-loading.active{display: block;}
.page-loading .cont-wrap{font-size: 15px;color: #fff;;display: flex;align-items: center;flex-direction: column;justify-content: center;text-align: center;height: 100%;}
.page-loading .cont-wrap .sk-chase{margin-bottom: 100px;}

.c-pointer {cursor: pointer;}

/* 2024.07.24(WED) 토글 CSS 추가 START */
.redToggle {
  position: absolute;
  /* hidden */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.darkToggle {
  position: absolute;
  /* hidden */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.switch_label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  width: 38px;
  height: 21px;
  background: #fff;
  border: 2px solid #ababab;
  border-radius: 20px;
  transition: 0.2s;
}
.switch_label:hover {
  border: 2px solid #8d8d8d;
  background: #efefef;
}
.onf_btn {
  position: absolute;
  top: 1.6px;
  left: 2px;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 20px;
  background: #ababab;
  transition: 0.2s;
}

/* checking style */
.redToggle:checked+.switch_label {
  background: #ED5565;
  border: 2px solid #ED5565;
}

.redToggle:checked+.switch_label:hover {
  background: #c44;
}

/* move */
.redToggle:checked+.switch_label .onf_btn {
  left: 19px;
  background: #fff;
}

.darkToggle:checked+.switch_label {
  background: #454545;
  border: 2px solid #454545;
}

.darkToggle:checked+.switch_label:hover {
  background: #454545;
}

/* move */
.darkToggle:checked+.switch_label .onf_btn {
  left: 19px;
  background: #fff;
}
/* 2024.07.24(WED) 토글 CSS 추가 END */

/* 2024-12-10 옵션 CSS 추가 START */
.option-div {
	position: relative;
	padding: .5rem !important;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.option-info {
	color: #0c5460;
	background-color: #d1ecf1;
	border-color: #bee5eb;
}
.option-div > button {
	font-size: 1rem;
	font-weight: 700;
	opacity: .5;
	padding: 0 !important;
	line-height: 5px;
	margin-bottom: 1.5px;
	margin-left: 3px;
}.option-div > button:hover {
	color: black;
	text-decoration: none;
	opacity: .75;
}
/* 2024-12-10 옵션 CSS 추가 END */

/* 2025-02-21 설치페이지 CSS 추가 START */
.install-bg {
	flex: 1;
	background: url("../img/install-bg.png") no-repeat 50%;
	background-size: cover;
	padding: 0;
}
.install-bg > section {
	height: 100vh;
	padding: 40px 40px 40px 60px;
}
.install-bg > section > .wrapper-content {
	padding: 0;
}
.install-bg > section > .wrapper-content > .row {
	height: 100%;
}
.install-bg > section > .wrapper-content > .row > .col-12 {
	height: 100%;
}
.install-bg > section > .wrapper-content > .row > .col-12 > div {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin-bottom: 0;
}
.install-bg h2.tit {
	font-size: 80px;
	color: #fff;
	line-height: 1;
	margin: 0;
	margin-bottom: 40px;
}
.install-bg h2.tit > span {
	font-size: 70px;
	font-weight: bold;
}
.install-bg .download-wrap {
	margin-bottom: 100px;
}
.btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
    transition: color .15s ease-in-out,
				background-color .15s ease-in-out,
				border-color .15s ease-in-out,
				box-shadow .15s ease-in-out !important;
}
.btn-icon > span[class^="icon"] {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: 10px;
	transition: all .15s ease-in-out;
}
.icon-download {
	background: url(../img/icon_download.png) no-repeat 50%;
	background-size: contain;
}
.icon-connection {
	background: url(../img/icon_connection.png) no-repeat 50%;
	background-size: contain;
}
.install-bg .download-wrap > .btn-icon {
	position: relative;
	font-size: 15px;
	color: #134a85;
	font-weight: 600;
	border-radius: 5px;
	padding: 10px 20px;
}
.install-bg .download-wrap > .btn-icon:hover {
	background-color: #134a85;
	border-color: #134a85;
	color: #fff;
}
.install-bg .download-wrap > .btn-icon:hover .icon-download {
	background-image: url(../img/icon_download_w.png);
}
.install-bg .help-wrap {
	color: #fff;
}
.install-bg .help-wrap i.fa {
	font-size: 21px;
	margin-bottom: 10px;
}
.install-bg .help-wrap p {
	font-size: 15px;
	margin-bottom: 15px;
}
.install-bg .help-wrap .btn-outline.border-white {
	font-size: 13px;
	padding: 6px 12px;
}
.install-bg .help-wrap .btn-outline.border-white:hover,
.install-bg .help-wrap .btn-outline.border-white:focus,
.install-bg .help-wrap .btn-outline.border-white:active,
.install-bg .help-wrap .btn-outline.border-white.active {
	background-color: #fff;
	color: #134a85;
}
.install-bg .copyright {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	font-size: 13px;
	margin-bottom: 0;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .ibox > .ibox-title {
	border-radius: 10px 10px 0 0;
	border-width: 0;
	padding: 24px 24px 0;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .ibox > .ibox-title > h5 {
	font-size: 18px;
	color: #333;
	font-weight: 600;
	margin-bottom: 0;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .ibox > .ibox-content {
	flex: 1;
	border-radius: 0 0 10px 10px;
	border-width: 0;
	padding: 0 24px 24px;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .ibox > .ibox-content .i-checks.square .iradio_square-green {
	margin-right: 8px;
}

.install-bg > section > .wrapper-content > .row .bottom-btn-wrap > .btn {
	padding: 10px 20px;
	font-size: 15px;
	border-radius: 5px;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box {
	overflow: auto;
	background-color: #fff;
	border-radius: 10px;
	padding: 0 24px;
} 
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box .ibox {
	margin-bottom: 0;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box .ibox .ibox-title {
	border: none;
	padding: 24px 0 0;
	background-color: transparent;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box .ibox .ibox-title h5 {
	font-size: 18px;
	color: #333;
	margin-bottom: 0;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box .ibox .ibox-content {
	border: none;
	background-color: transparent;
	padding: 24px 0 0;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box .ibox .ibox-content table {
	margin-bottom: 4px;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box .ibox .ibox-content table th,
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box .ibox .ibox-content table td {
	padding: 10px 8px;
	border: none;
	color: #333;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box .ibox .ibox-content table td {
	padding-right: 46px;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box .ibox .ibox-content table td input {
	border: 1px solid #dee2e6;
	border-radius: 5px;
	color: #333;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box .ibox .ibox-content table td input::placeholder {
	color: #b0b0b0;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box .ibox .ibox-content table td select {
	height: auto;
	border: 1px solid #dee2e6;
	border-radius: 5px;
	color: #333;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box .ibox .ibox-content table td .alert {
	position: relative;
	margin-top: 8px;
	margin-bottom: 0;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box form {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box form .ibox {
	border-top: 1px solid #dee2e6;
}
/*
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box form .ibox + .ibox {
	flex: 1;
}
*/
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box form div:nth-last-child(2) {
	flex: 1;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box form > .row {
	/*
	position: absolute;
	bottom: 24px;
	left: 0;
	right:0;
	justify-content: space-between;
	*/
	border-top: 1px solid #dee2e6;
	justify-content: space-between;
	align-items: end;
	padding: 24px 0;
}

.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box form > .row  .btn-icon {
	font-size: 15px;
	color: #134a85;
	font-weight: 600;
	border-radius: 5px;
	padding: 10px 20px;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box form > .row  .btn-icon:hover {
	background-color: #134a85;
	border-color: #134a85;
	color: #fff;
}
.install-bg > section > .wrapper-content > .row > .col-12 > .setting-box form > .row  .btn-icon:hover .icon-connection {
	background-image: url(../img/icon_connection_w.png);
}
/* 2025-02-21 설치페이지 CSS 추가 END */

/* 2025-04-17 모달 팝업 스크롤 CSS 추가 START */
.modal-body.ms-tree-scroll {display: flex;flex-direction: column;}
.modal-body.ms-tree-scroll > form {overflow: hidden;}
.modal-body.ms-tree-scroll > form > .row {height: 100%;}
.modal-body.ms-tree-scroll > form > .row > .col-sm-4 {display: flex;flex-direction: column;height: 100%;}
.modal-body.ms-tree-scroll > form > .row > .col-sm-4 > code {align-self: flex-end;}
.modal-body.ms-tree-scroll > form > .row > .col-sm-4 > .ibox {overflow: hidden;}
.modal-body.ms-tree-scroll > form > .row > .col-sm-4 > .ibox > .ibox-content {height: 100%;}
.modal-body.ms-tree-scroll > form > .row > .col-sm-4 > .ibox > .ibox-content .menuTree {height: 100%;overflow: auto;}
.modal-body.ms-tree-scroll > form + hr {width: 100%;}
/* 2025-04-17 모달 팝업 스크롤 CSS 추가 END */