@charset "utf-8";

@font-face{
	font-family:HDharB;
	src:url("/static/hcs/web-ui/font/HDharmonyB-b0e6f55c37dfe8f7098983be80b9213e.eot");
	src:local("��"), url("/static/hcs/web-ui/font/HDharmonyB-ba170cf5683681526116f8947b8700be.woff") format("woff"), url("/static/hcs/web-ui/font/HDharmonyB-211f2ce90f508c913094e8c4e5580da8.ttf") format("truetype");
}
@font-face{
	font-family:HDharM;
	src:url("/static/hcs/web-ui/font/HDharmonyM-b9d690c6763694acd320e2f9fead618d.eot");
	src:local("��"), url("/static/hcs/web-ui/font/HDharmonyM-99029c6a2cc3ea0979abf84b11483864.woff") format("woff"), url("/static/hcs/web-ui/font/HDharmonyM-8fde8e86ed89320158e71b7e55554472.ttf") format("truetype");
}
@font-face{
	font-family:HDharL;
	src:url("/static/hcs/web-ui/font/HDharmonyL-c5d87a5d00bed8ffabb007140240b123.eot");
	src:local("��"), url("/static/hcs/web-ui/font/HDharmonyL-853693e5f59672fbc743a62beb4b4b7e.woff") format("woff"), url("/static/hcs/web-ui/font/HDharmonyL-ad917a8bc19b2c740afd918cc91a8429.ttf") format("truetype");
}

