@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'HJA';
    src: url('./fonts/HJA.ttf') format('turetype');
    font-weight: 400;
    font-style: normal;
}
/* WEB FONT */
@font-face {
    font-family: 'en_medium';
    src: url('fonts/Roboto-Medium.eot');
    src: url('fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Medium.woff2') format('woff2'),
        url('fonts/Roboto-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'en_bold';
    src: url('fonts/Roboto-Bold.eot');
    src: url('fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Bold.woff2') format('woff2'),
        url('fonts/Roboto-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'en_light';
    src: url('fonts/Roboto-Light.eot');
    src: url('fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Light.woff2') format('woff2'),
        url('fonts/Roboto-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'en_regular';
    src: url('fonts/Roboto-Regular.eot');
    src: url('fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Regular.woff2') format('woff2'),
        url('fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'kr_light';
    font-style: normal;
    src: url("fonts/NotoSansKR-Light.eot");
    src: url("fonts/NotoSansKR-Light.woff");
    src: url("fonts/NotoSansKR-Light.otf");
}

@font-face {
    font-family: 'kr_regular';
    font-style: normal;
    src: url("fonts/NotoSansKR-Regular.eot");
    src: url("fonts/NotoSansKR-Regular.woff");
    src: url("fonts/NotoSansKR-Regular.otf");
}

@font-face {
    font-family: 'kr_bold';
    font-style: normal;
    src: url("fonts/NotoSansKR-Bold.woff");
    src: url("fonts/NotoSansKR-Bold.otf");
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-3Light';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SDSamliphopangche_Outline';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/SDSamliphopangche_Outline.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DungGeunMo';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Manse';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Manse.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
:root{
    --font-face:'Pretendard';
}
html{
    font-size: var(--base-text-size);
}
*{
	/* font-size: 1rem; */
	/* color : var(--black); */
    /* font-family: var(--base-font-family); */
}
form,#pbview{
    
}
body{
	margin : 0px;
	/* background : var(--base-background); */
    /* font-family: 'Pretendard'; */
    font-family: var(--font-face);
}
.ui-widget{
    font-family: var(--font-face);
    
}
html:has(.popup-wrapper) {
    overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    /* color: var(--black); */
  }
  
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-weight: inherit;
  }
  
  h1 {
    font-size: 3.5rem;
    line-height: 110%;
    margin: 2.8rem 0 1.68rem 0;
  }
  
  h2 {
    font-size: 3rem;
    line-height: 110%;
    margin: 2.3733333333rem 0 1.424rem 0;
  }
  
  h3 {
    font-size: 2.32rem;
    line-height: 110%;
    margin: 1.9466666667rem 0 1.168rem 0;
    /*margin: 1.9466666667rem 0 1.9466666667rem 0;*/
    
  }

  div:not(.gjATB)>h3{
    /* padding-left: 25px;
    position: relative; */
  }

  div:not(.gjATB)>h3::before {
    /* content: "";
    width: 5px;
    height: 2.32rem;
    background: var(--Navy-70);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); */
}
  
  h4 {
    font-size: 2.28rem;
    line-height: 110%;
    margin: 1.52rem 0 0.912rem 0;
  }
  
  h5 {
    font-size: 1.64rem;
    line-height: 110%;
    /*margin: 1.0933333333rem 0 0.656rem 0;*/
    margin: 0.4933333333rem 0 0.4933333333rem 0;
  }
  
  h6 {
    /* font-size: 1.15rem;
    line-height: 110%;
    margin: 0.7666666667rem 0 0.46rem 0; */
    font-size: 1.05rem;
    line-height: 110%;
    margin: 0.2rem 0;
  }
  a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    color: var(--Grayscale-70);
}
#containerFooter{
    display: inline-flex;
}
/* Button Default Style */
.btn-grp-wrap{
    padding: 0 0 1rem 0;
    box-sizing: border-box;
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: flex-end;
    /* position: sticky; */
    top: 90px;
    z-index: 10;
    pointer-events: none;
}
.btn-grp-wrap input{  /*240830 ljh*/
    pointer-events: all;
}

.btn-search-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px;
    max-width: 100%;
    border-bottom: unset;
    background: #f7f7f7;
    /* border-radius: 10px; */
    margin-bottom: 20px;
    padding: 20px;
}

