/* font */
@font-face {
	font-family: 'NanumSquareRound';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

html body {font-size: 1rem; font-family: 'NanumSquareRound';}

.wrapper {display: flex; justify-content: center; align-items: center; height: 100vh;}

/* login-body */
.login-wrap {width: 430px;}
.logo img {width: 200px;}
.login-body {margin-top: 3rem;}
.form-wrap {margin-top: 1.6rem; color: #adadad; }
.input-group {position:relative; height: 47px; font-size: 0.9rem; color: #000; margin-right: 2rem;}
.input-group  input { box-sizing: border-box; width: 100%; height: 100%; outline: none; border: 1px solid #ddd; background-color: #f4f4f4; border-radius: 4px; padding: 0 0.5rem;}
.input-group  label {position:absolute; left: 0%; bottom: 0; width:100%; height:100%; text-align:left; pointer-events:none;}
.input-group  label span {position:absolute; left: 0.5rem; bottom: 4px; transition:all 0.3s; color: #adadad;}
.input-group  input:focus + label span, .input-group  input:valid + label span {transform:translateY(-180%); font-size: 0.85rem; font-weight: bold; color:#354781;}

#displaynone {display: none !important;}

/* footer */
.footer {padding: 0 2rem;}
.custom-control {margin-top: 1rem;}
.find {color: #666666; margin-top:1rem;}
.line3 {color: #ccc; margin: 0 1.5rem;}

/* button */
.btn-login {border: 3px solid #354781; background-color: #354781; color: #fff; border-radius: 8px; padding: 0.3rem 1.5rem; width: 100%; padding: 0.9rem ; font-size: 1rem; margin-top: 1rem; box-shadow: 0px 3px 8px 3px rgba(128, 132, 173, 0.557);}
.btn-login:hover {background-color: #394a80; color: #fff;}

/* checkbox */
.custom-control-label {padding-top: 0.15rem;}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {background-color: #354781; border: none;}
.custom-control-label::before {background-color:#eeeeee;}
.custom-control {padding-left: 1.5rem;}

/* checkbox2 */
.cbx {cursor: pointer; overflow: hidden; transition: all 0.5s; margin-bottom: 0rem !important;}
.cbx span {float: left; padding-left: 0.3rem; min-width: 1rem;}
.cbx span:first-child {position: relative; width: 18px; height: 18px; border-radius: 3px; transform: scale(1); border: 1px solid #9F9F9F; transition: all 0.2s;}
.cbx span:first-child svg {position: absolute; top: 1px; left: 1px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15px; stroke-dashoffset: 15px; transition: all 0.2s; transition-delay: 0.1s; transform: translate3d(0, 0, 0);}
.inp-cbx {position: absolute; visibility: hidden;}
.inp-cbx:checked + .cbx {background-color: #ffffff;}
.inp-cbx + .cbx {background-color: #ffffff;}
.inp-cbx:checked + .cbx span:first-child {background: #354781; border-color: #354781; animation-name: wave; box-shadow: 1px 3px 3px rgba(168, 173, 184, 0.541);}
.inp-cbx + .cbx span:first-child {background: #e9e9e9; border-color: #a1a1a1; animation-name: wave;}
.inp-cbx:checked + .cbx span {color: #000000; font-weight: bold;}
.inp-cbx + .cbx span {color: #a1a1a1; /* font-weight: bold; */}
.inp-cbx:checked + .cbx span:first-child svg {stroke-dashoffset: 0;}
.inline-svg {position: absolute; width: 0; height: 0; pointer-events: none; user-select: none;}
@keyframes wave {50% {transform: scale(0.9);}}

/* swal 창 */
.swal-modal {width: 330px; border-radius: 10px;}
.swal-title {font-size: 1.1rem;}
.swal-footer {text-align: center; padding-bottom: 2rem;}
.swal-button--confirm {background-color: #1e40af; color: #fff; font-weight: bold; width: 5rem; font-size: 0.85rem; padding: 0.5rem;}
.swal-button--confirm:hover {background-color: #3453b7 !important; color: #fff !important;  transition: all 0.3s;}
.swal-button--cancel {border: 1px solid #dae1eb; background-color: #fff; color: #77859a; font-weight: bold; width: 5rem; font-size: 0.85rem; padding: 0.5rem;}
.swal-button--cancel:hover {background-color: #f9fafc !important; color: #64748b !important; transition: all 0.3s;}