@charset "utf-8";


/* =======================================================
    로그인
    2021-11-17 작업 (이승진)
========================================================*/

/*공통*/
.login-container{position: relative; height: 100vh; background: #f5f5f5;}
.login-inner{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:100%; max-width:500px; height: auto; margin:0 auto; padding: 50px 20px; background:#fff; text-align:center; box-sizing: border-box;}
.login-container form legend{display: none;}
.login-info-group, .find-btn-group, .login-sns-group, .login-guest-group{width: 100%; max-width: 400px; margin: 0 auto;}
.capslockp.text-guide{margin-top: 5px; color: #f82a2a; font-size: 12px; text-align: left;}

/*아이디 & 비밀번호*/
.login-info-group{padding-top: 50px;}
.login-info-group .login-id, .login-info-group .login-pw{width: 100%; height: 45px; line-height: 45px; margin: 5px 0; border: 1px solid #ccc;}
.login-info-group .login-id:hover, .login-info-group .login-pw:hover{border-color: #000; transition: .1s;}
.login-info-group .btn-login-group{margin: 15px 0 20px;}
.login-info-group .btn-login-group .btn-login {width: 100%; height: 45px; background: #000; color: #fff; text-align: center;}

/*아이디 저장*/
.saved-group{margin: 10px 0; text-align: left;}
.saved-group input[type="checkbox"]{content: ""; background-image: url(/AppData/images/common/check_default.png); background-repeat: no-repeat; background-position: center; background-size: cover; width: 20px; height: 20px; margin-right: 3px; border: none; outline: none;}
.saved-group input[type="checkbox"]:checked{background-image: url(/AppData/images/common/check_checked.png);}
.saved-group label{color: #888; vertical-align: middle; cursor: pointer;}


/*id * pw 찾기 & 회원가입*/
.find-btn-group span{position: relative; display: inline-block; margin: 0 10px; color: #999;}
.find-btn-group span>a:hover{color: #666;}
.find-btn-group .find-pw::before, .find-btn-group .signin::before{position: absolute; top: 3px; left: -12px; content: ""; width: 1px; height: 14px; background:#ccc;}


/*SNS 간편 로그인*/
.login-sns-group{margin: 50px auto;}
.login-sns-group .easy-login{position: relative; padding-bottom: 25px;}
.login-sns-group .easy-login::before{position: absolute; top: 25%; left: 0; content: ""; width: 100%; height: 1px; background: #ccc;}
.login-sns-group .easy-login span{position: relative; padding: 0 20px; background: #fff; z-index: 2;}

.login-sns-group .login-naver, .login-sns-group .login-kakao{display: inline-block; width: 50px; height: 50px; line-height: 50px; margin: 0 15px; border-radius: 50%; content: ""; background-repeat: no-repeat; background-position: center; background-size: 20px; text-indent: -9999px; overflow: hidden;}
.login-sns-group .login-naver{background-image: url(/AppData/images/common/sns_naver.png); background-color: #04cf5c;}
.login-sns-group .login-kakao{background-image: url(/AppData/images/common/sns_kakao.png); background-color: #fae100;}

/*비회원*/
.login-guest-group .login-guest{width:20%; min-width:150px; height:45px; margin-top: 20px; background: #fff; border:1px solid #ccc; line-height:45px;}
.login-guest-group .login-guest:hover{background: #f5f5f5;}


@media (max-width: 640px){
    .login-container{background: #fff;}
}

@media (max-width: 375px){
	.find-btn-group{font-size: 13px;}
}


/* =======================================================
    아이디 찾기 & 비밀번호 재설정
    2021-11-17 작업 (이승진)
========================================================*/
/*공통*/
.fm--find{height: 100vh; background: #f5f5f5; padding-top: 150px;}
.container-inner{position: relative; width: 100%; max-width: 600px; margin: 0 auto; background: #fff;}

/*아이디 & 비밀번호 탭*/
.tab-nav02{margin: 80px auto 0;}
.tab-nav02 ul{width: 100%; margin: 0 auto; border-bottom: 1px solid #ddd; background: #fff; text-align: center;}
.tab-nav02 ul li{position: relative; float: left; width: 50%; height: 50px; line-height: 50px;}
.tab-nav02 ul li.current a::after, .tab-nav02 ul li.current button::after{position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; content: ""; background: #173a84;}

/*아이디 찾기 - 라디오 버튼*/
.find-container label{ vertical-align: middle; cursor: pointer;}
.fm--find .find-container, .fm--find .result-id-container, .fm--find .reset-pw-container{padding: 80px 50px 100px;}
.fm--find .radio-wrapper{margin-bottom: 20px;}
.radio-wrapper .radio-group{float: left;}
.radio-wrapper .radio-group:first-child{margin-right: 15px;}

input[type="radio"]{display: inline-block; content: ""; background-image: url(/AppData/images/common/radio_default.png); background-repeat: no-repeat; background-position: center; background-size: cover; width: 20px; height: 20px; margin-right: 3px; border: none; outline: none;}
input[type="radio"]:checked{background-image: url(/AppData/images/common/radio_checked.png); background-repeat: no-repeat; background-position: center; background-size: cover; width: 20px; height: 20px; display: inline-block; margin-right: 3px;}

@media (max-width: 960px){
  .fm--find .find-container, .fm--find .result-id-container, .fm--find .reset-pw-container{padding: 50px 20px;}
}

/*아이디 찾기 - 가입된 아이디*/
.result-id-container .result-wrapper{margin: 10px 0 20px;}
.list-dot > li{font-size: 14px; margin: 5px 0;}
.list-dot > li::before{display: inline-block; content: ""; width: 3px; height: 3px; margin-right: 7px; background: #333; border-radius: 50%; vertical-align: middle;}
.result-id-container .result-list .date{font-size: 13px; color: #999;}
.result-id-container .result-list .date em{font-style: normal;}
.login-btn-group .btn-find{width: 100%; height: 45px; line-height: 45px; background: #333; font-size: 14px; color: #fff; text-align: center;}
.login-btn-group .btn-find.btn-reset{margin-top: 10px; background: #fff; color: #333; border: 1px solid #bbb;}


/*아이디 찾기  & 비밀번호 재설정 input*/
.fm--find .login-wrapper{margin-bottom: 20px;}
#find_name, #find_phone, #find_id, #find_phone, #find_email, .input-send-phone{width: 100%;  height: 40px;  line-height: 40px; border: 1px solid #ccc; margin: 5px 0;}
#find_name:hover, #find_phone:hover, #find_id:hover, #find_phone:hover, #find_email:hover, .input-send-phone:hover{border-color: #000; transition: .1s;}

.btn-send-group{width: 100%; }
.btn-send-group .send-btn{float: left; width: 130px; height: 45px; margin: 5px 0 5px 4px; line-height: 45px; border: 1px solid #000; background: #000; color: #fff;}

.login-btn-group{width: 100%; height: 45px; margin-top: 15px;}
.btn-black{width: 100%; height: 45px; margin: 0; background: #000; color: #fff;}


/*인증번호 입력*/
.fm--find .box-certification{margin-top: 20px; background: #fafafa; border: 1px solid #ccc; padding: 10px;}
.fm--find .find-container .input-btn-group{margin-top: 10px; }
.input-btn-group .input-text{float: left; width: calc(100% - 134px); height: 40px; line-height: 40px; border: 1px solid #ccc;}
.input-btn-group .input-text + .btn{float: left; width: 130px; height: 40px; margin-left: 4px; padding: 0 15px; border: 1px slid #ccc; background: #000; color: #fff; line-height: 40px;}
.box-certification .input-btn-group + .text-guide{margin-top: 5px;}
.login-wrapper .text-guide{margin: 5px auto 0; color: #f82a2a; font-size: 12px; text-align: left;}
.font-red{color: #ff0000 !important;}


/*비밀번호 재설정*/
.fm--find .reset-pw-container .description{font-size: 16px; color: #000; margin-bottom: 30px; text-align: center;}
.fm--find .reset-pw-container .form-wrapper{display: table; padding: 0; margin: 0; border-collapse: collapse; border-spacing: 0; word-break: break-all; white-space: nowrap; table-layout: fixed; width: 100%; border-top: 1px solid #ddd; border-bottom: 1px solid #e0e0e0; background: #fff;}
.form-dl{display: table-row; box-sizing: border-box;}
.form-dl:first-child{margin-top: 0;}
.form-dl .input-title{display: block; font-size: 14px; color: #000; margin-bottom: 5px;}
.form-dl dt, .form-dl dd{display: table-cell; padding: 20px; border-top: 1px solid #e0e0e0; vertical-align: middle; word-break: break-all; word-wrap: break-word;}
.form-dl dt{background: #f5f5f5; text-align: right;}
.fm--find .reset-pw-container dt{width: 30%;}
.fm--find .reset-pw-container dd{width: 70%;}
.fm--find .reset-pw-container input{border: 1px solid #ccc;}
.fm--find .reset-pw-container .input-text{width: 100%;}
input[type="text"].readonly{background: #e6e4e4; color: #888;}
.form-dl .text-guide{display: block; float: none; clear: both; margin-top: 5px; font-size: 12px !important; color: #999; text-align: left; letter-spacing: 0.01em; white-space: normal;}
.form-dl .text-guide.capslockp{color: #f82a2a;}
.btn-reset-pw{margin-top: 30px;}

@media (max-width:960px){
   .fm--find .reset-pw-container .form-wrapper{display: block; border: none;} 
   .form-dl{display: block; padding: 20px 0;}
   .form-dl dt, .form-dl dd{display: block; padding: 0; border: none;}
   .fm--find .reset-pw-container dt, .fm--find .reset-pw-container dd{width: 100%; background: #fff; box-sizing: border-box;}
   .form-dl dt{text-align: left;}
}