/*--------------------------------------------------------------
# 로그인
--------------------------------------------------------------*/



/* ================== COMMON ================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* font-family: 'Inter', sans-serif; */
/* input{-webkit-appearance: none;} */
.disF{display: flex!important;}
.loWrap{
	position:relative;
	padding:200px 0px 200px 0px;
}
.loginWrap{margin: 0px auto 0px auto;
    max-width: 400px; width: 100%; 
    padding: 0 20px;
    position: relative;
}
.changePwrap{
	margin: -20px auto 125px auto!important;
}
.logmar90{margin-top:90px!important;}
.SbLogin_tit{ margin-bottom: 57px;
    font-size: 40px;
    line-height: 50px;
    letter-spacing: -2px;
    color: #222222;
    text-align: center;
    font-weight: 400;
}
.inputTit{
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;

}

/* btn */
.blu_btn{width: 100%; 
    display: block;
    background-color: #001b57; 
    font-size: 16px;
    font-weight: 500;
    line-height: 60px;
    letter-spacing: -0.20000000298023224px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    position: relative; 
    padding: 0 20px;
	cursor:pointer;
}
.blueLine_btn{width: 100%; 
    display: block;
    border: 1px solid #001b57;
    background-color: #fff;
    font-size: 16px; color: #001b57; font-weight: 400; text-align: center; line-height: 60px;
}
.blu_btn svg{position: absolute; right: 16px; top: 50%; 
    transform: translateY(-50%);
}
.Lgrey_btn{    
	color: #fff;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -1px;
    background-color: #333333;
    padding: 20px 87px;
    display: inline-block;
    border-radius: 0px;
    transition: all 0.3s;
}
.Lgrey_btn:hover{color: #fff}
.point_btn{max-width: 100px;
    padding: 12px 22px;
    background-color: #ccc;
    border-radius: 30px;
    font-size: 15px; font-weight: 400;; color: #fff; letter-spacing: -1px;
}
/* hover */
.blueLine_btn:hover{background-color: #001b57;
    color: #fff
}

/* //btn */

/* .pad_t100{ */
	/* padding-top:100px; */
/* } */

@media (max-width: 991px) {
    .SbLogin_tit{font-size: 40px;}
    
}
@media (max-width: 767px) {
    .SbLogin_tit{
		font-weight: 400;
		font-size: 30px;
        margin-bottom: 30px;
    }
    .blueLine_btn,
    .blu_btn,
    .Lgrey_btn{font-size: 15px; line-height: 50px;}
    .inputTit{font-size: 15px;
        padding-bottom: 10px;
    }
	/* .pad_t100{ */
		/* padding-top:40px; */
	/* } */
}
@media (max-width: 500px){
    .point_btn {
        width: 40%;
        padding: 10px 22px;
    }
}

/* ==================// COMMON ================== */

/* ================== LOGIN ================== */
.login_inputWrap{margin-bottom: 0;}

.loginWrap input::placeholder,
.regi_inputWrap input::placeholder{
    color:#aaa; 
}
.login_inputWrap input{width: 100%; height: 60px;
    padding:0!important;
    border: none;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    -webkit-appearance: none;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px!important;
    letter-spacing: 0px;
    text-align: left;
    font-family: Roboto;
    color:#222

}
.regi_inputWrap input:focus,
.loginWrap input:focus{
    border-color:  #E94827;
    color:#222;
    background-color: #fff;
}
.lomarT{margin-top:30px!important;}
.login_inputWrap + .login_inputWrap{margin-top: 15px;}
.loginContent .buttonWrap{margin: 30px 0 40px 0;}
.ex_loginWrap{margin-bottom: 70px;}
.ex_loginWrap strong{display: block; 
    width: 100%;
    margin-bottom: 20px;
    font-size: 16px;  font-weight: 400;
    line-height: 23px; letter-spacing: -0.5px;
    text-align: center;
    
}
.ex_loginListWrap{
    display: flex; justify-content: center; align-items: center;
} 
.ex_loginList{width: 50px; height: 50px;
    display: inline-block;
    text-indent: -9999px;
    cursor: pointer
}
.ex_loginList:nth-child(1){
    background: url(/img/icon/login_sns_01.png) no-repeat center ; 
    background-size: 100%;
}
.ex_loginList:nth-child(2){
    background: url(/img/icon/login_sns_02.png) no-repeat center ; 
    background-size: 100%;
}
.ex_loginList:nth-child(3){
    background: url(/img/icon/login_sns_04.png) no-repeat center ; 
    background-size: 100%;
}
.ex_loginList + .ex_loginList{margin-left: 20px;}
.findInfoWrap{margin-top: 30px;
    display: flex;     justify-content: right;align-items: center;
}
.findInfoList{padding: 7px 14px;
    position: relative;
}
.findInfoList a{font-size: 13px; color: #888; font-weight: 300;}
.findInfoList:first-child::after{
    width: 1px;
    height: 14px;
    background-color: #ddd;
    content: "";
    display: inline-block;
    position: absolute;
    right: -1%;
    top: 55%;
    transform: translateY(-50%);
}

@media (max-width: 991px) {
	.logmar90{margin-top:0px!important;}
    .loginWrap {  margin: 0 auto;}
	.changePwrap{
		margin: 0px auto 125px auto!important;
		padding: 50px 20px 80px 20px!important;
	}
}
@media (max-width: 767px) {
    .loWrap {
		position: relative;
		padding: 100px 0px 100px 0px;
	}
    .loginWrap { padding: 0px 20px 0px 20px!important; margin: 0 auto;}
    .ex_loginWrap {margin-bottom: 40px;}
    .loginWrap input::placeholder{font-size: 14px; }
    .login_inputWrap input{width: 100%; height: 50px;}
    .login_inputWrap + .login_inputWrap{margin-top: 10px;}
    .ex_loginWrap strong{font-size: 15px;
        margin-bottom: 15px;
    }
    .loginContent .buttonWrap{margin: 20px 0 33px 0}
    .findInfoWrap{margin-top: 15px;}
    .ex_loginList + .ex_loginList{ margin-left: 10px;}
	.changePwrap{
		margin: 0px auto 0px auto!important;
		padding: 0px 20px 80px 20px!important;
	}
}
/* ==================// LOGIN ================== */

/* ================== REGISTER ================== */

.regi_inputWrap{margin-bottom: 20px;
    border: none!important;
}
.input-field input{padding: 0!important;}
.regi_inputWrap input{
    width: 100%!important;
    height: 60px;
    padding: 21px 0;
    border: none;
    border-bottom: 1px solid #eee!important;
    -webkit-appearance: none;
    font-size: 15px;
    font-weight: 300;
    line-height: 22px;
}
.regi_inputContent{position: relative;
    width: 100%; 
    display: block;
    
}
label.error.fail-alert{
    display: inline-block;
    position: static;
    margin: 12px 0 0 0!important;
}
.regi_inputContent input:focus{border-color: #001b57!important;}

.regi_inputWrap input::placeholder{
    font-size: 15px; color:#aaa; font-weight: 350;
}
.regi_inputWrap.tel_inputWrap input#tel{max-width: 60%;}

.regi_inputWrap label{display: block;
    margin-bottom: 0;
    left: 0!important;
}
.login_inputWrap{position: relative;}
.loginContent .input-field label{
    left: 0;

}
label.error,
label.valid{
    color: orangered!important;
    font-size: 0.8rem!important;
    display: none;
    margin-top: 20px!important;
    position: static;
    display: block;

}
.confirmNumberBtn{ 
    /* min-width: 40%; */
    border-radius: 30px;
    background-color: #fff;
    color: #222;
    font-size: 12px;
    font-weight: 400;
    /* padding: 15px 18px; */
    vertical-align: top;
    margin-left: 10px;
    line-height: 17.38px;
    position: absolute;
    right: 0;
    color: #001b57;
    top: 50%;
    transform: translateY(-50%);
    text-indent: unset!important;
    width: auto!important; height: auto!important;
    background: none!important
}
.confirmNumberBtn:hover{ text-decoration: underline;}
.regi_inputContent.confirmContent{margin-top: 8px;
    display: block;
}
.confirmContent input{
    border: none;
    border-bottom: 1px solid #eee;
    padding-right: 50px;
}
.col_place input::placeholder{
	color:#001b57;
	font-weight:500;
}
.agreeCheckWrap{ position: relative;}
.agreeCheckWrap + .agreeCheckWrap{ padding-top: 10px;}
.agreeCheckWrap label{font-size: 14px; letter-spacing: -1px; color: #555;}
.agreeWrap{margin-top: 30px; margin-bottom: 30px;}
.agreeWrap label{margin-bottom: 0;}
.agreeWrap p{margin-bottom: 0;}
.agreeWrap small{
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 22px;  
}
.agreeWrap  a{
    font-size: 13px;
    font-weight: 300;
    line-height: 22px;
    float: right;
    text-decoration: underline;
    color: #888
}
.new-inquiry-wrap .agreeWrap small,
.new-inquiry-wrap .agreeWrap a{
    float: none;
    font-family: Noto Sans KR;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: -0.20000000298023224px;
    text-align: left;

}

/* checkBox */
.customCheckbox .labelTxt{display: block;
     padding-left: 30px;
}
.customCheckbox input[type="checkbox"] {width: 0;height: 0;
    opacity: 0;
    position: relative;left: 0; top: 0;
    z-index: 10000;
    cursor: pointer;
}

.customCheckbox input[type="checkbox"] + label {display: inline-block;
    position: absolute; left: 0;
    cursor: pointer;
    -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;
    font-size: 15px;
    width: 100%;
}
.customCheckbox input[type="checkbox"]:checked + label:after{
    content: "";
    display: inline-block;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    width: 6px;
    height: 11px;
    position: absolute;
    left: 7px;
    top: 40%;
    transform: translateY(-50%) rotate(45deg);
}
.customCheckbox input[type="checkbox"]:checked + label:before {
    /* content: '\2714'; */
    content: '';
    background-color: #001b57;
}
.customCheckbox input[type="checkbox"] + label:before {content: ' ';
    display: inline-block;
    width: 20px;height: 20px;
    line-height: 3px;font-size: 17px;text-align: center;
    vertical-align: middle;
    background: #f6f6f6;
    position: absolute;left: 0;top: 50%;
    transform: translateY(-50%);
}

.loginHook{margin-top: 20px;}
.loginHook p{
    font-size: 13px;
    font-weight: 300;
    line-height: 18px;
    letter-spacing: -0.4px;
    text-align: center;
    color: #888

}
.loginHook a{ color: inherit; font: inherit; text-decoration: underline}

/* validation */
.regi_inputWrap.error .check,
.regi_inputWrap .check{position: absolute; right: 0; top: 15px;
    font-size: 12px; font-weight: 450; color: #E94827; line-height: 30px;
    visibility: hidden;
    display: none;
}
.regi_inputWrap.success .check{position: absolute; right: 0; top: 15px;
    font-size: 12px; font-weight: 450; color: #53c68a; line-height: 30px;
    visibility: visible;
    display: block;
}
.regi_inputWrap.error .check::after,
.regi_inputWrap .check::after{content:"";
    width: 17.5px; height: 15px;
    background-size: 100%;
    display: inline-block;
    background-size: 100%;
    vertical-align: middle;
    margin-left: 10px;
    visibility: hidden;
    display: none;
}
.regi_inputWrap .success.check::after{content:"";
    width: 17.5px; height: 15px;
    background:url(/taste_en/public/img/login/join_icon_01.png) no-repeat center;
    background-size: 100%;
    display: inline-block;
    background-size: 100%;
    vertical-align: middle;
    margin-left: 10px;
    visibility: visible;
    display: inline-block;
}
.regi_inputWrap .error.check::after{content:"";
    visibility: hidden;
}
.inputWrap.success .errowMessage,
.regi_inputWrap .errowMessage{display: block;
    font-size: 12px; font-weight: 400; color: #ff0000;
    margin-top: 9px;
    visibility: hidden;
    display: none;
}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }

.regi_inputWrap.error .errowMessage{display: block;
    font-size: 12px; font-weight: 400; color: #ff0000;
    margin-top: 9px;
    visibility: visible;
    display: block;
}
@media (max-width: 767px) {
    .regi_inputWrap{margin-bottom: 20px;}
    .agreeWrap{margin: 20px 0}
    .regi_inputWrap input{max-height:50px}
   
}
/* ==================// REGISTER ================== */

/* ================== FORGET PASSWORD ================== */
.forget_tabMenuWrap{width: 100%;
    display: flex; justify-content: center; align-items: center;
    position: relative;
    margin-bottom: 40px;
}
.forget_tabMenuList{
    flex: 1;
    text-align: center;
    border-bottom: 1px solid #ddd; 
    border-radius:  0;
    max-height: 60px;

}
.forget_tabMenuWrap a{
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    text-align: center;
    padding: 18px 0;
    display: inline-block;
    color: #bbb
}
.forget_tabMenuList:last-child{
    margin-left: -1px 
}
.forget_tabMenuList:hover, 
.forget_tabMenuList.on{
    border-color: #333
}
.forget_tabMenuList:hover a,
.forget_tabMenuList.on a{
    color: #333
}
.reinfopasswordText{
	font-size: 18px;
	 font-family: 'S-CoreDream-3Light';
	     margin-bottom: 20px;
}
.reinfopasswordText span{
	font-family: 'S-CoreDream-7ExtraBold';
    font-weight: 900;
    display: inline-block!important;
	width:auto!important;
}

.reinfopassword b {
    position: relative;
    padding-left: 38px;
    font-size: 18px;
    font-family: 'S-CoreDream-3Light';
    display: inline-block;
    font-weight: 400;
    letter-spacing: -0.5px;
}
.reinfopassword b img {
    display: inline-block;
    height: 30px;
    position: absolute;
    left: 0px;
    top: -1px;
}
.reinfopassword b span {
    font-family: 'S-CoreDream-7ExtraBold';
    font-weight: 900;
    display: inline-block;
	width:auto!important;
}

.forgetId_noInfo,
.forgetId_Info{text-align: center;}
.forgetId_noInfo p,
.forgetId_Info p{padding: 50px 0;}
.forgetId_Info p{font-size: 15px; color: #333;}
.forgetId_Info small,
.forgetId_Info span{font: inherit;}
.resetPassword{font-size: 15px; color: #333; text-decoration: underline;
    margin-top: 30px;
    display: block;
}
.forgetId_Info span{display: block;width: 100%;}
.registeredDateWrap{margin-top: 10px;
    font-size: 16px; color: #aaa;
}
.loginMethod{    font-family: 'Inter'!important;}
@media (max-width: 767px){
    .forget_tabMenuList{border-radius: 10px 0 0 0;}
    .forget_tabMenuList:last-child{border-radius:  0 10px 0 0;}
    .regi_inputWrap .buttonWrap{margin-top: 30px;}
	.reinfopasswordText {
		font-size: 16px;
		margin-bottom: 14px;
		line-height: 26px;
	}
    .forget_tabMenuList{
        max-height: 50px;
    }
    .forget_tabMenuWrap a{
        font-size: 16px;
        padding: 10px 0;
    }
}
/* ==================//  FORGET PASSWORD ================== */
/* terms popup */
.pop_terms{max-height: 500px; 
    margin-top: 20px;
    overflow-y: scroll;
    overflow-x: hidden;
    font-weight: 300;font-size: 13px; letter-spacing: -0.1px;
}
.pop_terms::-webkit-scrollbar{width: 5px;}
.pop_terms::-webkit-scrollbar-track{background-color: #fff;border-radius: 10px;}
.pop_terms::-webkit-scrollbar-thumb{background-color: #dddddd;border-radius: 10px;}

.pop_terms strong{font-weight: 700; 
    display: block;
    margin-bottom: 5px;
}
.footer_term .tutorPopup_inner {width: 60%;}
.footer_term .tutorPopup{width: 100%;}
/* .footer_term{ */
	/* display:none; */
/* } */
.footer_term_popup {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.65);
    z-index: 9999;
}



@media (max-height: 840px){
	.pop_terms {
		max-height: 400px;
	}
}
@media (max-width: 767px){
	.pop_terms{
		max-height: 400px; 
	}
    .footer_term .tutorPopup_inner{width: 95%;}
}
@media (max-width: 550px){
    .footer_term .tutorPopup_inner{width: 100%;}
}