.mdd-tree-wrap {
    /*min-width: 400px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 18px #00000017;*/
    box-sizing: border-box;
    border: 1px solid var(--Grayscale-20);
    border-radius: 0.8rem;
    padding: 2.4rem;
    display: inline-flex;
    flex-direction: column;
    /* gap: 10px; */
}
.mdd-shadow-wrap {
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 18px #00000017;
}
.btn-search-wrap select,
.mdd-tree-wrap select{
    width: fit-content;
    min-width: 120px;
    border-radius: var(--search-border-radius);
    height: var(--search-input-hight);

}
.btn-search-wrap input[type='text'],
.btn-search-wrap input[type='search']{
    /* border: unset;
    border-bottom: 1px solid gainsboro;
    border-radius: unset;
    width: 100%;
    height: 40px; */
    width: 300px;
    border: 1px solid var(--base-border-color);
    border-radius:var(--search-border-radius);
    padding-right: 45px;
    padding-left: 15px;
    height: var(--search-input-hight);
}
.btn-search-wrap input[type='text']:focus{
    border-block-color: var(--black);
}
.btn-search-wrap .mddButton {
    /* font-family: 'Material Icons';
    font-size: 2rem;
    color: var(--Primary-100);
    padding: 0 0.5rem; */
    min-width: unset !important;
    background: transparent;
    border: unset;
    position: absolute;/**/
    padding:0 3px;
    margin-right:15px;
    background-image: url(" data:image/svg+xml;utf8,\ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\ <circle cx='11' cy='11' r='8'/>\ <line x1='21' y1='21' x2='16.65' y2='16.65'/>\ </svg>");
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}
.btn-search-wrap .mddButton:focus{
    outline: none !important;
}
.btn-search-wrap .mddButton:active{
    background-color: transparent !important;
}

.mddButton {
    padding: 5px 10px 5px 10px;
    border: 1px solid var(--Primary-50);
    /* border-radius: 4px; */
    background-color: var(--Primary-0);
    color : var(--Primary-50);
    cursor: pointer;
    min-width: 4.5rem;
    padding: 0 1rem;
    height: var(--search-input-hight);
}

.dark .mddButton{
    background-color: var(--Grayscale-5);
}

/*.mddButton:hover {
    background: var(--Primary-2);
    filter: grayscale(1);
}*/

.mddButton:active {
    background: var(--Primary-10);
}

.mddButton:focus {
    outline-offset: -0.4rem;
    outline: 2px solid var(--Primary-40);
}

.mddButton[value^="저장"],.mddButton[value^="Save" i], .mddButton.primary{
    background-color: var(--Primary-50);
    border-color: var(--Primary-50);
    color: var(--white) !important;
}
.mddButton[value^="저장"]:hover,.mddButton[value^="Save" i]:hover, .mddButton.primary:hover{
    background-color: var(--Primary-60);
    border-color: var(--Primary-60);
}
.mddButton[value^="저장"]:active,.mddButton[value^="Save"]:active, .mddButton.primary:active{
    background-color: var(--Primary-70);
    border-color: var(--Primary-70);
}

.mddButton[value^="삭제"], .mddButton[value^="탈퇴"], .mddButton[value^="withdrawal" i], 
.mddButton[value^="stop" i], .mddButton[value^="delete" i], .mddButton.danger{
    background-color: var(--Danger-50);
    border-color: var(--Danger-50);
    color: var(--white) !important;
}
.mddButton[value^="삭제"]:hover , .mddButton[value^="탈퇴"]:hover, .mddButton[value^="withdrawal" i]:hover, 
.mddButton[value^="stop" i]:hover, .mddButton[value^="delete" i]:hover, .mddButton.danger:hover{
    background-color: var(--Danger-60);
    border-color: var(--Danger-60);
}
.mddButton[value^="삭제"]:active, .mddButton[value^="탈퇴"]:active, .mddButton[value^="withdrawal" i]:active, 
.mddButton[value^="stop" i]:active, .mddButton[value^="delete" i]:active, .mddButton.danger:active{
    background-color: var(--Danger-70);
    border-color: var(--Danger-70);
}

/* Calendar Default Style  */
.mddCalendar {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--base-border-color);
    width: 170px;
    background: var(--base-background);
    color: var(--Primary-100);
}
.tui-datepicker-input {
    position: relative;
    display: inline-block;
    width: 170px;
    vertical-align: top;
    border: 1px solid var(--base-border-color);
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
}
button.ui-datepicker-trigger {
    padding: 5px 10px 5px 10px;
    border: 1px solid var(--base-border-color);
    border-radius: 4px;
    background: var(--base-select-background);
    cursor: pointer;
}
button.ui-datepicker-trigger:hover {
    background: var(--base-select-background-hover);
    color: var(--Primary-100);
}

/* CheckBox Default Style */
.mddCheckBox{

}

input[type="checkbox"] {
	cursor: pointer;
    margin: 0px !important;
	accent-color:var(--Primary-50);
    width: 1.5rem;
    height: 1.5rem;
}
input[type="checkbox"]+label{
    margin-right: 20px !important;
    cursor: pointer;
}
input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled + label{
    cursor: no-drop;
}
input[type="checkbox"]:disabled{
    background-color: var(--Grayscale-30);
    border-color: var(--Grayscale-40);
    color: var(--Grayscale-60);
}

