@charset "utf-8";
/* 로그인, 아이디비번찾기 */
/* color */
*{
	--iden:#1c2e4a;
	--iden2:#3b5d97;
}
	.tit {margin-bottom:40px; text-align:center;}
	.tit strong {display:block; font-size:32px; color:#222; line-height:35px; margin-bottom:10px;}
	.tit p {font-size:17px; color:#777; line-height:26px;}
	.tit_s {font-size:17px; color:#333; line-height:26px;}
	.login_wrap .inputs {width:490px; max-width:100%; margin:0 auto;}
	.login_wrap .inputs .text {height:55px; width:100%;}
	.login_wrap .inputs .text + .text {margin-top:10px;}
	.login_wrap .inputs .btn {display:block; font-size:20px; color:#fff; line-height:60px; height:60px; width:100%; border:0px; background:var(--iden); border-radius:5px; margin-top:20px;}
	.login_wrap .inputs .btm {margin-top:20px; justify-content:space-between;}
	.login_wrap .inputs .links {display:flex; gap:38px;}
	.login_wrap .inputs .links a {position:relative; font-size:15px; color:#a8a8a8; font-weight:500;}
	.login_wrap .inputs .links a + a:before {content:""; position:absolute; top:50%; left:-19px; width:1px; height:12px; background:#e1e1e1; transform:translateY(-50%);}
	.login_wrap .btns_btm {margin-top:45px; padding-top:45px; border-top:#e1e1e1 1px solid;}
	.login_wrap .flex {padding:20px 0 30px; align-items:center; gap:20px;}
	.login_wrap .flex.tel {gap:10px;}
	.login_wrap .flex.tel span {width:16px; text-align:center;}
	.login_wrap .flex.tel .text {width:calc((100% - 72px)/3);}
	.login_wrap .btn_link {display:block; width:250px; max-width:100%; border-bottom:#00457e 2px solid; font-size:17px; color:#00457e; line-height:38px; background:url('/images/icon_link.png') no-repeat 100% 50%; margin:0 auto;}
	.login_wrap .jq_tabonoff {width:490px; max-width:100%; margin:0 auto;}
	.login_wrap .tabs {display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:45px;}
	.login_wrap .tabs button {width:calc(50% - 10px); color:#b2b2b2; font-weight:300; line-height:54px; height:56px; padding:0 28px; border:#e1e1e1 1px solid; border-radius:10px;}
	.login_wrap .tabs button.on {color:#fff; background:var(--iden); border-color:var(--iden);}
	.login_wrap .tt {font-weight:700; margin:30px 0 10px;}

	/* 회원가입 */
	.join_type {position:relative; display:flex; gap:34px; width:650px; max-width:100%; margin:0 auto; padding: 40px 35px; }
	.join_type a {width:calc(50% - 17px);padding:50px; text-align:center;}
	.join_type a:before {content:""; display:block;margin:0 auto 35px; background:no-repeat 50% 50%;}
	.join_type strong {display:block; font-size:25px; line-height:150px; border:#e1e1e1 1px solid; width:150px; height:150px; border-radius:50%; }
	.join_type p {font-size:16px; color:#666; font-weight:300; line-height:23px; margin-top:35px;}
	.join_type .i1 strong {background:#774577;  color:#fff;}
	.join_type .i2 strong {background:#f28e4c;  color:#fff;}
	.dtit {position:relative; font-size:19px; font-weight:500; line-height:22px; padding-left:20px; margin-bottom:10px;}
	.dtit:before {content:""; position:absolute; top:50%; left:0; width:8px; height:8px; background:#b9b9b9; border-radius:50%; transform:translateY(-50%);}

	.join_inputs {width:650px; max-width:100%; margin:0 auto; padding: 40px 35px;  border:#e1e1e1 1px solid;}
	.join_inputs .text_area {margin-top:15px; border:#d7d7d7 1px solid; border-radius:5px; padding:20px 15px;}
	.join_inputs .text_area.mt {margin-top:30px;}
	.join_inputs .con {margin-top:20px; height:88px; font-size:14px; color:#666; line-height:22px; overflow:auto;}
	.join_inputs .btns_tac .btn {margin:0;}
	.join_inputs .dls {border-top:#323232 1px solid; padding:20px 0;margin-top:20px;}
	.join_inputs .dls .inbox {width:550px; max-width:100%;}
	.join_inputs .dls dl {padding:10px 0; display:flex; line-height:20px;}
	.join_inputs .dls dl.thin {padding:0; line-height:34px;}
	.join_inputs .dls dt {width:130px; font-size:14px; color:#2a2a2a;}
	.join_inputs .dls dd {width:calc(100% - 130px); font-size:15px; display:flex; gap:6px; flex-wrap:wrap;}
	.join_inputs .dls .text {display:block; height:40px; border-radius:5px; margin:0;}
	.text::placeholder {color:#999;}
	.join_inputs .text,
	.join_inputs .btn {display:block; height:42px; line-height:40px; border-radius:5px;}
	.join_inputs .text {font-size:14px; border:#e1e1e1 1px solid; margin-top:14px;}
	.join_inputs .btn {font-size:15px; color:#fff; background:#323232; margin-top:30px;}

	.join_inputs .dls .tel {gap:0;}
	.join_inputs .dls .tel .text {width:calc((100% - 60px)/3);}
	.join_inputs .dls .tel select.text {padding:0 10px;}
	.join_inputs .dls .tel span {width:30px; line-height:42px; text-align:center; font-size:12px;}
	.join_inputs .dls .inbtn {display:flex; gap:5px;}
	.join_inputs .dls .inbtn .text {width:200px; display:inline-block;}
	.join_inputs .dls .inbtn .btn {width:100px; height:40px; line-height:42px; font-size:14px; text-align:center; color:#fff; background:#323232; border-radius:5px; margin:0; padding:0;}
	.join_inputs .tooltip {font-size:0.9em; line-height:1.2em;}


	.join_end {padding:60px 55px 50px; text-align:center;}
	.join_end:before {content:""; display:block; width:48px; aspect-ratio:1/1; background:url('/images/icon_end.png') no-repeat 50% 50% / contain; margin:0 auto 35px;}
	.join_end strong {display:block; font-size:30px; line-height:1.3em;}
	.join_end p {color:#777; font-weight:300; line-height:1; margin:12px 0 60px;}
	.join_end .btns {display:flex; justify-content:center; gap:22px;}
	.join_end .btn {width:calc(50% - 11px); border:var(--iden) 1px solid; line-height:62px;}
	.join_end .btn_ln {color:var(--iden); background:#fff;}
	.join_end .btn_bg {color:#fff; background:var(--iden);}
	/* 탈퇴 */
	#pop_secession .inbox {width:380px; text-align:center;}
	#pop_secession .cont {padding:45px 20px 90px;}
	#pop_secession .cont:before {content:""; display:block; width:104px; aspect-ratio:1/1; background:var(--iden) url('/images/icon_secession.png') no-repeat 50% 50%; border-radius:50%; margin:0 auto 40px;}
	#pop_secession strong {display:block; font-size:26px; line-height:1;}
	#pop_secession p {font-size:16px; color:#777; line-height:25px; margin:25px 0 30px;}
	#pop_secession .btn {display:block; width:230px; height:50px; font-size:16px; margin:0 auto; border:1px solid; border-radius:5px;}
	#pop_secession .btn_bg {color:#fff; background:var(--iden); border-color:#var(--iden);}
	#pop_secession .btn_gl {color:#bcbcbc; background:#fff; border-color:#e1e1e1; margin-top:10px;}
	.secession {justify-content:flex-end; padding-top:20px;}
	.secession .btn {display:block; font-size:16px; color:#707070; line-height:48px; height:50px; width:100px; text-align:center; border:#e1e1e1 1px solid; border-radius:5px;}

@media screen and (max-width:1023px){
/* 로그인, 아이디비번찾기 */
	.login_wrap {padding:30px 45px;}
	.login_wrap .tit {font-size:28px; margin-bottom:35px;}
	.login_wrap .inputs .text {height:46px;}
	.login_wrap .inputs .text + .text {margin-top:10px;}
	.login_wrap .inputs .btn {font-size:18px; line-height:60px; height:60px;}

	.login_wrap .tabs button {line-height:48px; height:50px; padding:0 25px;}
	.login_wrap .tt {margin:25px 0 10px;}
/* 회원가입 */

/* 회원가입완료 */
	.join_end {padding:40px;}
	.join_end:before {width:44px; margin-bottom:30px;}
	.join_end strong {font-size:28px;}
	.join_end p {margin:10px 0 40px;}
	.join_end .btns {gap:20px;}
	.join_end .btn {width:calc(50% - 10px); line-height:58px;}
/* 탈퇴 */
	#pop_secession .cont {padding:45px 20px 70px;}
	#pop_secession .cont:before {width:90px; margin-bottom:30px;}
	#pop_secession strong {font-size:22px;}
	#pop_secession p {font-size:14px; line-height:22px; margin:22px 0 25px;}
	#pop_secession .btn {width:200px; height:40px; font-size:14px;}
}

@media screen and (max-width:767px){
/* 로그인, 아이디비번찾기 */
	.tit strong { font-size:22px; line-height:25px; }
	.tit p {font-size:13px; line-height:16px;}
	.tit_s {font-size:13px; line-height:16px;}

	.login_wrap {padding:0px;}
	.login_wrap .tit {font-size:18px; margin-bottom:20px;}
	.login_wrap .inputs .text {height:40px; padding:0 10px;}
	.login_wrap .inputs .text + .text {margin-top:5px;}
	.login_wrap .flex {padding:15px 0 20px; gap:10px;}
	.login_wrap .flex.tel {gap:5px;}
	.login_wrap .flex.tel span {width:10px;}
	.login_wrap .flex.tel .text {width:calc((100% - 40px)/3);}
	.login_wrap .inputs .btn {font-size:14px; line-height:40px; height:40px;}
	.login_wrap .btn_link {width:200px; font-size:14px; line-height:34px;}
	.login_wrap .inputs .btm {display:inline-block; margin-top:0px;}
	.login_wrap .inputs .links{position: relative; margin-top:10px;}
	.login_wrap .inputs .links a{font-size:13px; }

	.login_wrap .tabs {gap:4px; margin-bottom:20px;}
	.login_wrap .tabs button {line-height:38px; height:40px; padding:0 20px; width:calc(50% - 2px); text-align:center;}
	.login_wrap .tt {margin:20px 0 10px;}
/* 회원가입 */
	.dtit {font-size:16px; padding-left:12px; margin-bottom:5px;}
	.dtit:before {width:4px; height:4px;}
	.join_type {flex-direction:column; gap:10px;}
	.join_type a {width:100%; padding:20px;}
	.join_type a:before {width:60px; height:60px; margin-bottom:15px; background-size:50%;}
	.join_type strong {font-size:18px;}
	.join_type p {font-size:13px; line-height:20px; margin-top:20px;}

	
	.join_inputs {padding: 10px 0px;  border:0px;}
	.join_inputs .text_area {padding:10px; margin-top:10px;}
	.join_inputs .text_area.mt {margin-top:20px;}
	.join_inputs .con {font-size:13px; line-height:20px; height:80px; margin-top:10px;}
	.join_inputs .btns_tac .btn_kakao,
	.join_inputs .btns_tac .btn_naver {width:100%;}
	.join_inputs .text,
	.join_inputs .btn {height:40px; line-height:38px; font-size:13px;}
	.join_inputs .dls {padding:10px 0; margin-top:10px;}
	.join_inputs .dls dl {line-height:40px; padding:5px 0;}
	.join_inputs .dls dt {width:80px; font-size:13px;}
	.join_inputs .dls dd {width:calc(100% - 80px); font-size:13px;}
	.join_inputs .dls .text {height:40px; font-size:13px;}
	.join_inputs .dls .inbtn .text {width:calc(100% - 80px);}
	.join_inputs .dls .inbtn .btn {width:70px; height:40px; line-height:40px; font-size:13px;}
	.join_inputs .dls .tel span {width:20px; line-height:38px;}
	.join_inputs .dls .tel .text {width:calc((100% - 40px)/3);}

	.join_end {padding:20px;}
	.join_end:before {width:41px; margin-bottom:20px; background-size:contain;}
	.join_end strong {font-size:20px;}
	.join_end p {margin:5px 0 20px;}
	.join_end .btns {gap:10px;}
	.join_end .btn {width:calc(50% - 5px); line-height:38px;}
	.secession {padding-top:15px;}
	.secession .btn {font-size:13px; line-height:38px; height:40px; width:80px;}
/* 탈퇴 */
	#pop_secession .cont {padding:30px 20px 50px;}
	#pop_secession .cont:before {width:60px; margin-bottom:20px;}
	#pop_secession strong {font-size:18px;}
	#pop_secession p {font-size:12px; line-height:20px; margin:15px 0 20px;}
	#pop_secession .btn {width:100%; height:40px; font-size:13px;}
	#pop_secession .btn_gl {margin-top:5px;}
}