@charset "utf-8";

button {cursor:pointer;}

/* 일반 로그인 */
.mber_login_box {text-align:center; padding:2rem 0; word-break:keep-all}
.mber_login h3.login_tit {line-height:2.75rem}
.mber_login h3.login_tit img { vertical-align:top}
.mber_login h3.login_tit span {font-size:2.5rem; font-weight: bold; color:#000; line-height:2.75rem; margin-left:1rem}
.mber_login p.login_info {font-family: 'SCDream'; font-size:1rem; color:#666; margin:1.2rem 0; border-bottom:1px solid #e5e5e5; padding-bottom:2rem}
.mber_login p.login_info span { display:block; font-size:1.5rem; font-weight:700; color:#111; margin:1rem 0}

.mber_login form { width:50%; margin:0 auto}
.mber_login ul li {position:relative; height:2.5rem; margin:0.25rem 0; padding-left:2.5rem; border-bottom:1px solid #000; overflow: hidden;}
.mber_login ul li label {position:absolute; left:0; top:0; display:block; width:45px; height:45px; text-indent:-10000em;}
.mber_login ul li.mber_id label {background:url('/images/ad/qn/member/ico_login_id.png') no-repeat center;}
.mber_login ul li.mber_pw label {background:url('/images/ad/qn/member/ico_login_pw.png') no-repeat center;}
.mber_login ul li input {width:100%; height:2.5rem; line-height:2.5rem; color:#444; vertical-align:middle; border:none;}
.mber_login .btnLogin {position:relative; width:100%; height:2.5rem; margin:1.25rem 0 0.75rem; line-height:2.5rem; font-family: 'NotoSans'; color:#fff; font-size:1rem; font-weight:600; background:#3e4e6f; overflow:hidden; transition:all 0.2s ease-out 0.1s;}
.mber_login .btnLogin span {position:relative; display:block;  z-index:2;}
.mber_login .btnLogin:hover {background-color:#1b2843;}

.mber_login .mber_btnEtc a {position:relative; display:inline-block; padding:0 0.5rem; color:#666; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}
.mber_login .mber_btnEtc a:before {content:""; display:block; position:absolute; left:0; top:50%; width:1px; height:9px; margin-top:-5px; border-left:1px dotted #9a9a9a;}
.mber_login .mber_btnEtc a:first-child {padding-left:0;}
.mber_login .mber_btnEtc a:first-child:before {display:none;}
.mber_login .mber_btnEtc a:hover {color:#fb0023}
.mber_login .mber_btnEtc a span {position:relative; display:block; font-size:0.7rem}
.mber_login .mber_btnEtc a span:before{content:''; position:absolute; bottom:0; left:50%; width:0px; height:1px; background:#fb0023; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}
.mber_login .mber_btnEtc a:hover span:before {content:''; position:absolute; bottom:0; left:50%; width:100%; height:1px; margin-left:-50%;}

/* 로그인 후 */
.mber_login .mb_after { position:relative; width:50%; margin:0 auto; text-align:left; overflow:hidden}
.mber_login .mb_after p { font-size:0.9rem; color:#333; margin:2rem 0; padding-right:4rem}
.mber_login .mb_after span.name { display:block; font-size:1.2rem; font-weight:600; margin-bottom:1rem}
.mber_login .mb_after a.btnLogout { position:absolute; top:4.25rem; right:0; font-size:0.8rem; font-weight:600; color:#111; text-decoration:underline}
.mber_login .mb_after a.btnLogout:hover { color:#fa0026}
.mber_login .mb_after .aftBtn a {width:49%;height:2.25rem;font-size:0.8rem;color:#fff;line-height:2.25rem;float:left;text-align:center;background: #e50039;margin: 1% 1% 0 0;}
.mber_login .mb_after .aftBtn a i { line-height:1.4rem; margin:0 0.25rem}
.mber_login .mb_after .aftBtn a.st1 i.stCi {width:1.4rem;height:1.4rem;border-radius:50%;background: #b8002e;}
.mber_login .mb_after .aftBtn a.st1:hover { background:#d5001e}
.mber_login .mb_after .aftBtn a.st2 {background: #15233e;}
.mber_login .mb_after .aftBtn a.st2 i.stCi {width:1.4rem;height:1.4rem;border-radius:50%;background: #3e4e6f;}
.mber_login .mb_after .aftBtn a.st2:hover { background:#1c325c}



@media screen and (max-width:1100px){

}

@media screen and (max-width:768px){

	/* 일반 로그인 */
	.mber_login form { width:100%}
	/* 로그인 후 */
	.mber_login .mb_after { width:100%}
	.mber_login .mb_after .aftBtn a { width:100%; margin:0 0 1%}

}

@media screen and (max-width:640px){

@media screen and (max-width:420px){
}

@media screen and (max-width:360px){
}