@charset "UTF-8";

/* 리셋 */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:after,:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body,div,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,th,td,input,select,textarea,button {
  margin: 0;
  padding: 0;
}

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

caption,code,em,var {
  font-style: normal;
}

img,fieldset,iframe {
  border: 0 none;
}

img {
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
}

canvas,iframe,img,svg,video {
  vertical-align: middle;
}

input,select,textarea,button {
  vertical-align: middle;
}

textarea {
  resize: none;
}

input::-ms-clear {
  display: none;
}

button {
  border: 0 none;
  background-color: transparent;
  cursor: pointer;
}

button,input[type=button],input[type=submit],input[type=reset],input[type=file] {
  border-radius: 0;
  -webkit-appearance: button;
}

input[type=image],input[type=text],input[type=submit],input[type=password],input[type=search] {
  border-radius: 0;
  -webkit-appearance: none;
}

input:checked[type=checkbox] {
  -webkit-appearance: checkbox;
  background-color: transparent;
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

caption,legend {
  visibility: hidden;
  overflow: hidden;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

a {
  text-decoration: none;
  select-dummy: expression(this.hideFocus=true);
}

body,h1,h2,h3,h4,h5,h6,th,td,input,select,textarea,button {
  /* font family, letter-spacing etc...*/
}

textarea,input {
  -webkit-apperence: none;
}

article,details,figure,footer,header,nav,section,main,menu {
  display: block;
}

q {
  quotes: none;
}

q:before,q:after {
  content: "";
  content: none;
}

sub {
  line-height: 0;
}

html,body {
  width: 100%;
}

ul:after,ol:after {
  content: "";
  clear: both;
  display: block;
}

/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/

@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: local("Pretendard Black"), url(".../fonts/woff2/Pretendard-Black.woff2") format("woff2"), url("../fonts/woff/Pretendard-Black.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"), url("../fonts/woff2/Pretendard-ExtraBold.woff2") format("woff2"), url("../fonts/woff/Pretendard-ExtraBold.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url("../fonts/woff2/Pretendard-Bold.woff2") format("woff2"), url("../fonts/woff/Pretendard-Bold.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), url("../fonts/woff2/Pretendard-SemiBold.woff2") format("woff2"), url("../fonts/woff/Pretendard-SemiBold.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url("../fonts/woff2/Pretendard-Medium.woff2") format("woff2"), url("../fonts/woff/Pretendard-Medium.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url("../fonts/woff2/Pretendard-Regular.woff2") format("woff2"), url("../fonts/woff/Pretendard-Regular.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: local("Pretendard Light"), url("../fonts/woff2/Pretendard-Light.woff2") format("woff2"), url("../fonts/woff/Pretendard-Light.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-display: swap;
  src: local("Pretendard ExtraLight"), url("../fonts/woff2/Pretendard-ExtraLight.woff2") format("woff2"), url("../fonts/woff/Pretendard-ExtraLight.woff") format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-display: swap;
  src: local("Pretendard Thin"), url("../fonts/woff2/Pretendard-Thin.woff2") format("woff2"), url("../fonts/woff/Pretendard-Thin.woff") format("woff");
}

:root {
  --rec-primary: #3c78fd;
  --text-color: #383c45;
  --text-color-gray: rgba(56, 60, 69, 0.5);
  --line-color: #d9d9d9;
  --background-color: #fafafa;
  --background-subColor: #f3f5f8;
  --white-color: #fff;
  --blur-color: #c9caca;
  --text-color-grayblue: #606e79;
  --button-color: #d8d6d8;
  --white-subColor: #eee;
  --ck-color-toolbar-border: #d9d9d9;
  --ck-color-dropdown-panel-border: #d9d9d9;
  --ck-color-toolbar-background: #fafafa;
}

* {
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
}

*::-webkit-input-placeholder {
  color: var(--text-color);
  opacity: 0.4;
}

*:-moz-placeholder {
  color: var(--text-color);
  opacity: 0.4;
}

*::-moz-placeholder {
  color: var(--text-color);
  opacity: 0.4;
}

*:-ms-input-placeholder {
  color: var(--text-color);
  opacity: 0.4;
}

html {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif;
  font-size: 62.5%;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-color);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-style: -ms-autohiding-scrollbar;
  -webkit-font-smoothing: antialiased;
  height: 100%;
}

html.overflow {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

html.background {
  background-color: var(--background-color);
}

body {
  font-size: 16px;
  letter-spacing: -0.5px;
  height: 100%;
}

/* 스크롤바 전체 영역 */

::-webkit-scrollbar,::-moz-scrollbar {
  width: 8px;
  /* 스크롤바 너비 */
  height: 8px;
  /* 스크롤바 높이 */
}

/* 스크롤바 thumb(=스크롤바 끝에 있는 움직이는 부분) */

::-webkit-scrollbar-thumb,::-moz-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  /* 스크롤바 색상 */
  border-radius: 10px;
  /* 스크롤바 모양 */
}

/* 스크롤바 track(=스크롤바 thumb이 움직이는 영역) */

::-webkit-scrollbar-track,::-moz-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
  /* 스크롤바 track 색상 */
}

em.red {
  color: #ff5555;
}

em.blue {
  color: var(--rec-primary);
}

em.gray {
  color: var(--text-color-gray);
}

em.orange {
  color: #e68621;
}

.skip-navigation a {
  position: absolute;
  left: -99999%;
  text-decoration: none;
}

.skip-navigation a:focus {
  display: block;
  left: 0;
  top: 0;
  z-index: 999999;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #000;
  color: var(--white-color);
  text-align: center;
  font-weight: 700;
}

input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif;
  width: 100%;
  height: 100%;
  min-height: 36px;
  color: var(--text-color);
  font-size: 1.6rem;
  font-weight: 500;
  padding: 0 14px;
  background-color: var(--white-color);
  border: 1px solid var(--line-color);
  border-radius: 6px;
}

input[type=color].min,input[type=date].min,input[type=datetime-local].min,input[type=datetime].min,input[type=email].min,input[type=month].min,input[type=number].min,input[type=password].min,input[type=search].min,input[type=tel].min,input[type=text].min,input[type=time].min,input[type=url].min,input[type=week].min,select.min {
  min-width: 80px;
  width: 80px;
  text-align: center;
  padding: 0 6px;
}

input[type=color].mid,input[type=date].mid,input[type=datetime-local].mid,input[type=datetime].mid,input[type=email].mid,input[type=month].mid,input[type=number].mid,input[type=password].mid,input[type=search].mid,input[type=tel].mid,input[type=text].mid,input[type=time].mid,input[type=url].mid,input[type=week].mid,select.mid {
  min-width: 140px;
  width: 140px;
}

input[type=color] + .close,input[type=date] + .close,input[type=datetime-local] + .close,input[type=datetime] + .close,input[type=email] + .close,input[type=month] + .close,input[type=number] + .close,input[type=password] + .close,input[type=search] + .close,input[type=tel] + .close,input[type=text] + .close,input[type=time] + .close,input[type=url] + .close,input[type=week] + .close,select + .close {
  display: none;
}

input[type=color].center,input[type=date].center,input[type=datetime-local].center,input[type=datetime].center,input[type=email].center,input[type=month].center,input[type=number].center,input[type=password].center,input[type=search].center,input[type=tel].center,input[type=text].center,input[type=time].center,input[type=url].center,input[type=week].center,select.center {
  text-align: center;
  padding: 0;
}

input[type=color].right,input[type=date].right,input[type=datetime-local].right,input[type=datetime].right,input[type=email].right,input[type=month].right,input[type=number].right,input[type=password].right,input[type=search].right,input[type=tel].right,input[type=text].right,input[type=time].right,input[type=url].right,input[type=week].right,select.right {
  text-align: right;
}

input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus {
  outline: none;
  border-color: 1px solid var(--text-color);
}

input[type=color].invalid,input[type=date].invalid,input[type=datetime-local].invalid,input[type=datetime].invalid,input[type=email].invalid,input[type=month].invalid,input[type=number].invalid,input[type=password].invalid,input[type=search].invalid,input[type=tel].invalid,input[type=text].invalid,input[type=time].invalid,input[type=url].invalid,input[type=week].invalid,select.invalid {
  border-color: #ff5555;
  color: #ff5555;
}

textarea {
  min-height: 160px;
  color: var(--text-color);
  width: 100%;
  height: 100px;
  font-size: 1.6rem;
  padding: 14px;
  line-height: 1.5;
  border-radius: 6px;
  background-color: var(--white-color);
  border: 1px solid var(--line-color);
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  resize: none;
}

textarea.invalid {
  border-color: #ff5555;
  color: #ff5555;
}

textarea:focus {
  outline: none;
  border-color: 1px solid var(--text-color);
}

textarea.basic + .close {
  display: none;
}

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

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("../images/selected-arrow.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 30px;
  padding-right: 30px;
}

select:focus {
  outline: none;
  border-color: var(--text-color) !important;
}

select.min {
  text-align: left;
  padding: 0 20px 0 14px;
}

.file {
  min-height: 36px;
}

.file .btn {
  width: 100%;
  height: 100%;
}

.file input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.checkbox,.radio {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-align: left;
}

.checkbox.agree input:checked + span:before,.radio.agree input:checked + span:before {
  background: url("../images/admin-crud-checkbig-on.png") no-repeat center;
  background-size: contain;
}

.checkbox.agree span,.radio.agree span {
  font-size: 1.6rem;
  color: var(--text-color);
  font-weight: 400;
  padding-left: 30px;
}

.checkbox.agree span:before,.radio.agree span:before {
  width: 24px;
  height: 24px;
  background: url("../images/admin-crud-checkbig-off.png") no-repeat center;
  background-size: contain;
}

.checkbox.block,.radio.block {
  margin: 0 !important;
  width: 100%;
  display: block;
  position: relative;
}

.checkbox.block.single span,.radio.block.single span {
  -webkit-box-pack: start;
  -webkit-justify-content: start;
  -ms-flex-pack: start;
  justify-content: start;
}

.checkbox.block.single + .single,.radio.block.single + .single {
  margin-top: 6px !important;
}

.checkbox.block.button,.radio.block.button {
  width: auto;
}

.checkbox.block.button span,.radio.block.button span {
  height: 100%;
  min-height: 42px;
  line-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 2px;
  padding-left: 14px;
  padding-right: 14px;
}

.checkbox.block.button span:before,.radio.block.button span:before {
  width: 16px;
  height: 12px;
}

.checkbox.block.min span,.radio.block.min span {
  text-align: center;
}

.checkbox.block .btn-text,.radio.block .btn-text {
  font-weight: 500;
  position: absolute;
  right: 16px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 21px;
  z-index: 2;
}

