body{ margin:0; color:#6a6f8c; background:#c8c8c8; font:600 16px/18px 'Open Sans',sans-serif;}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}
.login_wrap {width:100vw;height:100vh;display: flex;align-items: center;position:relative;}
.login_wrap:before {
	content:"";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	bottom:0;
	right:0;
	background: url(/img/cmn/login_bg.jpg) no-repeat left bottom / 100%;
	filter: blur(5px);
	-webkit-filter: blur(5px);
	opacity:.2;
}
.login-wrap{ width:100%; margin:auto; max-width:1004px; min-height:670px; position:relative;}
.login-html { width:100%; height:100%; position:absolute; padding:0;}
.visual-wrap {width:50%;height:100%;background:#546fff;position:relative;}
.visual-wrap:before {content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:url(/img/cmn/login_bg.jpg) no-repeat 0 0;background-size:cover;opacity:.6;}
.visual-wrap .brand-image {width:10rem;position:absolute;top:2rem;left:2rem;}
.visual-wrap .brand-image img {width:100%;}
.login-html .sign-in-htm,
.login-html .sign-up-htm{top:0;left:0;right:0;bottom:0;position:absolute;transform:rotateY(180deg);backface-visibility:hidden;transition:all .4s linear;box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);min-height:450px;}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{ display:none;}
.login-html .sign-in-htm {display:flex;justify-content:stretch;flex-flow:row nowrap;flex:1 1 100%;height:100%;}
.login-html .form-wrap {width:50%;padding:10rem 3rem 3rem;background:#fff;;}
.login-html .hr {margin-top:3rem;}
.login-html .sign-up-htm {height:calc(100% + 5rem);padding: 4.5rem 1.5rem 2rem;background:#fff;display:flex;justify-content:space-between;flex-flow: row wrap;gap:1rem;}
.login-html .sign-up-htm .group {flex:1 1 calc(50% - 1rem);padding:0;position: relative;margin: 0;}
.login-html .sign-up-htm  .group .input,
.login-html .sign-up-htm  .group .select,
.login-html .sign-up-htm .group .button {border-radius:0;}
.login-html .sign-up-htm .full {flex:1 1 100%;}
.login-html .sign-up-htm .group .group {display:flex;padding:0;margin:0;}
.login-html .sign-up-htm .group .group input {flex:1;}
.login-html .sign-up-htm .group .group .btn-idcheck {background: #6a6f8c;color:#fff;border:none;font-size:15px;padding:15px;}
.login-html .sign-up-htm .group .feedback {margin-top:.2rem;}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{ text-transform:uppercase;}
.login-html .tab{ font-size:16px; margin-right:15px; padding:10px 0; margin: 0; display:inline-block; border-bottom:2px solid transparent;}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{ color:#546fff; border-color:#546fff;}
.login-html .tab.login {position:absolute;top:1rem;right:7rem;z-index:2;}
.login-html .tab.join {position:absolute;top:1rem;right:2rem;z-index:2;}
.login-form{ min-height:345px; position:relative; perspective:1000px; transform-style:preserve-3d; height: 100%;}
.login-form .group{ margin-bottom:15px;}
.login-form .group .label,
.login-form .group .input,
.login-form .group .select,
.login-form .group .button{ width:100%; color: #141522; display:block;}
.login-form .group .input,
.login-form .group .select,
.login-form .group .button{border:none;padding:0 20px;height:3rem;line-height:3rem;border-radius: 25px;background-color: #e5ebf3;}
.login-form .group .select {padding:0 20px;height:3rem;line-height:3rem;}
.login-form .group .input:focus,
.login-form .group .select:focus {outline:2px solid #546fff;background-color:#fff;}
.login-form .group input[data-type="password"]{text-security:circle;-webkit-text-security:circle; padding:0 20px;height:3rem;line-height:3rem;}
.login-form .group .label{color: #6a6f8c;font-size:12px;margin-bottom:.25rem;height:1.176rem;}
.login-form .group .label .txt_req {font-size:0;text-indent:-100%;z-index:1;}
.login-form .group .label .txt_req:before {z-index:1;left:0;}
.login-form .group .button {position:relative;display:block;width:100%;color:#fff; font-size:16px !important;font-weight:600;border:none; padding:0 20px;height:3rem;line-height:3rem;border-radius: 25px;	background:#546fff;	z-index: 1;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;}
.login-form .group .button:after {	content: "";	width: 0;	height: 100%;	position: absolute;	top: 0;	left: 0;border-radius: 25px;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	background:#21328a;}
.login-form .button:hover {	color: #fff; }
.login-form .button:hover:after {width: 100%;z-index: -1;}
.login-form .sign-up-htm  .group .button:after {border-radius:0;}

.login-form .group label .icon{ width:15px; height:15px; border-radius:2px; position:relative; display:inline-block; background:rgba(255,255,255,.1);}
.login-form .group label .icon:before,
.login-form .group label .icon:after{ content:''; width:10px; height:2px; background:#fff; position:absolute; transition:all .2s ease-in-out 0s;}
.login-form .group label .icon:before{ left:2px; width:6px; bottom:6px; transform:scale(0) rotate(0);}
.login-form .group label .icon:after{ top:6px; right:0; transform:scale(0) rotate(0);}
.login-form .group .check + label,
.login-form .group .check:checked + label{color: #6a6f8c;font-size:13px;}
.login-form .group .check:checked + label .icon{background:#546fff;}
.login-form .group .check  + label .icon {background:#ddd;}
.login-form .group .check:checked + label .icon:before{ transform:scale(1) rotate(45deg);}
.login-form .group .check:checked + label .icon:after{ transform:scale(1) rotate(-45deg);}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{ transform:rotate(0);}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{ transform:rotate(0);}
.hr{height:1px; margin:.5rem 0; background:rgba(0,0,0,.1); flex: 1 1 100%;}
.foot-lnk{text-align:center;color: #6a6f8c;font-size:15px;}
.foot-lnk span {padding:.5rem 1rem;font-weight:400;}
.foot-lnk a {padding:.5rem 1rem;display:inline-block;position:relative;}
.foot-lnk a:after {content:"";position:absolute;top:.5rem;right:.1rem;width:1px;height:1rem;background:#ccc;display:block;}
.foot-lnk a:last-child:after {display:none;}
.foot-lnk a:hover,.foot-lnk a:active,.foot-lnk a:focus {color:#546fff;}
.txt_req:before {left:.5rem;top:1.4rem;}
/*아이디찾기*/
.modal.show.find-form-wrap {width:100%;}
.modal.show.find-form-wrap .modal-dialog {width:100%;max-width:500px;min-height:400px;perspective:1000px;transform-style:preserve-3d;}
.modal.show.find-form-wrap .modal-header  {width:auto;display:flex;justify-content:space-between;}
.modal.show.find-form-wrap .modal-content { position: relative;}
.find-form-wrap .form-wrap {width:100%;margin: 0 auto;padding:2rem 3rem 3rem;background:transparent;}
.find-form-wrap .form-wrap .group {position:relative;}
.find-form-wrap .form-wrap .btn-area {margin-top:3rem;}
.find-form-wrap .form-wrap .group select ,.find-form-wrap .form-wrap .group input {border-radius:0;}
.find-form-wrap .form-wrap .btn-area  .button,
.find-form-wrap .form-wrap .btn-area  .button:after {border-radius:0;}
.find-form-wrap .form-wrap .btn-area  .button  {border-radius:0;}
div:where(.swal2-container) {z-index: 20000!important;}
div:where(.swal2-container).swal2-center>.swal2-popup {width:400px!important;}
div:where(.swal2-container) h2:where(.swal2-title) {font-size:1.25rem;padding:1.5rem 1rem;}
div:where(.swal2-container) .swal2-html-container {font-size:1rem;}