/* ComboBox Default Style */
.mddComboBox {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--base-border-color);
    width: 170px;
    box-sizing: border-box;
    background: var(--base-background);
    color: var(--Primary-100);
}

/* DCircle Default Style */
.mddDCircle{

}

/* DLine Default Style */
.mddDLine{

}

/* Document Default Style */
.mddDocument{

}

/* Dpath Default Style */
.mddDpath{

}

/* DPolygon Default Style */
.mddDPolygon{

}

/* DPolyline Default Style */
.mddDPolyline{

}

/* DRect Default Style */
.mddDRect{

}

/* FileButton Default Style */
.mddFileButton {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--base-border-color);
    box-sizing: border-box;
    background: var(--base-background);
    color: var(--Primary-100);
}

/* GroupACD Default Style */
.mddGroupACD{

}

/* GroupBox Default Style */
.mddGroupBox{
    box-sizing: border-box;
}

/* Href Default Style */
.mddHref{

}

/* IFrame Default Style */
.mddIFrame{

}

/* Label Default Style */
.mddLabel{

}

/* ListBox Default Style */
.mddListBox{

}

/* NumUpDown Default Style */
.mddNumUpDown{

}

/* PictureBox Default Style */
.mddPictureBox{

}

/* Progress Default Style */
.mddProgress{

}

/* Radio Default Style */
.mddRadio{

}

input[type="radio"] {
	cursor: pointer;
    margin: 0px !important;
	accent-color:var(--Primary-50);
    width: 1.5rem;
    height: 1.5rem;
}
input[type="radio"]+label{
    margin-right: 20px !important;
    cursor: pointer;
}
input[type="radio"]:disabled,
input[type="radio"]:disabled + label{
    cursor: no-drop;
}
input[type="radio"]:disabled{
    background-color: var(--Grayscale-30);
    border-color: var(--Grayscale-40);
    color: var(--Grayscale-60);
}
.mddTextArea:disabled
, textarea.tree-node-main-middle-child:disabled {
    cursor: no-drop;
    background-color: var(--Grayscale-30);
    border-color: var(--Grayscale-40);
    color: var(--Grayscale-60);
}
/* Secret Default Style */
.mddSecret {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--base-border-color);
    width: 170px;
    box-sizing: border-box;
    background: var(--base-background);
    color: var(--Primary-100);
}

/* SplitContainer Default Style */
.mddSplitContainer{

}

/* Tab Default Style */
.mddTab{
	--tab-header-border-radius : 0;
	--tab-header-margin : 3px;
	--tab-header-select-color : var(--base-select-background);
	--tab-header-hover-color : var(--Primary-50);
	--tab-header-font-color : var(--Primary-100);
	--tab-header-font-color-hover : var(--Primary-100);
	--tab-body-border-width : 1px;
	--tab-body-border-color : var(--base-border-color);
	--tab-body-padding : 10px;
}
:root.dark .mddTab{
	--tab-header-border-radius : 0;
	--tab-header-margin : 3px;
	--tab-header-select-color : var(--base-select-background);
	--tab-header-hover-color : var(--Primary-50);
	--tab-header-font-color : var(--Primary-100);
	--tab-header-font-color-hover : var(--Primary-100);
	--tab-body-border-width : 1px;
	--tab-body-border-color : var(--base-border-color-hover);
	--tab-body-padding : 10px;
}
.mddTab>ul>li {
    border-radius: var(--tab-header-border-radius);
    border-bottom: 0px;
}
.mddTab>ul>li.on {
    background: var(--base-select-background-hover);
	color: var(--Primary-100);
}
.mddTab>ul>li.on>span {
	color: var(--white);
}
.mddTab>ul>li:hover {
    background: var(--tab-header-hover-color);
}
.mddTab>ul>li:not(li.on):hover>span{
    color: var(--tab-header-font-color-hover);
}    
.mddTab>ul>li:not(:last-child){
	margin-right : 3px;
}
.mddTab>div {
	border-width : var(--tab-body-border-width);
	border-style : solid;
    border-color : var(--tab-body-border-color);
    box-sizing: border-box;
    padding: var(--tab-body-padding);
}
/*디폴트 적용*/
[eltype='tab']>ul>li>span {
    width: 100% !important;
    background-color: transparent !important; 
    text-align: center;
    border: none !important;
    height: fit-content !important;
}
[eltype='tab']>ul{
	display:flex;
}
[eltype='tab']>ul>li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--search-input-hight) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 5px 5px 5px 5px;
    border: 1px solid var(--base-border-color);
    color: var(--Primary-100);
    font-size: 14px;
    /* border-radius: 8px 8px 0px 0px !important; */
    box-sizing: border-box;
    cursor: pointer;
}
[eltype='tab']>ul>li.on{
	background: var(--base-select-background);
}
[eltype='tab']>ul>li:hover {
    background: var(--Primary-50);
}
[eltype='tab']>ul>li:not(li.on):hover>span {
    color: var(--Primary-100);
    /* color: var(--white); */
}
[eltype='tab']>div {
    width: 100%;
    height: 100%;
}
/* TableLayout Default Style */
table.mddTableLayout {
    border: 1px solid var(--base-border-color);
    width: 100%;
    border-bottom: 0px;
}