.checkbox.block input:checked + span,.radio.block input:checked + span {
  color: var(--rec-primary);
  background-color: var(--white-color);
  border-color: #98b9ff;
  font-weight: 600;
}

.checkbox.block input:checked + span + .btn-text,.radio.block input:checked + span + .btn-text {
  color: var(--white-color);
}

.checkbox.block input:checked + span:before,.radio.block input:checked + span:before {
  background: url("../images/admin-crudChecked.png") no-repeat center;
  background-size: contain;
}

.checkbox.block span,.radio.block span {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid var(--line-color);
  color: var(--text-color-gray);
  background-color: var(--background-subColor);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 1.6rem;
  font-weight: 600;
}

.checkbox.block span:before,.radio.block span:before {
  position: static;
  margin: 0;
  min-width: 12px;
  height: 8px;
  background: url("../images/admin-crudCheck.png") no-repeat center;
  background-size: contain;
}

.checkbox + .checkbox,.checkbox + .radio,.radio + .checkbox,.radio + .radio {
  margin-left: 8px;
}

.checkbox input,.radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.checkbox input:checked + span,.radio input:checked + span {
  color: var(--text-color);
  font-weight: 700;
}

.checkbox span,.radio span {
  display: block;
  font-size: 1.4rem;
  letter-spacing: -1px;
  padding-left: 24px;
  line-height: 24px;
  color: var(--text-color-gray);
  font-weight: 500;
}

.checkbox span a:hover em,.radio span a:hover em {
  text-decoration: underline;
}

.checkbox span:before,.radio span:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 20px;
}

.checkbox input:checked + span:before {
  background: url("../images/admin-crud-check-on.png") no-repeat center;
  background-size: contain;
}

.checkbox input:disabled + span:before {
  background: url("../images/admin-crud-check-dis.png") no-repeat center;
  background-size: contain;
}

.checkbox input.indeterminate + span:before {
  background: url("../images/admin-crud-check-indeterminate.png") no-repeat center;
  background-size: contain;
}

.checkbox span:before {
  background: url("../images/admin-crud-check-off.png") no-repeat center;
  background-size: contain;
}

.radio.block.min span::before {
  content: none;
}

.radio input:checked + span:before {
  background: url("../images/admin-crud-radio-on.png") no-repeat center;
  background-size: contain;
}

.radio input:disabled + span:before {
  background: url("../images/admin-crud-radio-dis.png") no-repeat center;
  background-size: contain;
}

.radio span:before {
  background: url("../images/admin-crud-radio-off.png") no-repeat center;
  background-size: contain;
}

input[disabled],select[disabled],option[disabled],textarea[disabled],button[disabled] {
  background: #e3e3e3;
  color: #a2a5b7;
  pointer-events: none;
  background-image: none;
  padding: 0 14px;
}

input[readonly],select[readonly],option[readonly],textarea[readonly] {
  font-weight: 600;
  color: var(--text-color);
  background-color: var(--background-color);
  pointer-events: none;
  background-image: none;
  padding: 0 14px;
}

.MSG {
  text-align: left;
  font-size: 1.1rem;
  color: #ff5555;
  background-color: #ffecec;
  padding: 6px 12px;
  border-radius: 6px;
  position: absolute;
  line-height: 1.2;
  font-weight: 600;
}

.input-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.input-item.dp-grid {
  max-width: 100% !important;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.input-item .input-type-ico {
  position: relative;
  min-height: 36px;
  width: 100%;
}

.input-item .input-type-ico input {
  padding-right: 40px;
}

.input-item .input-type-ico .ico {
  position: absolute;
  top: 0;
  right: 6px;
  bottom: 0;
  margin: auto;
}

.input-item.auto {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.input-item .input-item.fit .radio.block span {
  padding: 4px 8px;
}

.input-item.fit {
  gap: 0;
}

.input-item.fit .checkbox.block:first-child span,.input-item.fit .radio.block:first-child span {
  border-radius: 6px 0 0 6px;
}

.input-item.fit .checkbox.block:last-child span,.input-item.fit .radio.block:last-child span {
  border-radius: 0 6px 6px 0;
}

.input-item.fit .checkbox.block span,.input-item.fit .radio.block span {
  border-radius: 0;
}

.input-item .unit {
  font-size: 1.6rem;
}

.input-item.center {
  text-align: center;
}

.input-item-inner {
  position: relative;
}

.input-item-inner + .input-item-inner {
  margin-top: 10px;
}

.input-item .like-label {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  color: #000333;
  text-align: left;
  margin-bottom: 10px;
}

.input-item + .input-item {
  margin-top: 20px;
}

.video-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video-ratio .video-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ico {
  text-indent: -999rem;
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  vertical-align: middle;
}

.ico + .ico {
  margin-left: 4px;
}

.ico:active,.ico:hover {
  opacity: 0.9;
}

.ico:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.ico.close:before {
  background: url("../images/admin-ico-close.png") no-repeat;
  background-size: contain;
}

.ico.close:hover {
  opacity: 0.5;
}

.ico.added:before {
  background: url("../images/admin-crud-added.png") no-repeat;
  background-size: contain;
}

.ico.remove:before {
  background: url("../images/admin-crud-remove.png") no-repeat;
  background-size: contain;
}

.ico.addMember:before {
  background: url("../images/admin-crud-added.png") no-repeat;
  background-size: contain;
}

.ico.removeMember:before {
  background: url("../images/admin-crud-remove.png") no-repeat;
  background-size: contain;
}


.ico.visibility:before {
  width: 24px;
  height: 24px;
  background: url("../images/admin-ico-visibility-off.png") no-repeat;
  background-size: contain;
}

.ico.visibility.off:before {
  background: url("../images/admin-ico-visibility.png") no-repeat;
  background-size: contain;
}

.ico.cal:before {
  width: 24px;
  height: 24px;
  background: url("../images/admin-ico-date.png") no-repeat;
  background-size: contain;
}

.ico.tooltip {
  position: relative;
}

.ico.tooltip:hover:after {
  display: block;
}

.ico.tooltip:after {
  display: none;
  content: attr(text-tooltip);
  position: absolute;
  left: 17px;
  bottom: 17px;
  font-size: 1.1rem;
  text-indent: 0;
  line-height: 1.4;
  color: #b7bcd0;
  background: rgba(40, 48, 76, 0.7);
  padding: 16px;
  width: 240px;
  border-radius: 6px;
}

.ico.tooltip:before {
  width: 14px;
  height: 14px;
  background: url("../images/admin-ico-tooltip.png") no-repeat;
  background-size: contain;
}

.btn {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 10px;
  text-align: center;
  border-radius: 6px;
  background: #383c45;
  color: var(--button-color);
  border: 1px solid #383c45;
  height: 46px;
  min-height: 36px;
}

.btn:hover,.btn:active {
  background-color: #2a2a2a;
}

.btn span {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.3;
}

.btn span img {
  width: 20px;
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

.btn.medium {
  height: 36px;
}

.btn.medium span {
  font-size: 1.5rem;
  font-weight: 700;
}

.btn.medium span img {
  width: 17px;
}

.btn.natural {
  background: #b5b5b5;
  color: var(--white-color);
  border: 1px solid #b5b5b5;
  -webkit-box-shadow: 0 16px 43px -20px rgba(0, 0, 0, 0.25);
  box-shadow: 0 16px 43px -20px rgba(0, 0, 0, 0.25);
}

.btn.natural:hover,.btn.natural:active {
  background-color: #bbb;
}

.btn.negative {
  background-color: transparent;
  color: #ff5555;
  border-color: #ff5555;
  -webkit-box-shadow: 0 16px 43px -20px rgba(0, 0, 0, 0.25);
  box-shadow: 0 16px 43px -20px rgba(0, 0, 0, 0.25);
}

.btn.negative:hover,.btn.negative:active {
  border-color: #ffc6c6;
}

.btn.normal {
  background-color: transparent;
  color: var(--rec-primary);
  border-color: var(--rec-primary);
}

.btn.normal:hover,.btn.normal:active {
  border-color: #91ace6;
}

.btn.positive {
  background-image: -o-linear-gradient(342deg, #275ac6 19%, #3c78fd 79%);
  background-image: linear-gradient(108deg, #275ac6 19%, #3c78fd 79%);
  border: solid 1px var(--rec-primary);
  color: var(--white-color);
}

.btn.positive:hover,.btn.positive:active {
  background-image: -o-linear-gradient(342deg, #2754b3 19%, #306bec 79%);
  background-image: linear-gradient(108deg, #2754b3 19%, #306bec 79%);
}

.btn.white {
  background-color: #fff;
  color: #383c45;
}

.btn.white:hover,.btn.white:active {
  opacity: 0.9;
}

header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

header .snb {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: end;
  -ms-flex-pack: end;
  justify-content: end;
}

header .snb ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 14px;
}

header .snb .notice {
  display: block;
  text-indent: -999rem;
  width: 20px;
  height: 18px;
  background: url("../images/admin-snbico-notice-off.png") no-repeat;
  background-size: contain;
}

header .snb .notice:hover {
  opacity: 0.8;
}

header .snb .notice.active {
  background: url("../images/admin-snbico-notice.png") no-repeat;
  background-size: contain;
}

header .snb .userinfo {
  display: block;
  color: #81878c;
  font-size: 1.2rem;
  font-weight: 600;
  position: relative;
  padding-left: 22px;
  font-weight: 400;
}

header .snb .userinfo::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url("../images/admin-snbico-my.png") no-repeat;
  background-size: contain;
}

header .snb .language {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  color: #81878c;
  font-size: 1.2rem;
  font-weight: 600;
  position: relative;
}

header .snb .language:hover:before {
  opacity: 0.8;
}

header .snb .language::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url("../images/admin-snbico-lang.png") no-repeat;
  background-size: contain;
}

header .snb .language select {
  min-width: 62px;
  border: none;
  background-color: transparent;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0 24px 0 20px;
  position: relative;
  z-index: 2;
}

header .snb .language img {
  width: 10px;
  margin-right: 6px;
}

header .snb .snb-btn {
  display: block;
  color: #81878c;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 3px 10px 3px;
  border: solid 1px rgba(201, 202, 202, 0.5);
  border-radius: 50px;
}

header .snb .snb-btn:hover {
  background-color: var(--white-color);
}

header .snb .snb-btn img {
  width: 10px;
  position: relative;
  bottom: 1px;
}

header .location {
  padding-left: 20px;
}

header .location ol {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

header .location ol li {
  line-height: 50px;
}

header .location ol li + li:before {
  content: ">";
  font-size: 1.3rem;
  color: #bbbbbb;
  margin: 0 6px;
  position: relative;
  bottom: 1px;
}

header .location ol li:last-child a {
  color: var(--text-color);
}

header .location ol li a {
  font-weight: 500;
  font-size: 1.3rem;
  color: #bbbbbb;
}

header .panel-ico {
  width: 50px;
  height: 100%;
  border-right: 1px solid var(--line-color);
  position: relative;
}

header .panel-ico:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

header .panel-ico.openGnb:after {
  background: url("../images/admin-ico-gnb.png") no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
}

header .panel-ico.closeGnb:after {
  background: url("../images/admin-ico-hide.png") no-repeat;
  background-size: contain;
  width: 22px;
  height: 24px;
}

header .top {
  padding-left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 100%;
  height: 50px;
  background-color: var(--background-subColor);
  border-bottom: 1px solid var(--line-color);
}

header .top .logo {
  display: none;
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  margin-left: -12px;
  margin-top: -4px;
}

header .btm {
  width: 100%;
  height: 50px;
  background-color: var(--background-subColor);
  border-bottom: 1px solid var(--line-color);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 40px;
  border-top: 1px solid var(--line-color);
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

footer .footer-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}

footer .familly-site {
  width: 180px;
  background-color: transparent;
  border: 1px solid rgba(201, 202, 202, 0.5);
  color: var(--blur-color);
}

footer .copyright {
  color: var(--blur-color);
  font-size: 1rem;
  line-height: 1;
}

footer .list-info li {
  color: var(--blur-color);
  font-size: 1rem;
  line-height: 20px;
  letter-spacing: -1px;
}

footer .fnb ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

footer .fnb ul li {
  line-height: 1;
}

footer .fnb ul li a {
  font-size: 1.2rem;
  font-weight: 600;
  color: #81878c;
  line-height: 1;
}

footer .fnb ul li + li {
  margin-left: 18px;
}

#gnb {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 230px;
  height: 100vh;
  background-color: #313437;
  border-right: 1px solid #2b2c2d;
  z-index: 3;
  -webkit-transition: left 0.4s;
  -o-transition: left 0.4s;
  transition: left 0.4s;
}

#gnb .nav-side-title {
  padding: 0 20px;
  height: 46px;
  -webkit-box-pack: start;
  -webkit-justify-content: start;
  -ms-flex-pack: start;
  justify-content: start;
}

#gnb .nav-side-title span {
  font-size: 1.5rem;
}

#gnb + .container {
  padding-left: 230px;
}

#gnb .logo {
  height: 100px;
}

