@charset "utf-8";
/* CSS Document */

/*********************** layout ***********************/
body.sign .container .leftmn {display: none;}
body.sign .topmn {display: none;}
body.sign footer.con {display: none;}
body.sign {background:#f4f4f4;height: 97vh;background-size: 100%;}
@media (min-width: 320px) {
	.loginBody{ height: 1000px;
			    /*background-image: url(../images/bg2.png) !important;
			    background-position: 58% 20% !important;
			    background-repeat: no-repeat !important;
			    background-size: cover;
			    background-attachment: fixed !important;*/
			    z-index: 0;
			    animation: f17imgfade 0.5s 0s 1 cubic-bezier(0, 0, 0.2, 1) forwards;}
	.main_logo {display: block;width: 164px;height: 37px;text-align: center;background: transparent url(../images/logo_top.png) center no-repeat;margin: 0 auto;position: absolute;top: 50%;left: 0;right: 0;margin-top: -220px;}
	.login_box {display: block;width: 390px;font-family: 'NanumSquareR';text-align: center;margin: 0 auto;overflow: hidden;position: absolute;top: 50%;left: 0;right: 0;background: #fff;border: 1px solid #003894;padding: 50px;margin-top: -150px;}
	.login_box.signup {top: 15%;}
	.login_box.pwSrch {top: 26%;}
	.login_box.pwSrch .loginTop h1 {width: 68%;}
	.login_box.pwSrch .loginTop span.topRight {width: 32%;}
	/* .login_box .loginTop {background: #eee;border-radius: 30px 30px 0 0;overflow: hidden;} */
	.login_box .loginTop h1 {font-family: 'NanumSquareEB';margin: 0;font-size: 30px;color: #003894;padding: 0 0 20px;background: #fff;border-radius: 30px 30px 0 0;display: inline-block;float: left;text-align: left;}
	.login_box .loginTop span.topRight {width: 50%;padding: 0;background: #fff;border-radius: 30px 30px 0 0;display: inline-block;float: left;height: 75px;display: none;}
	.login_box .loginTop span.topRight div {background: #eee;height: 75px;border-radius: 0 0 0px 30px;}
	.login_box .loginContents {margin: 0 auto;padding: 0px;width: 290px;background: #fff;overflow: hidden;position: relative;top: -1px;}
	.login_box .loginContents h1 .txt1 {font-family:'Gotham-Bold';color:#EF5451;}
	.login_box .login_errorMsg {width:100%;font-size:12px;color: #de4437;padding: 0 0 10px 0;text-align: center;display: block;}
	.login_box .loginContents .login_txtBox {margin-top:20px;border-bottom: 1px solid #b7cdd9; height:37px;}
	.login_box .loginContents .loginFormAreaWrap {overflow: hidden;margin-bottom: 10px;}
	.login_box .loginContents .loginFormAreaWrap .infoTxt {text-align: right;margin: 0 15px 5px 0;}
	.login_box .loginContents .loginFormAreaWrap .infoTxt span {display: inline-block;font-size: 13px;font-family: 'NanumGothicEB';color: #666;}
	.login_box .loginContents .loginFormAreaWrap .notiTxt {font-size: 12px;display: block;margin: 5px 0 5px;color: #003894;position: relative;top:5px;}
	.login_box .loginContents .loginFormAreaWrap .notiTxt2 {top:1px;}
	.login_box .loginContents .loginFormAreaWrap.disable {opacity: .4;cursor: none;pointer-events: none;}
	.login_box .loginContents .loginFormAreaWrap.disable .loginFormArea .input-group-prepend .input-group-text {background: #ccc !important;}
	.login_box .loginContents .loginFormAreaWrap.disable .loginFormArea .input-text {background: #ccc !important;}
	.login_box .loginContents .loginFormAreaWrap.disable .login_btn {opacity: .5;cursor: none;}
	.login_box .loginContents .loginFormAreaWrap.disable .login_cancel {opacity: 1.0;cursor: none;}
	.login_box .loginContents .loginFormAreaWrap.disable .login_btn:hover, .login_box .loginContents .loginFormAreaWrap.disable .login_cancel:hover {transform: translate(0px, 0px);box-shadow: 0 0px 0px rgba(255,255,255, 0.0) !important;}
	.login_box .loginContents .loginFormArea {width: 100%;margin-bottom: 5px;overflow: hidden;}
	.login_box .loginContents .loginFormArea h3 {text-align: left;font-size: 13px;margin: 17px 0 10px 15px;}
	.login_box .loginContents .loginFormArea .input-group-prepend .input-group-text {width: 40px; float:left;-ms-flex-align: center;align-items: center; padding: 12px 0 10px 15px;margin-bottom: 0;font-size: 1.3rem;font-weight: 400;
							line-height: 1.5;color: #8c98a4;text-align: center;white-space: nowrap;background-color: #fff;border: 1px solid #aaa;border-right: 0;border-radius: 30px 0 0 30px;height: 40px;}
	.login_box .loginContents .loginFormArea .input-text {float:left; display: block; width:250px;height: 40px;padding: 0px 0px 0px 10px;font-size: 1.2rem; font-weight: 400;line-height: 1.5;background-color: #fff;background-clip: padding-box;
							border: 1px solid #aaa;border-radius: 0 30px 30px 0; border-left: 0;transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;box-shadow: none;}
	/* .login_box .loginContents .loginFormArea .input-text.input-text_secure {width: 170px;} */
	.login_box .loginContents .loginFormArea .input-group-prepend .input-group-text.sign_phSpan {padding: 10px 0 10px 15px;}
	.login_box .loginContents .loginFormArea .input-group-prepend .input-group-text .sign_id {display:block; width: 11px;height: 14px;text-align:center;background: url(../images/sign_id.png) center no-repeat;padding: 4px 0 10px 15px}
	.login_box .loginContents .loginFormArea .input-group-prepend .input-group-text .sign_pw {display:block; width: 15px;height: 16px;text-align:center;background: url(../images/sign_pw.png) center no-repeat;}
	.login_box .loginContents .loginFormArea .input-group-prepend .input-group-text .sign_secure {display:block; width: 14px;height: 16px;text-align:center;background: url(../images/sign_secure.png) center no-repeat;}
	.login_box .loginContents .loginFormArea .input-group-prepend .input-group-text .sign_ph {display:block; width: 16px;height: 18px;text-align:center;background: url(../images/sign_ph.png) center no-repeat;}
	.login_box .loginContents .loginFormArea input::placeholder {color: #8C98A4;}
	.login_box .loginContents .loginFormArea a.authBtn { margin-left: -70px;background: #5884ff;border-radius: 5px;width: 95px;display: inline-block;color: #fff;height: 36px;line-height: 35px;font-size: 13px;position: absolute;transition:0.2s;}
	.login_box .loginContents .loginFormArea a.authBtn:hover { text-decoration: none;background: #3768ef;}
	.login_box .loginContents .loginFormArea a.authBtnDis { margin-left: -70px;background: #bbb;border-radius: 5px;width: 95px;display: inline-block;color: #fff;height: 36px;line-height: 35px;font-size: 13px;position: absolute;transition:0.2s;}
	.login_box .loginContents .loginFormArea a.authBtnDis:hover { text-decoration: none;}
	.login_box .loginContents .loginFormArea input { float:left;padding-left: 45px;border-radius: 100px;background: transparent !important;border: none;font-family: 'NanumGothic', sans-serif, dotum;color: #666;font-size: 14px;letter-spacing: 0.5px;vertical-align: top;}
	.login_box .loginContents .sign_btn {width: 100%;padding: 20px 0 20px; overflow: hidden;}
	.login_box .loginContents .sign_btn button {width: 140px;display: inline-block;height: 35px;font-size: 13px; }
	.login_box .loginContents .loginFormArea .input-text.pwSrchInput {width: 175px;display: inline-block;float: left;}

	.login_box .notiMsg {display: block;padding: 20px 0 0;font-size: 11px;}
	.login_box .box_save { margin: 0px 30px 0; text-align:left; color:#1e2022; font-size:13px;overflow: hidden;}
	.login_box .box_save p { margin-bottom: 0px;}
	.login_box .box_save p label {font-weight: normal;cursor: pointer;color: #666;}
	.login_box .box_save p label:hover { color: #222;}
	.login_box .box_save p label:hover .inputChk { display: inline-block; width: 18px;height: 18px;text-align:center;background: url(../images/icon_login_chk_checked.png) center no-repeat;}
	.login_box .box_save p label .inputChk { display:inline-block; width: 18px;height: 18px;text-align:center;background: url(../images/icon_login_chk.png) center no-repeat;cursor: pointer;margin-right: 6px;position: relative;top:5px;}
	.login_box .box_save p label .inputChk.active { display: inline-block; width: 18px;height: 18px;text-align:center;background: url(../images/icon_login_chk_checked.png) center no-repeat;}
	.login_box .box_save p input { position:relative; top:0px; margin-right:3px; opacity:.7;}
	.login_box .box_save p input.no_act {opacity:.4;}
	.login_box .box_save p.pwSrch .icon_login_srch {display: inline-block; width: 16px;height: 17px;text-align:center;background: url(../images/icon_login_srch.png) center no-repeat;position: relative;top: 5px;right: 4px;}
	.login_box .box_save p.pwSrch a {color: #333;padding-top: 3px;display: inline-block;text-decoration: none;}
	.login_box .loginContents .loginFormAreaWrap .clause {margin: 20px 0;overflow: hidden;}
	.login_box .loginContents .loginFormAreaWrap .clause .tit {display: block;text-align: left;margin: 0 0 8px;font-weight: bold;font-size: 13px;border-bottom: 1px solid #ddd;padding-bottom: 8px;}
	.login_box .loginContents .loginFormAreaWrap .clause .tit .inputChk {position: relative;top: 5px;left: 1px;margin-right: 8px;}
	.login_box .loginContents .loginFormAreaWrap .clause ul {margin: 0;}
	.login_box .loginContents .loginFormAreaWrap .clause ul li {display: block;overflow: hidden;margin-bottom: 3px;}
	.login_box .loginContents .loginFormAreaWrap .clause ul li span {display: inline-block;float: left;}
	.login_box .loginContents .loginFormAreaWrap .clause ul li span.inputChk {display: inline-block;float: left;width: 20px;opacity: .5;}
	.login_box .loginContents .loginFormAreaWrap .clause ul li span.inputChk:hover {opacity: 1;}
	.login_box .loginContents .loginFormAreaWrap .clause ul li span.clauseTxt {display: inline-block;float: left;font-size: 12px;width: 140px;text-align: left;}
	.login_box .loginContents .loginFormAreaWrap .clause ul li p {display: inline-block;font-size: 11px;float: right;width: 70px;margin: 0;text-align: center;border: 1px solid #f1f1f1;border-radius: 30px;padding: 2px 6px;cursor: pointer;background: #f1f1f1;color: #999;}
	.login_box .loginContents .loginFormAreaWrap .clause ul li p:hover {color: #111;}}
@media (max-width: 767px) {
	.main_logo {top: 16%;margin-top: 0;}
	.login_box {width: 90%;padding: 50px 20px;}
	.login_box .loginTop h1 {text-align: center;width: 100%;}}

/* 로그인버튼 */
@media (min-width: 320px) {
	.bottomBtn {margin-top: 10px;}
	.login_btn  {width: 143px;font-size: 13px;font-weight: 500;background: #74a2ef;padding: 10px;text-align: center;color: #fff; cursor: pointer;border:1px solid #74a2ef;border-radius: 30px;transition: all 0.3s ease-in-out;float: left;font-family: 'NanumGothicEB'}
	.login_btn#joinBtn {width: 100%;}
	.login_btn:hover {transform: translate(0px, -3px);}
	.login_btn:active { color:#fff;}
	.login_cancel  {width: 143px;font-size: 13px;font-weight: 500;background: #fff;padding: 10px;text-align: center;color: #aaa; cursor: pointer;border:1px solid #aaa;border-radius: 30px;transition: all 0.3s ease-in-out;margin-right: 4px;float: left;}
	.login_cancel:hover, .login_cancel:visited, .login_cancel:focus { transform: translate(0px, -3px);color: #888;}
	.secureBtn {width: 100%;background: #fff;color: #003894;;border:1px solid #003894;margin-bottom: 5px;}
	.secureBtn:hover {background: #003894;color: #fff;border:1px solid #003894;transform: translate(0px, 0px);}
	.secureBtn02 {width: 70px;background: #aaa;color: #fff;;border:1px solid #aaa;transform: translate(0px, 0px);float: right;display: inline-block;pointer-events: none;cursor: none;}
	.secureBtn02Enable {background: #fff;color: #003894;border:1px solid #003894;transform: translate(0px, 0px);pointer-events: auto;cursor: pointer;}
	.secureBtn02Enable:hover {background: #003894;color: #fff;border:1px solid #003894;transform: translate(0px, 0px);}
	.secureBtn03 {width: 70px;background: #aaa;color: #fff;;border:1px solid #aaa;display: inline-block;padding: 5px;border-radius: 5px;}
	.secureBtn03:hover {background: #60d1d6;color: #fff;border:1px solid #60d1d6;transform: translate(0px, 0px);}}
@media (max-width: 767px) {
	.bottomBtn {margin-top: 5px;}}

/* footer ***********************************************************/
@media (min-width: 320px) {
	footer.login {position: fixed;bottom: 0;display: none;height: auto;padding: 20px 20px 10px 0;color: #999;overflow: hidden;width: 100%;text-align: right;font-size: 11px;background: #e1e1e1;float: left;}
	footer.login .logo_bottom { float:left;display: inline-block; width:102px;height:28px;background: url(../images/logo_login_bottom.png) center no-repeat;margin-left: 20px;position: relative;top: -5px;}
	footer.login .footer { float: right;}
	footer.login .copy { float:left; width: 100%;}
	footer.login .corp { display: inline-block;margin-right: 20px;}
	footer.login .corp a { color: #333;font-size: 12px;}
	footer.login .corp strong a { font-family: 'NanumGothicEB'}
	footer.login .copy p { float:left; margin-bottom:0;}
	footer.login .copy p.txt { display: inline-block;}
	footer.login .copyright { display: inline-block;color: #333;}
	footer.login .copyright strong { font-family: 'NanumGothicEB'}}