/* TextArea Default Style */
.mddTextArea
,textarea.tree-node-main-middle-child {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--base-border-color);
    box-sizing: border-box;
    background: var(--base-background);
    color: var(--Primary-100);
    transition: 0.4s ease-in-out;
    resize: none;
    height: 100px;
}

.mddTextArea:disabled
, textarea.tree-node-main-middle-child:disabled {
    cursor: no-drop;
    background-color: var(--Grayscale-30);
    border-color: var(--Grayscale-40);
    color: var(--Grayscale-60);
}

/* TextBox Default Style */
.mddTextBox
, input.tree-node-main-middle-child {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--base-border-color);
    width: 170px;
    box-sizing: border-box;
    background: var(--base-background);
    color: var(--Primary-100);
    transition: 0.4s ease-in-out;
}
.mddTextBox:disabled
, input.tree-node-main-middle-child:disabled {
    cursor: no-drop;
    background-color: var(--Grayscale-30);
    border-color: var(--Grayscale-40);
    color: var(--Grayscale-60);
}
input[type="range"] {
	accent-color:var(--Primary-50);
}

/* TextHtml Default Style */
.mddTextHtml{

}

.dark .mddTextHtml[read-mode="true"] *{
    color: var(--black);
}

/* TreeView Default Style */
.mddTreeView{

}

/* UserObject Default Style */
.mddUserObject{
    
}

/***********************************************field-container****************************************************/
/*
 * field container
 * 
 * 반응형 처리
 * 사이 간격 : 15px 10px; (설명부때문에 상하가 5px 더 넓음)
 */
 .field-container {
    display: grid;
    /*grid-template-columns: repeat(var(--field-column), minmax(var(--field-min-width), 1fr));*/
    grid-template-columns: repeat(var(--field-column), var(--field-min-width));
    gap: var(--field-gap-row) var(--field-gap-column);
    grid-auto-flow: row;
    overflow: hidden;
}
.field-container.row-height-auto{
    --field-height: auto !important;
}
.field-container *{
	box-sizing : border-box;
}
/*
 * 각 필드들의 wrapper
 * 
 * 기본 크기는 170px, 60px 로 고정
 */
.field-container>div {
    display: inline-flex;
    width: 100%;
    height: var(--field-height);
    box-sizing: border-box;
    gap: 10px;
    flex-direction: column;
    /*임시*/
    /*border: 1px solid;
    box-sizing: border-box;*/
}
/*
 * 라벨부와 필드부의 상위 div
 * 
 * 각 필드들의 wrapper 높이가 60px이므로 각각의 높이는 30px씩
 */
/*.field-container>div>div:where(:nth-child(1),:nth-child(2)) {
    height: calc(var(--field-height) / 2);
}*/
/*
 * 라벨부의 상위 div
 * 
 * 좌우 패딩 5px, label 가운데 정렬
 */
.field-container>div>div:first-child {
    padding: 0 5px;
    display: flex;
    align-items: center;
    height: var(--field-height-1);
}
/*
 * 라벨부의 label
 * 
 * font-size는 0.8rem
 */
.field-container>div>div:first-child>label {
    font-size: var(--field-main-label-font-size);
    font-weight: var(--field-main-label-font-weight);
    width: var(--field-main-label-width);
}
/*
 * 필드부의 상위 div
 * 
 * 내용 가운데 정렬 (체크박스, 라디오 버튼 등 가운데 정렬 필요)
 * datepicker를 위해, position : relative 처리
 */
.field-container>div>div:nth-child(2) {
    display: flex;
    align-items: center;
    position : relative;
    height: var(--field-height-2);
    width: 100%;
}
/*
 * 필드부의 text,secret,select, datepicker, textarea
 * 
 * 기본 너비 100%, 기본 높이 100%
 */
.field-container>div>div:nth-child(2) :where(input:not(:where([type='checkbox'],[type='radio'],[type='datetime-local'])),select,div.tui-datepicker-input, textarea) {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
}
[type='datetime-local']{
    box-sizing: border-box;
    padding: 10px;
    width: fit-content;
}
/*
 * 필드부에 여러가지 input이 들어가 있을 경우, 2번째 요소부터 margin-left : 5px;
 */
.field-container>div>div:nth-child(2)>*:not(:first-child) {
    margin-left: var(--field-inner-gap);
    margin-right: var(--field-inner-gap);
}
/*
 * 필드부의 datepicker 안의 calendar input
 * 
 * 기본 너비 100%, 기본 높이 100%
 */
