@charset "UTF-8";
@import url('common.css?version=20260519'); 

.login .login_wrap {height: 100vh; min-height: 884px; box-sizing: border-box; padding-top: 180px; position: relative;}
.login .inner {width: 500px; margin: 0 auto;}
.login header {text-align: center; margin-bottom: 60px;}

.login .tab_login .tab_btn_area {font-size: 0; border-bottom: 1px solid #b9c3cb; height: 56px;}
.login .tab_login .tab_btn {display: inline-block; box-sizing: border-box; vertical-align: middle; width: 33.333%; height: 56px; background-color: #e6edf2; border-bottom: 1px solid #b9c3cb; overflow: hidden;}
.login .tab_login .tab_btn.on {border: 1px solid #b9c3cb; border-bottom-color: #fff; background-color: #fff;}
.login .tab_login .tab_btn:first-child {border-top-left-radius: 6px;}
.login .tab_login .tab_btn:last-child {border-top-right-radius: 6px;}
.login .tab_login .tab_btn a {display: block; height: 100%; line-height: 56px; text-align: center;}
.login .tab_login .tab_btn a span {font-size: 16px; color: #7d8d99;}
.login .tab_login .tab_btn.on a span {font-weight: 700; color: #0098d9;}
.login .tab_login .tab_btn a span::before {vertical-align: middle; margin-top: -2px; margin-right: 8px;}
.login .tab_login .tab_btn.id a span::before {content: url('../images/login/icon_id_gray.png');}
.login .tab_login .tab_btn.id.on a span::before {content: url('../images/login/icon_id.png');}
.login .tab_login .tab_btn.bio a span::before {content: url('../images/login/icon_thumb_gray.png');}
.login .tab_login .tab_btn.bio.on a span::before {content: url('../images/login/icon_thumb.png');}

.login .tab_login .tab_cont_area {box-sizing: border-box; border: 1px solid #b9c3cb; border-top: 0; border-radius: 0 0 6px 6px; padding: 30px;}
.login .tab_login .tab_cont {min-height: 186px;}
.login .tab_login .input_wrap input {display: block; width: 100%; height: 48px; line-height: 48px; box-sizing: border-box; padding: 0 20px 0 42px; border: 1px solid #0098d9; border-radius: 6px; font-size: 15px; background: left 20px center no-repeat;}
.login .tab_login .input_wrap input::placeholder {font-size: 15px; color: #888;}
.login .tab_login .input_wrap input#userId {background-image: url('../images/login/icon_id_black.png');}
.login .tab_login .input_wrap input#password {background-image: url('../images/login/icon_pw.png'); margin-top: 10px; margin-bottom: 20px;}
/* 220825 GNU 임동준 추가 */
.login .tab_login .input_wrap .loginCheckbox {height: 16px;line-height: 16px;width: 16px;padding: 0;display: inline-block;}
.login .tab_login .input_wrap.loginCheckWrap {margin : 10px 0 -10px 4px;}
.login .tab_login .input_wrap label {margin-top:-24px;}

.custom-control-label:before{background-color:#dee2e6;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{background-color:#0098d9;}

.login .tab_login .btn_login {display: block; height: 60px; line-height: 60px; border-radius: 6px; background-color: #0098d9; text-align: center;}
.login .tab_login .btn_login span {font-size: 18px; font-weight: 700; color: #fff;}

.login .find_area {height: 20px; margin-top: 30px;}
.login .find_area select {display: inline-block; vertical-align: top; width: 68px; background: url('../images/login/select_arrow.png') right center no-repeat; color: #005a81; cursor: pointer;}
.login .find_area .find_wrap {font-size: 0; float: right;}
.login .find_area .find_wrap li {display: inline-block; vertical-align: middle;}
.login .find_area .find_wrap li:not(:last-child)::after {content: "|"; font-size: 11px; color: #005a81; margin: 0 10px;}
.login .find_area .find_wrap li a {color: #005a81;}

.login footer {box-sizing: border-box; padding: 30px 0; text-align: center; background-color: #eef3f7; position: absolute; bottom: 0; left: 0; right: 0;}
.login footer .copyright {font-size: 12px; color: #8899a6; margin-top: 10px;}

/* 220511 김은서 추가 */
.login header img {width: 400px;}

.login .tab_login .qr .code {width: 100px; height: 100px; background-color: #ffffff; text-align: center; line-height: 100px; margin: 0 auto;}
.login .tab_login .qr p {margin-top: 16px; box-sizing: border-box;}

/* 220513 김은서 추가 */
/* .login .tab_login .qr {padding: 0 50px;} */
/* .login .tab_login .qr .code_wrap {width: 232px; margin: 0 auto;} */
.login .tab_login .qr .code_wrap {position: relative;}
.login .tab_login .qr .code_wrap span {/*display: inline-block; vertical-align: bottom;*/ position: absolute; right: 20%; bottom: 0;}
.login .tab_login .qr .code_wrap span em {font-size: 16px; font-weight: 700; color: #0098d9;}

/* 230105 박지예 _ sns 로그인 추가 */
.login .login_wrap{padding-top:120px; min-height:860px;}
.login .tab_login .tab_cont_area{/*height:330px;*/padding-bottom:15px;}
.login .sns_login{margin-top:30px;}
.login .sns_login .midLine{display: flex; flex-basis: 100%; align-items: center; color: #888888; font-size: 15px; margin: 8px 0; font-weight:normal; margin-bottom:20px;}
.login .sns_login .midLine:before{content: ''; flex-grow: 1; margin:0 20px; background-color: #d5dbe0; height: 1px; font-size: 0; line-height: 0;}
.login .sns_login .midLine:after{content: ''; flex-grow: 1; margin:0 20px; background-color: #d5dbe0; height: 1px; font-size: 0; line-height: 0;}
.login .sns_login .sns_login_btn{display: flex; align-items: center; gap: 4%; justify-content: center;}
.login .sns_login .sns_login_btn li a{display: inline-block; width: 40px; height: 40px;}
.login .tab_login .tab_btn{width : 50%;}
.login .sns_login .noticeWrap {padding-top:12px;display: flex;flex-direction: row;justify-content: center;}
.login .sns_login .notice {color: #005a81;}
.tooltip-inner {max-width: 500px !important;}
/* responsive */
@media all and (max-width: 560px) {
    .login .inner {margin: 0; width: 100%; box-sizing: border-box; padding: 0 20px;}

    .login .tab_login .qr .code_wrap span {right: 20%;}
}

@media all and (max-width: 480px) {
    .login .tab_login .tab_btn a span {font-size: 14px;}
    .login .tab_login .tab_btn a span::before {margin-right: 4px;}

    .login .sns_login .noticeWrap {flex-wrap: wrap;}

    
    .login header img {width: 80%;}
    
    .login .tab_login .qr .code_wrap span {right: 17%;}
}

/* 230213 김은서 추가 */
@media all and (max-width: 520px) {
    .login .find_area select {display: block; margin: 0 auto 20px;}
    .login .find_area .find_wrap {float: none; width: fit-content; margin: 0 auto; text-align: center;}
}

@media all and (max-width: 425px) {
    .login .tab_login .tab_btn a span {font-size: 0;}
    .login .tab_login .tab_btn a span::before {margin: 0;}
    
    
    .login .tab_login .qr {padding: 0 20px;}
    .login .tab_login .qr .code_wrap span {right: 0;}
    
    /* 220518 김은서 추가 */
    .login .login_wrap {padding-top: 90px;}
}