@charset "utf-8";

/*로그인창*/
.login {margin-top: 40px;}
.login .txt_zone{text-align: center;}
.login .txt_zone .eng_title {padding-left:3px;  width: 100%; font-size: 16px; font-weight: 700; color: #00ad1d; line-height: 1; letter-spacing: 10px; margin-bottom:15px;}
/* .greet .txt_zone .eng_title:after {content:''; display:block; width:20px; height:5px; background:#00ad1d; } */
.login .txt_zone .kor_title {margin-bottom:5px; width: 100%;  font-family: 'HDHyundai'; font-size: 50px; font-weight: 700; line-height: 48px; color: black;}

@media screen and (max-width:1400px){
    .login .txt_zone {margin: 0 auto; margin-top:50px;}
}
@media screen and (max-width:1000px){
    .login {margin-top:50px; margin-bottom:150px;}

    .login .txt_zone .kor_title {font-size: 40px;  margin-bottom: 30px; word-break: break-all;}
    .login .txt_zone .kor_title span {word-break: break-all;}
}
@media screen and (max-width:700px){
    .login .txt_zone .title {width:80%;}
    .login .txt_zone .eng_title {letter-spacing: 4px; font-size: 13px; margin-bottom: 12px;}
    .login .txt_zone .kor_title {font-size: 30px; line-height:35px;}
}


.login_box {padding:40px 0 63px 0; text-align:center; max-width:1000px; margin:0 auto;}
.login_box > strong {display:block; font-size:29px; color:#1b1b1b;}
.login_box .txt_zone > p {margin:5px 0 50px 0; font-size:16px; color:#3e3e3e;}
.login_box .loginType {width:55%; margin:0 auto 5px auto;}
.login_box .loginType select {width:100%;}
.login_box .login_form {position:relative; width:55%; margin:0 auto;}
.login_box .login_form ul li {position:relative; padding-left:56px;}
.login_box .login_form ul li.inBox2 {margin-top:-1px;}
.login_box .login_form ul li label {position:absolute; top:0; left:0; border:1px solid #cccccc; border-right:0;}
.login_box .login_form .loginBtn {position:absolute; top:0px; right:0px;}
.login_box .login_form .loginBtn button {display:inline-block; width:120px; line-height:109px; background:#0053a5; color:#ffffff; font-size:17px; transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out;}
.login_box .login_form .loginBtn button:hover,.login_box .login_form .loginBtn button:focus {background:#05407a;}
.login_box .login_form .loginBtn2 button {display:block; width:100%; height:55px; background:#0053a5; color:#ffffff; font-size:17px; transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out;}
.login_box .login_form .loginBtn2 button:hover,.login_box .login_form .loginBtn button:focus {background:#05407a;}
.login_link {margin:45px 0; padding:27px 20px; background:#fafafa; border:1px solid #e6e6e6;}
.login_link p {font-size: 16px; margin-bottom:15px; color:#555555;}
.login_link p span{display: inline-block; margin-top: 5px; color: #999;}
.login_link .btn_area {text-align:center;}
.login_link .btn_area a {min-width:220px; margin-bottom:3px;}
.join_link {padding-top:35px; border-top:1px solid #dcdbdb;}
.join_link .ul li {font-size:16px; text-align:left; font-weight:normal; color:#999;}
.inputLogin[type="text"] {width:100%; height:55px; padding:0 0 0 5%; border:1px solid #cccccc; }
.inputLogin[type="password"] {width:100%; height:55px; padding:0 0 0 5%; border:1px solid #cccccc; }

@media all and (max-width:1024px) {
	/* 로그인 */
	.login_box .loginType, .login_box .login_form, .find_form {width:100%;}
}
@media all and (max-width:620px) {
	.login_box > strong {font-size:18px;}
	.login_box > p {font-size:14px;}
	.login_box .login_form {padding-bottom:50px}
	.login_box .login_form .loginBtn {top:auto; bottom:0; width:100%}
	.login_box .login_form .loginBtn button {width:100%; line-height:50px;}
}

@media all and (max-width:800px) {
	.login_box {padding: 0 0 30px 0;}	
	.login_box > p {margin-bottom:6%;}
	.login_link {margin:6% 0;}
}

.login_link_box{display: flex; gap: 5px; justify-content: center;}

.btn_st {display:inline-block; height:55px; min-width:122px;  /* border-radius:4px; */position:relative; margin-bottom:3px; padding:0 10px; line-height:50px; vertical-align:middle; cursor:pointer; transition:all 0.15s ease-out; background:#353c47; color:#fff; border:1px solid rgba(0,0,0,0.2); font-size:16px; font-weight:normal; text-align:center;}
.btn_st:hover {background:#111; text-decoration:none;}
.btn_st.tiny {height:42px; padding:0 20px; font-size:15px; line-height:41px; min-width:auto}
.btn_st.tiny_s {height:30px; padding:0 6px; font-size:12px; line-height:29px;}
.btn_st.big {height:70px; width:400px; padding:0 6px; font-size:18px; letter-spacing:-1px; line-height:70px;}
.btn_st.opa {background:transparent !important; color:#fff !important; border-color:#fff !important;}
.btn_id {height: 42px !important; line-height: 40px !important; margin-left: 5px; transform: translateY(2px);}

@media screen and (max-width:620px){
    .btn_area {padding-top:3px;}
	.btn_st {height:38px; line-height:38px; padding:0 15px; font-size:14px; min-width:100px;}
	.btn_st.big {line-height:40px; height:43px !important; padding:0 10px; min-width:150px; width:auto; font-size:14px;}
	.btn_st.tiny {padding:0 12px; height:38px; font-size:14px; line-height:38px;}
    .login_link_box{flex-direction: column; gap: 0px;}
    .btn_st{height: 100%; width: 100%;}
	.btn_id{height: 42px !important; line-height: 40px !important; margin-left: 5px; transform: translateX(-4px);}
}

/*아이디, 비밀번호 찾기*/

.find .txt_zone .eng_title {padding-left:3px;  width: 100%; font-size: 16px; font-weight: 700; color: #00ad1d; line-height: 1; letter-spacing: 10px; margin-bottom:15px;}
/* .greet .txt_zone .eng_title:after {content:''; display:block; width:20px; height:5px; background:#00ad1d; } */
.find .txt_zone .kor_title {margin-bottom:20px; width: 100%;  font-family: 'HDHyundai'; font-size: 50px; font-weight: 700; line-height: 48px; color: black;}
.find .txt_zone p{color: #555555; margin: 0 0 20px 0;}
.find .txt_zone p br{display: none;}

.find li input{height: 42px;}
.find li div.email2 input.text, .find li div.email3 input.text{width:30%; height: 42px; min-width: 120px;}
.find li div.email2 select, .find li div.email3 select{height: 42px;}

@media screen and (max-width:1400px){
    .find .txt_zone {margin: 0 auto; margin-top:50px;}
}
@media screen and (max-width:1000px){
    .find {margin-top:50px; margin-bottom:150px;}

    .find .txt_zone .kor_title {font-size: 40px;  margin-bottom: 15px; word-break: break-all;}
    .find .txt_zone .kor_title span {word-break: break-all;}
}
@media screen and (max-width:700px){
    .find .txt_zone .title {width:80%;}
    .find .txt_zone .eng_title {letter-spacing: 4px; font-size: 13px; margin-bottom: 10px;}
    .find .txt_zone .kor_title {font-size: 30px; line-height:35px;}
    .find .txt_zone br{display: block;}
}

.find_form .mb_list li{display: table; width: 100%; overflow: hidden;}

.find_form {width:70%; margin:0 auto; margin-bottom:50px;}
.find_form .type_select {text-align:center; padding-bottom:20px;}
.mb_list {border-top:1px solid #ccc; }
.mb_list li {position:relative; display:table; width:100%; overflow:hidden; border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; font-size: 16px;}
.mb_list li > label {display:table-cell; width:150px;height:60px; border-right:1px solid #ccc; background:#f7f7f7; color:#444468; font-weight:500;  vertical-align:middle;}
.mb_list li > div {display:table-cell; vertical-align:middle; padding:10px; text-align:left;}
.mb_list li > div:after {content:''; display:block; clear:both;}
.mb_list li > div > label {margin-right:5px;}
.mb_list li > div .w100{width: 100%;}
.mb_list li input[type="text"],.mb_list li input[type="tel"], .mb_list li input[type="number"], .mb_list li input[type="password"],.mb_list li select {margin:1px 0;}
.mb_list li input .text{height: 42px; padding: 0 7px; border: 1px solid #d4d4d4;}
.mb_list li .btn_confirm {width:auto; padding:0 10px; height:38px; margin-right:0; background:#757a84; color:#fff;}
.mb_list li .btn_confirm:hover {background:#5d636e; transition:all 0.15s ease-out;-webkit-transition:all 0.15s ease-out; -o-transition:all 0.15s ease-out; -moz-transition:all 0.15s ease-out;}
.mb_list li .data_tx p {color:#888; font-size:13px;}
.mb_list li .time_mark {display:inline-block; margin-left:10px;}

.btn_navy {background:#0053a5; border-color:#0053a5; color:#fff;} /* 서브색상 */
.btn_navy:hover {background:#044483; border-color:#044483;}

.login_box .btn_area{padding-top: 20px;}

@media all and (max-width:1024px){
    .find_form{width: 100%;}
}
@media all and (max-width:480px) {
    .mb_list li > label {width:80px; padding-left:6px; height:auto; line-height:inherit; font-size:13px;}
    .mb_list li > div {padding:5px; height:40px;}
    .mb_list li .time_mark {margin-left:0;}
}
@media all and (max-width:420px) {
    .mb_list li > div .w30 {width:25%;}
}

/*회원가입*/
.signup .txt_zone{text-align: center; margin-top: 100px;}
.signup .txt_zone .eng_title {padding-left:3px;  width: 100%; font-size: 16px; font-weight: 700; color: #00ad1d; line-height: 1; letter-spacing: 10px; margin-bottom:15px;}
/* .greet .txt_zone .eng_title:after {content:''; display:block; width:20px; height:5px; background:#00ad1d; } */
.signup .txt_zone .kor_title {margin-bottom:5px; width: 100%;  font-family: 'HDHyundai'; font-size: 50px; font-weight: 700; line-height: 48px; color: black;}

.signup .sub_wrap{padding-top: 40px;}
@media screen and (max-width:1400px){
    .signup .txt_zone {margin: 0 auto; margin-top:50px;}
}
@media screen and (max-width:1000px){
    .signup {margin-top:50px; margin-bottom:150px;}

    .signup .txt_zone .kor_title {font-size: 40px;  margin-bottom: 30px; word-break: break-all;}
    .signup .txt_zone .kor_title span {word-break: break-all;}
}
@media screen and (max-width:700px){
    .signup.txt_zone .title {width:80%}
    .signup .txt_zone .eng_title {letter-spacing: 4px; font-size: 13px; margin-bottom: 12px;}
    .signup.txt_zone .kor_title {font-size: 30px; line-height:35px;}
}

/* data */
.data_tit {display:block; margin-top: 10px; margin-bottom:15px; font-size:22px; color:#3e3e3e; font-weight:500; letter-spacing:-1px;}
.data_list {width:100%; line-height:19px;}
.data_list tbody tr th,.data_list tbody tr td {padding:9px; border:1px solid #d9d9d9; font-size:16px; word-break: break-all; }
.data_list tbody tr th {padding-left:30px; background:#f7f7f7; color:#333; font-weight:500; word-break:keep-all; text-align:center; }
.data_list tfoot tr td{padding:25px 30px; border:1px solid #d9d9d9; color:#666; line-height:30px; text-align:left;}

/* data_plus  */
.data_tit {display:block; margin-bottom:15px; font-size:22px; color:#3e3e3e; font-weight:500; letter-spacing:-1px;}
.data_list {width:100%; line-height:19px;}

/* data-input */
.data_list .tit {width:20%; margin-bottom:15px;}

.data_list tbody tr td .text, .data_list tbody tr td .select{height: 42px;}
.data_list tbody tr td .w100{width: 100%;}
.data_list tr td.select .select {width:65%;} 
.data_list tr td.mail .text {width:180px;}

.data_list tr td span.hyphen {display:inline-block; height:42px; padding:0 4px; line-height:42px; text-align:center;}
.data_list tr td.call1 .select, .data_list tr td.call1 .text, .data_list tr td.call2 .select, .data_list tr td.call2 .text {width:80px;}
.data_list tr td.mail .select{width: 150px;}

/* agree */
.agree_tit{margin-top: 20px;} 
.agree_box {height: 150px;   padding:20px 30px 19px 30px; background:#fcfcfc; border:1px solid #d9d9d9; border-bottom:0 none; color:#858585; font-size:14px; line-height:1.5; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ccc #f0f0f0; }
.agree_box::-webkit-scrollbar-button{display: none; height: 0;}
.agree_check {padding:20px 30px; border:1px solid #d9d9d9; font-size:14.5px; color:#666;}
.agree_check a {display:inline-block; padding-left:20px; color:#111; text-decoration:underline;}

@media screen and (max-width:800px){
    /* data */
	.data_list .tit {width:15%;}
	.data_list tbody tr th {padding:10px;}
	.data_list tbody tr td {overflow:hidden;}

	/* data-input */
	.data_list tr td span.hyphen {width:20px; padding:0;}	
	.data_list tr td.mail .text, .data_list tr td.mail .text, .data_list tr td.mail span.hyphen {float:left;}
	.data_list tr td.mail .text {width:32%;}
	.data_list tr td.mail .select {width:calc( 33% - 25px ); margin-left:5px;}
	.data_list tr td.select .select{width:100%;}
}

@media screen and (max-width:620px){
    /* data */
	.data_tit {margin-bottom:10px; font-size:18px; font-weight:bold; text-align: center;}
	.data_list colgroup {display:none;}
	.data_list tbody tr, .data_list tfoot tr {display:block; width:100%;}
	.data_list tbody tr th, .data_list tbody tr td, .data_list tfoot tr td {display:block; font-size:14.5px;}
	.data_list tbody tr th {padding:13px 12px; border-bottom:0 none; font-weight:bold;}
	.data_list tbody tr td {padding:9px 12px; margin-bottom:5px;}
	.data_list tfoot tr td {padding:18px 12px; line-height:19px; font-size:14px;}
	.data_list tfoot tr td p {margin-bottom:3px;}

	/* data-input */
	.data_list tr td span.email {width:20px;}
	.data_list tr td .text {width:100%;}
    .data_list tr td.call1,	.data_list tr td.call2{margin: 0 auto; text-align: center;}
	.data_list tr td.call1 span.hyphen, .data_list tr td.call2 span.hyphen {width: 13.5px;}
	.data_list tr td.call1 .select, .data_list tr td.call1 .text {width: calc(30% - 9px);}
	.data_list tr td.call2 .select, .data_list tr td.call2 .text {width: calc(30% - 9px);}
	
	select.change {padding:5px; padding-left:30px; padding-right:30px;}
	
	
	/* agree */
    .agree_tit{text-align: center;}
	.agree_box {padding:16px 12px}
	.agree_check {padding:12px 12px}
	.agree_check a {display:block; padding-left:0;}
	
	.data_list tr td.address .text, .data_list tr td.address > p, .data_list tr td.class_name .text, .data_list tr td.class_name > p {width:100%;}
}

/* 체크박스 - 이미지 */
input.checkbox{visibility:hidden; position:absolute; opacity:0; cursor:pointer;}
.ico_check {display:inline-block; position:relative; height:26px; line-height:25px; padding-left:33px;}
.ico_check:before {position:absolute; top:0; left:0; width:26px; height:26px; background-image:url('../images/member/ico_input.png'); background-repeat:no-repeat; content:''}
.checkbox.disabled + .ico_check{color:#999 !important; cursor:default;}

.checkbox + .ico_check:before {background-position:0 0;}
.checkbox:checked + .ico_check:before {background-position:0 -50px;}
.checkbox.disabled + .ico_check:before {background-position:0 -100px;}
.checkbox.disabled:checked + .ico_check:before {background-position:0 -150px;}


@media screen and (max-width:620px){
    .ico_check:before {background-size:45px auto;}
	.checkbox + .ico_check:before {background-position:-15px 0;}
	.checkbox:checked + .ico_check:before {background-position:-15px -30px;}
	.checkbox.disabled + .ico_check:before {background-position:-15px -60px;}
	.checkbox.disabled:checked + .ico_check:before {background-position:-15px -90px;}

    .ico_check {margin-top:10px; margin-bottom:10px;}
	input.text {margin-bottom:5px;}
}

.signup .btn_area{padding-top: 30px; display: flex; justify-content: center; gap: 5px;}
.btn_area button{min-width:220px; margin-bottom:3px;}

@media screen and (max-width:620px){
    .btn_area #btn_save, .btn_area #go_frist{width: calc((100% - 9px)/ 2); text-align: center;}
}

.signup .data_tit{margin-top: 20px !important;}
.signup .data_list input[type="text"].w32{width: 32% !important;}
@media screen and (max-width:620px){
	.signup .data_list input[type="text"].w32{width: 100% !important;}
}