.field-container>div>div:nth-child(2) div.tui-datepicker-input>input[eltype='calendar']{
	width :100%;
	height : 100%;
}
/*
 * 필드부의 datepicker 안의 캘린더 팝업
 * 
 * 위치 이동
 */
.field-container>div>div:nth-child(2) div.tui-datepicker-input+div{
    position: absolute !important;
    top: 30px;
    left: calc(var(--field-inner-gap)*-1);
}
/*
 * 필드부의 textarea
 * 
 * resize : none;
 */
.field-container>div>div:nth-child(2) textarea {
    resize : none;
}
/*
 * 필드부의 label
 * 
 * text-wrap: nowrap;
 */
.field-container>div>div:nth-child(2) label {
    text-wrap: nowrap;
}
/*
 * 필드부의 checkbox, radio 버튼
 * 
 * resize : none;
 */
.field-container>div>div:nth-child(2) :where(input:where([type='checkbox'],[type='radio']))+label {
    display: inline-block;
    position: relative;
    height: 30px;
    line-height: 2;
}
/*
 * 설명부의 상위 div
 *
 * 설명부의 label의 위치 때문에 position : relative, padding : 0 5px;
 */
.field-container>div>div:nth-child(3) {
    position: relative;
    padding: 0 5px;
}
/*
 * 설명부의 label
 *
 * font-size는 10px
 * 필드부로부터 3px 떨어짐
 */
.field-container>div>div:nth-child(3)>label {
    font-size: var(--field-notice-font-size);
    position: absolute;
    top: 3px;
}
/*
 * temp radio
 */
/* .field-container>div>div:nth-child(2)>input[type='radio']+label:before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid;
    border-radius: 20px;
}*/
/*
 * width가 2배인 필드
 */
.field-container>div.col-span-2 {
    grid-column: span 2;
}
/*
 * width가 3배인 필드
 */
.field-container>div.col-span-3 {
    grid-column: span 3;
}
/*
 * width가 4배인 필드
 */
.field-container>div.col-span-4 {
    grid-column: span 4;
}
/*
 * width가 전체인 필드
 */
.field-container>div.col-span-full{
	grid-column: 1 / -1;
}
.field-container>div.col-span-full>div:nth-child(2) {
	/*height: calc(100% - 30px);*/
    width: 100%;
}
/*
 * height가 2배인 필드
 */
.field-container>div.row-span-2 {
    grid-row: span 2;
    height : calc(var(--field-height) * 2 + var(--field-gap-row))
}
.field-container>div.row-span-2>div:nth-child(2) {
    height: calc(100% - var(--field-height-1));
    display: inline-block;
}
/*
 * height가 3배인 필드
 */
.field-container>div.row-span-3 {
    grid-row: span 3;
    height : calc(var(--field-height) * 3 + var(--field-gap-row) * 2);
}
.field-container>div.row-span-3>div:nth-child(2) {
    height: calc(100% - var(--field-height-1));
    display: inline-block;
}
/*
 * height가 4배인 필드
 */
.field-container>div.row-span-4 {
    grid-row: span 4;
    height : calc(var(--field-height) * 4 + var(--field-gap-row) * 3);
}
.field-container>div.row-span-4>div:nth-child(2) {
    height: calc(100% - var(--field-height-1));
    display: inline-block;
}
/************************************************/
.field-container.horizontal>div {
    display: flex;
    flex-direction: row;
}
.field-container.horizontal>div>div:first-child>label {
    text-wrap: nowrap;
    display: inline;
    text-overflow: ellipsis;
    overflow: hidden;
}
.field-container.horizontal>div.row-span-2>div:nth-child(2) {
    height: 100%;
}
.field-container.horizontal>div.row-span-3>div:nth-child(2) {
    height: 100%;
}
.field-container.horizontal>div.row-span-4>div:nth-child(2) {
    height: 100%;
}

.wiz-default-field.field-container{
	--field-gap-column: 0;
    --field-gap-row: 0px;
    --field-border-color : #cdcdcd;
}
.wiz-default-field.horizontal.field-container{
    --field-height-1: 40px;
    --field-height-2: 40px;
    --field-main-label-background : #f4f4f4;
}
.wiz-default-field.field-container>div {
	box-shadow : 0 0 0 0 var(--field-border-color), 0 1px 0 0 var(--field-border-color), 0 1px 0 0 var(--field-border-color), 0 0 0 0 var(--field-border-color) inset, 0 1px 0 0 var(--field-border-color) inset;
    /*box-shadow: 0 -1px 0 0 #cdcdcd, 0 1px 0 0 #cdcdcd inset;*/
}
.wiz-default-field.horizontal.field-container>div>div:first-child {
    background: var(--field-main-label-background);
    margin: 1px 0;
    height: calc(100% - 1px);
}
.wiz-default-field.field-container>div>div:nth-child(2) {
    padding: 5px;
}
/***********************************************field-container end****************************************************/

