@charset "utf-8";
:root{
    --color-nt-green:#dbeddb; 
    --color-nt-red:#ffe2dd; 
    --color-nt-yellow:#fdecc8; 
    --color-nt-orange:#fadec9; 
    --color-nt-blue:#d3e5ef; 
    --color-nt-purple:#e8deee; 

    --color-prim : #2eaadc;
   
    --color-border-lightgray:#ededec; 
    --color-text-gray:#404040; 
    --color-gray-palette1:#f9f9f8; 
    --color-gray-palette2:#ababab; 
    --color-gray-palette3:#c1c1c1; 

}

.flex{
    display: flex;
    align-items: center;
    height: inherit;
}
.flex.row{
    flex-direction: column;
}
.inline-block{
    display:inline-block;
}
.space-between{
    justify-content: space-between;
}
.space-around{
    justify-content: space-around;
}
.staet{
    justify-content: start;
}
.end{
    justify-content: end;
}
.center{
    justify-content: center;
}
.align-top{
    align-items: flex-start;
}
.align-end{
    align-items: flex-end;
}
h1{
    font-size: 2rem;
    margin-bottom: 2.5rem;
}
h3{
    font-size: 1.4rem;
}
h5{
    font-size: 1.0rem;
}
.mt-1{
    margin-top: .5rem;
}
.mt-4{
    margin-top: 2.5rem;
}
.mb-1{
    margin-bottom: .5rem;
}
.mb-4{
    margin-bottom: 2.5rem;
}
.mb-10{
    margin-bottom: 10rem !important;
}
.ml-1{
    margin-left: .5rem;
}
.ml-4{
    margin-left: 2.5rem;
}
.mr-1{
    margin-right: .5rem;
}
.mr-4{
    margin-right: 2.5rem;
}
.pl-1{
    padding-left: .5rem !important;
}
.pl-4{
    padding-left: 2.5rem !important;
}
.pr-1{
    padding-right: .5rem !important;
}
.pr-4{
    padding-right: 2.5rem !important;
}
.mg-0{
    margin: 0 !important;
}

.w20{
    width:17% !important;
    min-width: 150px;
    margin-left: 2.5rem;
    vertical-align: top;
}
.w30{
    width:28% !important;
    vertical-align: top;
}
.w40{
    width:38% !important;
    vertical-align: top;
}
.w50{
    width:48% !important;
    vertical-align: top;
}
.w60{
    width:58% !important;
    vertical-align: top;
}
.w70{
    width:68% !important;
    vertical-align: top;
}
.w100{
    width:100% !important;
    vertical-align: top;
}
.four-col{
    width: 23%;
    display: inline-block;
    min-width: 150px;
    margin: 10px 1%;
    vertical-align: top;
}
.text-right{
    text-align: right;
}
.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.bold{
    font-weight: 900 !important;
}
.medium{
    font-weight: 500 !important;
}
.thin{
    font-weight: 100 !important;
}
.sm-text{
    font-size: 1.4rem !important;
    color: var(--color-text-gray);
}
.line{
    width: 100%;
    border: 1px solid var(--color-border-lightgray);
    margin: 1.8rem 0;
}
.line-bottom{
    width: 100%;
    border:none;
    border-bottom: 2px solid var(--color-gray-palette2);
    margin: 1.8rem 0 1rem;
    padding:5px 1px;
}
.card.no-line{
    border: none;
    box-shadow: none;
}
.card{
    font-size: 1.4rem;
    border:1px solid #ddd;
    box-shadow: 0 0 0 0 gray;
    border-radius: 10px;
    padding:15px 20px;
    display: inline-block;
    margin: 0 .9% 35px ;
    width: calc(100% - 40px);
    position: relative;
}
.card-head{
    font-size:1.54rem;
    font-weight: 900;
    padding-bottom:10px;
    border-bottom:1px solid #ddd;
}
.card-head p{
    font-size: 1.3rem;
    font-weight: 400;
}
.card-body{
    padding-top:10px;
}

.form-box .form-input{
    width: 100%;
    margin-bottom: 10px;
    min-height: 75px;
}
.form-box .form-input label{
    display: block;
    font-weight: 900;
    position: relative;
}
.form-input input,
.form-input textarea,
.form-input select,
.form-input .fileInput{
    box-shadow: none;
    margin-top: 5px;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border-lightgray);
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
}
.form-input .filebox{
    position: relative;
}
.form-input .filebox input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}
.form-input .filebox label {
    position: absolute;
    top: 5px;
    right: 0px;
    display: inline-block;
    padding: 8px 20px;
    color: #fff;
    vertical-align: middle;
    background-color: #999999;
    cursor: pointer;    
    border-radius: 0 5px 5px 0;
}
.form-input .flat-radio{
    padding-top:15px ;
    width: 100%;
    position: relative;
} 
.form-input .flat-radio input[type="radio"]{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip:rect(0,0,0,0);
  border: 0;
}