/* noto-sans-kr-100 - latin_korean */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src: url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-100-d6c4882319bbc3a7b063a4712e709c0f.eot'); /* IE9 Compat Modes */
	src: local(''),
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-100-d6c4882319bbc3a7b063a4712e709c0f.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-100-f2beed5b9c8f5bd9f2f0c78b3919de16.woff2') format('woff2'), /* Super Modern Browsers */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-100-091b612c4918ccadb8379defadd7942a.woff') format('woff'), /* Modern Browsers */
        url('../font/noto-sans-kr/noto-sans-kr-v27-latin_korean-100.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-100-190293292c0d4605b0755f108800482a.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-300 - latin_korean */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-300-c04c7bcfe2bb87ed9e2aedc2debdebd8.eot'); /* IE9 Compat Modes */
	src: local(''),
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-300-c04c7bcfe2bb87ed9e2aedc2debdebd8.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-300-ea2ba8d2e0ba0898493a5011b93ca914.woff2') format('woff2'), /* Super Modern Browsers */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-300-024698da280bdb3bd6c08597b4e8f0e7.woff') format('woff'), /* Modern Browsers */
        url('../font/noto-sans-kr/noto-sans-kr-v27-latin_korean-300.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-300-c7ca38fed2397a04bf6a2a8ca6a7f47c.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-regular - latin_korean */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-regular-c8e6aea98ea5b5c90c92fba02b5081c2.eot'); /* IE9 Compat Modes */
	src: local(''),
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-regular-c8e6aea98ea5b5c90c92fba02b5081c2.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-regular-18b5c51cb53f4c9696848631d9c589e6.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-500 - latin_korean */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-500-14d37a0173dccfeb152c932d81fa0ad2.eot'); /* IE9 Compat Modes */
	src: local(''),
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-500-14d37a0173dccfeb152c932d81fa0ad2.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-500-7d451d37087a4152fed9c2df4797c10f.woff2') format('woff2'), /* Super Modern Browsers */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-500-a4e11de4fbbe31a828a56a4947756e07.woff') format('woff'), /* Modern Browsers */
        url('../font/noto-sans-kr/noto-sans-kr-v27-latin_korean-500.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-500-b6873a9907fd2ad3e5968d1529850b94.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-700 - latin_korean */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-700-ea7132bc5d7fe090f5e88e8127c22cf7.eot'); /* IE9 Compat Modes */
	src: local(''),
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-700-ea7132bc5d7fe090f5e88e8127c22cf7.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-700-3cafc71f141400ad8d4dbd720d059ba1.woff2') format('woff2'), /* Super Modern Browsers */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-700-85d3e33ae2221fc77bec09fb1df2ce33.woff') format('woff'), /* Modern Browsers */
        url('../font/noto-sans-kr/noto-sans-kr-v27-latin_korean-700.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-700-1e66ad57c998e623bc24ae5bd45d8d3f.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-900 - latin_korean */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 900;
	src: url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-900-f81c036e88e170d157daf2b1bcd9f21b.eot'); /* IE9 Compat Modes */
	src: local(''),
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-900-f81c036e88e170d157daf2b1bcd9f21b.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-900-1da1a5a074dc448eaf7f39e6d399be00.woff2') format('woff2'), /* Super Modern Browsers */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-900-ed050597b2281354e287f001450dcd2a.woff') format('woff'), /* Modern Browsers */
        url('../font/noto-sans-kr/noto-sans-kr-v27-latin_korean-900.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/static/hcs/web-ui/font/noto-sans-kr/noto-sans-kr-v27-latin_korean-900-e41d8df83cf4a493a6f6ad948bf734fc.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}

.HDharB {
	font-family: HDharB,
	'Noto Sans KR',
	'Malgun Gothic',    /* Windows 한글 기본 */
    'Meiryo',            /* Windows 일본어 */
    'Apple SD Gothic Neo', /* macOS 한글 */
    sans-serif !important;
	font-style: normal !important;
    font-weight: 400 !important;
}

.custom-scrollbar-horizontal::-webkit-scrollbar {
  height: 8px;}
.custom-scrollbar-horizontal::-webkit-scrollbar-track {
  background-color: #fff;}
.custom-scrollbar-horizontal::-webkit-scrollbar-thumb {
  background-color: #B2B2B2;}
.custom-scrollbar-horizontal::-webkit-scrollbar-thumb:hover {
 background-color: #7F7F7F; }
 
.question-footer-note {
	background-color: #F4F5F6;
	color: #3B3E45;
	border-radius: 4px;
	padding: 16px !important;
	margin-top: 24px;
}

.footer-note {
	background-color: #F4F5F6;
	color: #3B3E45;
	border-radius: 4px;
	padding: 16px !important;
	margin-top: 24px;
}

.group-base-date {
	margin-top: 8px;
	font-style: normal;
    font-weight: 700;
}

.image {
	width: 100%;
}

.surveytitle {
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 21.7px;
	background-color: #B2B6BD;
	color: #FFFFFF;
}
 
 .lab-container {
	height: calc(100% - 64px);
	overflow-y: auto;
	overflow-x: hidden;
 }
 .lab-containerl::-webkit-scrollbar {
   height: 8px;}
 .lab-container::-webkit-scrollbar-track {
   background-color: #fff;}
 .lab-container::-webkit-scrollbar-thumb {
   background-color: #B2B2B2;}
 .lab-container::-webkit-scrollbar-thumb:hover {
  background-color: #7F7F7F; }

 .input-table-tab {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.input-table-tab > .input-table-tab-item {
	height: 46px;
	padding: 0 24px 2px 24px;
	background-color: transparent;
	border-bottom: 2px solid transparent;
	border-radius: 4px 4px 0 0;
	color: #676D79;
	font-size: 16px;
	font-weight: 700;
	line-height: 46px;
	cursor: pointer;
}
.input-table-tab > .input-table-tab-item:hover {
	color: #3B3E45;
}
.input-table-tab > .input-table-tab-item.active{
	padding: 0 24px 2px 24px;
	background-color: #fff;
	border-bottom: 2px solid #3478FE;
	color: #3478FE;
}

.org-tree-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.org-tree-group-body {
	width: 400px;
	margin-right: 12px;
}

.org-tree-body-tree {
	width: 400px;
	margin-left: 12px;
	margin-right: 12px;
}

.org-tree-body {
	width: calc(100% - 800px);
	margin-left: 12px;
}

.survey-round-body {
	background-color: #fff;
	border-radius: 4px;
}

.survey-tab-body {
	background-color: #fff;
	border-radius: 0px 4px 4px 4px;
}

.required {
	margin-left: 5px;
    color: #e60a3e;
    vertical-align: top;
}

html body {
	font-family: 'Malgun Gothic',    /* Windows 한글 기본 */
	'Noto Sans KR',
    'Meiryo',            /* Windows 일본어 */
    'Apple SD Gothic Neo', /* macOS 한글 */
    sans-serif !important;
	color: #3B3E45 !important;
  line-height: 21.75px;
}

* {
	word-break: keep-all !important;
}

select {
	font-family: 'Malgun Gothic',    /* Windows 한글 기본 */
	'Noto Sans KR',
    'Meiryo',            /* Windows 일본어 */
    'Apple SD Gothic Neo', /* macOS 한글 */
    sans-serif !important;
}

/* help block and validation feedback texts*/
.help-block {
  color: #8E949F;
  margin-top: 10px;
}

/* on feedback error */
.help-block, .invalid-feedback, .valid-feedback {
  font-size: 12px;
  line-height: 18px;
}

/* 드롭다운 컨테이너는 inline-block으로 정렬 */
.dropdown-wrapper {
  position: relative;
  display: inline-block;
}

/* 드롭다운 메뉴 */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* 아래로 표시 */
  left: 0;
  z-index: 1000;
  min-width: 60px;
  padding: 8px 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #CDD0D5;
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

/* 드롭다운 버튼 항목 */
.dropdown-item {
	width: 100%;
  padding: 8px 20px;
  background: none;
  border: none;
  text-align: left;
  color: #121416;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.dropdown-item.active {
  color: #3478FE;
  font-weight: bold;
  background-color: #eaf1ff;
}
.dropdown-item.active:hover {
  color: #3478FE;
  background-color: #eaf1ff;
}

/* hover 스타일 */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #F4F5F6;
  color: #121416;
}

.progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 8px;
  overflow: hidden;
  line-height: 0;
  font-size: 0.625rem;
  background-color: #fff;
  border: 1px solid #EEEFF1;
  border-radius: 10rem;
}

.progress-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  border-radius: 10rem;
  background-color: #ECF6FF;
  -webkit-transition: width 0.6s ease;
  transition: width 0.6s ease;
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 0.75rem 0.75rem;
}

.progress-bar-animated {
  -webkit-animation: 1s linear infinite progress-bar-stripes;
          animation: 1s linear infinite progress-bar-stripes;
}

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

.bg-primary {
  background-color: #886ab5 !important;
}

.bg-secondary {
  background-color: #868e96 !important;
}

.bg-success {
  background-color: #7ACF2F !important;
}

.bg-info {
  background-color: #3478FE !important;
}

.bg-warning {
  background-color: #FF9142 !important;
}

.bg-danger {
  background-color: #F13E3E !important;
}

.bg-light {
  background-color: #fff !important;
}

.bg-dark {
  background-color: #505050 !important;
}

.bg-white {
  background-color: #fff !important;
}

.co-info {
	color: #3478FE !important;
}

.co-success {
	color: #7ACF2F !important;
}


.co-warning {
  color: #FF9142 !important;
}

.co-danger {
  color: #F13E3E !important;
}

.cursor {
	cursor: pointer;
}

.nav-title-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block !important;
    padding-right: 5px;
}

.color-main {
	color: #002C5F;
}

.color-system-b {
	color: #637DDE;
}

.bg-main {
	background-color: #002C5F !important;
}

.bg-system-b {
	background-color: #637DDE !important;
}

/* SweetAlert */
.swal-text {
	text-align: center !important;
}

.custom-dropbox-transparent {
	border: 0 !important;
	box-shadow: none !important;
}

.custom-dropbox-transparent:not(:hover) {
	background-color: transparent !important;
}

/**스피너**/
#nprogress {position:fixed;z-index: 9999;width: 100%;height: 100%;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0, 0, 0, .1);}

#nprogress .bar {display: none;}

/* Remove these to get rid of the spinner */
#nprogress .spinner { display: block;}

#nprogress .spinner-icon {
    position: relative;
    margin:0 auto;
    margin-top: 20%;
    width: 36px;
    height:36px;
    box-sizing: border-box;

    border: solid 2px transparent;
    border-top-color: #627ca0;
    border-left-color: #627ca0;
    border-radius: 50%;

    -webkit-animation: nprogress-spinner 400ms linear infinite;
    animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {overflow: hidden;position: relative;}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {position: absolute;}

@-webkit-keyframes nprogress-spinner {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

[v-cloak] > * {
     display:none;
}
/**기타설정**/
/* scroll */
::-webkit-scrollbar {
  width: 10px;}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 5px;}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .3); 
  border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .5); }
 html {
     font-size: 14px;
}
 * {
     margin: 0;
     padding: 0;
}

/* ol, ul, li {
	list-style: none;
} */

input[type=text], input[type=password] {
    background: #ffffff !important;
    border: solid 1px #CDD0D5 !important;
    height: 36px;
    outline: medium;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 400;
    color: #121416;
    padding: 0 12px;
    border-radius: 4px;
}
input::placeholder {
  color: #8E949F;
}

textarea {
    background: #fff !important;
    border: solid 1px #CDD0D5 !important;
    outline: medium;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 400;
    color: #121416;
    padding: 10px;
    border-radius: 3px;
    font-family: 'Malgun Gothic',    /* Windows 한글 기본 */
	'Noto Sans KR',
    'Meiryo',            /* Windows 일본어 */
    'Apple SD Gothic Neo', /* macOS 한글 */
    sans-serif !important;
}
textarea::placeholder {
  color: #8E949F;
}
textarea::-webkit-input-placeholder,
textarea::-ms-input-placeholder { border: solid 1px #d2d2d2;
    background-color: #eee !important;}

textarea:-moz-read-only {border: solid 1px #d2d2d2;
    background-color: #eee !important;}
textarea:read-only {border: solid 1px #d2d2d2;
    background-color: #eee !important;}

input[disabled='disabled'],
input[readonly='readonly']{
    border: solid 1px #d2d2d2;
    background-color: #EEEFF1 !important;
}

.detail_input {width: 100%; max-width: 342px;}

input[type=text].form-error, input[type=password].form-error, .form-error {
  border: 1px solid #F13E3E !important;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
  border-radius: 4px;
}

.form-error-msg {
  color: #F13E3E;
  font-size: 12px;
  margin-top: 6px;
}

@media (max-width:768px) {
	input[type=text], input[type=password] {
	    font-size: 14px;
	}
	
	textarea {
	    font-size: 14px;
	}
	
	select {
	    font-size: 14px;
	}
}

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

.checkbox{
	display:none;
}

.checkbox + label{
	cursor:pointer;
    color: #4B4B4B;
    font-size: 14px;
}

.checkbox + label > span{
	vertical-align: middle;
}

.checkbox + label:after{
	position: absolute;
}

.checkbox + label:before{
	content: " ";
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	margin: -2px 8px 0 0;
	text-align: center; 
	vertical-align: middle;
	border: 1px solid #C2C2C2;
 }

.checkbox:checked + label:before{
	content:"\2714";
	color: #fff;
	background-color:#908D79;
	width: 16px;
	height: 16px;
	border: 1px solid #908D79;
}

.bllt {
	display: inline-block;
	vertical-align: middle;
	width: 22px;
	height: 20px;
	line-height: 18px;
	text-align: center;
	border-radius: 3px;
	margin-left: 5px;
}
.bllt.up {
	font-size: 12px;
	color: #fff;
	background: #ff0000;
}

/*.required {display: inline-block;}
.required:after {
  content:"";
  display: inline-block; 
  vertical-align: top;
  width: 5px; 
  height: 5px; 
  background: #d4282f; 
  border-radius: 50%; 
  margin-left: 5px;
}*/

.icon-lg {
	font-size:1.5em !important;
	font-weight:500 !important;
	line-height:.75em !important;
	vertical-align:-15% !important;
}

.info-container {
	width: 100%;
	background-color: #F4F5F6;
	border-radius: 4px;
	padding: 24px;
}

.info-body-header {
	color: #121416;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px;
}

.info-body-content {
	color: #121416;
	font-size: 14px;
	line-height: 22px;
	font-style: normal;
	font-weight: 400;
}

.info-count-box {
	width: 100%;
	padding: 12px 24px 12px 24px;
	background-color: #FFF;
	border-radius: 4px;
	box-shadow: 0px 0px 2px 0px rgba(34, 34, 34, 0.10), 0px 2px 2px 0px rgba(34, 34, 34, 0.05);
}

.info-count-box.active {
	border: 1px solid #3478FE;
}

.info-count-box > .title {
	color: #121416;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px;
}

.info-count-box > .num_txt {
	color: #121416;
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: 42px; 
}

button.icon_one_send {
	width: 24px;
	height: 24px;
}

button.icon_one_send.disabled {
	cursor: not-allowed;
}

.icon_one_send {
	background: url(/static/hcs/web-ui/images/icon/icon_one_send-fb2aff7179d62125627c1f1bd30d382f.svg) center no-repeat;
}

button.icon_next_view {
	width: 16px;
	height: 16px;
}

.icon_next_view {
	background: url(/static/hcs/web-ui/images/icon/icon_next_view-e53371e772e333e2f0b5b189d75791d8.svg) center no-repeat;
}

.banner_list {
	list-style-type: none;
}

.w-100 {
	width: 100% !important;
}

.w-75 {
	width: 75% !important;
}

.w-50 {
	width: 50% !important;
}

.w-25 {
	width: 25% !important;
}

.h-100 {
	height: 100% !important;
}

.cursor {
	cursor: pointer;
}

.m-0 {
  margin: 0 !important; }

.mt-0,
.my-0 {
  margin-top: 0 !important; }

.mr-0,
.mx-0 {
  margin-right: 0 !important; }

.mb-0,
.my-0 {
  margin-bottom: 0 !important; }

.ml-0,
.mx-0 {
  margin-left: 0 !important; }

.m-1 {
  margin: 4px !important; }

.mt-1,
.my-1 {
  margin-top: 4px !important; }

.mr-1,
.mx-1 {
  margin-right: 4px !important; }

.mb-1,
.my-1 {
  margin-bottom: 4px !important; }

.ml-1,
.mx-1 {
  margin-left: 4px !important; }

.m-2 {
  margin: 8px !important; }

.mt-2,
.my-2 {
  margin-top: 8px !important; }

.mr-2,
.mx-2 {
  margin-right: 8px !important; }

.mb-2,
.my-2 {
  margin-bottom: 8px !important; }

.ml-2,
.mx-2 {
  margin-left: 8px !important; }

.m-3 {
  margin: 16px !important; }

.mt-3,
.my-3 {
  margin-top: 16px !important; }

.mr-3,
.mx-3 {
  margin-right: 16px !important; }

.mb-3,
.my-3 {
  margin-bottom: 16px !important; }

.ml-3,
.mx-3 {
  margin-left: 16px !important; }

.m-4 {
  margin: 24px !important; }

.mt-4,
.my-4 {
  margin-top: 24px !important; }

.mr-4,
.mx-4 {
  margin-right: 24px !important; }

.mb-4,
.my-4 {
  margin-bottom: 24px !important; }

.ml-4,
.mx-4 {
  margin-left: 24px !important; }

.m-5 {
  margin: 32px !important; }

.mt-5,
.my-5 {
  margin-top: 32px !important; }

.mr-5,
.mx-5 {
  margin-right: 32px !important; }

.mb-5,
.my-5 {
  margin-bottom: 32px !important; }

.ml-5,
.mx-5 {
  margin-left: 32px !important; }

.m-6 {
  margin: 2.5rem !important; }

.mt-6,
.my-6 {
  margin-top: 2.5rem !important; }

.mr-6,
.mx-6 {
  margin-right: 2.5rem !important; }

.mb-6,
.my-6 {
  margin-bottom: 2.5rem !important; }

.ml-6,
.mx-6 {
  margin-left: 2.5rem !important; }

.p-0 {
  padding: 0 !important; }

.pt-0,
.py-0 {
  padding-top: 0 !important; }

.pr-0,
.px-0 {
  padding-right: 0 !important; }

.pb-0,
.py-0 {
  padding-bottom: 0 !important; }

.pl-0,
.px-0 {
  padding-left: 0 !important; }

.p-1 {
  padding: 4px !important; }

.pt-1,
.py-1 {
  padding-top: 4px !important; }

.pr-1,
.px-1 {
  padding-right: 4px !important; }

.pb-1,
.py-1 {
  padding-bottom: 4px !important; }

.pl-1,
.px-1 {
  padding-left: 4px !important; }

.p-2 {
  padding: 8px !important; }

.pt-2,
.py-2 {
  padding-top: 8px !important; }

.pr-2,
.px-2 {
  padding-right: 8px !important; }

.pb-2,
.py-2 {
  padding-bottom: 8px !important; }

.pl-2,
.px-2 {
  padding-left: 8px !important; }

.p-3 {
  padding: 16px !important; }

.pt-3,
.py-3 {
  padding-top: 16px !important; }

.pr-3,
.px-3 {
  padding-right: 16px !important; }

.pb-3,
.py-3 {
  padding-bottom: 16px !important; }

.pl-3,
.px-3 {
  padding-left: 16px !important; }

.p-4 {
  padding: 24px !important; }

.pt-4,
.py-4 {
  padding-top: 24px !important; }

.pr-4,
.px-4 {
  padding-right: 24px !important; }

.pb-4,
.py-4 {
  padding-bottom: 24px !important; }

.pl-4,
.px-4 {
  padding-left: 24px !important; }

.p-5 {
  padding: 32px !important; }

.pt-5,
.py-5 {
  padding-top: 32px !important; }

.pr-5,
.px-5 {
  padding-right: 32px !important; }

.pb-5,
.py-5 {
  padding-bottom: 32px !important; }

.pl-5,
.px-5 {
  padding-left: 32px !important; }

.p-6 {
  padding: 2.5rem !important; }

.pt-6,
.py-6 {
  padding-top: 2.5rem !important; }

.pr-6,
.px-6 {
  padding-right: 2.5rem !important; }

.pb-6,
.py-6 {
  padding-bottom: 2.5rem !important; }

.pl-6,
.px-6 {
  padding-left: 2.5rem !important; }
  
.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }
  
.text-left {
  text-align: left !important; }

.text-right {
  text-align: right !important; }

.text-center {
  text-align: center !important; }

/*** alink ***/ 
.btn_set {position: relative;}
.btn_set span {display: inline-block; vertical-align:middle;}
.btn_set span + span {margin-left: 8px;}
.btn_set a {
    display: inline-block;
    text-align: center;
    line-height: 32px; 
    height: 36px;
    color:#121416; 
    border:1px solid #CDD0D5; 
    font-weight: 700;
    font-size: 14px;
    background: #fff;    
    border-radius: 4px;
    padding: 0px 12px 2px 12px;
    cursor: pointer;
}
.btn_set a.filled {background-color:#3478FE; border:1px solid #3478FE; color: #fff;}
.btn_set a.filled:hover {background-color:#4884FB;}
.btn_set a:hover {background:#fff;}
.btn_set a.filled.disabled {color:#fff; background:#ec7a86;border:1px solid #ec7a86; cursor: not-allowed;}
.btn_set a.disabled {color:#ec7a86; background:#fff;border:1px solid #ec7a86; cursor: not-allowed;}


.btn_set a.filled2 {color:#fff; background:#5cb85c;border:1px solid #5cb85c;}

.btn_set .btn-icon {
	min-width: auto;
	text-align: center;
}
.btn_set .btn-icon > i {
	margin-right: 0;
}

.btn_set a.src {color:#fff; background:#3478FE;border:1px solid #3478FE;}
.btn_set a.src i {margin-right: 10px;}
.btn_set a.note {background: #313a46; color: #fff; font-size: 14px; height: 30px; line-height: 28px; border:0;}
.btn_set a>i {margin-right: 5px;}
/*.btn_set a>i.fa-plus {width: 20px; height: 20px; background: url(../images/icon_plus.png) no-repeat; display: inline-block;vertical-align: middle;}*/
.btn_set span>select {height: 34px; vertical-align: middle; }
.btn_set>input[type=text] {height: 38px; margin-bottom: 4px;}

button {
	font-family: 'Malgun Gothic',    /* Windows 한글 기본 */
	'Noto Sans KR',
    'Meiryo',            /* Windows 일본어 */
    'Apple SD Gothic Neo', /* macOS 한글 */
    sans-serif !important;
}

/*** button ***/ 
.btn_set button {
  display: block;
  text-align: center;
  height: 36px;
  color:#3478FE;
  background-color: #ffffff;    
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  padding: 0 12px;
  cursor: pointer;
}

.btn_set button.filled { color:#fff; background-color:#3478FE; }
.btn_set button.filled:hover { background-color:#4884FB; }
.btn_set button.cancel { color:#121416; border:1px solid #CDD0D5; }
.btn_set button.cancel:hover { background-color:#CDD0D5; }
.btn_set button.delete { color:#fff; background-color:#F13E3E; }
.btn_set button.delete:hover { background-color:#F25151; }

.btn_set button.filled_outline { color:#3478FE; background-color:#fff;border: 1px solid #3478FE; }
.btn_set button.filled_outline:hover { background-color:#ECF6FF; }

.btn_set button.icon_user_add {padding-left: 30px; background: url(/static/hcs/web-ui/images/icon/icon_user_add-3e2b1a07b928287754808666799ea87c.svg) 10px center no-repeat; background-color: #3478FE; color: #fff;}
.btn_set span.icon_user_upload > a {padding-left: 30px; background: url(/static/hcs/web-ui/images/icon/icon_user_upload-31309129793451d937d1b723fa8a2340.svg) 10px center no-repeat; background-color: #3478FE; color: #fff;}
.btn_set button.icon_user_download {padding-left: 30px; background: url(/static/hcs/web-ui/images/icon/icon_user_download-4eecdd90ea77f38effd6d227cdd65cac.svg) 10px center no-repeat; background-color: #fff;}
.btn_set button.icon_list {padding-left: 30px; background: url(/static/hcs/web-ui/images/icon/icon_list-1e4c39017681bef91c01351f4ecda80f.svg) 10px center no-repeat; background-color: #fff;}
.btn_set span.icon_user_upload > a:hover {background-color:#CDD0D5;}

.btn_set button.src {color:#fff; background-color:#3478FE;border:1px solid #3478FE;}
.btn_set button.src i {margin-right: 10px;}
.btn_set button.note {background-color: #fff; border:1px solid #3478FE; color: #3478FE; font-size: 12px; height: 30px; line-height: 28px; border-radius: 4px; padding: 0 8px; font-weight: 400;}
.btn_set button.note:hover { background-color:#ECF6FF; }
.btn_set button:disabled {background-color: #fff !important; border:1px solid #CDD0D5; color: #8E949F; cursor: not-allowed;}

.btn_set button>i {margin-right: 10px;}

.btn_inner {display: inline-block; vertical-align: middle;}
.btn_inner a {
    display: block;
    font-size: 14px;
    text-align: center;
    line-height: 28px; 
    min-width: 80px; 
    height: 32px;
    color: #3478FE; 
    border:1px solid #3478FE;
    background: #fff;    
    border-radius: 4px;
    padding: 0 10px;
}
.btn_inner a.filled {color:#fff; background:#3478FE;}
.btn_inner a>i {margin-right: 10px;}

.divTable {width: 100%; margin-bottom: 20px;border-bottom:1px solid #ddd;}
.divTableBody {
    display: table;
    width: 100%;
    background-color:#fff;
    border-top: 1px solid #4B4B4B;
	border-bottom: 1px solid #4B4B4B;
}
.divTableRow {display: table-row;}
.divTableHead {
    display: table-cell;
    width: 20%;
    border-top: 1px solid #ddd;
    background-color: #fafafa;
    color: #333;
    padding-left: 15px;
    vertical-align: middle;
    font-size:14px;
}
.divTableCell {
    display: table-cell;
    border-left: 1px solid #eee;
    border-top: 1px solid #ddd;    
    padding: 15px;
    vertical-align: middle;
    font-size:14px;
    color: #666;    
}
.divTableCell > div > div > input  {height: 38px;}
.divTableCell > div > div > select {height: 40px;}
.email-div > input,
.email-div > select {
	width: 200px;
}

.email-container {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.email-container p {
	width: 100%;
}
@media screen and (max-width: 768px){
	.email-container {
		display: block;
	}
  .divTableBody {display: block; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-top: 1px solid #ddd; border-bottom: 0;}
  .divTableRow {display: block;}
  .divTableHead {display: block;background:#fff; font-size:12px; padding: 5px 0 0 10px; width:auto; height: auto; border:0; color: #999;}
  .divTableCell {display: block; width:100%; font-size:14px; border:0; padding: 0; border-bottom: 1px solid #ddd;}
  .divTableCell>span {display: block;}
  .divTableCell>span+span {margin-left: 0; margin-top: 5px;}
  .divTableCell > div {margin: 10px;}
  .divTableCell > div > div > input {width: 150px;}
  .divTableCell > div > div.email-div {display: block;}
  .divTableCell > div > div > input:nth-child(2) {margin-top :0.5rem;}
  .divTableCell > div > div > p > label {margin-left: 0;margin-top :0.5rem;}
  .divTableCell > div > ul li {
	    margin-bottom: 0.5rem;
	    float: none !important;
	}
}
.divTableCell > div > div {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.divTableCell > .file-cell > div {
	display: block;
}
.divTableCell > div  > div > button.id-check-btn {
	margin-left: 0.5rem;
}

.divTableCell > div > span {
	margin-top: 0.5rem;
	font-size: 14px;
	word-break: keep-all;
	display: block;
}

.divTableCell > div > span > font {
	color: red;
}

.divTableCell > div > ul li {
    float: left;
    min-width: 200px;
    margin: 5px 0;
}

.filebox {display: inline-block;vertical-align: bottom;}
.filebox input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}
.filebox label {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    text-align: center;
    line-height: 28px;
    min-width: 80px;
    height: 32px;
    color: #3478FE;
    border: 1px solid #3478FE;
    background: #fff;
    border-radius: 2px;
}

.divTableCell > div > .filebox label {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    text-align: center;
    line-height: 28px;
    min-width: 80px;
    height: 32px;
    color: #908D79;
    border: 1px solid #908D79;
    background: #fff;
    border-radius: 2px;
}
.att_file {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #d2d2d2;
    height: 32px;
    line-height: 28px;
    padding: 0 5px;
    border-radius: 4px;
    margin-top: 3px;
    cursor: pointer;
}

.att_file a {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    width: 19px;
    height: 19px;
    background: url(/static/hcs/web-ui/images/icon/icon_del-714fe8a9db4b11277e38459a21ef09e9.svg) no-repeat;
    margin-left: 5px;
}
.attach_group {}
.attach a {
  font-size: 14px;
  color: #121416; 
  display: inline-block;
  line-height: 28px;
  padding: 0 5px;
  border-radius: 4px;
  text-decoration: underline;
  cursor: pointer;
}
.attach a:before {content: ""; display: inline-block; vertical-align: middle; width: 16px; height: 16px; background: url(../images/icon_down.png) no-repeat;}
.text-left {
	text-align: start;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: end;
}

caption, legend {
    overflow: hidden;
    width: 0px;
    height: 0px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

/*패널가입 wizard*/
.wizard-container {
	width: 100%;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 60px;
}

.wizard-circle {
	width: 65px;
	height: 65px;
	background-color: #908D79;
	border-radius: 50%;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #908D79;
}

.wizard-circle-no {
	background-color: #C2C2C2;
	border: 1px solid #C2C2C2;
}

.wizard-circle-prev {
	background-color: rgba(144, 141, 121, 0.50);
	border: 1px solid rgba(144, 141, 121, 0);
}

.wizard-circle > img {
	width: 60%;
}

.wizard-desc {
	font-size: 18px;
	color: #404040;
	font-weight: 600;
	width: 100%;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 15px;
}

.wizard-line {
	width: 65px;
	height: 2px;
	background-color: #908D79;
    margin-bottom: 40px;
}

.wizard-line-no {
	background-color: #C2C2C2;
}

.redirect-main {
    position: absolute;
    left: 100px;
    top: 45px;
    color: #8A8A8A;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: underline;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.redirect-circle {
	width: 31px;
	height: 31px;
	background-color: #FFF;
	border: 1px solid #8A8A8A;
	border-radius: 50%;
	margin-right: 15px;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 3px;
}

.redirect-circle > img {
	width: 40%;
}

@media (max-width:1080px) {
	.redirect-main {
		left: 25px;
    	top: 25px;
	}
}

@media (max-width:768px) {
	.redirect-main {
	    width: 100%;
	    position: inherit;
	    margin-top: 35px;
	}
	
	.redirect-circle {
		width: 25px;
		height: 25px;
		margin-left: 30px;
	}
}

@media (max-width:576px) {
    .wizard-container {
    	margin-bottom: 40px;
    }
    
    .wizard-circle {
    	width: 55px;
    	height: 55px;
    }
    
    .wizard-desc {
    	font-size: 14px;
    }
    
    .wizard-line {
	    margin-bottom: 33px;
	}
}

/**스피너**/
#nprogress {position:fixed;z-index: 9999;width: 100%;height: 100%;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0, 0, 0, .1);}

#nprogress .bar {display: none;}

/* Remove these to get rid of the spinner */
#nprogress .spinner { display: block;}

#nprogress .spinner-icon {
    position: relative;
    margin:0 auto;
    margin-top: 20%;
    width: 36px;
    height:36px;
    box-sizing: border-box;

    border: solid 2px transparent;
    border-top-color: #3478FE;
    border-left-color: #3478FE;
    border-radius: 50%;

    -webkit-animation: nprogress-spinner 400ms linear infinite;
    animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {overflow: hidden;position: relative;}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {position: absolute;}

@-webkit-keyframes nprogress-spinner {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fs-primary {
	font-size: 16px;
}

.text-primary {
	color: #3478FE;
}

.position-relative {position: relative;}

.d-flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}

.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}

.customModal {
    padding: 10px !important
}

.customModalHeader {
    margin: 0 0 10px;
    padding: 10px;
    border-bottom: 1px solid #e7eaec
}

.customModalHeader p {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: bold
}

.customModalBody {
	font-size: 16px;
    padding: 10px
}

.customModalBody .privacy {
	font-size: 16px;
	line-height: 25px;
}

.customModalBody .text-info {
    color: #31708f
}

.customModalBody .text-danger {
    color: #a94442
}

.customModalBody .text-success {
    color: #3c763d
}

.customModalBody .text-primary {
    color: #337ab7
}

.customModalBody .text-warning {
    color: #8a6d3b
}

.customModalFooter {
    margin: 10px 0 0;
    padding: 10px;
    border-top: 1px solid #e7eaec
}

.customModalFooter .moveBoard {
    padding-right: 10px;
    font-size: .9em;
    font-weight: bold;
    color: #d9534f
}

.customModalFooter .siiru-btn {
    padding-top: 6px !important
}

.modal_row {--bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(var(--bs-gutter-y) * -1);}
.modal_row {margin-bottom: 24px;}
.modal_row:last-child {margin-bottom: 0;}

.modal_row>.modal_col {flex: 0 0 auto;width: 100%;}
.modal_row>[class^="modal_col"] {margin-right: 20px;}
.modal_row>[class^="modal_col"]:last-child {margin-right: 0;}
.modal_row>.modal_col-1, .modal_row>[class^="modal_col-"] {flex: 1;}


.modal_row>[class^="modal_col"] p {margin-bottom: 8px; color: #121416; font-weight: 700;}
.modal_row>[class^="modal_col"] input, .modal_row>[class^="modal_col"]  select {width: 100%;}


body>div>header {display: flex;justify-content: space-between;overflow-x: auto;white-space: nowrap;position: fixed;z-index: 900;width: 100%;height: 64px;background-color: #fff;box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);text-align: right;padding: 0px 48px;}
body>div>header>.left-header {position: relative;min-width: 300px;/* position: absolute; *//* left:48px; *//* top:20px; */}
body>div>header>.left-header>a {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
body>div>header>.left-header>a>img {
  width: 76px;
  height: 24px;
}
body>div>header>.left-header>a>.divider {
  width: 2px;
  height: 14px;
  background-color: #121416;
  border-radius: 1px;
  display: inline-block;
  margin: 0 12px;
}
body>div>header>.left-header>a>span {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  color: #002B5F;
}
body>div>header .GNB {white-space: nowrap; display: flex;}
body>div>header .GNB>li {float: left;}
body>div>header .GNB>li>a {display: block; text-align: center; height: 100%; line-height: 24px; font-size: 16px; font-weight: 700; color: #3B3E45; padding: 20px 24px; align-content: center;}
body>div>header .GNB>li>a:hover {
  background-color: #ECF6FF;
}
.vertical-divider {
  width: 2px;
  height: 14px;
  background-color: #E9EAEC;
  border-radius: 1px;
}
header .GNB>li>a.on {background-color: #ECF6FF;border-bottom: solid 2px #3478FE; color: #3478FE;}
body>div>header .usertab {width: 300px; min-width: 244px; text-align: right;/* position: absolute; *//* right: 48px; *//* top:10px; */display: flex;align-items: center;justify-content: flex-end;}
@media screen and (max-width: 1384px) {
	body>div>header .usertab {width: 100%;}
}
body>div>header .usertab a {display: inline-block; height: 20px; line-height: 20px; text-align: center; margin: 8px;font-weight: 700;}
body>div>header .usertab a.fa-profile {background: url(/static/hcs/web-ui/images/icon/icon_profile-93a4a399b68be752613a4dd3ecb36736.svg) left 0 center no-repeat;padding-left: 27px;}
body>div>header .usertab a.fa-world {background: url(/static/hcs/web-ui/images/icon/icon_world-ec8e68d99cc4dddccf545bdbdbd8f925.svg) left 0 center no-repeat;padding-left: 27px;}
body>div>header .usertab a.fa-logout {background: url(/static/hcs/web-ui/images/icon/icon_logout-663b93a9aaa9949213d2ed3308639721.svg) left 0 center no-repeat;padding-left: 27px;}

footer {position: relative; z-index: 10; text-align: center; width: 100%; height: 30px; padding-left: 400px;}
footer p {color: #aaa; font-size: 12px; line-height: 28px; letter-spacing: -0.5px;}

.container {position: relative; width: 100%; height: 100%; padding-top: 64px; display: flex; flex-wrap: nowrap; align-content: stretch;}
.container.bgclr {background: #eee;}
.contents {width: 100%; height: 100%; display: flex; align-items: stretch;}
.surveywrap {width:100%; padding: 48px 48px 48px 478px; overflow-y: auto;}
.surveywrap.noleft {padding: 48px 48px 48px 161px; overflow: visible; position: relative;}
.surveywrap>h2.title {
    background: #525760;
    padding: 24px;
    border-radius: 8px 8px 0 0;
    text-align: center;color: #fff;height: 84px;}

.surveywrap > h2, .main > h2, .surveywrap > div h2 {
    padding-bottom: 24px;
    font-size: 24px;
    color: #3478FE;
    font-weight: 700;}
.page_number {font-size: 24px;color: #3478FE;font-weight: 700;}

.LNB {position: fixed; z-index: 10; width: 113px; height: 100%; background: #525760;}
.LNB li {text-align: center; width: 113px;}
.LNB li>a {display: block;width: 113px; background: transparent; color: #FFFFFF; text-align: center; font-size: 14px; padding: 16px; letter-spacing: -0.9px;}
.LNB li>a.on {background:#FFFFFF; color: #525760;}
.LNB li>a:not(.on):hover {background:#787F8C;}
.LNB li>a:before {content: ""; display: block; height: 32px; margin-bottom: 8px;}
.LNB li>a.fa-survey-info:before {background: url(/static/hcs/web-ui/images/icon/icon_survey_info_white-3a90584789969dd8bec635074b36dccd.svg) center 0 no-repeat;}
.LNB li>a.fa-editor:before {background: url(/static/hcs/web-ui/images/icon/icon_editor_white-abd72013edb5e5b36417b42170623604.svg) center 0 no-repeat;}
.LNB li>a.fa-translation:before {background: url(/static/hcs/web-ui/images/icon/icon_translation_white-05b4efdc353fed1986b979ef282600c9.svg) center 0 no-repeat;}
.LNB li>a.fa-affiliates:before {background: url(/static/hcs/web-ui/images/icon/icon_affiliates_white-c251b1037f9b521a5edee1d0e1b4f52e.svg) center 0 no-repeat;}
.LNB li>a.fa-organization:before {background: url(/static/hcs/web-ui/images/icon/icon_organization_white-a00731400943af2edcfe2ea0053cf9e7.svg) center 0 no-repeat;}
.LNB li>a.fa-employee:before {background: url(/static/hcs/web-ui/images/icon/icon_employee_white-675be542af9ef7cd3b250bee0a44ab4e.svg) center 0 no-repeat;}
.LNB li>a.fa-campaign:before {background: url(/static/hcs/web-ui/images/icon/icon_campaign_white-6267147531c58bf78fcbd69faf40b85d.svg) center 0 no-repeat;}
.LNB li>a.fa-participants:before {background: url(/static/hcs/web-ui/images/icon/icon_participants_white-a783980f494da155b955a51ee851e874.svg) center 0 no-repeat;}
.LNB li>a.fa-result:before {background: url(/static/hcs/web-ui/images/icon/icon_result_white-39dc501d24fc4fdded4988f10dd6eca6.svg) center 0 no-repeat;}
.LNB li>a.fa-organization-result:before {background: url(/static/hcs/web-ui/images/icon/icon_organization_result_white-bfeee4b8451dd35892cbb7572fcd29d2.svg) center 0 no-repeat;}


.LNB li>a.on.fa-survey-info:before {background: url(/static/hcs/web-ui/images/icon/icon_survey_info-1bdc115f9dcc1208fbb2585c7c95581f.svg) center 0 no-repeat;}
.LNB li>a.on.fa-editor:before {background: url(/static/hcs/web-ui/images/icon/icon_editor-20d6d25f08425396bf580f77432f8cc4.svg) center 0 no-repeat;}
.LNB li>a.on.fa-translation:before {background: url(/static/hcs/web-ui/images/icon/icon_translation-b0c711d38dd2c9cf7c11e355a655966f.svg) center 0 no-repeat;}
.LNB li>a.on.fa-affiliates:before {background: url(/static/hcs/web-ui/images/icon/icon_affiliates-5e33e0c86599582f01ad5926e3966bf1.svg) center 0 no-repeat;}
.LNB li>a.on.fa-organization:before {background: url(/static/hcs/web-ui/images/icon/icon_organization-5493c897ccb2ae97b5f36e355e368fed.svg) center 0 no-repeat;}
.LNB li>a.on.fa-employee:before {background: url(/static/hcs/web-ui/images/icon/icon_employee-d630158b9a90e9747c873b6872ee87c3.svg) center 0 no-repeat;}
.LNB li>a.on.fa-campaign:before {background: url(/static/hcs/web-ui/images/icon/icon_campaign-c8ffd9890e2cc17b62bd42dd95386abc.svg) center 0 no-repeat;}
.LNB li>a.on.fa-participants:before {background: url(/static/hcs/web-ui/images/icon/icon_participants-4c6b9f5db83cd874f1da9bb926efc5aa.svg) center 0 no-repeat;}
.LNB li>a.on.fa-result:before {background: url(/static/hcs/web-ui/images/icon/icon_result-0af9a254a7fa02474a05ef4241dfc03e.svg) center 0 no-repeat;}
.LNB li>a.on.fa-organization-result:before {background: url(/static/hcs/web-ui/images/icon/icon_organization_result-309dd96d2f1cee6e526b117c4ba25283.svg) center 0 no-repeat;}

.LNB li>a.on:before {opacity: 1;}

.main {position: relative; width: 100%; padding: 48px;}

.surveySrc {position: relative; text-align: right; margin-bottom: 10px;}
.surveySrc input {padding-left: 30px;}
.surveySrc .fa-search {
    font-size: 0;
    background: transparent;
    display: inline-block;
    vertical-align: middle;
    border: 0;
    min-width: 10.67px;
    position: absolute;
    left: 12px;
    padding: 0;
    width: 16px;
    height: 100%;
    position: absolute;
    background: url(/static/hcs/web-ui/images/icon/icon_search-70db2102f13352370635b188a3952172.svg) center no-repeat;
		}

.surveyList ul:first-child {padding: 10px; background: #525760; height: 56px; box-shadow: none;}
.surveyList ul:first-child > li {color: #fff; text-align: center; height: 56px; font-style: normal; font-weight: 700; line-height: 21.75px;}
.surveyList ul {display: flex; flex-wrap: nowrap; align-items: center; background: #fff; border-radius: 4px; padding: 16px; margin-bottom: 16px; box-shadow: 0px 0px 2px 0px rgba(34, 34, 34, 0.10), 0px 2px 2px 0px rgba(34, 34, 34, 0.05);}
.surveyList li {text-align: center; font-size: 15px; color: #676D79; height: 82px; align-content: center;}
.surveyList li > .divider {
	width: 1px;
	height: 24px;
	background-color: #CDD0D5;
}
.surveyList li:nth-child(1) {width: 25%; text-align: left;}
.surveyList li:nth-child(2) {width: 10%}
.surveyList li:nth-child(3) {width: 10%}
.surveyList li:nth-child(4) {width: 10%}
.surveyList li:nth-child(5) {width: 5%}
.surveyList li:nth-child(6) {width: 40%; text-align: center;}
.surveyList li>a {color: #676D79;}
.surveyList li.link>a {display:inline-block; width: 102px; font-size: 15px; color: #676D79; background-color: transparent; text-align: center; cursor: pointer;}
.surveyList li.link>a:before {content: ""; display: block; height: 24px;}
.surveyList li.link>a.fa-survey-info:before {background: url(/static/hcs/web-ui/images/icon/icon_survey_info-1bdc115f9dcc1208fbb2585c7c95581f.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}
.surveyList li.link>a.fa-editor:before {background: url(/static/hcs/web-ui/images/icon/icon_editor-20d6d25f08425396bf580f77432f8cc4.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}
.surveyList li.link>a.fa-translation:before {background: url(/static/hcs/web-ui/images/icon/icon_translation-b0c711d38dd2c9cf7c11e355a655966f.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}
.surveyList li.link>a.fa-employee:before {background: url(/static/hcs/web-ui/images/icon/icon_employee-d630158b9a90e9747c873b6872ee87c3.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}
.surveyList li.link>a.fa-campaign:before {background: url(/static/hcs/web-ui/images/icon/icon_campaign-c8ffd9890e2cc17b62bd42dd95386abc.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}
.surveyList li.link>a.fa-result:before {background: url(/static/hcs/web-ui/images/icon/icon_result-0af9a254a7fa02474a05ef4241dfc03e.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}
.surveyList li.link>a.fa-organization-result:before {background: url(/static/hcs/web-ui/images/icon/icon_organization_result-309dd96d2f1cee6e526b117c4ba25283.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}

.surveyList li.link > a:hover {color: #3478FE;}
.surveyList li.link > a.fa-survey-info:hover:before {background: url(/static/hcs/web-ui/images/icon/icon_survey_info_blue-8328e045ca2f83661af74a6283adafcb.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}
.surveyList li.link>a.fa-editor:hover:before {background: url(/static/hcs/web-ui/images/icon/icon_editor_blue-b3cd68befd368da9ffd7ccc6de61a33f.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}
.surveyList li.link>a.fa-translation:hover:before {background: url(/static/hcs/web-ui/images/icon/icon_translation_blue-779ec4cc07eb456ddffbc24fd0a133f1.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}
.surveyList li.link>a.fa-employee:hover:before {background: url(/static/hcs/web-ui/images/icon/icon_employee_blue-9ef323b607f4ac92a956e0123a8c579c.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}
.surveyList li.link>a.fa-campaign:hover:before {background: url(/static/hcs/web-ui/images/icon/icon_campaign_blue-ac251e16555bb10c5d7280aa9311ffc2.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}
.surveyList li.link>a.fa-result:hover:before {background: url(/static/hcs/web-ui/images/icon/icon_result_blue-1e51029f262652d507739a2db2cd584a.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}
.surveyList li.link>a.fa-organization-result:hover:before {background: url(/static/hcs/web-ui/images/icon/icon_organization_result_blue-917ece80f09325c1d769cad4e637e5c4.svg) center 0 no-repeat; background-size: 24px; margin-bottom: 4px;}

.surveyList li.nodata {width: 100%; text-align: center;}

.btn_more {text-align: center; margin-top: 20px;}
.btn_more button {background: #3478FE; border-radius: 2px; line-height: 40px; min-width: 200px; text-align: center; color: #fff; font-size: 16px;}
.btn_more button:before {content: ""; display: inline-block;vertical-align: middle; margin: 0 10px 2px 0; width: 20px; height: 20px;}
/*.btn_more button.fa-plus:before {background: url(../images/icon_plus.png) no-repeat;}*/

.treewrap {position: fixed; z-index: 20; left: 113px; top:64px; bottom: 0; background: #ffffff; width: 320px; overflow-y: hidden; overflow-x: hidden; padding: 16px;}
.tree_info {font-size: 0; margin-bottom: 20px; width: 100%;}
.tree_info li {display: inline-block;width: calc(33.333% - 6px);cursor:pointer;}
.tree_info li + li::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
}
.tree_info a {display:inline-block;vertical-align: middle;width: calc(100% - 1px); color:#121416; text-align:center; line-height: 32px; font-size: 14px; border: 1px solid #CDD0D5; border-radius: 4px;}
.tree_info a:hover {background: #F4F5F6;}
.tree_info a.on {background: #DDECFF; color: #3478FE; border: 1px solid #3478FE; border-radius: 4px;}
.tree_info a.disabled {background: #fff !important; color: #8E949F; cursor: not-allowed;}

.tree_info2 {font-size: 0; margin-bottom: 20px; width: 100%;}
.tree_info2 li {display: inline-block;width: calc(50% - 4px);cursor:pointer;}
.tree_info2 li + li::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
}
.tree_info2 a {display:inline-block;vertical-align: middle;width: calc(100% - 1px); color:#121416; text-align:center; line-height: 32px; font-size: 14px; border: 1px solid #CDD0D5; border-radius: 4px;}
.tree_info2 a:hover {background: #F4F5F6;}
.tree_info2 a.on {background: #DDECFF; color: #3478FE; border: 1px solid #3478FE; border-radius: 4px;}

.tree_info3 {font-size: 0; margin-bottom: 20px; width: 100%;}
.tree_info3 li {display: inline-block;width: calc(50% - 4px);cursor:pointer;}
.tree_info3 a {display:inline-block;vertical-align: middle;width: calc(100% - 1px); color:#121416; text-align:center; line-height: 32px; font-size: 14px; border: 1px solid #CDD0D5; border-radius: 4px;}
.tree_info3 a:hover {background: #F4F5F6;}
.tree_info3 a.on {background: #DDECFF; color: #3478FE; border: 1px solid #3478FE; border-radius: 4px;}
.tree_info3 select {height: 34px;}

a.start {display: inline-block;width: 100%; height: 36px; padding: 6px 12px 2px 12px; font-weight: 700; font-size: 14px; color: #121416; text-align: center;background: #FFFFFF;border-radius: 4px; border: 1px solid #CDD0D5;}
a.start:not(.on):hover {background: #F4F5F6;}
.start.on {color: #3478FE; background: #FFFFFF; border: 1px solid #3478FE;}

a.preview-btn {display: inline-block;width: 100%; height: 36px; padding: 6px 12px 2px 12px; font-weight: 700; font-size: 14px; text-align: center;border-radius: 4px; color: #3478FE; background: #FFFFFF; border: 1px solid #3478FE;}
a.preview-btn:not(.on):hover {background: #ECF6FF;}

.tree_scroll {width: 280px; height: calc(100% - 310px); overflow-y: auto;}
.tree_pagewrap {position: relative; width: 100%; padding-bottom: 4px; border-bottom: 1px solid #EEEFF1; margin-bottom: 16px;}

.tree_Q li {margin-bottom: 4px;}
.tree_Q li:last-child {margin-bottom: 0px;}
.tree_Q li a {display: block; color: #676D79;  padding: 4px 12px; border-radius: 4px; border: 1px solid transparent;}
.tree_Q li a:hover {color: #3478FE;}
.tree_Q li a.router-link-exact-active {border: 1px solid #3478FE;}

.tree_Q li p {display: block; width:100%; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.tree_Q li a.router-link-exact-active p {color: #3478FE;}

.tree_page {margin-bottom:4px; position: relative;}
.tree_page a > span:first-child {padding: 0 12px; display: inline-block; color: #121416; text-align: center; line-height: 32px; font-size: 14px; border: 1px solid #CDD0D5; border-radius: 4px;}
.tree_page a.router-link-active > span:first-child, .tree_page a.router-link-exact-active > span:first-child {background: #DDECFF; color: #3478FE; border: 1px solid #3478FE; border-radius: 4px;}
.tree_page a {width:100%;display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.tree_page a > span:last-child {display: inline-block; vertical-align: sub;color: #b2b6bd;width: 220px;padding-left: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.tree_page .icon_time {position: absolute; right: 5px; top: 2px; font-size: 0; width: 16px; height: 16px; background: url(../images/icon_time.png) no-repeat;}

.tree_page.nonetype a > span:last-child {position: relative; background: #999; border-radius: 1px;color:#fff;padding: 1px 5px 3px 5px; margin-left: 5px; font-weight: 400;}

.tree_menu li + li {margin-top: 5px;}
.tree_menu li p {display: block; width:100%;color: #777;}
.tree_menu li p > a {display: block; background: #fff; border:solid 1px #ddd; border-radius: 3px; line-height: 36px; font-size:15px;color:#121416;padding: 0 5px;}
.tree_menu li p > a:before {content:""; display:inline-block;vertical-align:middle;margin-top: 7px;float:left;width:24px;height:24px;background:url(../images/menu_arrow.png) no-repeat;}
.tree_menu li p > a.on {background: #3854da; border:solid 1px #3854da;color:#fff;}
.tree_menu li p > a.on:before {content:"";background-position:0 -24px;}

/*tab_list*/
.tab_list ul { display:flex; border-left:#ccc solid 1px; }
.tab_list ul:after{ display:block; content:""; clear:both; }
.tab_list ul li{min-width: 180px;display:flex;position:relative;align-items: center;padding-left: 20px; padding-right: 20px;border-right:#e4e4e4 solid 1px;border-bottom: #3478FE solid 1px;font-size:14px;cursor: pointer; background:#f9f9f9;}
.tab_list ul li.no {width: 100%;background: transparent !important; cursor: auto !important; padding: 0 !important;}
.tab_list ul li a{ display:block; width:100%; padding:12px 10px; word-break: keep-all; text-align: center; color:#888; font-weight:500; line-height: 1.5; }
.tab_list ul li.active,.tab_list ul li:not(.no):hover{border-right: #3478FE solid 1px;border-bottom:#fff solid 1px;transition: 0.3s;background:#fff;}
.tab_list ul li.active a,.tab_list ul li:not(.no):hover a{background:#fff;color: #3478FE;transition: 0.3s;}
.tab_list ul li.active:before,.tab_list ul li.active:after,
.tab_list ul li:not(.no):hover:before,.tab_list ul li:not(.no):hover:after{position:absolute;left:-1px;top:-1px;display:block;content:"";background: #3478FE;transition: 0.3s;z-index: 100;}
.tab_list ul li.active:before,.tab_list ul li:hover:before{  width:1px; height:calc(100% + 2px ); transition: 0.3s;}
.tab_list ul li.active:after,.tab_list ul li:hover:after{ width:calc(100% + 2px ); height:1px; transition: 0.3s; }
.tabs_cont_box{display:none;}
.menuSelectView { font-size: 18px; }

.bg-white {
	background-color: #fff !important;
}

.tab_list_content {
	border-left: #3478FE solid 1px;
	border-bottom: #3478FE solid 1px;
	border-right: #3478FE solid 1px;
	padding: 15px;
	background:#fff;
}


.nonetypepage {border: solid 1px #ddd; border-radius: 3px; padding: 20px;}
.nonetypepage p {text-align: center;margin-bottom: 20px;line-height:20px;}
.nonetypepage p strong {color:#3854da; font-size:17px;}

.pagewrap {color: #121416; background: #fff; padding: 24px; border-radius: 0 0 8px 8px;}
.pagewrap>h2 {padding-bottom: 20px;font-size: 30px; font-weight: 500;}
.pagewrap .pg_bullet {position: absolute; left: 0; top:5px;}
.pagewrap .pg_bullet p {display: inline-block; color: #3478FE; text-align: center; vertical-align: middle; margin-right: 4px; font-size: 24px; font-weight: 700;}

.preview_title {position: relative; background: #fff; padding: 20px; border-radius: 5px; box-shadow: 1px 1px 8px rgba(0,0,0,.1);}
.preview_title:after {content: ""; display: block; clear: both;}
.preview_title dl {float: left; width: 50%; font-size:0; padding: 5px 0;}
.preview_title dl:last-child {width: 100%;}
.preview_title dt {color: #999; display: inline-block;font-size:14px;}
.preview_title dt:before {content: ""; display: inline-block; vertical-align: middle; width: 3px; height: 3px; background: #121416; margin-right: 5px;}
.preview_title dd {display: inline-block; margin:0 30px 0 10px;font-size:16px;}


.bedge {display: inline-block; border-radius: 4px;padding: 0px 8px 2px 8px; font-size: 12px; line-height: 18px; text-align: center;}
.bedge a {text-decoration: none !important; color: #fff;}
.finish {background: #787F8C; color: #fff;}
.ing {background: #3478FE; color: #fff;}
.ready {background: #fff; border: solid 1px #3478FE; color: #3478FE;}
.success {background: #04B249; color: #fff;}

.bedge-status {display: inline-block; border-radius: 4px;padding: 0px 8px 2px 8px; font-size: 12px; line-height: 18px; text-align: center;}
.bedge-status.ready {background: #3478FE; color: #fff;}
.bedge-status.failed {background: #F25151; color: #fff;}
.bedge-status.success {background: #04B249; color: #fff;}

.admin_left {position: fixed; z-index: 20; width: 320px; height: 100%; background:#fff; box-shadow: 0px 0px 2px 0px rgba(34, 34, 34, 0.10), 0px 8px 6px 0px rgba(34, 34, 34, 0.05); overflow-y: auto;}
/*.admin_menu {padding: 1px; border-radius: 6px;}*/
.admin_menu>h2 {background: #525760; padding: 16px; color: #fff; font-size: 18px; font-weight: 700; line-height: 145%;}
.left_menu, .left_result {background: #fff; padding: 16px;}
.left_menu li {border-radius: 4px; margin-bottom: 16px;}
.left_menu li:last-child {margin-bottom: 0;}
.left_menu li a {display: block; border-radius: 4px; line-height: 36px; color: #121416; font-size: 15px; font-weight: 700; padding: 0 36px 0 12px; background: url(/static/hcs/web-ui/images/icon/left_menu_arrow-2b08b2ecc7c794dc0d22a110958efa70.svg) right 12px center no-repeat; border:solid 1px #CDD0D5;}
.left_menu li a:hover {background: url(/static/hcs/web-ui/images/icon/left_menu_arrow-2b08b2ecc7c794dc0d22a110958efa70.svg) right 12px center no-repeat #F4F5F6; border:solid 1px #CDD0D5;}
.left_menu li a.on {color:#3478FE; background: url(/static/hcs/web-ui/images/icon/left_menu_arrow_blue-ce48b9dc4ccdab25cf41554663a7681a.svg) right 12px center no-repeat #DDECFF; border:solid 1px #3478FE;}
.left_result li {position: relative; border:solid 1px #ddd; border-radius: 4px; margin-bottom: 5px; line-height: 36px; color: #121416; font-size: 15px; padding: 0 10px;}
.left_result li:after {content: ""; display: block; clear: both;}
.left_result li span {display: block;}
.left_result li span:first-child {float: left;}
.left_result li span:last-child {float: right;}
.left_result li a {color: #121416; display: block;}
.left_result li a>i {position: absolute; right: 10px; top:10px;}

/**alert**/
.alert-mask {
    position: fixed;
    z-index: 75535;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
}

.alert-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.alert-container {
    position: relative;
    width: 480px !important;
    margin: 0 auto;
    padding: 24px !important;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
}

.alert-context {
  display: flex;
  -ms-flex-direction: column!important;
  flex-direction: column !important; 
  width: 100%;
}

.alert-body {
    margin-bottom: 32px !important;
    font-size:14px;
    color: #676D79;
    line-height: 22px;
}

.alert-body-title {
  font-size: 24px;
  font-style: normal;
  line-height: 36px;
  font-weight: 700;
  color: #121416;
  margin-bottom: 8px;
}

.alert-default-button {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 32px; 
    height: 36px;
    color:#fff;
    background: #3478FE;    
    border-radius: 4px;
    padding: 0px 16px 2px 16px;
    border-color: #3478FE;
    cursor: pointer;
}

.alert-default-button:hover {
  background: #4885FE;
}

.alert-default-button-outline {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 32px; 
  height: 36px;
  color:#121416;
  background: #fff;    
  border-radius: 4px;
  padding: 0px 16px 2px 16px;
  border: 1px solid #CDD0D5;
  cursor: pointer;
  margin-right: 10px;
}

.alert-default-button-outline:hover {
  background: #F4F5F6;  
}

.alert-enter {
    opacity: 0;
}

.alert-leave-active {
    opacity: 0;
}
.alert-enter .alert-container,
.alert-leave-active .alert-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.alert-header {width:100%; height:48px !important; margin-bottom: 12px;}
.confirm .alert-header {background:url(/static/hcs/web-ui/images/icon/icon_alert_confirm-64e5f4bc9ad93e68baa4e8d7c183ffa9.svg) center top no-repeat !important;background-size: auto 48px !important;}
.success .alert-header {background:url(/static/hcs/web-ui/images/icon/icon_alert_success-258e88e9419b83cc6f85c0526d403485.svg) center top no-repeat !important;background-size: auto 48px !important;}
.warning .alert-header {background:url(/static/hcs/web-ui/images/icon/icon_alert_warning-ae8d0e807e357d1fdfad0a888c56b5da.svg) center top no-repeat !important;background-size: auto 48px !important;}
.error .alert-header {background:url(/static/hcs/web-ui/images/icon/icon_alert_error-f0ebb9dd5c6486b1537ce29beaf98458.svg) center top no-repeat !important;background-size: auto 48px !important;}
.mce-content-body {}

.admin_right {width:100%; padding: 24px 24px 24px 344px;}
.admin_right > h2 {padding-bottom: 24px; font-size: 24px; color: #3478FE; font-weight: 700;}

.admin_center {width:100%; padding: 48px;}
.admin_center > h2 {padding-bottom: 20px; font-size: 30px; color: #121416; font-weight: 500;}


/** search **/
.search-container {position: relative; background: #fff; padding: 16px 24px 0px 24px; border-radius: 5px; box-shadow: 0px 0px 2px 0px rgba(34, 34, 34, 0.10), 0px 2px 2px 0px rgba(34, 34, 34, 0.05);display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
.search-container > .search-group {flex: 1;}
.search-container > .search-group > div {position: relative; display: inline-block; color: #121416; margin:0 16px 16px 0;}
/*.search-container > .search-group > div:last-child {position: absolute; right: 0; bottom: 0;}*/
.search-container > .search-group > div.btn_set>span>a {margin-bottom: 0 !important;}
.search-container > .search-group > div > label {display: inline-block; vertical-align: middle; margin-right: 8px; color: #676D79; font-size: 12px; font-weight: 700;}
.search-container > .search-group > div input+a {position: absolute; top:2px; right: 2px; width: 28px; height: 28px; background: #333c4e; border-radius: 50%; margin:2px 0;}
.search-container > .search-group > div input:hover, .search-container > .search-group > div select:hover {border: 1px solid #121416 !important;}
.search-container > .search-group > div input+a>i {color: #fff; font-size: 18px; line-height: 28px; padding: 0 5px; }
.search-container > .search-group > div > span {display: inline-block; vertical-align: middle;}
.search-container > .search-group > div > label+span {font-size: 16px; line-height: 40px;}
.search-container > .search-group > div > span.num_txt {font-size: 16px; margin-right: 20px;}
.search-container > .btn_set > span {margin-top: auto; margin-bottom: 16px;}
.search-container button {white-space: nowrap;}

/** input tale **/
.input-table {position: relative;}
.input-table table {
    width: 100%;
    color: #121416;
    border: 1px solid #EEEFF1;
    font-size: 14px;
}
.input-table td,.input-table th {
    line-height: 1;
    border-top: 1px solid #EEEFF1;
    border-right: 1px solid #EEEFF1;
}
.input-table th:last-child,
.input-table td:last-child {border-right:none;}
.input-table th {
    background: #F4F5F6; 
    text-align: left;
    max-width: 345px;
    font-weight: 700; 
    padding: 14px 16px;
    min-width: 120px;
}   
.input-table th>p {line-height: 22px;}
.input-table td {background: #fff; text-align: left; padding: 5px 10px;}
.input-table td>p+p {margin-top: 5px;}
.input-table td>span {display: inline-block;}
.input-table td>span+span, .input-table td>input+span {margin-left: 10px;}
.input-table td>pre {line-height: 1.6;}

.imgView img {max-width: 330px; max-height: 375px; margin:5px 0;}

/** data tale **/
.data-table {position: relative;}
.data-table table {
    width: 100%;
    color: #121416;
    border: 1px solid #EEEFF1;
    font-size: 14px;
}
.data-table td,.data-table th {    
    line-height: 1;
    text-align: center;
    border-top: 1px solid #EEEFF1;
    border-right: 1px solid #EEEFF1;
}
/*.data-table tbody tr:nth-of-type(odd) {background-color: #f5f5f5;}*/
.data-table th:last-child,
.data-table td:last-child {border-right:none;}
.data-table tbody tr:hover td {background-color: #F4F5F6;}
.data-table tbody > tr.tree_selected_row > td { background-color: #ECF6FF;}
.data-table th {background: #F4F5F6; color: #121416; font-weight: 700; padding: 12px 16px;}   
.data-table td {background: #fff; color: #676D79; padding: 12px 16px;}
.data-table td a {text-decoration: underline;}

.data-table.smpd th, .data-table.smpd td {padding: 10px;}
.data-table td th, .data-table td td {padding: 5px;}


.total {position: absolute; left: 0; margin-top: -25px; text-align: left; line-height: 1;}
.nodata {min-height: 82px; line-height: 68px; vertical-align: middle; color: #999;}

/**paging**/
.paging {position: relative; width: 100%; text-align:center; margin-top: 24px;}
.paging span {display: inline-block;vertical-align: middle;}
.paging span:last-child:after {content:''; display:block; clear:both;}
.paging a {
    display:block;    
    min-width: 32px;
    height: 32px;
    line-height: 21.7px;
    color: #121416;
    text-align: center;
    margin:0 2px;
    padding-bottom: 2px;
    padding-top: 4px;
    border-radius: 4px;
}
.paging a:hover {
  background-color: #ECF6FF;
}
.paging a.on {background-color: #3478FE; font-weight: 700; color: #fff;}
.paging a.end_prev {
    content: "";
    background: url(/static/hcs/web-ui/images/icon/icon_endback-f61d8b416f62bfecd6d9afbdd79accd4.svg) center center no-repeat #fff;
}
.paging a.prev {
    content: "";
    background: url(/static/hcs/web-ui/images/icon/icon_back-da00a58443946b2954e8a3c03db87ec8.svg) center center no-repeat #fff;
}
.paging a.end_next {
    content: "";
    background: url(/static/hcs/web-ui/images/icon/icon_endnext-0870ea2ef4850cc9678a4fd58e3b6122.svg) center center no-repeat #fff;
}
.paging a.next {
    content: "";
    background: url(/static/hcs/web-ui/images/icon/icon_next-21297c3d82a1bd9da89204f2442f2f6c.svg) center center no-repeat #fff;
}
.paging span.on {padding: 0 10px;}

.surveytype {display: flex; flex-wrap: wrap; margin-bottom: 24px; justify-content: center;}
.surveytype li {width: 108px; height: 100px; border:solid 1px #CDD0D5; border-radius: 4px; color: #121416; font-size: 14px; font-weight: 700; text-align: center; padding: 60px 10px 10px 10px; margin: 6px 6px; cursor: pointer;}
.surveytype li:nth-child(1) {background: url(/static/hcs/web-ui/images/icon/icon_type01-3f88e117ba0ba7a3ff0ff476936a8137.svg) center top 16px no-repeat; margin-top: 0; margin-left: 0;}
.surveytype li:nth-child(2) {background: url(/static/hcs/web-ui/images/icon/icon_type02-f4a4e087e09d18d77e42cf9fdf2cc408.svg) center top 16px no-repeat; margin-top: 0;}
.surveytype li:nth-child(3) {background: url(/static/hcs/web-ui/images/icon/icon_type03-37b506961be563e72abc48bdf610d069.svg) center top 16px no-repeat; margin-top: 0;}
.surveytype li:nth-child(4) {background: url(/static/hcs/web-ui/images/icon/icon_type04-488f43b506ab9a094c2ae344fa18d1d7.svg) center top 16px no-repeat; margin-top: 0;}
.surveytype li:nth-child(5) {background: url(/static/hcs/web-ui/images/icon/icon_type05-20112614534326d957da3e3c5d2332d7.svg) center top 16px no-repeat; margin-top: 0; margin-right: 0;}
.surveytype li:nth-child(6) {background: url(/static/hcs/web-ui/images/icon/icon_type06-ab92c0bb85f4a5f2f5ecfe8ca91c9080.svg) center top 16px no-repeat; margin-bottom: 0; margin-left: 0;}
.surveytype li:nth-child(7) {background: url(/static/hcs/web-ui/images/icon/icon_type07-ca04642752fd5f3405572dee5ea2ec2e.svg) center top 16px no-repeat; margin-bottom: 0;}
.surveytype li:nth-child(8) {background: url(/static/hcs/web-ui/images/icon/icon_type08-1e1d03e570a512875ad05a29e67929bd.svg) center top 16px no-repeat; margin-bottom: 0;}
.surveytype li:nth-child(9) {background: url(/static/hcs/web-ui/images/icon/icon_type09-e4e08c75b01ba8ef6c8b9475d3a28995.svg) center top 16px no-repeat; margin-bottom: 0;}
.surveytype li:nth-child(10) {background: url(/static/hcs/web-ui/images/icon/icon_type10-e1360fbb7f2825df6669c5bdf5248882.svg) center top 16px no-repeat; margin-bottom: 0; margin-right: 0;}

.surveytype li.on {border:solid 1px #3478FE; color: #3478FE;}
.surveytype li.on:nth-child(1) {background: url(/static/hcs/web-ui/images/icon/icon_type_on01-32406de21d3359afc533e87d8ef357f3.svg) center top 16px no-repeat; margin-top: 0; margin-left: 0;}
.surveytype li.on:nth-child(2) {background: url(/static/hcs/web-ui/images/icon/icon_type_on02-5772c07fd3ab78528d468b0afd8bd2d4.svg) center top 16px no-repeat; margin-top: 0;}
.surveytype li.on:nth-child(3) {background: url(/static/hcs/web-ui/images/icon/icon_type_on03-29d5cba417dfa0dcfbb58a177752e5e2.svg) center top 16px no-repeat; margin-top: 0;}
.surveytype li.on:nth-child(4) {background: url(/static/hcs/web-ui/images/icon/icon_type_on04-34a6603cc3fc276a7e1b619f98e9e9a6.svg) center top 16px no-repeat; margin-top: 0;}
.surveytype li.on:nth-child(5) {background: url(/static/hcs/web-ui/images/icon/icon_type_on05-b655ccf97ab3b799531c3a84ca36daeb.svg) center top 16px no-repeat; margin-top: 0; margin-right: 0;}
.surveytype li.on:nth-child(6) {background: url(/static/hcs/web-ui/images/icon/icon_type_on06-f44b22108ab5b8bb6a522c85e1165ab5.svg) center top 16px no-repeat; margin-bottom: 0; margin-left: 0;}
.surveytype li.on:nth-child(7) {background: url(/static/hcs/web-ui/images/icon/icon_type_on07-e776b27f0f6f7da5ccdbb9af84e09459.svg) center top 16px no-repeat; margin-bottom: 0;}
.surveytype li.on:nth-child(8) {background: url(/static/hcs/web-ui/images/icon/icon_type_on08-5757e05159237cfc880ba9dac4d6da04.svg) center top 16px no-repeat; margin-bottom: 0;}
.surveytype li.on:nth-child(9) {background: url(/static/hcs/web-ui/images/icon/icon_type_on09-d67d7d71e068432e5b5d6430eb7f5de4.svg) center top 16px no-repeat; margin-bottom: 0;}
.surveytype li.on:nth-child(10) {background: url(/static/hcs/web-ui/images/icon/icon_type_on10-2e70bd9c1047d1e823281eed071cf682.svg) center top 16px no-repeat; margin-bottom: 0; margin-right: 0;}

.surveytype li:hover {background-color: #F4F5F6;}
.modal-body .btn_set a {min-width: 100px;}

.chart-area {background: #fff; border:solid 1px #ced2dd; min-height: 300px; text-align: center; margin-top: 20px;}

.addr_src {position: relative; background: rgb(233, 237, 240); border-radius: 8px; padding: 20px;}
.addr_src input+a {position: absolute; top:25px; margin-left:-30px; font-size: 0;}
.addr_src input+a:before {font-size: 18px; color: #313a46;}
.addr_result li {border-bottom: 1px solid #d2d2d2; padding: 10px 15px;}
.addr_result li>p {margin-bottom: 5px;}
.addr_result li span {display: inline-block; vertical-align: middle; width: 50px; border: 1px solid #dedede; color: #3478FE; padding: 0 5px; text-align: center;}
.addr_result li>p>a {font-size: 24px; color: #3478FE;}

.pageground {border: solid 1px #ddd;border-radius: 4px;padding: 24px;position: relative;margin-top: 24px;background:#fff;}
.pageground:last-child {margin-bottom: 48px;}
.pageNo {position: absolute;left: 0;top: 0;display: inline-block;min-width: 80px;background: #eee;color: #121416; text-align: center; padding: 5px; letter-spacing: -1px; border: solid 1px #ddd; border-top: 0; border-radius: 0 0 3px 3px; font-weight: bold;}
.pageNm {display: inline-block;font-size: 13px;color: #999;padding-left: 5px;}
.pageNo .nonstyle {color: #fff;display: inline-block; vertical-align: middle;margin-right: 5px;background: #aaa;border-radius: 2px;padding: 2px;}
.pagEdit {display: inline-block; vertical-align: middle; margin-left: 5px;}
.pagEdit button {width: 20px; height: 20px; font-size: 0; cursor: pointer; background: url(../images/icon_pagemodify.png) no-repeat;}
.Q_delete {display: inline-block; vertical-align: middle; border-radius: 3px; padding: 2px;}
.Q_delete button {width: 20px; height: 20px; font-size: 0; cursor: pointer; background: url(../images/icon_pagedel.png) no-repeat;}
.Q_jump {display: inline-block; vertical-align: middle;border:solid 1px #ccc; border-radius: 3px; line-height: 20px; padding: 2px 2px 2px 22px; font-size: 13px; color: #121416; background: url(../images/icon_Qjump.png) 2px center no-repeat; }

/** bullet**/
.bullet_dotB {display: inline-block;vertical-align:middle;color: #454545; padding: 3px; border-radius: 4px; line-height: 1; margin: 0 5px 0 0; border:dotted 1px #454545;}
.bullet_dotG {display: inline-block;vertical-align:middle;color: #555; padding: 3px; border-radius: 4px; line-height: 1; margin: 0 5px 0 0; border:dotted 1px #aaa;}
.bullet_page {display: inline-block;vertical-align:middle; background: #3478FE; color: #fff; padding: 0 8px 2px 8px; height: 22px; line-height: 20px; border-radius: 4px;}
.bullet_type {display: inline-block;vertical-align:middle; background: #787F8C; color: #fff; padding: 0 8px 2px 8px; height: 22px; line-height: 20px; border-radius: 4px;}
.bullet_logic {display: inline-block;vertical-align:middle; background: #fd8080; color: #fff; padding: 0 8px 2px 8px; height: 22px; line-height: 20px; border-radius: 4px;}
.bullet_count {display: inline-block;vertical-align:middle; background: #CDD0D5; color: #121416; padding: 0 8px 2px 8px; height: 22px; line-height: 20px; border-radius: 4px;}
.bullet_jump {display: inline-block;vertical-align:middle; background: #00c597; color: #fff; padding: 0 8px 2px 8px; height: 22px;line-height: 20px;  border-radius: 4px;}
.bullet_end {display: inline-block;vertical-align:middle; background: #aaa; color: #fff; padding: 0 8px 2px 8px; height: 22px; line-height: 20px; border-radius: 4px; font-size: 14px;}
.bullet_line {display: inline-block;vertical-align:middle; background: #fff; border: 1px solid #CDD0D5; color: #121416; padding: 0 8px 2px 8px; height: 22px; line-height: 20px; border-radius: 4px; font-size: 14px;}
.bullet_sel {display: inline-block;vertical-align:middle; background: #fff; color: #777; padding: 0 8px 2px 8px; height: 22px; border:solid 1px #ccc; line-height: 20px; border-radius: 4px; font-size: 14px;}
.bullet_inf {display: inline-block;vertical-align:middle; background: #454545; color: #fff; padding: 0 8px 2px 8px; height: 22px; line-height: 20px; border-radius: 4px; font-size: 14px;}

.PgNm {position: absolute; left: 0; margin-top: -62px;}

/**탭**/
.ui_tabs{padding-left:1px; }
.ui_tabs:after{display:block;clear:both;content:'';}
.ui_tabs li{position:relative;float:left; background: #fff;}
.ui_tabs li > *{display:block;height:34px;margin-left:-1px;color: #121416;border:1px solid #ced2dd;line-height: 34px;text-align:center;font-weight: 700;box-sizing:border-box; padding: 0px 16px 2px 16px;}
.ui_tabs li:first-child > *{border-radius:4px 0 0 4px;}
.ui_tabs li:last-child > *{border-radius:0 4px 4px 0;} /* .ui_tabs li:last-child > *{border-radius:0 5px 5px 0;} */
.ui_tabs li.active, .ui_tabs li.on > *{border-color:#3478FE;background:#3478FE;color:#fff;}



.fn-btns .sm {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    text-align: center;
    line-height: 28px;
    min-width: 80px;
    height: 32px;
    color: #3478FE;
    border: 1px solid #3478FE;
    background: #fff;
    border-radius: 2px;
}

/** 입력박스 **/
input {
    background: #ffffff !important;
    border: solid 1px #CDD0D5 !important;
    height: 36px;
    outline: medium;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 400;
    color: #121416;
    padding: 0 12px;
    border-radius: 4px;
}
input:focus {color: #121416;}
input:disabled {background:#ebe9e9;}
input[type=text]::-ms-clear {display:none;}

input::-webkit-inner-spin-button,
input::-webkit-clear-button {display: none;}

input::-webkit-input-placeholder,
input::-ms-input-placeholder { color: rgba(153,153,153,0.9);}

input:-moz-read-only {background:#ebe9e9; border:0;}
input:read-only {background: #eee;}

textarea {
    height: 32px; 
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    outline: medium;
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    vertical-align: middle;
    color: #121416;
    padding: 0 5px;
}
textarea:focus {border: 1px solid #333c4e; color: #666;}
textarea:disabled {background:#ebe9e9;}
textarea::-ms-clear {display:none;}

textarea::-webkit-inner-spin-button,
textarea::-webkit-clear-button {display: none;}

textarea::-webkit-input-placeholder,
textarea::-ms-input-placeholder { color: rgba(153,153,153,0.9);}

textarea:-moz-read-only {background:#ebe9e9; border:0;}
textarea:read-only {background: #eee;}

.set-date {position: relative; display: inline-block; height: 36px; line-height: 36px; padding:0 20px 0 10px;}
.set-date a {position:absolute;right: 0;top:5px;width: 20px;height: 20px;font-size: 0;background: url(../images/icon_delete.png) no-repeat;}
.set-date + .set-date {margin-left: 10px;}

.vdp-datepicker__calendar header .up {background: url('/static/hcs/web-ui/images/icon/icon_calendar_drop-290fbb905ff182bca989db07bcf83294.svg') no-repeat center right 42px;}
.vdp-datepicker__calendar header .up:not(.disabled):hover {
  background: url('/static/hcs/web-ui/images/icon/icon_calendar_drop-290fbb905ff182bca989db07bcf83294.svg') no-repeat center right 42px #eee !important;
}

/** 콤보박스 **/
select {
    min-width: 100px;
    height: 36px;
    border: 1px solid #CDD0D5;
    border-radius: 4px;
    outline: medium;    
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    vertical-align: middle;
    padding: 0px 32px 2px 8px;
    background: #fff url('/static/hcs/web-ui/images/icon/icon_arrow_down-c8175d1457a9f47a56a772321712f250.svg') no-repeat center right 8px;
    background-size: 16px;
}
select:focus {border: 1px solid #333c4e;color: #666;}
select:disabled {background:#eee;}
/**20-03-05 수정**/
select::-ms-expand {display: none;background-color: transparent;}

/** 텍스트 박스 **/
textarea {background: #fff; border: 1px solid #ddd; border-radius: 3px; resize:vertical; font:inherit; overflow-y:auto; width: 100%; min-height: 50px; padding: 10px; line-height: 150%;}
textarea:focus {border: 1px solid #333c4e;color: #666;}

/** 에디터 **/
.tox-tinymce {border-radius: 4px !important; border: 1px solid #CDD0D5 !important;}
.tox .tox-editor-container {border-radius: 4px !important;}
	
/** check&radio **/
.input_rdo, 
.input_chk {
    display: inline-block;
    position: relative;
    font-size:inherit;
    line-height: 22px;
    cursor: pointer;
}
.input_rdo + .input_rdo, 
.input_chk + .input_chk {margin-left: 20px;}
.input_rdo input,
.input_chk input {
    position: absolute;
    top: 0;
    top: 6px;
    padding: 0;
    margin: 0; 
    width: 19px;
    height: 21px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    opacity: 0;
}
.input_rdo input:disabled,
.input_chk input:disabled {
  cursor: not-allowed;
}
.input_rdo i,
.input_chk i {
    padding-left: 30px;
    font-style: normal;
}
.input_rdo i:before, .input_rdo i:after,
.input_chk i:before, .input_chk i:after {
    position: absolute;
}
.input_rdo i:before,
.input_chk i:before {    
    content: '';
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 6px;
		transform: translateY(-48%);
    width: 18px;
    height: 18px;
    border: 1.6px solid #B2B6BD;
    background: #fff;
    box-sizing: border-box;
}
.input_rdo input:checked + i:before {
  border: 1.6px solid #3478FE;
}
.input_rdo i:before {
    border-radius: 100%;
}
.input_chk i:before {
    border-radius: 2px;
}
.input_chk input:checked + i:after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 12px;
    height: 12px;
    top: 50%;
		left: 6px;
		transform: translate(30%, -50%);
    background: url(/static/hcs/web-ui/images/icon/icon_check_after-c478b508aad82431362f466528209244.svg) no-repeat center center;
    box-sizing: border-box;
}
.input_chk input:checked + i:before {
    background: #3478FE;
    border-color: #3478FE;
    border-radius:2px; 
}
.input_rdo input:checked + i:after {
    content: '';
    position: absolute;
    display: inline-block;
    top: 50%;
		left: 15px;
		transform: translate(-50%, -49.8%);
    width: 10px;
    height: 10px;
    margin: auto;
    background: #3478FE;
    border-radius: 100%;
    box-sizing: border-box;
}
.input_rdo input:disabled + i,
.input_chk input:disabled + i {
    cursor: default;
}
.input_chk input:disabled + i:before {
    opacity: 0.2;
    background-color: #ddd;
    border-color: #999;
}
.input_chk input:disabled:checked + i:before {
    opacity: 0.2;
    background-color: #333;
    border-color: #333;
}
.input_rdo input:disabled + i:before,
.input_rdo input:disabled:checked + i:before {
    opacity: 0.2;
    background-color: #ddd;
    border-color: #999;
}
.input_rdo input:disabled:checked + i:after {
    opacity: 0.2;
    background-color: #333;
}

.fn-icons {font-size: 0;position: relative;display: inline-block; vertical-align: middle;}
.fn-icons > span {display: inline-block; vertical-align: middle;padding-right: 8px; }
.fn-icons > span:last-child {padding: 0; }
.fn-icons button {display: block; width: 24px; height: 24px; font-size: 0; cursor: pointer; background: transparent;}
.fn-icons button.disabled {cursor: not-allowed;}
.fn-icons button:before {content: ""; color: #fff; text-align: center; display: block; width: 28px; height: 24px;}
.fn-icons button.fa-pen:before {background: url(/static/hcs/web-ui/images/icon/icon_pen-22df090ff0b70c9ef2747c367fc19a52.svg) no-repeat;}
.fn-icons button.fa-clone:before {background: url(/static/hcs/web-ui/images/icon/icon_clone-e0b300b2ced5c8540bf067eea67c14ac.svg) no-repeat;}
.fn-icons button.fa-expand-arrows-alt:before {background: url(/static/hcs/web-ui/images/icon/icon_expand-7a3f19724352e94ff855ef2bdb6fda1d.svg) no-repeat;}
.fn-icons button.fa-trash-alt:before {background: url(/static/hcs/web-ui/images/icon/icon_trash-19ae49f30f024ce13d627b9d66e62269.svg) no-repeat;}

.fn-icons button.putAdd {background: url(/static/hcs/web-ui/images/icon/icon_add-ba039664146a6120c26a18093712c450.svg) no-repeat;}
.fn-icons button.putDel {background: url(/static/hcs/web-ui/images/icon/icon_del-714fe8a9db4b11277e38459a21ef09e9.svg) no-repeat;}
.fn-icons button.putUp {background: url(/static/hcs/web-ui/images/icon/icon_up-b9c02219cc39d1d4fef9e86f59773a62.svg) no-repeat;}
.fn-icons button.putDn {background: url(/static/hcs/web-ui/images/icon/icon_dn-8d56ab377a46a54333a671d6dd5cac1b.svg) no-repeat;}
.fn-icons button.FpgAdd {background: url(../images/icon_addpagefree.png) no-repeat;}
.fn-icons button.s_text {background: url(../images/icon_single.png) no-repeat;}
.fn-icons button.m_text {background: url(../images/icon_multi.png) no-repeat;}

.pgfnc {position: relative; margin-bottom: 24px; text-align: right;}
.pgfnc span {display: inline-block; vertical-align: middle;}
.pgfnc span button {display: inline-block; vertical-align: middle; color: #121416; border: 1px solid #CDD0D5; text-align: center; height: 36px; background-color: #ffffff; border-radius: 4px; font-weight: 700; font-size: 14px; padding: 0 12px 0 30px ; cursor: pointer;}
.pgfnc span button:hover {background-color:#CDD0D5 !important;}
.pgfnc span button.disabled {background-color: #fff !important; color: #8E949F; cursor: not-allowed;}
.pgfnc span:nth-child(1) button {padding: 0 12px 0 12px ;}
.pgfnc span:nth-child(2) button {background: url(/static/hcs/web-ui/images/icon/icon_pageview-2909457c1414787a0b5ebc7a6cfaf757.svg) 10px center no-repeat;}
.pgfnc span:nth-child(3) button {background: url(/static/hcs/web-ui/images/icon/icon_pageregist-5dcec33ea27f71bb230ce0a856fed593.svg) 10px center no-repeat;}
.pgfnc span:nth-child(4) button {background: url(/static/hcs/web-ui/images/icon/icon_pageregist-5dcec33ea27f71bb230ce0a856fed593.svg) 10px center no-repeat;}
.pgfnc span:nth-child(5) button {background: url(/static/hcs/web-ui/images/icon/icon_pagemove-196b53a73e395f7dcd5220a84d07ebf9.svg) 10px center no-repeat;}
.pgfnc span:nth-child(6) button {background: url(/static/hcs/web-ui/images/icon/icon_pagedelete-36bbcdeb9f20c97c957a60afb4108594.svg) 10px center no-repeat;}

.listbox {width: 100%; height: 300px; overflow-y: auto;}
.listbox li {background: #eee; border-radius: 4px; border: solid 1px #eee; margin-bottom: 8px; padding: 5px 10px 8px; color: #555; cursor: pointer;}
.listbox li {margin-bottom: 0;}
.listbox li.dis {background: #eee !important; color: #999; border: solid 1px #ddd;}
.listbox li.pattern {background: #fff; color: #3478FE; border: solid 1px #3478FE;}
.listbox li.Npattern {background: #eee;}
.listbox li:hover {background: #3478FE; color: #fff; border: solid 1px #3478FE;}
.listbox li.on {background: #3478FE; color: #fff;}

/**모달팝업**/
.modal-mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
  }

  .modal-wrapper {
    display: table-cell;
    vertical-align: middle;
  }

  .modal-container {
    width: 640px;
    margin: 0px auto;
    background: #fff;
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, .7);*/
    transition: all .3s ease;
    border-radius: 8px;
  }
  .modal-header {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    position: relative; 
    height: 60px;
    padding: 0 10px 0 24px;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #EEEFF1;
}
  .modal-header p {
    margin-top: 0;
    color: #121416; 
    font-size: 16px;
    text-align: left;
    font-weight: 700;
  }
  .modal-header button { display: block; background: url(/static/hcs/web-ui/images/icon/icon_modal_close-7e26ccdaecd511eea7a3d5453f157928.svg) center no-repeat; width: 40px; height: 40px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 0; }
  /*.modal-header button::before {content:""; display: block; height:1px; background-color: #fff; position:absolute; left:0; right:0; top:50%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform:rotate(45deg);}*/ 
  /*.modal-header button::after {content:""; display: block; height:1px; background-color: #fff; position:absolute; left:0; right:0; top:50%; 
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform:rotate(-45deg);}*/

  .modal-body {
    /*max-height: 700px;*/
    padding: 24px;
    border-radius: 0 0 8px 8px;
    overflow: auto;
  }
  
  .modal-footer {
    padding: 0 24px 24px 24px;
    overflow: auto;
  }

  .modal-default-button {
    float: right;
  }

  .modal-enter {
    opacity: 0;
  }

  .modal-leave-active {
    opacity: 0;
  }

  .modal-enter .modal-container,
  .modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

.board-view {background: #fff; padding: 30px;font-size: 16px;}
.board-view-head {padding: 20px; border-bottom: 1px solid #ddd;}
.board-view-head>p+p {margin-top: 10px;}
.board-view-head>p:last-child .date {float: left; color: #999;}
.board-view-head>p:last-child .view {float: right; color: #999;}
.board-view-head .title {display: inline-block;vertical-align: middle;color: #121416;}
.board-view-cont {border-bottom: 1px solid #ddd; line-height: 1.6;}
.board-view-cont>div {padding: 30px;}
.board-view-cont img {max-width: 100%;}
.bllt {display: inline-block;vertical-align: middle; width: 18px; height: 16px; line-height: 16px; text-align: center; border-radius: 3px; margin-left: 5px;}
.bllt.up {font-size: 11px; color: #fff; background: #ff0000;}

.fn-inputbox, .fn-select, .vdp-datepicker {position: relative; display: inline-block; font-style: normal;}
.vdp-datepicker__clear-button {position: absolute; right: 25px; top: 7px;}
.vdp-datepicker__clear-button i {display: block; font-style: normal; font-size: 0; width: 36px; height: 24px; background: url(/static/hcs/web-ui/images/icon/icon_del-714fe8a9db4b11277e38459a21ef09e9.svg) center no-repeat; background-size: 16px;}
.vdp-datepicker__calendar {z-index: 9999;}
input.date {
    background: url(/static/hcs/web-ui/images/icon/icon_calendar-ea4bb33b0ba7bf917c38ac7f2fb6c7b8.svg) right 12px center no-repeat #fff !important;
    background-color: #fff !important;
    width: 150px;
    padding: 0 32px 0 12px;
}

.text-left {
  text-align: left !important; }

.text-right {
  text-align: right !important; }

.text-center {
  text-align: center !important; }
  
  .align-top {
  vertical-align: top !important; }

.align-middle {
  vertical-align: middle !important; }

.align-bottom {
  vertical-align: bottom !important; }

.row {
  margin-left: -15px;
  margin-right: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: auto;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}
.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0%;
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
  .col-lg-pull-12 {
    right: 100%;
  }
  .col-lg-pull-11 {
    right: 91.66666667%;
  }
  .col-lg-pull-10 {
    right: 83.33333333%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-8 {
    right: 66.66666667%;
  }
  .col-lg-pull-7 {
    right: 58.33333333%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-5 {
    right: 41.66666667%;
  }
  .col-lg-pull-4 {
    right: 33.33333333%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-2 {
    right: 16.66666667%;
  }
  .col-lg-pull-1 {
    right: 8.33333333%;
  }
  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-push-12 {
    left: 100%;
  }
  .col-lg-push-11 {
    left: 91.66666667%;
  }
  .col-lg-push-10 {
    left: 83.33333333%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-8 {
    left: 66.66666667%;
  }
  .col-lg-push-7 {
    left: 58.33333333%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-5 {
    left: 41.66666667%;
  }
  .col-lg-push-4 {
    left: 33.33333333%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-2 {
    left: 16.66666667%;
  }
  .col-lg-push-1 {
    left: 8.33333333%;
  }
  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0%;
  }
}

/* tree */
.tree-content {background:none;border:none;padding:10px 10px 10px 0;}
.jstree-default li[data-loginse="H"] .jstree-anchor {color:#eea236;}
.jstree-default li[data-loginse="L"] .jstree-anchor {color:#d43f3a;}
.jstree-default li[data-useat="N"] .jstree-anchor {text-decoration:line-through;color:#aaaaaa;}
.jstree-default li[data-loginse="H"] .jstree-clicked,.jstree-default li[data-loginse="L"] .jstree-clicked,.jstree-default li[data-useat="N"] .jstree-clicked {color:#ffffff !important;}
.jstree-default .jstree-hovered {background:#ECF6FF !important; box-shadow: none !important; border-radius: 4px !important;}
.jstree-default .jstree-clicked {background:#ECF6FF !important;color:#3478FE !important; font-weight: 700; box-shadow: none !important;border-radius: 4px !important;}
.jstree-open > .jstree-anchor > .fa-folder:before {content:"\f07c";}
.jstree .jstree-node>.jstree-children {padding-left: 4px;}
.jstree-default .jstree-icon.none {width:0;}
.jstree-default .jstree-anchor { width: calc(100% - 24px); height: 38px !important; padding: 6px 4px; font-size: 15px; }
.jstree-anchor {
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.jstree-default > .jstree-container-ul > .jstree-node { margin-left: -24px !important; }
.jstree-default .jstree-leaf > .jstree-anchor > .custom-icon { display: none; }
.jstree-default > .jstree-container-ul > .jstree-node > .jstree-ocl { display: none; }
.jstree-default > .jstree-container-ul > .jstree-node > .jstree-anchor { margin-left: 24px; }

.jstree-default .jstree-icon:empty { height: 38px !important; }
.jstree-default .jstree-node > .custom-icon { background-position: -68px -4px !important; }
.jstree-node > .jstree-anchor > .custom-icon-checkbox { background-position: -164px -4px !important; }
.jstree-node > .jstree-anchor.jstree-clicked > .custom-icon-checkbox { background-position: -228px -4px !important; }
.jstree-default .jstree-open > .jstree-ocl, .jstree-default .jstree-closed > .jstree-ocl, .jstree-default .jstree-leaf>.jstree-ocl, .jstree-default .jstree-leaf>.jstree-ocl { background-position: -68px 2px !important; }
.jstree-default .jstree-open > .jstree-anchor > .custom-icon { background-position: -132px -4px !important; }
.jstree-clicked .custom-icon { background-position: -100px -4px !important; }

.tag-container {
	display: block;
}

.tag-container > .tag-box {
	color: #121416;
	font-size: 14px;
	background-color: #ECECEC;
	margin-right: 10px;
	border-radius: 3px;
    padding: 0px 5px;
    padding-bottom: 3px;
    vertical-align: middle;
    word-break: break-all;
}

.tag-container > .tag-box:last-child {
	margin-right: 0;
}

.no-dept {
	display: block;
    margin-top: 5px;
    color: #a94442;
    font-size: 1.1em;
}

@media (max-width:768px) {
	.tag-container {
		width: 100%;
		margin-top: 10px;
		margin-left: 0;
		display: block;
	}
}

.proposal-flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.proposal-flex > .input-table:first-child {
	margin-right: 15px;
}
.proposal-flex > .input-table:last-child {
	margin-left: 15px;
}

.budget-flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.budget-flex > .input-table:first-child {
	margin-right: 15px;
}
.budget-flex > .input-table:last-child {
	margin-left: 15px;
}

.sel-disabled {
    color: #aaa;
    cursor: not-allowed;
}

.deparment-input {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	height: 32px !important;
}

.deparment-btn {
	border-radius: 3px;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	height: 32px !important;
  padding: 7px 15px;
	color: #fff;
  background: #3478FE;
  border: 1px solid #3478FE;
}

ul.chrgAppnLayer {list-style:none;margin:5px 0 0;padding:0;}
ul.chrgAppnLayer li {display:inline-block;font-size:1.3em;font-weight:500;margin:0;padding:0 10px 0 0;vertical-align:baseline;}
ul.chrgAppnLayer li .btn {margin-top:-3px;}

ul.chrgAppnLayer li .btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

ul.chrgAppnLayer li .btn {
    display: inline-block;
    padding: 1px 5px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
ul.chrgAppnLayer li .btn-danger:hover {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}

@media (max-width:768px) {
	.proposal-flex {
		display: block;
	}
	
	.proposal-flex > .input-table:first-child {
		margin-right: 0;
	}
	.proposal-flex > .input-table:last-child {
		margin-left: 0;
	}
	
	.budget-flex {
		display: block;
	}
	
	.budget-flex > .input-table:first-child {
		margin-right: 0;
	}
	.budget-flex > .input-table:last-child {
		margin-left: 0;
	}
}

/*
*
문의 답변
*
*/
.answer-container {
	width: 100%;
	margin-bottom: 0;
}

.input-table td .answer-top-container {
	margin-bottom: 2.5rem;
}

.input-table td .answer-top-container:last-child {
	margin-bottom: 0;
}

.answer-header {
	width: 100%;
	border: 1px solid #e7eaec;
    background-color: #f5f5f5;
    font-size: 18px;
    font-weight: 700;
    border-radius: 3px 3px 0 0;
    display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}

.answer-header .answer-date {
	font-size: 13px;
	font-weight: normal;
}

.answer-header .answer-date i {
	margin-right: 5px;
}

.answer-header > div {
    padding: 15px 20px;
}

.answer-main > div > .answer-info { 
	font-size: 1.3rem;
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: #f2f2f2;
	border-top: 1px solid #cacdda;
}

.answer-main > div > .answer-info + .answer-gubun {
	margin-top: 0;
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 20px;
	padding-right: 20px;
}

.answer-main > div > .answer-info > div > span {
	border-right: #cacdda solid 1px;
	padding-right: 20px;
	margin-right: 15px;
	line-height: 1.5;
}

.answer-main > div > .answer-info > div > span:last-child {
	border-right: 0;
}

.answer-main > div > .answer-info > div > span > b {
	margin-right: 1rem;
}

.answer-main {
	font-size: 14px;
	width: 100%;
	border: 1px solid #e7eaec;
    border-top: 0;
    border-radius: 0 0 3px 3px;
}

.answer-main > div {
	padding: 15px 25px;
}

.answer-main > div > .answer-contents {
	padding: 0;
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #cacdda;
}

.answer-main > div > .answer-gubun {
	border-top: 1px solid #cacdda;
	padding: 0;
}

.answer-main > div > .answer-gubun-last {
	margin-bottom: 15px;
}

.answer-main > div > .answer-file {
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 1.5rem;
}

.answer-main > div > .answer-file > .answer-file-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: start;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: start;
}

.answer-main > div > .answer-file > .answer-file-container > .answer-file-tit {
	margin-right: 1.5rem;
	word-break: keep-all;
}

.answer-main > div > .answer-file > .answer-file-container > .answer-file-list a:hover {
	text-decoration: underline !important;
}

.answer-main > div > .answer-file > .answer-file-container > .answer-file-list a:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
    background: url(../images/icon_down.png) no-repeat;
}

@media (max-width: 768px) {
    .answer-main > div > .answer-info > div > span {
		width: 100%;
		display: block;
		border-right: 0;
		padding-right: 0;
		margin-right: 0;
		line-height: 1.5;
	}
	
	.answer-main > div > .answer-info > div > span:last-child {
		border-right: 0;
	}
	
	.answer-main > div > .answer-file > .answer-file-container {
		display: block;
	}
}

.attach2 a {
  font-size: 14px;
  color: #121416; 
  display: inline-block;
  line-height: 28px;
  padding: 0 5px;
  border-radius: 4px;
  cursor: pointer;
}
.attach2 a:hover {
  text-decoration: underline !important;
}
.attach2 a:before {content: ""; display: inline-block; vertical-align: middle; width: 16px; height: 16px; background: url(../images/icon_down.png) no-repeat;}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.col-xl,
.col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg,
.col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md,
.col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm,
.col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col,
.col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
  position: relative;
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.col {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 8.3333333333%;
          flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 16.6666666667%;
          flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-3 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.3333333333%;
          flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-5 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 41.6666666667%;
          flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-6 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 58.3333333333%;
          flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-8 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 66.6666666667%;
          flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-9 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 75%;
          flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 83.3333333333%;
          flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-11 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 91.6666666667%;
          flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-12 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

.save-notice {
	position: fixed;
	top: 88px;
	right: 48px;
	color: #7ACF2F;
	font-weight: 700;
	/*color: #676D79;*/
	border-radius: 4px;
	border: 1px solid #7ACF2F;
	background-color: #F1FAEA;
	background: url('/static/hcs/web-ui/images/icon/icon_notice_save-00b948e6cd153f3b8eee9ed0c54d40dd.svg') no-repeat center left 14px #F1FAEA;
	padding: 16px 8px;
	padding-left: 38px;
	width: 280px;
 	opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  z-index: 100;
}

.fade-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.d-none {
  display: none !important; }

.d-inline {
  display: inline !important; }

.d-inline-block {
  display: inline-block !important; }

.d-block {
  display: block !important; }

.d-table {
  display: table !important; }

.d-table-row {
  display: table-row !important; }

.d-table-cell {
  display: table-cell !important; }

.d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; }

.d-inline-flex {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important; }

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important; }
  .d-sm-inline {
    display: inline !important; }
  .d-sm-inline-block {
    display: inline-block !important; }
  .d-sm-block {
    display: block !important; }
  .d-sm-table {
    display: table !important; }
  .d-sm-table-row {
    display: table-row !important; }
  .d-sm-table-cell {
    display: table-cell !important; }
  .d-sm-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important; }
  .d-sm-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important; } }

@media (min-width: 768px) {
  .d-md-none {
    display: none !important; }
  .d-md-inline {
    display: inline !important; }
  .d-md-inline-block {
    display: inline-block !important; }
  .d-md-block {
    display: block !important; }
  .d-md-table {
    display: table !important; }
  .d-md-table-row {
    display: table-row !important; }
  .d-md-table-cell {
    display: table-cell !important; }
  .d-md-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important; }
  .d-md-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important; } }

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important; }
  .d-lg-inline {
    display: inline !important; }
  .d-lg-inline-block {
    display: inline-block !important; }
  .d-lg-block {
    display: block !important; }
  .d-lg-table {
    display: table !important; }
  .d-lg-table-row {
    display: table-row !important; }
  .d-lg-table-cell {
    display: table-cell !important; }
  .d-lg-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important; }
  .d-lg-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important; } }

@media (min-width: 1399px) {
  .d-xl-none {
    display: none !important; }
  .d-xl-inline {
    display: inline !important; }
  .d-xl-inline-block {
    display: inline-block !important; }
  .d-xl-block {
    display: block !important; }
  .d-xl-table {
    display: table !important; }
  .d-xl-table-row {
    display: table-row !important; }
  .d-xl-table-cell {
    display: table-cell !important; }
  .d-xl-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important; }
  .d-xl-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important; } }

@media print {
  .d-print-none {
    display: none !important; }
  .d-print-inline {
    display: inline !important; }
  .d-print-inline-block {
    display: inline-block !important; }
  .d-print-block {
    display: block !important; }
  .d-print-table {
    display: table !important; }
  .d-print-table-row {
    display: table-row !important; }
  .d-print-table-cell {
    display: table-cell !important; }
  .d-print-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important; }
  .d-print-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important; } }

.form-group {position: relative;}
.icon-password     { width: 36px; height: 36px; position: absolute; top: 0; left: 0; background: url('/static/hcs/web-ui/images/icon/icon_login_pw-aaf2c7ac39f36c60481b4c7ac2446b47.svg') 12px center no-repeat; }
.icon-password-eye { width: 36px; height: 36px; position: absolute; top: 0; right: 0; background: url('/static/hcs/web-ui/images/icon/icon_login_eye-527d44938fb0ac35e5deda10849736da.svg') center 12px no-repeat; cursor: pointer; }
.input_icon_password { padding: 0 35px !important; }

.input_modified { background-color: #ECF6FF !important; }