/* popup start*/
.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff42;
    z-index: 999;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    padding-top: 110px;
    /* backdrop-filter: brightness(0.7); */
}
.popup-container>div {
    background: var(--Primary-0);
    width: 30rem;
    max-width: calc(100% - 3rem);
    height: 15rem;
    max-height: calc(100% - 3rem);
    border-radius: 1.2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0px 18px 8px #00000012;
}
.popup-wrapper.max {
    position: fixed;
    top: 1.5rem !important;
    left: 1.5rem !important;
}
.popup-header {
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.popup-header>h5 {
    width: 100%;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    white-space: nowrap;
}
.popup-header>div {
    min-width: calc(3rem + 8px);
    display: flex;
    justify-content: space-between;
}
.mddTableLayout{
    z-index: 1;
}
.popup-main{
	flex : 1;
	padding: 1rem 2rem;
	overflow : hidden;
}
.popup-main * {
    color: var(--Grayscale-80);
}
.popup-main iframe{
    z-index: 1;
    position: relative;
}
.popup-footer {
    padding: 1rem 2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}
.popup-footer-agree{
    background-color: var(--Primary-50) !important;
    border-color: var(--Primary-50) !important;
    color: var(--white) !important;
}
.popup-footer-agree:hover{
    background-color: var(--Primary-60) !important;
    border-color: var(--Primary-60) !important;
}
.popup-footer-agree:active{
    background-color: var(--Primary-70) !important;
    border-color: var(--Primary-70) !important;
}
.popup-header.danger .popup-header-label{
    color: var(--Danger-50) !important;
}
.popup-header.warning .popup-header-label{
    color: var(--Warning-50) !important;
}
.popup-header.success .popup-header-label{
    color: var(--Success-50) !important;
}
.close-button {
  background: url(./img/close.png) !important;
  background-size: cover !important;
  height: 21px;
  min-width: 21px !important;
  margin: 0 3px;
  border: 0 !important;
  filter: brightness(0.5);
  box-shadow: none !important;
  cursor: pointer;
}
.window-min {
  background: url(./img/window-min.png) !important;
  background-size: cover !important;
  height: 1.5rem;
  min-width: 1.5rem !important;
  margin: 0 3px;
  border: 0 !important;
  filter: brightness(0.5);
  box-shadow: none !important;
  cursor: pointer;
}
.window-max {
  background: url(./img/window-max.png) !important;
  background-size: cover !important;
  height: 1.5rem;
  min-width: 1.5rem !important;
  margin: 0 3px;
  border: 0 !important;
  filter: brightness(0.5);
  box-shadow: none !important;
  cursor: pointer;
}
/* popup end */
select:focus,
textarea:focus,
input:not([type]):focus,
input[type=date]:not(.browser-default):focus,
input[type=datetime-local]:not(.browser-default),
input[type=datetime]:not(.browser-default):focus,
input[type=email]:not(.browser-default):focus,
input[type=number]:not(.browser-default):focus,
input[type=password]:not(.browser-default):focus,
input[type=search]:not(.browser-default):focus,
input[type=tel]:not(.browser-default):focus,
input[type=text]:not(.browser-default):focus,
input[type=time]:not(.browser-default):focus,
input[type=url]:not(.browser-default):focus,
textarea.materialize-textarea:focus {
    outline: none;
}
select:focus:not([readonly]),
textarea:focus:not([readonly]),
input:not([type]):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-color: var(--Primary-50);
    border-width: 2px;
    outline: none;
    /* outline-offset: -0.4rem;
    outline: 2px solid var(--Primary-40); */
}
.datepicker-date-display {
    background-color: var(--Primary-50);
}
select:focus.valid ~ label,
textarea:focus.valid ~ label,
input:not([type]):focus.valid ~ label,
input[type=date]:not(.browser-default):focus.valid ~ label,
input[type=datetime-local]:not(.browser-default):focus.valid ~ label,
input[type=datetime]:not(.browser-default):focus.valid ~ label,
input[type=email]:not(.browser-default):focus.valid ~ label,
input[type=number]:not(.browser-default):focus.valid ~ label,
input[type=password]:not(.browser-default):focus.valid ~ label,
input[type=search]:not(.browser-default):focus.valid ~ label,
input[type=tel]:not(.browser-default):focus.valid ~ label,
input[type=text]:not(.browser-default):focus.valid ~ label,
input[type=time]:not(.browser-default):focus.valid ~ label,
input[type=url]:not(.browser-default):focus.valid ~ label,
textarea.materialize-textarea:focus.valid ~ label {
    color: var(--Success-50);
}
.select-wrapper.valid > input.select-dropdown,
.select-wrapper.valid > input.select-dropdown:focus,
textarea.valid,
textarea.valid:focus,
select.valid,
select.valid:focus,
input.valid:not([type]),
input.valid:not([type]):focus,
input.valid[type=date]:not(.browser-default),
input.valid[type=date]:not(.browser-default):focus,
input.valid[type=datetime-local]:not(.browser-default),
input.valid[type=datetime-local]:not(.browser-default):focus,
input.valid[type=datetime]:not(.browser-default),
input.valid[type=datetime]:not(.browser-default):focus,
input.valid[type=email]:not(.browser-default),
input.valid[type=email]:not(.browser-default):focus,
input.valid[type=number]:not(.browser-default),
input.valid[type=number]:not(.browser-default):focus,
input.valid[type=password]:not(.browser-default),
input.valid[type=password]:not(.browser-default):focus,
input.valid[type=search]:not(.browser-default),
input.valid[type=search]:not(.browser-default):focus,
input.valid[type=tel]:not(.browser-default),
input.valid[type=tel]:not(.browser-default):focus,
input.valid[type=text]:not(.browser-default),
input.valid[type=text]:not(.browser-default):focus,
input.valid[type=time]:not(.browser-default),
input.valid[type=time]:not(.browser-default):focus,
input.valid[type=url]:not(.browser-default),
input.valid[type=url]:not(.browser-default):focus,
textarea.materialize-textarea.valid,
textarea.materialize-textarea.valid:focus {
    border-color: var(--Success-50);
    background: var(--Success-10);
    border-width: 2px;
    outline: none;
    /* outline-offset: -0.4rem;
    outline: 2px solid var(--Success-40); */
    z-index: 1;
}
.select-wrapper.invalid > input.select-dropdown,
.select-wrapper.invalid > input.select-dropdown:focus,
textarea.invalid,
textarea.invalid:focus,
select.invalid,
select.invalid:focus,
input.invalid:not([type]),
input.invalid:not([type]):focus,
input.invalid[type=date]:not(.browser-default),
input.invalid[type=date]:not(.browser-default):focus,
input.invalid[type=datetime-local]:not(.browser-default),
input.invalid[type=datetime-local]:not(.browser-default):focus,
input.invalid[type=datetime]:not(.browser-default),
input.invalid[type=datetime]:not(.browser-default):focus,
input.invalid[type=email]:not(.browser-default),
input.invalid[type=email]:not(.browser-default):focus,
input.invalid[type=number]:not(.browser-default),
input.invalid[type=number]:not(.browser-default):focus,
input.invalid[type=password]:not(.browser-default),
input.invalid[type=password]:not(.browser-default):focus,
input.invalid[type=search]:not(.browser-default),
input.invalid[type=search]:not(.browser-default):focus,
input.invalid[type=tel]:not(.browser-default),
input.invalid[type=tel]:not(.browser-default):focus,
input.invalid[type=text]:not(.browser-default),
input.invalid[type=text]:not(.browser-default):focus,
input.invalid[type=time]:not(.browser-default),
input.invalid[type=time]:not(.browser-default):focus,
input.invalid[type=url]:not(.browser-default),
input.invalid[type=url]:not(.browser-default):focus,
textarea.materialize-textarea.invalid,
textarea.materialize-textarea.invalid:focus {
    border: 1px solid var(--Danger-50);
    background: var(--Danger-10);
    border-width: 2px;
    outline: none;
    /* outline-offset: -0.4rem;
    outline: 2px solid var(--Danger-40); */
    z-index: 1;
}
label.required::before {
    content: '*';
    color: red;
}
/* materialize */
input[type='checkbox']:has(+.lever){
    display: none;
}
.material-icons {
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: 'liga';
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
.lever {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
}
.switch label .lever {
    content: "";
    display: inline-block;
    position: relative;
    width: 36px;
    height: 14px;
    background-color: rgba(0, 0, 0, 0.38);
    border-radius: 15px;
    margin-right: 10px;
    -webkit-transition: background 0.3s ease;
    transition: background 0.3s ease;
    vertical-align: middle;
    margin: 0 16px;
}
.switch label .lever:before, .switch label .lever:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    left: 0;
    top: -3px;
    -webkit-transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
    transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
}
.switch label .lever:before {
    content: 'language';
    background-color: rgba(38, 166, 154, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
input[type=checkbox]:not(:disabled) ~ .lever:active:before, input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    background-color: rgba(0, 0, 0, 0.08);
}
.switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after {
    left: 18px;
}
/* materialize */

div#visiablestop {
    overflow: hidden;
    position: relative;
}
div#visiablestop::before {
    content: '';
    width: 100%;
    height: 4px;
    background: #c6c6c6;
    position: fixed;
}