.form-input .flat-radio input[type="radio"] + label {
    display: inline-block;
    position: relative;
    top: 1px;
    width: 100px;
    padding-left: 35px;
    cursor: pointer;
    font-weight: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  .form-input .flat-radio input[type="radio"] + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 21px;
    height: 21px;
    text-align: center;
    background: #fff;
    border: 1px solid #cacece;
    border-radius: 100%;
  }
  .form-input .flat-radio input[type="radio"] + label:active:before,
  .form-input .flat-radio input[type="radio"]:checked + label:active:before  {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
  }
  .form-input .flat-radio input[type="radio"]:checked + label:before {
    background: #fff;
    border-color: #adb8c0;
  }

  .form-input .flat-radio input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 5px;
    width: 13px;
    height: 13px;
    background: #076ba5;
    border-radius: 100%;
  }

.form-input.required > label::after{
    content: "\2217";
    margin-left: 2px;
    position: absolute;
    top: -7px;
    color: #a30404;
}    

.form-input textarea:focus, .form-input input:focus ,.form-input select:focus{
    border-color: var(--color-gray-palette3);
    box-shadow: 2px 1px 6px -3px var(--color-gray-palette1);
}
.form-input select option{
    white-space: normal;
    min-height: 1.5rem;
    padding: 2px;
}
.form-input .fileInput{
    text-align: center;
    background-color: var(--color-border-lightgray);
    font-weight: 600;
}
.form-box .form-input textarea{
    resize: vertical;
    min-height: 85px;

}
.form-box .form-input .err{
    border:1px solid #ff0000;
}
.form-box .form-input .err + .err_txt{
    text-align: right;
    font-size: 1.2rem;
    color: #ff0000;
}

.form-box .form-input .err + .err_txt{
    text-align: right;
    font-size: 1.2rem;
    color: #ff0000;
}
.form-box .form-input .button_input .err + .err_txt{
    position: absolute;
    top: 40px;
    right: 0;
}
.form-box .form-input .button_input input{
    margin-top: 0;
}
.form-box .button_input{
    display: flex;
    position: relative;
    padding: 0;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 30px;

}
.form-box .button_input button{
    width: 40px;
    background: var(--color-nt-red);
    color: #000;
    padding: 10px;
    font-weight: 900;
    border-radius: 5px;
}

.toggleSwitch {
    width: 65px;
    height: 30px;
    display: block;
    position: relative;
    border-radius: 30px;
    background: #f03d3d;
    cursor: pointer;
}
  
.toggleSwitch .toggleButton {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #fff;
}
.toggleSwitch.active {
    background: #94e394;
}
  
.toggleSwitch.active .toggleButton {
    left: calc(100% - 24px);
    background: #fff;
}

.toggleSwitch, .toggleButton {
    transition: all 0.2s ease-in;
}
  

.tag_array li{
    display: flex;
    justify-content: space-evenly;
}
.tag_array li input{
    width:35px;
    background: transparent;
    border:none;
    font-weight: 900;
    border-bottom: 1px solid;
    text-align: right;
    padding: 0 5px;
    margin: 0 .8rem;
}

.tag_array li i{
    margin: 0;
}

.button.warnning{
    color: #ff0000;
    background-color: var(--color-nt-red);
}
.button.sm {
    font-size: 1.2rem;
    font-weight: 400;
    border-radius: 5px;
    width: auto;
    min-width: fit-content;
    padding: 4px 10px;
    display: inline-block;
}
.button.mid{
    min-width: 100px;
    padding: 6px 10px;
}
.nt-red{
    color: var(--color-text-gray) !important;
    background-color: var(--color-nt-red) !important;
}
.nt-green{
    color: var(--color-text-gray) !important;
    background-color: var(--color-nt-green) !important;
}
.nt-blue{
    color: var(--color-text-gray)!important;
    background-color: var(--color-nt-blue)!important;
}
.nt-orange{
    color: var(--color-text-gray)!important;
    background-color: var(--color-nt-orange)!important;
}
.nt-yellow{
    color: var(--color-text-gray)!important;
    background-color: var(--color-nt-yellow)!important;
}
.nt-purple{
    color: var(--color-text-gray)!important;
    background-color: var(--color-nt-purple)!important;
}
.button{
    min-width: 120px;
    width: fit-content;
    color:#fff;
    background: var(--color-prim);
    text-align: center;
    padding: 8px 10px;
    font-weight: 900;
    border-radius: 5px;
}
.button i{
    margin-right: 1rem;
    font-size: 1.5rem;
}
.hidden{
    display: none;
}
.button.disable{
    background-color: var(--color-gray-palette3);
    color:var(--color-gray-palette2); 
}
.button.secondary{
    background-color: var(--color-gray-palette1);
    color: var(--color-text-gray);
    box-shadow: 0 0 0 1px var(--color-gray-palette3) inset;

}
.card .pre_text{
    background-color: #ddd;
    color: #aaa;
    font-size: 2rem;
    text-align: center;
    padding: 7rem 1rem;
    border-radius: 25px;
    border: 2px dashed #aaa;
}
.card .pre_text span{
    font-size: 1.1rem;
    color:#666;
}
.card .text{
    width: 55%;
}
.text_line{
    width: 100%;
}

