/* 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;
}

@font-face {
	font-family: 'SBAggroM';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

html body {font-size: 1rem; font-family: 'NanumSquareRound'; background-color: #e9fcf6;}

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

/* login-body */
.login-wrapper {background-color: #47b386; padding: 1rem; border-radius: 40px; box-shadow: 1px 2px 3px 4px rgba(186, 214, 199, 0.38);}
/* .square {width: 570px; background-color: #2c966a; height: 3rem; position: absolute; left: -20px; bottom: -47px; border-radius: 10px; box-shadow: 1px 2px 2px 2px rgba(109, 163, 134, 0.404);} */
.login-wrap {width: 430px; border-radius: 30px; padding: 2rem 1rem; box-shadow: 2px 4px 8px 1px rgb(78 78 78 / 42%); background-color: #fff;}
.logo img {width: 180px;}
.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:#47b386;}


/* 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 #47b386; background-color: #47b386; 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(121, 177, 131, 0.557);}
.btn-login:hover {background-color: #42ad81; color: #fff;}

.btn-register {border: 3px solid #47b386; background-color: #ffffff; color: #47b386; 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(121, 177, 131, 0.557); font-weight: bold;}
.btn-register:hover {background-color: #ffffff; color: #42ad81;}

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

.errorbox {color: red;}

/* 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: #47b386; border-color: #47b386; animation-name: wave; box-shadow: 1px 3px 3px rgba(168, 184, 175, 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);}}

/* foot */
.foot li {position: absolute; font-family: 'SBAggroM'; font-size: 0.85rem; color: #757575; bottom: 4px; max-height: 16px;}
.foot li:nth-child(1) {left: 1rem;}
.foot li:nth-child(2) {right: 1rem;}

/* 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: #47b386; color: #fff; font-weight: bold; width: 5rem; font-size: 0.85rem; padding: 0.5rem;}
.swal-button--confirm:hover {background-color: #40a87d !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;}