div#visiablestop::after {
    content: '';
    width: 20%;
    position: fixed;
    height: 4px;
    border-radius: 15px;
    left: 0%;
    top: 0;
    background: #001dff;
    z-index: 1;
    transition: all .35s;
    animation: loadingltoR 2.5s cubic-bezier(0.32, 0.47, 0.54, 0.85) normal infinite;
}
#prcess_Loading{
    display: none;
}

td.icon-del::after{
    /* content: 'delete';
    font-family: 'Material Icons' !important;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #424242;
    pointer-events: none;
    cursor: pointer; */
}
td.icon-del > img{
    content:url('../js/del-btn.svg');
    object-fit: contain;
    position: relative;
}
.file-box{
    /* display: inline-flex; */
    align-items: center;
    gap: 10px;
    width: 100%;
}
.file-box img{
    max-width: 100%;
    object-fit: contain;
}
.file-box > .mddFileButton{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
    padding: 3rem;
    border-radius: 12px;
    border: 0.1rem dashed var(--Grayscale-40);
    background-color: var(--Grayscale-10);
}
.file-box > .mddFileButton.dragover {
    border: 0.1rem dashed var(--Primary-40);
    background: var(--Primary-10);
}
.file-box > .mddFileButton > p{
    font-size: 1.6rem;
    text-align: center;
}
.file-box > .mddFileButton > label {
    border: 1px solid var(--Primary-50);
    border-radius: 4px;
    background-color: var(--Primary-50);
    color: var(--white);
    cursor: pointer;
    min-width: 4.5rem;
    padding: 0 1rem;
    height: var(--search-input-hight);
    display: flex;
    align-items: center;
    justify-content: center;
}
.file-upload-result .upload-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    margin-top: 1rem;
}
.file-upload-result .upload-top .file-total {
    flex: 1;
    font-weight: 700;
}
.file-upload-result input[type="button"]{
    color: inherit;
    border: 0;
    background-color: inherit;
}
.file-upload-result .upload-list {
    display: flex;
    align-items: normal;
    justify-content: flex-start;
    flex-direction: column;
    gap: 1.6rem;
}
.file-upload-result .upload-list .in {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: 1.6rem;
}
.file-upload-result .upload-list > li {
    padding: 1.2rem 1.6rem;
    border-radius: .6rem;
    border: 0.1rem solid var(--Grayscale-30);
}
.file-upload-result .upload-list .in .file-name {
    flex: 1;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.top-file-box{
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
}
.top-file-box .file-upload-result .upload-list{
    margin: 0;
    gap: 5px;
    margin-bottom: 20px; 
}
.top-file-box .file-upload-result .file-total{
    display: none;
}
.top-file-box .file-upload-result .upload-top{
    margin-top: 0;
}
.upload-list .file-btn input[type="button"]{
    cursor: pointer;
}
.upload-list .file-btn input[type="button"][value="삭제"]{
    background: var(--white);
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 2px 0px 6px #0000001a;
}
.file-upload-result input[type="button"][value="전체파일 삭제"]{
    background: var(--Secondary-5);
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 4px;
}

.super-search-tab[eltype='tab']>ul>li{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    overflow: hidden;
    width: fit-content !important;
    padding: 5px 25px 5px 25px !important;
    border: 1px solid var(--base-border-color);
    color: var(--Primary-100);
    font-size: 14px;
    border-radius: 0px !important;
    box-sizing: border-box;
    cursor: pointer;
    /* border: unset !important; */
    border-bottom: unset !important;
}
.super-search-tab ul>li:hover {
    background: var(--white) !important;
}
.super-search-tab ul>li{
    background: var(--white) !important;
}
.super-search-tab ul>li.on {
    /* background: var(--white) !important; */
    color: var(--white) !important;
    border-bottom: unset !important;
    background: var(--Information-40) !important;
}
@keyframes loadingltoR {
    0%{
        left:-30%;
        width: 20%;
    }
    30%{
        width: 40%;
    }
    100%{
        width: 20%;
        left:100%;
    }
}
@media (max-width: 900px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.85rem;
        line-height: 110%;
        margin: 2.3733333333rem 0 1.424rem 0;
      }
      
      h3 {
        font-size: 1.72rem;
        line-height: 110%;
        margin: 1.9466666667rem 0 1.168rem 0;
      }
      
      h4 {
        font-size: 1.0rem;
        line-height: 110%;
        margin: 1.52rem 0 0.912rem 0;
      }
      
      h5 {
        font-size: 1.14rem;
        line-height: 110%;
        text-align: left;
        /* margin: 1.0933333333rem 0 1.0933333333rem 0; */
      }
      
      h6 {
        /* font-size: 1.15rem;
        line-height: 110%;
        margin: 0.7666666667rem 0 0.46rem 0; */
        font-size: 1.05rem;
        line-height: 110%;
        margin: 0.2rem 0;
      }
      .popup-container{
        padding-top: 80px;
      }
      .popup-container>div {
        max-height: calc(100% - 15rem);
      }
      .btn-grp-wrap{
        top: 65px;
      }
      .mob-col {
          grid-template-columns: repeat(1, 1fr);
          flex-direction: column !important;
      }
}