@charset "utf-8";
/*
 * @ RESET CSS
 * -------------------------------
 */
html, body, div, p, span, strong, b, em, iframe, pre,
h1, h2, h3, h4, h5, h6,
img, dl, dt, dd,
fieldset, form, legend, label,
table, caption, thead, tbody, tfoot, tr, th, td,
ul, ol, li, a, input, select, textarea {margin: 0;padding: 0; border: 0 none; outline: none; }

body {font-family: MalgunGothic, '맑은 고딕','돋움', Dotum, AppleGothic, Sans-serif, Arial; line-height: 1;color: #333;}

ul, ol, li {list-style: none;}
em, address {font-style: normal;}
img {border: 0 none; font-size: 0;line-height: 0;}
sup {position: relative;top: 2px;font-size: 11px;line-height: 100%;}

table {border-collapse: collapse; border-spacing:0; }
caption {overflow: hidden;width: 0;height: 0;font-size: 0; line-height: 0;}
th, td { vertical-align: middle;/* white-space: nowrap */}

a {color: #333; text-decoration: none; line-height: 1;}
a:hover, a:focus, a:active {text-decoration: underline;}
a:visited {color: #333;}
*, html {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
*, *:before, *:after {box-sizing: border-box;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

button { background-color: unset; border: none;}

html {
    font-size: 62.5%;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    -ms-content-zooming: none;
    -ms-touch-action: pan-x pan-y;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-use-select: none;
    user-select: none;
}

form {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

table {
    table-layout: fixed;
    width: 100%;
    th, td {
        font-size: 1.2rem;
        font-weight: 500;
        text-align: center;
    }
}

.show {display: unset !important;}
.hide {display: none !important;}

.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }

#container {
    width: 100%;
    height: 100%;
}

.form-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    border: .1rem solid #000000;
    border-radius: .5rem;
    padding: 0 2rem;
}
.form-input p {
    width: 8rem;
    font-size: 1.2rem;
    color: #000000;
}
.form-input input {
    width: 16rem;
    height: 4rem;
}
.form-login-button {
    width: 100%;
    height: 4rem;
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 0 0 .5rem .5rem;
}
.form-input:hover, .form-input:active {
    box-shadow: 0 0 1rem 0 #007cff;
}
.form-input:hover p, .form-input:active p {
    font-weight: bold;
    color: #007cff;;
}

.datepicker {
    left: 0 !important;
    top: 0 !important;
}
.datepicker .datepicker-header {
    width: 100vw;
}
.datepicker .datepicker-main {
    width: 100vw;
    height: 100vh;
}
.datepicker .datepicker-main .datepicker-view {
    width: 100%;
    height: 100%;
}
.datepicker .datepicker-main .datepicker-grid .datepicker-cell {
    height: 9.25rem !important;
}
.datepicker-header .datepicker-controls .button {
    height: 10rem !important;
}
.datepicker-controls .button {
    font-size: 3rem !important;
}
.datepicker .datepicker-main .datepicker-grid .datepicker-cell.month, .datepicker-cell.year {
    font-size: 3rem !important;
}


#global-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
#global-loading.show {
    display: flex !important;
}
#global-loading .loading-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.74);
    z-index: 1001;
}

.lds-default,
.lds-default div {
    z-index: 1002;
    box-sizing: border-box;
}
.lds-default {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-default div {
    position: absolute;
    width: 6.4px;
    height: 6.4px;
    background: #FFFFFF;
    border-radius: 50%;
    animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
    animation-delay: 0s;
    top: 36.8px;
    left: 66.24px;
}
.lds-default div:nth-child(2) {
    animation-delay: -0.1s;
    top: 22.08px;
    left: 62.29579px;
}
.lds-default div:nth-child(3) {
    animation-delay: -0.2s;
    top: 11.30421px;
    left: 51.52px;
}
.lds-default div:nth-child(4) {
    animation-delay: -0.3s;
    top: 7.36px;
    left: 36.8px;
}
.lds-default div:nth-child(5) {
    animation-delay: -0.4s;
    top: 11.30421px;
    left: 22.08px;
}
.lds-default div:nth-child(6) {
    animation-delay: -0.5s;
    top: 22.08px;
    left: 11.30421px;
}
.lds-default div:nth-child(7) {
    animation-delay: -0.6s;
    top: 36.8px;
    left: 7.36px;
}
.lds-default div:nth-child(8) {
    animation-delay: -0.7s;
    top: 51.52px;
    left: 11.30421px;
}
.lds-default div:nth-child(9) {
    animation-delay: -0.8s;
    top: 62.29579px;
    left: 22.08px;
}
.lds-default div:nth-child(10) {
    animation-delay: -0.9s;
    top: 66.24px;
    left: 36.8px;
}
.lds-default div:nth-child(11) {
    animation-delay: -1s;
    top: 62.29579px;
    left: 51.52px;
}
.lds-default div:nth-child(12) {
    animation-delay: -1.1s;
    top: 51.52px;
    left: 62.29579px;
}
@keyframes lds-default {
    0%, 20%, 80%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}