.logo a {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/*.logo a .logo-main img {
  width: 92px;
  height: 40px;
}*/

/*.logo a .logo-main img {
  width: 130px;
  height: 56px;
}*/

.logo a .logo-main img {
  width: 200px;
  height: 60px;
}


.logo a .logo-main + .logo-sub:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 20px;
  background-color: #a0a0a0;
  vertical-align: middle;
  margin: 0 14px 0 20px;
}

/*.logo a .logo-sub img {
  width: 45px;
  height: 25px;
  margin-bottom: 6px;
}*/

.logo a .logo-sub img {
  width: 100px;
  height: 56px;
  margin-bottom: 6px;
}

.menu-group .menu-group-depth1 .menu-item {
  background-color: #3c4145;
  margin-top: 1px;
}

.menu-group .menu-group-depth1 .menu-item.open {
  background-color: #2a2e32 !important;
}

.menu-group .menu-group-depth1 .menu-item.open > a {
  color: #fff;
  font-weight: 700;
}

.menu-group .menu-group-depth1 .menu-item.open > a.arrow:after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.menu-group .menu-group-depth1 .menu-item.open .menu-group-depth2 {
  display: block;
}

.menu-group .menu-group-depth1 .menu-item > a {
  font-size: 1.8rem;
  display: block;
  color: var(--blur-color);
  line-height: 46px;
  position: relative;
  padding: 0 20px;
}

.menu-group .menu-group-depth1 .menu-item > a:hover {
  color: #fff;
  font-weight: 700;
}

.menu-group .menu-group-depth1 .menu-item > a.active {
  color: #fff;
  font-weight: 700;
}

.menu-group .menu-group-depth1 .menu-item > a.arrow:after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 12px;
  bottom: 0;
  top: 0;
  margin: auto;
  background: url("../images/admin-ico-arrow-down.png") no-repeat;
  background-size: contain;
}

.menu-group .menu-group-depth2 {
  display: none;
  padding: 16px 0;
  background-color: #212426;
}

.menu-group .menu-group-depth2 .menu-item {
  margin-top: 0;
  background-color: #212426;
}

.menu-group .menu-group-depth2 .menu-item > a {
  font-size: 1.5rem;
  line-height: 30px;
}

.menu-group .menu-group-depth2 .menu-item > a.active {
  color: #e78822;
}

.nav-side-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 92px;
  -webkit-box-shadow: inset 10px 0 24px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 10px 0 24px 0 rgba(0, 0, 0, 0.25);
  background-color: #3c4145;
}

.nav-side-title span {
  color: #fff;
  font-size: 2.3rem;
  font-weight: 700;
}

.gnb-container {
  position: fixed;
  width: 100%;
  height: calc(100vh - 99px);
  z-index: 3;
  left: -100%;
  top: 99px;
  background-color: #3c4145;
  opacity: 0;
  -webkit-transition: left 0.4s, opacity 0.4s;
  -o-transition: left 0.4s, opacity 0.4s;
  transition: left 0.4s, opacity 0.4s;
}

.gnb-container-side {
  position: absolute;
  top: 0;
  left: 0%;
  width: 230px;
  height: 100%;
  background-color: #313437;
  -webkit-transition: left 0.4s;
  -o-transition: left 0.4s;
  transition: left 0.4s;
}

.gnb-container-nav {
  padding-left: 230px;
  height: 100%;
  color: var(--white-color);
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: url("../images/admin-bg-gnb.png") no-repeat;
  background-size: cover;
}

.gnb-container-nav .nav-item {
  width: 230px;
  height: 100%;
  border-right: 1px solid #313437;
}

.gnb-container-nav .nav-item .menu-group .menu-group-depth1 .menu-item {
  background: transparent;
}

.gnb-container-nav .nav-item .menu-group .menu-group-depth1 .menu-item + .menu-item {
  border-top: 1px solid #313437;
}

.gnb-container-nav .nav-side-title {
  background-color: #313437;
  -webkit-box-pack: start;
  -webkit-justify-content: start;
  -ms-flex-pack: start;
  justify-content: start;
  padding-left: 20px;
}

.gnb-container-nav .nav-side-title span {
  font-size: 2rem;
  font-weight: 600;
}

.gnb-container .menu-group .menu-group-depth2 {
  padding: 0;
}

.gnb-container .menu-group .menu-group-depth1 .menu-item {
  margin-top: 0;
}

.gnb-container .menu-group .menu-group-depth2 .menu-item + .menu-item {
  border-color: transparent !important;
}

.gnb-container .menu-group .menu-group-depth2 .menu-item > a {
  line-height: 46px;
}

.notice-container {
  position: fixed;
  right: -100%;
  top: 50px;
  z-index: 3;
  height: calc(100vh - 50px);
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

.notice-container.active {
  right: 0%;
}

.notice-container .notice-board {
  width: 350px;
  background-color: var(--background-subColor);
  padding: 30px;
  border-left: 1px solid var(--line-color);
  position: relative;
}

.notice-container .notice-board-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 30px;
}

.notice-container .notice-board-header .title {
  font-size: 1.5rem;
  font-weight: 700;
}

.notice-container .notice-board:after {
  content: "";
  width: 100%;
  height: 200px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(var(--background-color)));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0), var(--background-color) 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--background-color) 100%);
  position: absolute;
  left: 0;
  bottom: 0;
}

.notice-container .notice-view {
  right: 0%;
  position: absolute;
  width: 350px;
  background-color: var(--white-color);
  padding: 30px;
  border-left: 1px solid var(--line-color);
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

.notice-container .notice-view.open {
  right: 350px;
}

.notice-container .notice-view .view-cont {
  overflow: auto;
  height: calc(100vh - 180px);
  padding-bottom: 200px;
  padding-right: 40px;
}

.notice-container .notice-view-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: end;
  -ms-flex-pack: end;
  justify-content: end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 30px;
}

.notice-container .notice-view .title {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 30px;
  line-height: 1.4;
}

.notice-container .notice-view .title span {
  display: block;
  font-weight: 400;
  margin-top: 8px;
}

.notice-container .notice-view .media {
  margin: 20px 0;
}

.notice-container .notice-view .command {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.notice-container .notice-view .command .btn-text + .btn-text {
  margin-left: 16px;
}

.notice-container .list-notice {
  overflow: auto;
  padding-bottom: 200px;
  height: calc(100vh - 180px);
}

.notice-container .list-notice .text-date {
  font-size: 1.2rem;
}

.notice-container .list-notice .notice-item {
  border-radius: 10px;
  background-color: var(--white-color);
}

.notice-container .list-notice .notice-item > a {
  display: block;
  padding: 20px;
}

.notice-container .list-notice .notice-item .notice-title {
  font-size: 1.6rem;
  color: var(--text-color);
  font-weight: 600;
}

.notice-container .list-notice .notice-item + .notice-item {
  margin-top: 10px;
}

.notice-container .list-notice .notice-item.aleady {
  background-color: var(--background-color);
}

.notice-container .list-notice .notice-item.aleady .notice-title {
  color: #999;
}

.notice-container .list-notice .notice-item.aleady .text-date {
  color: #bbbbbb;
}

.notice-container .list-notice .notice-item.yet .notice-title {
  position: relative;
}

.notice-container .list-notice .notice-item.yet .notice-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50px;
  background-color: #e68621;
  position: absolute;
  top: 0;
  left: -8px;
}

.notice-container .list-notice .notice-item.yet,.notice-container .list-notice .notice-item:hover {
  -webkit-box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.05);
  background-color: var(--white-color);
}

/* COMMON :: 
  Layout */

html.intro .viewport {
  position: relative;
}

html.intro .viewport::after {
  content: "";
  display: block;
  position: absolute;
  width: 180px;
  height: 77px;
  /*background: url("../images/admin-logo-gray.png") no-repeat;*/
  background: url("../images/DX_Ledger_Safety_white.png") no-repeat;
  /*background: url("../images/jntp_logo_w.png") no-repeat;*/
  background-size: contain;
  right: 40px;
  top: 40px;
}

html.intro .viewport .container {
  /*background: url("../images/admin-bg-intro.png") no-repeat center;*/
  background: url("../images/admin-bg-intro.webp") no-repeat center;
  background-size: cover;
  position: relative;

  background-blend-mode: overlay;
  background-color: rgba(255, 255, 255, 0.6);
}

html.intro .viewport .container header {
  display: none;
}

html.intro .viewport .container .contents {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -webkit-align-items: end;
  -ms-flex-align: end;
  align-items: end;
}