table{
    width: 100%;
    font-size: 1.4rem;
    border-spacing: 0; 
    border-collapse: collapse
}
table thead {
    border-top: 1px solid var(--color-border-lightgray);
}
table thead tr,
table tbody tr{
    height: 34px;
    border-bottom: 1px solid var(--color-border-lightgray);
}
table thead tr.disable,
table tbody tr.disable,
table tbody tr.disable td,
table tbody tr.disable td a{
    color: var(--color-gray-palette2) !important;
}
table td{
    padding: 1rem;
    border-left: 1px solid var(--color-border-lightgray);
    word-break: break-all;
}
table td a{
    color: var(--color-text-gray);
}


table td:first-child{
    border: none;
}

/*modal*/
.modal{
    width:100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    z-index:-1;
    top:0;
    opacity: 0;

    transition: all .5s;
}
.modal.show {
    opacity: 1;
    z-index: 9999;
    transition: all .5s;
}

.modal-bg{
    width: 100%;
    height: 100%;
    background: #00000094;
    position: fixed;
    transition: all 1s;
}

.modal .modal-body{
    width:43%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width:150px;
    min-height:250px;
    border-radius: 15px;
    font-size: 1.4rem;
    line-height: 2.4rem;
    padding:3rem;    
    display: none;
    transition: all 1s;
    color: var(--color-text-gray);
}


.modal.images_Pop .modal-body{
    width: 70%;
    background: transparent;
}

.modal.show .modal-body{
    display: block;
    transition: all 1s;
}
.modal-body .modal-title{
    font-weight:900 ;
    margin-bottom: 1.5rem;
    height:35px;
    font-size: 1.8rem;    
    border-bottom: 1px solid var(--color-text-gray);
}
.modal-body .floating{    
    position: absolute;
    bottom: 20px;
    right: 50px;
}
.modal-body .floating button{
    color: #fff;
}
.modal-body .modal-title .close{
    background: none;
    border: none;
    font-size: 2rem;
    width: 50px;   
    text-align: right;
    padding-bottom: 1.5rem;
}

.modal .modal-body .modal-con{
    width: 100%;
    height: 100%;    
}
.modal .modal-body .modal-con.flex{
    align-items: flex-start;
}
.modal .modal-body .modal-con.flex .modal-bottom{
    margin-left: 20px;
    height: auto    ;
}
.modal .modal-body .modal-bottom{
    height: 35px;
}
.modal .modal-body .modal-bottom .button{
    width: 100%;
    margin: 5px 0;
}
.modal .modal-body .modal-bottom .pop-info{
    border-bottom: 1px solid var(--color-border-lightgray);
    padding: 10px 0;
    margin-bottom: 10px;
    font-size: 1.3rem;    
    line-height: 1.8rem;
}

#QRPop, .modal{
    width: 100%;
    height: 100%;
    background: #00000094;
    position: fixed;
    transition: all 1s;
}
.QRPop .modal-body{
    width: max-content;
    background-color: transparent;
    padding: 0;
}
/*페이징*/

#navigation span:first-child a{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
#navigation span:last-child a{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
#navigation a { display: inline-block; padding: 5px 10px; border: 1px solid var(--color-gray-palette2); background: var(--color-gray-palette1); color: var(--color-text-gray);}
#navigation a.on { border: 1px solid var(--color-prim); background: var(--color-prim);color: #fff; }
/*검색 폼*/

.search-form > div{
    height: 26px;
}
.search-form select{
padding: 3px 1px;
margin-right: 3px;
height: 100%;
}
.search-form .search-input{
    border: 1px solid rgb(114, 114, 114);
    border-radius: 3px;
    margin: 0 5px;
    padding-left:2px ;
    width: 190px;
    display: flex;
    justify-content: space-between;
}
.search-form .search-input .button{
    border-radius: 0;
    margin-left: 2px;
}
.search-form .search-input .button i{
    margin-right: 0;
}
.search-form .search-input input{
    border: none;
    width: 80%;
}

@media all and (max-width:1024px) {
    .modal .modal-body{
        width: 70%;
        padding: 2.5rem;
    }
    h3{
        font-size: 1.4rem;
    }
    p{
        font-size: 1.2rem;
    }
    .w50{
        width: 78% !important;
    }
    .four-col{
        width: 32%;
        display: inline-block;
        min-width: 150px;
        margin: 10px 1%;
        vertical-align: top;
    }
}
@media all and (max-width:479px) {
    h3{
        font-size: 1.2rem;
    }
    p{
        font-size: 1.0rem;
    }

    .modal .modal-body{
        width: 90%;
        padding: 1.5rem;
    }
}

@media all and (max-width:758px) {
    .w50{
        width: 100% !important;
    }
    .four-col{
        width: 48%;
        display: inline-block;
        min-width: 150px;
        margin: 10px 1%;
        vertical-align: top;
    }
}
@media all and (max-width:520px) {
}