* {border-radius:0 !important; box-shadow: 0 !important; box-sizing: border-box !important;}
html, body {margin: 0; height: 100%; font-family: 'Noto Sans KR', 'Roboto', sans-serif !important; font-size: 16px; font-weight: 400; line-height: 1.5; color: #858796; text-align: left;}
.material-icons {font-size: 18px !important; padding: .25em 0;}

body {background: no-repeat url("/common/images/background.jpg"), center; background-size: cover;}
.login_wrap {display: table; width: 100%; margin: 0 auto; padding-top: 0px; height: 100%;}
.login_inner {display: table-cell; vertical-align: middle; }
.login_logo {width: 180px; margin-bottom: 1em;}
.login_logo img {width: 100%;}
.login_box {height:100%; padding: 35vh 0 0 0; background: #333333aa; border: none; border-bottom: 0;}
.login_wrap input {width: 320px; height: 32px; font-size: 13px;}
.login_tit {font-size: 2.125em; font-weight: 700; text-align: center;  color: #FFF; margin-bottom: 30px !important; margin-top:0px;}

.form-signin{ width: 360px; padding: 0; margin: 0 auto;}
.form-signin label{display: inline-block; vertical-align: middle; margin-bottom: 0; font-size: 14px; font-weight: 300; text-align: left; color: #767676;}

.form-signin .checkbox {font-weight: 400;}

.form-signin div.checkbox label {font-size: 14px;}

.form-signin .form-control {position: relative; display: block; box-sizing: border-box; height: auto; font-size: 13px; font-weight: 400; line-height: 1.5; border: 1px solid #d1d3e2; border-left: 2px solid #4d7496; background-color: #fff; background-clip: padding-box;}

.form-control:focus {border-color: #4d7496; color: #6e707e; background-color: #fff; box-shadow: none;}

.btn-login {display: block; width: 100%; background: #3968c6; border: 1px solid #187ed6; font-size: 1.125rem; font-weight: 500; line-height: 1.5; color: #fff; padding: .375rem .75rem;}
.btn-login:hover {color: #fff; background: #4d77cc; opacity: .95;}

.form-signin .form-control:focus {z-index: 2;}
.form-signin input {position: relative; padding-left: 2.25em;}
.form-signin input:before {display: block; content: ''; position: absolute; left: 0; top: 0; width: 16px; height: 16px; background: #000;}

.form-signin input[type="text"] {border-radius: 0; margin-bottom: 1em;}
.form-signin input[type="text"]:before {}
.form-signin input[type="password"] {margin-bottom: 1em; border-radius: 0;}
.form-signin input[type="password"]:before { }

.chk_box {display: inline-block; margin-bottom: 30px;}
.chk_box input[type="checkbox"] {display: none;}
.chk-box input[type="checkbox"]:checked ~ .checkbox:before {width: 5px;}
.chk-box input[type="checkbox"]:checked~.checkbox:before {transition-delay: 0;}
.chk-box input[type="checkbox"]:checked ~ .checkbox:after {width: 10px;}
.chk-box input[type="checkbox"]:checked~.checkbox:after {transition-delay: .1s;}

.chk_box .checkbox {display: inline-block; margin: 0; margin-right: .5em; width: 18px; height: 18px; background: #fff; border: 1px solid #ced4da; vertical-align: middle; cursor: pointer;}
.chk_box .checkbox:before {content: ''; position: absolute; width: 5px; height: 2px; background: #ddd; border-radius: 15px; transform: translate(3px,8px) rotate(45deg); transform-origin: left;}
.chk_box .checkbox:after {content: ''; position: absolute; width: 11px; height: 2px; background: #ddd; border-radius: 15px; transform: translate(6px,12px) rotate(-45deg); transform-origin: left;}
.chk_box.on .checkbox:before {background: #222; width: 5px; transform: translate(3px,8px) rotate(45deg);}
.chk_box.on .checkbox:after {background: #222; width: 11px; transform: translate(6px,12px) rotate(-45deg);}

.inner_box {width: 360px; margin: 0 auto; background: #f9f9f9; border: 1px solid #e0e0e0; box-shadow: none; overflow: hidden; height: 49px; transition: all .2s;}
.inner_box.on {height: 205px;}
.inner_box.on2 {height: 150px;}
.forget_wrap {position: relative; padding: 1em; margin-bottom: 0; font-size: 14px; text-align: center;}
.forget_wrap a {color: #222;}
.inner_box_wrap {padding: 1em 2.5em;}
.inner_box_wrap .form-group {margin-bottom: .5em;}

.modal-header {padding: .75em; background: #658db3; color: #fff;}
.modal-header .modal_title {font-size: 1em;}
.modal-body {padding: 1.5rem 1rem;}
.modal-footer {padding: .75em; justify-content: center;}
.modal-footer .btn {padding: .3rem .75rem; font-size: 0.875em;}
.btn_save {width: 100%; padding: .25rem .75rem; border: 1px solid rgba(0,0,0,0.13); background: #f3f3f3; font-size: 14px; font-weight: 300; color: #333;}
.btnCancel {display: none; position: absolute; top: 0; right: 0; padding: .75em; cursor: pointer;}
.btnCancel.on {display: block;}

.form-group {position: relative;}
.form-group input {width: 100%;}
.form-group-icons {position: absolute; left: .5rem; top: .25rem; z-index: 2;}

.tmp_box_wrap {display: none; font-size: 14px; font-weight: 400; text-align: center; color: #555; }
.tmp_box_wrap.on {display: block;}
.tmp_box_wrap span {display: block; }
.tmp_box_wrap span .material-icons {font-size: 2.5em !important; font-weight: 700; color: #94b86e;}
.tmp_box_wrap span .material-icons.red {color: #b86e6e;}
.tmp_box_wrap span .material-icons.yellow {color: #b8b36e;}

input::placeholder {color: #e0e0e0;}

#loginPwFindModal .form-control {line-height: 13px;}

@media (max-width: 768px){
	.login_wrap input {max-width: 420px; width: 100%;}
}

/* -------------------- */

/* MARGIN */
.mg10 {margin: 10px !important;}
.mg20 {margin: 20px !important;}
.mg30 {margin: 30px !important;}
.mg40 {margin: 40px !important;}
.mg50 {margin: 50px !important;}
/* MARGIN RIGHT */
.mgr10 {margin-right: 10px !important;}
.mgr20 {margin-right: 20px !important;}
.mgr30 {margin-right: 30px !important;}
.mgr40 {margin-right: 40px !important;}
.mgr50 {margin-right: 50px !important;}
/* MARGIN LEFT */
.mgl10 {margin-left: 10px !important;}
.mgl20 {margin-left: 20px !important;}
.mgl30 {margin-left: 30px !important;}
.mgl40 {margin-left: 40px !important;}
.mgl50 {margin-left: 50px !important;}
/* MARGIN TOP */
.mgt10 {margin-top: 10px !important;}
.mgt20 {margin-top: 20px !important;}
.mgt30 {margin-top: 30px !important;}
.mgt40 {margin-top: 40px !important;}
.mgt50 {margin-top: 50px !important;}
/* MARGIN BOTTOM */
.mgb10 {margin-bottom: 10px !important;}
.mgb20 {margin-bottom: 20px !important;}
.mgb30 {margin-bottom: 30px !important;}
.mgb40 {margin-bottom: 40px !important;}
.mgb50 {margin-bottom: 50px !important;}

/* ETC */
.f_red {color:#ff2350 !important;}
.align_l {text-align: left !important;}

/* findPW MOdal */
#tmpPwModal .modal-header {
	text-align: center;
}

#tmpPwModal .modal-header h5{
	width: 100%;
}