html.intro .viewport .container footer {
  border-top: 0;
  position: relative;
  z-index: 2;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 40px;
}

html.intro .viewport .container footer .copyright {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

html.intro .viewport .container footer .list-info li {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

html.intro .viewport .container footer .fnb ul li a {
  color: rgba(255, 255, 255, 0.7);
}

html.intro .viewport .container footer .familly-site {
  width: 180px;
  background-color: transparent;
  background-image: url(../images/selected-arrow-white.png);
}

html.intro .viewport .container footer .familly-site:focus {
  border-color: var(--white-color) !important;
}

html.intro .viewport .container:after,html.intro .viewport .container:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

html.intro .viewport .container:before {
  background-color: rgba(0, 0, 0, 0.6);
}

html.intro .viewport .container:after {
  background-image: -o-linear-gradient(273deg, rgba(0, 26, 255, 0) 4%, rgba(0, 26, 255, 0.2) 51%, #275ac6 96%);
  background-image: linear-gradient(177deg, rgba(0, 26, 255, 0) 4%, rgba(0, 26, 255, 0.2) 51%, #275ac6 96%);
}

html.register {
  background-color: var(--background-subColor);
}

html.register .viewport .container header {
  position: static;
}

html.register .viewport .container header .snb .snb-btn,html.register .viewport .container header .snb .notice,html.register .viewport .container header .snb .userinfo {
  display: none;
}

html.register .viewport .container header .top {
  border-bottom: 0;
}

html.register .viewport .container header .panel-ico,html.register .viewport .container header .location {
  display: none;
}

html.register #gnb .nav-side-title {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 92px;
}

html.register #gnb .nav-side-title span {
  font-size: 2.3rem;
  font-weight: 700;
}

.viewport {
  max-width: 100%;
  width: 100vw;
  /* EVENT :: sidebar hide */
  /* EVENT :: gnb-open */
}

.viewport .container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transition: padding 0.4s;
  -o-transition: padding 0.4s;
  transition: padding 0.4s;
  min-height: 100vh;
  height: 100%;
}

.viewport .container .side-include-layout {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.viewport .container .side-include-layout .side-include {
  overflow: auto;
  width: 250px;
  background-color: var(--background-color);
  padding: 20px;
  border-right: 1px solid var(--line-color);
}

.viewport .container .side-include-layout .contents {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.viewport .container header {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}

.viewport .container .contents {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 40px;
}

.viewport .container footer {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}

.viewport.layout-simple #gnb {
  left: -230px;
  -webkit-transition: left 0.4s;
  -o-transition: left 0.4s;
  transition: left 0.4s;
}

.viewport.layout-simple #gnb + .container {
  padding-left: 0;
}

.viewport.layout-simple .closeGnb {
  -webkit-box-shadow: inset 10px 0 24px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 10px 0 24px 0 rgba(0, 0, 0, 0.25);
  background-color: #313437;
  border-color: #313437;
}

.viewport.layout-simple .closeGnb:after {
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.viewport.layout-simple .gnb-container-side {
  left: -230px;
  -webkit-transition: left 0.4s;
  -o-transition: left 0.4s;
  transition: left 0.4s;
}

.viewport.layout-simple .gnb-container-nav {
  padding-left: 0;
}

.viewport.layout-simple header .top {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.viewport.layout-simple header .top .logo {
  display: block;
}

.viewport.gnb-open .gnb-container {
  left: 0%;
  opacity: 1;
  -webkit-transition: left 0.4s, opacity 0.4s;
  -o-transition: left 0.4s, opacity 0.4s;
  transition: left 0.4s, opacity 0.4s;
}

.viewport.gnb-open .openGnb {
  -webkit-box-shadow: inset 10px 0 24px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 10px 0 24px 0 rgba(0, 0, 0, 0.25);
  background-color: #313437;
  border-color: #313437;
}

.viewport.gnb-open .openGnb:after {
  background: url(../images/admin-ico-gnbclose.png);
  background-size: contain;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
}

.row.type-line {
  gap: 0;
}

.row.type-line > .column {
  padding-right: 40px;
  height: calc(100vh - 261px);
  overflow: auto;
}

.row.type-line > .column + .column {
  border-left: 1px solid var(--line-color);
  padding-left: 40px;
}

.row > .column {
  word-break: break-all;
}

.row + .row {
  margin-top: 40px;
}

.row.inner > .column {
  padding: 5px;
}

.row.col-1 > .column {
  width: 100%;
}

.row.col-2 > .column {
  width: 50%;
}

.row.col-3 > .column {
  width: 33.33%;
}

.row.col-4 > .column {
  width: 25%;
}

.row.col-5 > .column {
  width: 20%;
}

.row.col-6 > .column {
  width: 16.6667%;
}

.grid-div {
  margin: 40px 0 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

.grid-div .btn {
  min-width: 120px;
}

.grid-div.center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.grid-div.right {
  -webkit-box-pack: end;
  -webkit-justify-content: end;
  -ms-flex-pack: end;
  justify-content: end;
}

article .content-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 10px;
}

article .content-header .title {
  font-size: 2.4rem;
  line-height: 36px;
  font-weight: 700;
}

article .content-header .title span {
  color: #81878c;
  font-size: 1.6rem;
}

article .content-header .title span b {
  color: var(--text-color);
}

article .content-header .command {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

article .content-header .command input,article .content-header .command select {
  width: auto;
  font-size: 1.5rem;
}

article + article {
  margin-top: 50px;
}

/* UI */

.down-list {
  margin-bottom: 40px;
}

.down-list li {
  font-size: 1.8rem;
}

.down-list li + li {
  margin-top: 10px;
}

.down-list li.box {
  border: 1px solid var(--line-color);
  border-radius: 6px;
}

.down-list li.box .downBtn {
  padding: 16px;
}

.down-list li.box.on .downBtn {
  color: var(--rec-primary);
  font-weight: 700;
}

.down-list li.box.on .downBtn:after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  background: url("../images/ico-arrow-btm-on.png") no-repeat;
  background-size: contain;
}

.down-list .downBtn {
  display: block;
  color: var(--text-color);
  font-weight: 500;
  position: relative;
}

.down-list .downBtn:after {
  content: "";
  display: block;
  width: 32px;
  height: 24px;
  background: url("../images/ico-arrow-btm.png") no-repeat;
  background-size: contain;
  position: absolute;
  right: 12px;
  top: 18px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

.down-list .downCont {
  display: none;
  padding: 0 16px 16px;
  font-size: 1.6rem;
  font-weight: 500;
}

.row-register-btn {
  height: calc(100vh - 520px);
  min-height: 360px;
}

.row-register-btn .column [class^=box] {
  height: 100%;
  padding: 40px;
  margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: end;
  -ms-flex-pack: end;
  justify-content: end;
  position: relative;
}

.row-register-btn .column [class^=box] .img-sidedeco {
  display: block;
  width: 100px;
  position: absolute;
  top: 40px;
  left: 40px;
}

.register-title {
  font-size: 4rem;
  font-weight: 300;
  margin-bottom: 40px;
}

.register-title.center {
  text-align: center;
}

.register-title.center .image {
  margin: auto;
}

.register-title .image {
  display: block;
  width: 110px;
}

a.box-morphism {
  display: block;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  font-size: 4.6rem;
  font-weight: 400;
  color: var(--text-color-grayblue);
}

a.box-morphism b {
  font-size: 5.6rem;
}

a.box-morphism:hover {
  background-color: var(--white-color);
}

.box-line {
  background-color: var(--white-color);
  border: 3px solid #e5ebfb;
  border-radius: 20px;
  padding: 30px;
  margin: 20px 0;
}

.box-line.transparent {
  background-color: transparent;
}

.box-morphism {
  padding: 30px;
  border-radius: 6px;
  border-radius: 20px;
  -webkit-box-shadow: 4px 2px 10px 0 rgba(0, 44, 69, 0.13), -3px -3px 5px 0 var(--white-color), inset 3px 4px 8px -3px rgba(0, 0, 0, 0.05);
  box-shadow: 4px 2px 10px 0 rgba(0, 44, 69, 0.13), -3px -3px 5px 0 var(--white-color), inset 3px 4px 8px -3px rgba(0, 0, 0, 0.05);
  background-color: var(--background-color);
  border: 1px solid var(--white-color);
  margin: 20px 0;
}

.box-morphism.white {
  background-color: var(--white-color);
}

.box-terms {
  padding: 10px;
}

.list.dot li {
  position: relative;
  padding-left: 20px;
}

.list.dot li:before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50px;
  background-color: var(--text-color-grayblue);
  position: absolute;
  top: 11px;
  left: 6px;
}

.list.num {
  counter-reset: number 0;
}

.list.num li {
  position: relative;
  padding-left: 14px;
  font-size: 1.4rem;
  line-height: 24px !important;
  font-weight: 500;
}

.list.num li + li {
  margin-top: 6px;
}

.list.num li:before {
  counter-increment: number 1;
  content: counter(number) ". ";
  position: absolute;
  left: 0;
  color: #595757;
  font-weight: 500;
}

.list li {
  text-align: left;
  font-size: 1.8rem;
  color: var(--text-color-grayblue);
  font-weight: 700;
}

.list li .list {
  margin-top: 4px;
}

.list li .list li {
  font-weight: 400;
}

.list li .list li + li {
  margin-top: 4px;
}

.list li + li {
  margin-top: 10px;
}

.list + .tbl-sm {
  margin-top: 20px;
}

.terms-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.terms-header h4 {
  font-size: 2rem;
  font-weight: 700;
}

.terms-header .btn-text {
  text-decoration: underline;
  font-size: 1.6rem;
  color: var(--text-color-gray);
}

.terms-body .term {
  height: 116px;
  overflow: auto;
}

.terms-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: end;
  -ms-flex-pack: end;
  justify-content: end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.term {
  text-align: left;
}

.term .termsTable table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 10px 0;
}

.term .termsTable table th,.term .termsTable table td {
  text-align: center;
}

.term .termsTable table thead th {
  background: var(--background-color);
  padding: 4px;
  vertical-align: middle;
}

.term .termsTable table tbody td {
  padding: 4px;
}

.term .termsTable table th,.term .termsTable table td {
  border: 1px solid #ced4da;
}

.term .term-cnt + .term-cnt {
  margin-top: 60px;
}

.term small {
  font-size: 1.3rem;
  margin-top: 10px;
}

.term .guide-script {
  border-top: 1px solid var(--line-color);
  padding-top: 10px;
  margin-top: 10px;
}

.term .desc {
  font-size: 1.4rem;
  color: var(--text-color-gray);
}

.term .desc + .desc {
  margin-top: 14px;
}

.term > ul > li + li {
  margin-top: 10px;
}

.term .desc-term {
  color: var(--text-color-gray);
  font-size: 1.4rem;
  line-height: 1.5;
}

.term .desc-term b {
  font-weight: 600;
  font-size: 1.6rem;
  margin-bottom: 8px;
  color: var(--text-color);
}

.term .desc-term + .box-read {
  margin-top: 10px;
}

.term .desc-term + .desc-term {
  margin-top: 15px;
}

.term .list-term {
  margin: 15px 0;
  counter-reset: list-number;
  padding-left: 10px;
}

.term .list-term li {
  position: relative;
}

.term .list-term li + li {
  margin-top: 10px;
}

.term .list-term > li {
  font-size: 1.3rem;
  counter-increment: list-number;
  padding-left: 14px;
}

.term .list-term > li:before {
  content: counter(list-number);
  position: absolute;
  left: 0;
}

.term .list-term > li > ul {
  margin-top: 14px;
}

.term .list-term > li > ul > li {
  font-size: 1.3rem;
  position: relative;
  padding-left: 14px;
}

.term .list-term > li > ul > li + li {
  margin-top: 10px;
}

.term .list-term > li > ul > li i {
  position: absolute;
  left: 0;
}

.term .list-term > li > ul > li > ul > li {
  color: var(--text-color-gray);
  position: relative;
  padding-left: 6px;
}

.term .list-term > li > ul > li > ul > li + li {
  margin-top: 4px;
}

.noti {
  width: 18px;
}

.null-data {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-top: 1px solid var(--line-color);
}

.null-data .null-item {
  text-align: center;
}

.null-data img {
  width: 80px;
}

.null-data p {
  font-size: 1.6rem;
  color: #7c8089;
  font-weight: 400;
}

.modal {
  display: none;
  position: fixed;
  width: 100%;
  min-width: 599px;
  z-index: 99999;
  top: 50%;
  padding: 0 20px;
}

.modal.videobox .modal-dim {
  background: rgba(0, 0, 0, 0.8);
}

.modal.videobox .modal-inner {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.modal.videobox .modal-inner .modal-body {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  position: relative;
}

.modal.videobox .modal-inner .modal-header {
  background-color: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.modal.videobox .modal-inner .modal-header .modalClose {
  background: url(../images/admin-ico-close-white.png) no-repeat center;
  display: block;
  position: static;
  border: 2px solid var(--white-color);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  background-size: 80%;
}

.modal.notice article .content-header .title {
  font-size: 2rem;
  color: #7c8089;
}

.modal.notice .modal-inner .modal-header {
  text-align: center;
  background-color: var(--white-subColor);
  border-bottom: 1px solid var(--line-color);
  color: #7c8089;
}

.modal.notice .modal-inner .modal-header .modalClose {
  display: none;
}

.modal.notice .modal-inner .notice-header {
  text-align: center;
}

.modal.notice .modal-inner .notice-header .image {
  width: 64px;
  margin: auto;
}

.modal.notice .modal-inner .notice-header .title {
  font-size: 2.4rem;
  color: var(--text-color);
  font-weight: 600;
}

.modal.notice .modal-inner .modal-body {
  background-color: var(--background-color);
}

.modal.notice .modal-inner .modal-footer {
  background: rgba(250, 250, 250, 0.8);
}

.modal.notice .type-user th {
  background-color: var(--white-subColor);
}

.modal.alert .modal-inner {
  border-radius: 6px;
  min-width: 300px;
  max-width: 300px;
}

.modal.alert .modal-inner .modal-body {
  padding: 20px;
}

.modal.alert .modal-inner .desc {
  text-align: left;
  font-size: 1.6rem;
  font-weight: 500;
}

.modal.alert .modal-inner .alert-button {
  padding-top: 14px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: end;
  -ms-flex-pack: end;
  justify-content: end;
}

.modal.alert .modal-inner .alert-button a {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--rec-primary);
}

.modal.full {
  top: auto;
  bottom: 0;
}

.modal.full .visual-text {
  font-weight: 600;
  text-align: left;
  font-size: 2.2rem;
}

.modal.full .modal-inner {
  width: 100%;
  max-width: 100%;
  top: auto;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.modal.full .modal-inner.on {
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}

.modal.full .modal-inner .modal-body {
  max-height: calc(100vh - 427px);
  overflow: auto;
  padding-bottom: 18px;
}

.modal.full .modal-inner .modal-body + .modal-footer {
  padding-top: 18px;
}

.modal.full .modal-inner .modal-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 10px;
  background-color: var(--white-color);
  padding: 36px;
}

.modal.on {
  display: block;
}

.modal.on .modal-dim {
  -webkit-animation: modalDimShow 0.4s forwards;
  animation: modalDimShow 0.4s forwards;
}

.modal.on .modal-inner {
  -webkit-animation: modalShow 0.4s forwards;
  animation: modalShow 0.4s forwards;
}

.modal.hide-animation .modal-dim {
  -webkit-animation: modalDimHide 0.4s forwards;
  animation: modalDimHide 0.4s forwards;
}

.modal.hide-animation .modal-inner {
  -webkit-animation: modalHide 0.4s forwards;
  animation: modalHide 0.4s forwards;
}

.modal-inner {
  display: table;
  max-width: 980px;
  margin: auto;
  position: relative;
  z-index: 99999;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  top: 40px;
}

.modal-inner.block {
  display: block;
}

.modal .modal-header {
  background-color: #313437;
  position: relative;
  line-height: 60px;
  min-height: 60px;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--white-color);
  padding: 0 20px;
}

.modal .modal-header .modalClose {
  display: block;
  text-indent: -999rem;
  width: 32px;
  height: 32px;
  background: url("../images/admin-ico-close.png") no-repeat;
  background-size: contain;
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.modal .modal-header .modalClose:hover {
  opacity: 0.5;
}

.modal .modal-dim {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99998;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  opacity: 0;
}

.modal .modal-body {
  padding: 20px;
  background: var(--white-color);
  text-align: center;
  max-height: calc(100vh - 220px);
  padding-bottom: 86px;
  overflow: auto;
}

.modal .modal-body .user-form {
  width: 474px;
}

.modal .modal-body.auto {
  max-height: inherit !important;
}

.modal .modal-footer {
  text-align: right;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
}

.modal .modal-footer .grid-div {
  margin: 0;
}

.modal .modal-footer .grid-div .btn {
  min-width: 120px;
}

.modal .modal-controller {
  position: absolute;
  top: 5px;
  right: 6px;
  height: 30px;
}

.modal .modal-controller .ico {
  width: 30px;
  height: 30px;
}

.modal .modal-controller .ico:before {
  background-size: contain;
}

@-webkit-keyframes modalDimShow {
  100% {
    opacity: 1;
  }
}

@keyframes modalDimShow {
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes modalShow {
  100% {
    top: 0;
    opacity: 1;
  }
}

@keyframes modalShow {
  100% {
    top: 0;
    opacity: 1;
  }
}

@-webkit-keyframes modalDimHide {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes modalDimHide {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes modalHide {
  0% {
    top: 0;
    opacity: 1;
  }

  100% {
    top: 40px;
    opacity: 0;
  }
}

@keyframes modalHide {
  0% {
    top: 0;
    opacity: 1;
  }

  100% {
    top: 40px;
    opacity: 0;
  }
}

.text-guide {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 20px 0;
}

.text-guide2 {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 20px 0;
}

.text-guide3 {
  font-size: 1.8rem;
  font-weight: 500;
  margin: 20px 0;
}

.text-guide.center {
  text-align: center;
}

.inputViewer input:-moz-read-only,.inputViewer select:-moz-read-only,.inputViewer textarea:-moz-read-only {
  border: none;
  background: none;
}

.inputViewer input:read-only,.inputViewer select:read-only,.inputViewer textarea:read-only {
  border: none;
  background: none;
}

.inputViewer textarea:-moz-read-only {
  padding-top: 10px;
}

.inputViewer textarea:read-only {
  padding-top: 10px;
}

.tbl,.tbl-sm,.tbl-col {
  border: 1px solid var(--line-color);
}

.tbl.noline,.tbl-sm.noline,.tbl-col.noline {
  border: none;
}

.tbl.noline th,.tbl.noline td,.tbl.noline tr,.tbl-sm.noline th,.tbl-sm.noline td,.tbl-sm.noline tr,.tbl-col.noline th,.tbl-col.noline td,.tbl-col.noline tr {
  border: none;
}

.tbl.type-query table,.tbl-sm.type-query table,.tbl-col.type-query table {
  table-layout: fixed;
}

.tbl.type-query table tr th,.tbl.type-query table tr td,.tbl-sm.type-query table tr th,.tbl-sm.type-query table tr td,.tbl-col.type-query table tr th,.tbl-col.type-query table tr td {
  height: 50px;
}

.tbl.type-query table tr th .input-item,.tbl.type-query table tr td .input-item,.tbl-sm.type-query table tr th .input-item,.tbl-sm.type-query table tr td .input-item,.tbl-col.type-query table tr th .input-item,.tbl-col.type-query table tr td .input-item {
  width: 100%;
  max-width: 800px;
}

.tbl.type-query table tr th input,.tbl.type-query table tr th select,.tbl.type-query table tr th .checkbox.block span,.tbl.type-query table tr th .radio.block span,.tbl.type-query table tr td input,.tbl.type-query table tr td select,.tbl.type-query table tr td .checkbox.block span,.tbl.type-query table tr td .radio.block span,.tbl-sm.type-query table tr th input,.tbl-sm.type-query table tr th select,.tbl-sm.type-query table tr th .checkbox.block span,.tbl-sm.type-query table tr th .radio.block span,.tbl-sm.type-query table tr td input,.tbl-sm.type-query table tr td select,.tbl-sm.type-query table tr td .checkbox.block span,.tbl-sm.type-query table tr td .radio.block span,.tbl-col.type-query table tr th input,.tbl-col.type-query table tr th select,.tbl-col.type-query table tr th .checkbox.block span,.tbl-col.type-query table tr th .radio.block span,.tbl-col.type-query table tr td input,.tbl-col.type-query table tr td select,.tbl-col.type-query table tr td .checkbox.block span,.tbl-col.type-query table tr td .radio.block span {
  font-size: 1.4rem;
}

.tbl.type-query table tr th input,.tbl.type-query table tr th select,.tbl.type-query table tr td input,.tbl.type-query table tr td select,.tbl-sm.type-query table tr th input,.tbl-sm.type-query table tr th select,.tbl-sm.type-query table tr td input,.tbl-sm.type-query table tr td select,.tbl-col.type-query table tr th input,.tbl-col.type-query table tr th select,.tbl-col.type-query table tr td input,.tbl-col.type-query table tr td select {
  height: 36px;
}

.tbl.type-user .checkbox.block span,.tbl.type-user .radio.block span,.tbl-sm.type-user .checkbox.block span,.tbl-sm.type-user .radio.block span,.tbl-col.type-user .checkbox.block span,.tbl-col.type-user .radio.block span {
  padding: 10px 6px;
}

.tbl.type-user table + table,.tbl-sm.type-user table + table,.tbl-col.type-user table + table {
  border-top: 1px solid var(--line-color);
}

.tbl.type-user table tbody tr th b,.tbl.type-user table tbody tr td b,.tbl-sm.type-user table tbody tr th b,.tbl-sm.type-user table tbody tr td b,.tbl-col.type-user table tbody tr th b,.tbl-col.type-user table tbody tr td b {
  font-size: 1.8rem;
}

.tbl.type-user table tbody tr th.left,.tbl.type-user table tbody tr td.left,.tbl-sm.type-user table tbody tr th.left,.tbl-sm.type-user table tbody tr td.left,.tbl-col.type-user table tbody tr th.left,.tbl-col.type-user table tbody tr td.left {
  padding-left: 26px;
}

.tbl.type-view table tr th,.tbl.type-view table tr td,.tbl-sm.type-view table tr th,.tbl-sm.type-view table tr td,.tbl-col.type-view table tr th,.tbl-col.type-view table tr td {
  font-size: 1.6rem;
  padding: 6px 16px;
}

.tbl table,.tbl-sm table,.tbl-col table {
  width: 100%;
}

.tbl table thead tr,.tbl-sm table thead tr,.tbl-col table thead tr {
  border-bottom: 1px solid var(--line-color);
}

.tbl table tfoot tr,.tbl-sm table tfoot tr,.tbl-col table tfoot tr {
  border-top: 1px solid var(--line-color);
  border-bottom: 1px solid var(--line-color);
}

.tbl table tr + tr,.tbl-sm table tr + tr,.tbl-col table tr + tr {
  border-top: 1px solid var(--line-color);
}

.tbl table tr th,.tbl-sm table tr th,.tbl-col table tr th {
  font-size: 1.5rem;
  font-weight: 600;
  background-color: var(--background-color);
  text-align: left;
  padding-left: 16px;
  padding-right: 16px;
}

.tbl table tr td,.tbl-sm table tr td,.tbl-col table tr td {
  font-size: 1.6rem;
  padding: 6px;
}

.tbl table tr th,.tbl table tr td,.tbl-sm table tr th,.tbl-sm table tr td,.tbl-col table tr th,.tbl-col table tr td {
  color: var(--text-color);
  height: 60px;
  border-left: 1px solid var(--line-color);
  line-height: 1;
}

.tbl table tr th .iptDiv,.tbl table tr td .iptDiv,.tbl-sm table tr th .iptDiv,.tbl-sm table tr td .iptDiv,.tbl-col table tr th .iptDiv,.tbl-col table tr td .iptDiv {
  height: 100%;
}

.tbl table tr th:first-child,.tbl table tr td:first-child,.tbl-sm table tr th:first-child,.tbl-sm table tr td:first-child,.tbl-col table tr th:first-child,.tbl-col table tr td:first-child {
  border-left: none;
}

.tbl table tr th.left,.tbl table tr td.left,.tbl-sm table tr th.left,.tbl-sm table tr td.left,.tbl-col table tr th.left,.tbl-col table tr td.left {
  text-align: left;
}

.tbl table tr th.center,.tbl table tr td.center,.tbl-sm table tr th.center,.tbl-sm table tr td.center,.tbl-col table tr th.center,.tbl-col table tr td.center {
  text-align: center;
}

.tbl table tr th.right,.tbl table tr td.right,.tbl-sm table tr th.right,.tbl-sm table tr td.right,.tbl-col table tr th.right,.tbl-col table tr td.right {
  text-align: right;
}

.tbl table tr th.border-left-none,.tbl table tr td.border-left-none,.tbl-sm table tr th.border-left-none,.tbl-sm table tr td.border-left-none,.tbl-col table tr th.border-left-none,.tbl-col table tr td.border-left-none {
  border-left: none;
}

.tbl table tr th.responsive-block,.tbl table tr td.responsive-block,.tbl-sm table tr th.responsive-block,.tbl-sm table tr td.responsive-block,.tbl-col table tr th.responsive-block,.tbl-col table tr td.responsive-block {
  height: auto;
}

.tbl table tr th .btn span,.tbl table tr td .btn span,.tbl-sm table tr th .btn span,.tbl-sm table tr td .btn span,.tbl-col table tr th .btn span,.tbl-col table tr td .btn span {
  font-size: 1.5rem;
}

.tbl table tr th .btn,.tbl table tr th .input-type-ico,.tbl table tr th .file,.tbl table tr th .input-item,.tbl table tr td .btn,.tbl table tr td .input-type-ico,.tbl table tr td .file,.tbl table tr td .input-item,.tbl-sm table tr th .btn,.tbl-sm table tr th .input-type-ico,.tbl-sm table tr th .file,.tbl-sm table tr th .input-item,.tbl-sm table tr td .btn,.tbl-sm table tr td .input-type-ico,.tbl-sm table tr td .file,.tbl-sm table tr td .input-item,.tbl-col table tr th .btn,.tbl-col table tr th .input-type-ico,.tbl-col table tr th .file,.tbl-col table tr th .input-item,.tbl-col table tr td .btn,.tbl-col table tr td .input-type-ico,.tbl-col table tr td .file,.tbl-col table tr td .input-item {
  height: 100%;
}

.tbl table tr th .btn-inner,.tbl table tr th .input-type-ico-inner,.tbl table tr th .file-inner,.tbl table tr th .input-item-inner,.tbl table tr td .btn-inner,.tbl table tr td .input-type-ico-inner,.tbl table tr td .file-inner,.tbl table tr td .input-item-inner,.tbl-sm table tr th .btn-inner,.tbl-sm table tr th .input-type-ico-inner,.tbl-sm table tr th .file-inner,.tbl-sm table tr th .input-item-inner,.tbl-sm table tr td .btn-inner,.tbl-sm table tr td .input-type-ico-inner,.tbl-sm table tr td .file-inner,.tbl-sm table tr td .input-item-inner,.tbl-col table tr th .btn-inner,.tbl-col table tr th .input-type-ico-inner,.tbl-col table tr th .file-inner,.tbl-col table tr th .input-item-inner,.tbl-col table tr td .btn-inner,.tbl-col table tr td .input-type-ico-inner,.tbl-col table tr td .file-inner,.tbl-col table tr td .input-item-inner {
  height: 100%;
}

.tbl table tr th .ico,.tbl table tr td .ico,.tbl-sm table tr th .ico,.tbl-sm table tr td .ico,.tbl-col table tr th .ico,.tbl-col table tr td .ico {
  margin-right: 4px;
}

.tbl-sm table tr th,.tbl-sm table tr td {
  height: 50px;
}

.border-left {
  border-left: 1px solid var(--line-color) !important;
}

.board-view-cell {
  text-align: left;
  padding: 0 20px;
}

.board-view-cell p,.board-view-cell pre,.board-view-cell .image-ratio,.board-view-cell .video-ratio {
  margin: 40px 0;
}

.board-view-cell p,.board-view-cell pre {
  word-break: break-all;
  white-space: unset;
}

.area-min {
  width: 514px;
  margin: auto;
}

.areainfo {
  border: 1px solid var(--line-color);
  position: relative;
  height: 400px;
  overflow: auto;
}

.areainfo img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}

.areainfo .markeritem {
  position: absolute;
}

.markeritem {
  cursor: move;
  text-indent: -999rem;
  display: block;
  width: 44px;
  height: 74px;
  background: url("../images/admin-marker.png") no-repeat center;
  background-size: contain;
}

.area-chart {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  background-color: var(--background-color);
  border: 1px solid var(--line-color);
}

.area-chart > div {
  width: 100%;
  padding: 20px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.area-chart > div .fusioncharts-container {
  width: 100% !important;
}

.area-chart > div .fusioncharts-container svg {
  width: 100% !important;
  background-color: transparent !important;
}

.area-chart .row > .column {
  border-left: 1px solid var(--line-color);
  padding: 20px;
}

.area-chart + .tbl-datatables {
  margin-top: -1px;
}

.area-intro {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 4vh;
}

.area-intro .title {
  text-align: center;
  font-size: 4rem;
  font-weight: 300;
  color: #fff;
  margin-bottom: 90px;
}

.area-intro .form-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 627px;
  gap: 45px;
}

.area-intro .form-group .input-group {
  min-width: 370px;
}

.area-intro .form-group .input-group .input-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  margin: 0;
}

.area-intro .form-group .input-group .input-item input {
  background-color: transparent;
  color: #fff;
  border: none;
  height: 70px;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  position: relative;
  letter-spacing: -0.5px;
  top: 1px;
}

.area-intro .form-group .input-group .input-item input::-webkit-input-placeholder {
  color: #fff;
  opacity: 0.5;
}

.area-intro .form-group .input-group .input-item input:-moz-placeholder {
  color: #fff;
  opacity: 0.5;
}

.area-intro .form-group .input-group .input-item input::-moz-placeholder {
  color: #fff;
  opacity: 0.5;
}

.area-intro .form-group .input-group .input-item input:-ms-input-placeholder {
  color: #fff;
  opacity: 0.5;
}

.area-intro .form-group .input-group .input-item input:focus {
  border-color: white;
}

.area-intro .form-group .input-group .input-item .like-label {
  font-size: 1.6rem;
  color: #fff;
  font-weight: 600;
  margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 110px;
}

.area-intro .form-group .input-group .input-item .like-label .ico {
  display: inline-block;
}

.area-intro .form-group .button-group {
  min-width: 205px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 14px;
}

.area-intro .form-group .button-group .btn-main .btn {
  width: 100%;
  height: 150px;
}

.area-intro .form-group .button-group .btn-main .btn span {
  font-size: 2.4rem;
  font-weight: 700;
}

.area-intro .form-group .button-group .btn-side {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 14px;
}

.area-intro .form-group .button-group .btn-side .btn {
  width: 100%;
  height: 50px;
}

.area-intro .form-group .button-group .btn-side .btn span {
  font-weight: 600;
  font-size: 1.5rem;
}

.area-intro .form-group .btn.intro {
  width: 280px;
  height: 210px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.area-intro .form-group .btn.intro span {
  font-size: 3rem;
  font-weight: 700;
}

.area-intro .form-group .btn.intro img {
  margin-bottom: 10px;
  width: 70px;
}

.area-intro .form-group .setting-lang {
  min-width: 594px;
}

.area-intro .form-group .setting-lang select {
  padding-left: 30px;
  height: 80px;
  font-weight: 700;
  font-size: 3rem;
  -webkit-box-shadow: 0 16px 43px -20px rgba(0, 0, 0, 0.25);
  box-shadow: 0 16px 43px -20px rgba(0, 0, 0, 0.25);
  border: solid 3px rgba(255, 255, 255, 0.2);
  background-color: transparent;
  color: var(--white-color);
  background-image: url("../images/selected-arrow-white.png");
  background-size: 40px;
  padding-right: 40px;
}

.area-intro .form-group .setting-lang select + .btn {
  margin-top: 40px;
}

.area-intro .form-group .setting-lang .btn {
  width: 100%;
  height: 74px;
}

.area-intro .form-group .setting-lang .btn + .btn {
  margin-top: 10px;
}

.area-intro .form-group .setting-lang .btn span {
  font-weight: 700;
  font-size: 2.8rem;
}

.step {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--background-subColor);
  margin-top: -40px;
  margin-left: -40px;
  margin-right: -40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line-color);
}

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

.step .list-step .list-step-item {
  padding-left: 40px;
  width: 230px;
  height: 92px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: start;
  -ms-flex-pack: start;
  justify-content: start;
  border-right: 1px solid var(--line-color);
}

.step .list-step .list-step-item .list-step-el {
  text-align: left;
}

.step .list-step .list-step-item span {
  color: #bbbbbb;
  font-size: 1.3rem;
  font-weight: 700;
}

.step .list-step .list-step-item h3 {
  text-align: left;
  color: #bbbbbb;
  font-size: 2rem;
  font-weight: 600;
}

.step .list-step .list-step-item.complite span,.step .list-step .list-step-item.complite h3 {
  color: var(--text-color-grayblue);
}

.step .list-step .list-step-item.active {
  -webkit-box-shadow: inset 10px 0 24px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 10px 0 24px 0 rgba(0, 0, 0, 0.25);
  background-color: #313437;
}

.step .list-step .list-step-item.active span,.step .list-step .list-step-item.active h3 {
  color: var(--white-color);
}

.btn-text {
  color: var(--text-color);
  font-size: 1.5rem;
  font-weight: 600;
}

.btn-video {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 3rem;
  font-weight: 700;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.3px;
  background-image: -o-linear-gradient(339deg, var(--white-color) 25%, #c6d9ff 50%, var(--white-color) 79%);
  background-image: linear-gradient(111deg, var(--white-color) 25%, #c6d9ff 50%, var(--white-color) 79%);
  margin-bottom: 60px;
}

.btn-video + .title {
  margin-bottom: 45px;
}

.btn-video:before {
  content: "";
  display: block;
  width: 92px;
  height: 92px;
  border: solid 3px rgba(255, 255, 255, 0.7);
  background: transparent;
  border-radius: 50%;
  background: url("../images/admin-ico-videoPlay.png") 55% center no-repeat;
  background-size: 30%;
  margin-right: 20px;
}

.btn-video:hover {
  opacity: 0.8;
}

.text-date {
  font-size: 1.4rem;
  color: #7c8089;
}

.move-on {
  position: relative;
  -webkit-animation: ani-moveup 0.5s linear forwards;
  animation: ani-moveup 0.5s linear forwards;
}

@-webkit-keyframes ani-moveup {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ani-moveup {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.command-btn {
  display: block;
  color: #81878c;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 3px 10px 3px;
  border: solid 1px rgba(201, 202, 202, 0.5);
  border-radius: 50px;
}

.command-btn:hover {
  background-color: var(--white-color);
}

.command-btn img {
  width: 10px;
  position: relative;
  bottom: 1px;
}

.type-mode {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
  background: var(--white-color) !important;
  border: 2px solid var(--line-color) !important;
}

.type-mode.active {
  border-color: var(--rec-primary) !important;
}

.type-mode.active i {
  color: var(--rec-primary);
}

.type-mode i {
  color: var(--text-color-gray);
}

.type-mode img {
  width: 300px;
  border-bottom: 2px solid var(--line-color);
}

.type-mode i {
  display: block;
  font-style: normal;
  margin-top: 8px;
  margin-bottom: 8px;
}

.iptDiv {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  width: 100%;
  align-items: center;
}

.rowAddedTable.bd-top {
  border-top: 1px solid var(--line-color);
}

/* CUSTOM :: 
datatables */

table.dataTable.no-footer {
  border: 1px solid var(--line-color);
}

table.dataTable thead th,table.dataTable thead td,table.dataTable tbody th,table.dataTable tbody td {
  border-color: var(--line-color);
  border-left: 1px solid var(--line-color);
  height: 33px;
  text-align: center;
  line-height: 1;
}

table.dataTable thead th.clear,table.dataTable thead td.clear,table.dataTable tbody th.clear,table.dataTable tbody td.clear {
  padding: 6px !important;
  text-align: center;
}

table.dataTable thead th.clear .input-item,table.dataTable thead td.clear .input-item,table.dataTable tbody th.clear .input-item,table.dataTable tbody td.clear .input-item {
  gap: 0;
  display: block;
}

table.dataTable thead th.clear .checkbox span,table.dataTable thead th.clear .radio span,table.dataTable thead td.clear .checkbox span,table.dataTable thead td.clear .radio span,table.dataTable tbody th.clear .checkbox span,table.dataTable tbody th.clear .radio span,table.dataTable tbody td.clear .checkbox span,table.dataTable tbody td.clear .radio span {
  padding-left: 18px;
}

table.dataTable thead th.clear::before,table.dataTable thead th.clear::after,table.dataTable thead td.clear::before,table.dataTable thead td.clear::after,table.dataTable tbody th.clear::before,table.dataTable tbody th.clear::after,table.dataTable tbody td.clear::before,table.dataTable tbody td.clear::after {
  content: none !important;
}

table.dataTable thead th:first-child,table.dataTable thead td:first-child,table.dataTable tbody th:first-child,table.dataTable tbody td:first-child {
  border-left: none;
}

table.dataTable thead th.left,table.dataTable thead td.left,table.dataTable tbody th.left,table.dataTable tbody td.left {
  text-align: left;
}

table.dataTable thead th.right,table.dataTable thead td.right,table.dataTable tbody th.right,table.dataTable tbody td.right {
  text-align: right;
}

.tbl-list.click-cell table.dataTable tbody tr {
  cursor: pointer;
}

.tbl-list.click-cell table.dataTable tbody tr:hover {
  background-color: var(--background-color);
}

table.dataTable thead th {
  font-size: 1.5rem;
  font-weight: 600;
  background-color: var(--background-color);
}

table.dataTable tbody td {
  font-size: 1.6rem;
  font-weight: 500;
  border-top: 1px solid var(--line-color);
}

table.dataTable tbody td.min,table.dataTable tbody th.min {
  padding: 6px;
}

.nodataElement {
  padding: 20px 20px 40px;
  font-size: 1.6rem;
  color: var(--text-color-gray);
  font-weight: 400;
}

.nodataElement:before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  background: url("../images/admin-img-null.png") no-repeat;
  background-size: contain;
  margin: auto;
}

/* CUSTOM :: 
jquery ui */

.ui-widget {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif;
}

.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:last-child a {
  color: #ff6b6b;
}

.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:last-child a.ui-state-active {
  color: var(--white-color);
}

.datepicker:-moz-read-only + label {
  pointer-events: none;
}

.datepicker:read-only + label {
  pointer-events: none;
}

.ui-widget-content {
  background-color: var(--white-color);
}

.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,html .ui-button.ui-state-disabled:hover,html .ui-button.ui-state-disabled:active {
  color: var(--text-color);
}

.ui-datepicker {
  border-radius: 4px;
  border: 1px solid #e7e7e7;
  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.ui-datepicker th {
  color: var(--text-color);
}

.ui-datepicker .ui-widget-header {
  background-color: #313437;
  border: none;
  padding: 10px;
  color: var(--white-color);
}

.ui-datepicker .ui-widget-header .ui-datepicker-title {
  margin: 0;
  *zoom: 1;
  display: block;
}

.ui-datepicker .ui-widget-header .ui-datepicker-title:after {
  content: "";
  display: block;
  clear: both;
}

.ui-datepicker .ui-widget-header .ui-datepicker-title,.ui-datepicker .ui-widget-header .ui-datepicker-title span {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}

.ui-datepicker .ui-widget-header .ui-datepicker-next,.ui-datepicker .ui-widget-header .ui-datepicker-prev {
  top: 9px;
}

.ui-datepicker .ui-widget-header .ui-datepicker-next span,.ui-datepicker .ui-widget-header .ui-datepicker-prev span {
  background: url("../images/cal-arrow-l.png") no-repeat;
  background-size: contain;
}

.ui-datepicker .ui-widget-header .ui-datepicker-prev {
  left: 6px;
}

.ui-datepicker .ui-widget-header .ui-datepicker-next {
  right: 6px;
}

.ui-datepicker .ui-widget-header .ui-datepicker-next span {
  background: url("../images/cal-arrow-r.png") no-repeat;
  background-size: contain;
}

.ui-datepicker td {
  color: var(--text-color);
  padding: 6px 0;
  text-align: center;
}

.ui-datepicker th {
  font-size: 1.4rem;
  font-weight: 400;
  opacity: 0.8;
  background: var(--background-subColor);
}

.ui-datepicker .ui-state-default {
  display: inline-block;
  padding: 0;
  font-size: 1.5rem;
  width: 30px;
  height: 30px;
  line-height: 23px;
  border: 3px solid transparent;
  background: none;
  text-align: center;
  border-radius: 6px;
}

.ui-datepicker .ui-state-default.ui-state-highlight {
  color: var(--text-color);
  font-weight: 700;
  background-color: var(--background-subColor);
}

.ui-datepicker .ui-state-default.ui-state-highlight.ui-state-hover {
  opacity: 1;
}

.ui-datepicker .ui-state-default.ui-state-active {
  border-radius: 6px;
  background-color: var(--rec-primary);
  color: #fff;
  font-weight: 700;
}

.ui-datepicker .ui-state-default.ui-state-active.ui-state-hover {
  opacity: 1;
}

.ui-datepicker .ui-state-default.ui-state-hover {
  opacity: 0.5;
}

.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year {
  color: var(--white-color);
  font-weight: 700;
  border: none;
  float: left;
  padding-left: 0;
  padding-right: 30px;
  margin-right: 10px;
  font-size: 2rem;
  position: relative;
  z-index: 2;
}

.ui-datepicker select.ui-datepicker-year {
  width: 104px;
}

.ui-datepicker select.ui-datepicker-month {
  width: 70px;
}

.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover,.ui-button:focus {
  border: none;
  background: none;
}

.datepicker-page {
  margin-top: -16px;
}

.datepicker-page .datepicker {
  width: 100%;
}

.datepicker-page .datepicker.readonly {
  pointer-events: none;
}

.datepicker-page .datepicker .ui-datepicker-inline {
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 0;
}

.ui-widget.ui-widget-content {
  border: none;
}

/* CUSTOM :: 
CKEDITOT */

.editor-item2 .ck.ck-editor__main > .ck-editor__editable {
  height: 200px;
  width: 80%;
}

.editor-item .ck.ck-editor__main > .ck-editor__editable {
  height: 400px;
}

.editor-item .ck.ck-list,.editor-item .ck.ck-editor__main > .ck-editor__editable {
  background: var(--white-color) !important;
}

.editor-item .ck.ck-button.ck-on,.editor-item a.ck.ck-button.ck-on,.editor-item .ck.ck-button:not(.ck-disabled):hover,.editor-item a.ck.ck-button:not(.ck-disabled):hover {
  background: var(--background-subColor) !important;
}

.editor-item .ck.ck-button__label {
  color: var(--text-color) !important;
}

.editor-item .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
  border-top: 1px solid var(--line-color);
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background-color: transparent;
}

.editor-item .ck.ck-icon {
  color: var(--text-color-grayblue);
}

.editor-item .ck-toolbar {
  border-left: 0 !important;
  border-right: 0 !important;
  border-color: var(--line-color) !important;
  border-radius: 0 !important;
}

/* js tree */

.jstree-anchor {
  background: none !important;
  font-size: 1.4rem;
  font-weight: 600;
}

@media (max-width: 1280px) {
  .video-ratio {
    width: 90vw !important;
  }

  #gnb {
    left: -230px;
    -webkit-transition: left 0.4s;
    -o-transition: left 0.4s;
    transition: left 0.4s;
  }

  #gnb + .container {
    padding-left: 0;
  }

  .closeGnb {
    display: none;
  }

  .gnb-container-side {
    left: -230px;
    -webkit-transition: left 0.4s;
    -o-transition: left 0.4s;
    transition: left 0.4s;
  }

  .gnb-container-nav {
    padding-left: 0;
  }

  header .top {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  header .top .logo {
    display: block;
  }
}

@media (max-width: 1024px) {
  .viewport {
    min-width: 599px;
  }

  .viewport .container .side-include-layout .side-include {
    width: 200px;
  }

  .viewport .container .contents {
    padding: 20px;
  }

  html.intro .viewport .container {
    /*background: url("../images/admin-bg-intro.png") no-repeat center;*/
    background: url("../images/admin-bg-intro.webp") no-repeat center;
    background-size: cover;
    position: relative;
  }

  html.intro .viewport .container footer {
    text-align: center;
  }

  html.intro .viewport .container footer .fnb ul {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  html.intro .viewport .container:after,  html.intro .viewport .container:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  html.intro .viewport .container:before {
    background-color: rgba(0, 0, 0, 0.6);
  }

  html.intro .viewport .container:after {
    background-image: -o-linear-gradient(273deg, rgba(0, 26, 255, 0) 4%, rgba(0, 26, 255, 0.2) 51%, #275ac6 96%);
    background-image: linear-gradient(177deg, rgba(0, 26, 255, 0) 4%, rgba(0, 26, 255, 0.2) 51%, #275ac6 96%);
  }

  .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .row.type-line > .column {
    padding-bottom: 80px;
    padding-right: 0;
    overflow: inherit;
    height: auto;
  }

  .row.type-line > .column + .column {
    border-left: none;
    border-top: 3px solid var(--line-color);
    padding-top: 80px;
    padding-left: 0;
  }

  .row + .row {
    margin-top: 40px;
  }

  .row > .column {
    width: 100% !important;
  }

  .row > .column .box-line,  .row > .column .box-morphism {
    margin: 0;
  }

  .area-chart {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .step {
    margin-top: -20px;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 20px;
  }

  .step .list-step .list-step-item {
    padding-left: 20px;
  }

  .row-register-btn {
    height: auto;
    min-height: inherit;
  }

  .row-register-btn .column [class^=box] {
    height: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .row-register-btn .column [class^=box] br {
    display: none;
  }

  .row-register-btn .column [class^=box] .img-sidedeco {
    position: static;
    margin-right: 20px;
  }

  header .snb .snb-btn {
    font-size: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border: none;
  }

  header .snb .snb-btn img {
    width: 100%;
  }

  header .snb .userinfo {
    padding: 0;
    letter-spacing: -1px;
    font-size: 1.1rem;
  }

  header .snb .userinfo:before {
    display: none;
  }

  footer {
    display: block;
  }

  footer .familly-site {
    margin-top: 10px;
  }

  footer .footer-item {
    display: block;
  }

  .datatables-custom-wrap {
    overflow: auto;
  }

  .tbl.type-query table tr th,  .tbl.type-query table tr td,  .tbl-sm.type-query table tr th,  .tbl-sm.type-query table tr td,  .tbl-col.type-query table tr th,  .tbl-col.type-query table tr td {
    height: auto;
  }

  .tbl table tr th,  .tbl table tr td,  .tbl-sm table tr th,  .tbl-sm table tr td,  .tbl-col table tr th,  .tbl-col table tr td {
    padding: 6px;
    height: auto;
  }

  .tbl table tr th input,  .tbl table tr th select,  .tbl table tr td input,  .tbl table tr td select,  .tbl-sm table tr th input,  .tbl-sm table tr th select,  .tbl-sm table tr td input,  .tbl-sm table tr td select,  .tbl-col table tr th input,  .tbl-col table tr th select,  .tbl-col table tr td input,  .tbl-col table tr td select {
    min-height: 50px;
  }

  .tbl {
    border-top: none;
  }

  .tbl table {
    display: block;
  }

  .tbl table tbody {
    display: block;
  }

  .tbl table tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .tbl table tr.use-colspan td {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .tbl table tr.use-colspan td + th {
    border-left: 1px solid var(--line-color);
  }

  .tbl table tr + tr {
    border: none;
  }

  .tbl table tr th {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 120px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border: none;
    padding-left: 16px;
    font-size: 1.4rem;
  }

  .tbl table tr td {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: calc(100% - 120px);
  }

  .tbl table tr td.null {
    display: none;
  }

  .tbl table tr td .input-item {
    width: 100% !important;
  }

  .tbl table tr th,  .tbl table tr td {
    vertical-align: middle;
    border-top: 1px solid var(--line-color);
  }

  .notice-container .notice-board {
    width: 300px;
  }

  .notice-container .notice-view {
    width: 300px;
  }

  .notice-container .notice-view.open {
    right: 300px;
  }

  .viewport.gnb-open .gnb-container {
    min-width: 599px;
  }

  .menu-group .menu-group-depth1 .menu-item > a {
    font-size: 1.6rem;
    padding: 0 16px;
    letter-spacing: -1px;
  }

  .menu-group .menu-group-depth1 .menu-item > a.arrow:after {
    width: 20px;
    height: 20px;
    right: 10px;
  }

  .terms-footer,  .terms-header {
    margin: 20px 0;
  }

  .input-item.responsive {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .iptDiv {
    width: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .radio.block.button em,  .checkbox.block.button em {
    display: none;
  }

  .input-item.dp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .mobile-not {
    display: none;
  }
}

@media (max-width: 600px) {
  .area-intro .form-group .btn.intro {
    width: 240px;
  }

  .area-intro .form-group {
    max-width: 100%;
    padding: 0 20px;
    gap: 20px;
  }

  .area-intro .form-group .setting-lang {
    min-width: 504px;
  }

  .area-intro .form-group .button-group {
    min-width: auto;
  }
}

:root.mode-dark {
  --rec-primary: #3c78fd;
  --text-color: rgba(255, 255, 255, 0.7);
  --text-color-gray: rgba(255, 255, 255, 0.4);
  --line-color: #4a4d52;
  --background-color: #3c4145;
  --background-subColor: #313437;
  --white-color: #252629;
  --text-color-grayblue: #8e9ba6;
  --button-color: #8e9ba6;
  --white-subColor: #3c4145;
  --ck-color-toolbar-border: #4a4d52;
  --ck-color-dropdown-panel-border: #4a4d52;
  --ck-color-toolbar-background: #3c4145;
  background: #2c2e32;
}

:root.mode-dark .box-line {
  border: 3px solid #4a4d52;
}

:root.mode-dark .box-morphism {
  -webkit-box-shadow: 2px 2px 10px 0 rgba(44, 46, 50, 0.13), -3px -3px 5px 0 #292b2f, inset 1px 1px 6px -3px rgba(0, 0, 0, 0.05);
  box-shadow: 2px 2px 10px 0 rgba(44, 46, 50, 0.13), -3px -3px 5px 0 #292b2f, inset 1px 1px 6px -3px rgba(0, 0, 0, 0.05);
  border: solid 1px #3d4046;
  background-color: #35373c;
}

:root.mode-dark .menu-group .menu-group-depth1 .menu-item.open > a,:root.mode-dark .menu-group .menu-group-depth1 .menu-item > a:hover {
  color: #fff;
}

:root.mode-dark header .btm {
  background: #2c2e32;
}

:root.mode-dark footer .copyright {
  opacity: 0.2;
}

:root.mode-dark footer .list-info li {
  opacity: 0.2;
}

:root.mode-dark .btn.natural {
  color: var(--text-color-grayblue);
  background: var(--background-color);
  border: 1px solid var(--white-color);
}

:root.mode-dark .btn.positive {
  color: #fff;
}

:root.mode-dark table tr td .btn.natural {
  background-color: var(--background-subColor);
}

:root.mode-dark .modal .modal-header {
  color: var(--text-color);
}

:root.mode-dark .modal .modal-footer {
  background: rgba(37, 38, 41, 0.8);
}

:root.mode-dark .modal.notice .modal-inner .modal-body {
  background-color: #2c2e32;
}

:root.mode-dark .modal.notice .modal-inner .modal-footer {
  background: rgba(44, 46, 50, 0.8);
}

:root.mode-dark .modal.notice .modal-inner .modal-header {
  background-color: #2c2e32;
}

:root.mode-dark .step .list-step .list-step-item.active span,:root.mode-dark .step .list-step .list-step-item.active h3 {
  color: #fff;
}

:root.mode-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,:root.mode-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(230, 230, 230, 0.1)), to(rgba(0, 0, 0, 0.1))) !important;
  background: -o-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%) !important;
  background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%) !important;
}

.area-intro .form-group .input-group .input-item .radio,.area-intro .form-group .input-group .input-item .checkbox {
  /* 로그인 부분 수정 */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.area-intro .form-group .input-group .input-item .radio span,.area-intro .form-group .input-group .input-item .checkbox span {
  color: #fff;
}