@charset "utf-8";


.memberLayout .login_box h3 {font-size:25px; font-weight:700; margin-bottom:20px; text-align:center; line-height: 1; color:#000;}
.login_box .form-group label {display: none;}
.login_box .form-group > div+div {margin-top:10px;}
.login_box .form-group .checkWrap {text-align:left;}
.login_box .form-group .checkWrap input {width:15px; height:15px; transform:translateY(-1px);}

.login_box .btn-wrap a {display: inline-block; width: 100%; color: #fff!important; background-color:var(--base1); line-height:1; border-radius:5px; font-size:20px; padding:16px 10px;
text-align:center; transition:all 0.2s;}
.login_box .btn-wrap a:hover {background:#023675;}
.login_box .info.box {display:flex; justify-content:center; margin-top:20px; gap:40px;}
.login_box .info.box a {display:inline-block; color:#000; font-weight:500; transform:var(--textRotate); position:relative; font-size:18px;}
.login_box .info.box > div {position:relative;}
.login_box .info.box > div+div:before {content:""; display:block; width:1px; height:16px; background:#999; position:absolute; left:-20px; top:7px;}
.login_box .info.box a:hover {color:var(--amethyst);}

.member .login .login_box {width:70%; display:grid; grid-template-columns: 320px auto; gap:50px; margin:0 auto; align-items: center; border:1px solid #e5e5e5; border-radius:10px; padding:50px;  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.03), 0 6px 6px rgba(0,0,0,0.03);}
.member .login .login_box .titBox div {display: flex; flex-direction: column; align-items: center; justify-content: center;}
.member .login .login_box .titBox div img {width:250px;}

form[class*="form-"] input[type="text"], form[class*="form-"] input[type="password"], form[class*="form-"] input[type="number"], form[class*="form-"] select, form[class*="form-"] textarea {border-left: 3px solid var(--base1);}

.member .login .more {width:70%; margin:0 auto; background:#f3f3f3; border:1px solid #ddd; border-radius:10px; margin-top:20px; padding:50px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.03), 0 6px 6px rgba(0,0,0,0.03);}
.member .login .more {display:grid; grid-template-columns: auto auto;}
.member .login .more li {padding-right:75px;}
.member .login .more li+li {border-left:1px solid #ddd; padding-left:75px; padding-right:0;}
.member .login .more p {font-size:var(--fontSize20); font-weight:600; margin-bottom:10px; text-align: center;}
.member .login .more div {display:flex; gap:10px;}
.member .login .more div a {width: 100%; background:var(--base2); padding:15px 20px; border-radius:5px; color:#fff; text-align:center; transition:.3s;}
.member .login .more div a:hover {background:#730a58;}
.member .login .more li:first-child div a {background:#686f7d; transition:.3s;}
.member .login .more li:first-child div a:hover {background:#393e47;}

.member .idsearchWrap {display:grid; grid-template-columns:repeat(2,1fr); gap:60px;}
.member .idsearchWrap .login_box {border:1px solid #ddd; border-radius:10px;  padding:50px;  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.03), 0 6px 6px rgba(0,0,0,0.03);}
.member .idsearchWrap .titBox p {text-align:center; margin-bottom:10px;}

.member .searchTit {margin-bottom:5px; color:var(--base1);}

.memberLayout .login_box .search_complete h3 {text-align:left;}
.memberLayout .login_box .search_complete span {color:var(--base2);}

select:focus{border-radius:5px !important;}




/* ************************ 태블릿 이하(~991) ************************ */
@media (max-width: 991px) { 

form[class*="form-"] input[type="text"], form[class*="form-"] input[type="password"], form[class*="form-"] input[type="number"], form[class*="form-"] select, form[class*="form-"] textarea {height:45px;}

/********* 로그인페이지 ***********/
.memberLayout .login_box {padding: 30px 0;}
.memberLayout .login_box+.login_box {margin-top:0;}
.memberLayout .login_box h3 {font-size:26px;}
.login_box .info.box a {font-size:16px; }
.login_box .btn-wrap a {font-size:18px; padding: 14px 10px;}
.termWrap h3 {text-align:center; font-size:20px;}
.checkWrap_sunnong {font-size:16px;}
.checkWrap_sunnong input[type='checkbox']+label {background: url(/images/common/i-check.png) no-repeat left top 0px / 20px; font-size:16px;}

.join .formGroup {padding:10px 0 15px;}
.join .formGroup .labelName {display:block; padding:7px 20px 7px 10px; font-size:16px;}
.join .formGroup>div p {display:block!important; padding-left:0;}
.join .formGroup>div .btn_upload p {padding-left:20px;}
.join .formGroup .labelName.empha:before {left:-1px;}
.join .formGroup .inputWrap.h0 {width:100%; gap:0px;}

.join_end {text-align:center; padding:30px 30px 0px!important; border-radius:10px; border:1px solid #ddd}
.join_end .title {font-size:20px; color:#000; font-weight:600}
.join_end .title span {color:#8d2b21;}
.join_end p {margin-top:20px; font-size:15px;}
.join_end p br {display:none;}


.member .login .login_box {width: 100%; grid-template-columns: auto;}
.member .login .more {width: 100%; grid-template-columns: auto; gap:20px;}
.member .login .more li+li {padding-left:0; border-left:0;}
.member .login .more li {padding-right:0;}

.member .idsearchWrap {grid-template-columns: repeat(1, 1fr); gap:30px;}



}




/* ************************ 모바일 ************************ */
@media (max-width: 767px) { 


.memberLayout .login_box {padding: 30px 0;}
.memberLayout .login_box h3 {font-size:24px;}
.memberBtn-single li a {font-size:16px; padding:15px 50px;}
.memberLayout .join .checkWrap_sunnong {margin-top:15px;}

.checkWrap_sunnong input[type='checkbox']+label {text-align:left; line-height:1.4; padding-top:0;}

.join .h4 {font-size:18px;}
.join .formGroup .inputWrap.address .directly input {width:330px;}
.join .formGroup.attach.type1 span {flex-wrap:wrap;}
.memberLayout .agree pre, .memberLayout .privacy pre {font-size:14px;}




}



/* ************************ 모바일 ************************ */
@media (max-width: 500px) { 



.memberLayout .login_box {width:100%;}
.telWrap input:not([type=radio]):not([type=checkbox]) {width:90px!important;} 
.join .formGroup .inputWrap select, .join .formGroup .inputWrap input:not([type=radio]):not([type=checkBox]) {width:220px!important;}
.telWrap .telSpan {padding:0;}
.join .formGroup .inputWrap.address .directly input {width:100%!important;}
.join .formGroup.autoCode .inputWrap input:not([type=radio]):not([type=checkBox]) {width:100%;}
.memberBtn-single li a {padding:15px 30px;}
.join .formGroup .inputWrap>div+div {padding-left:0;}
.member .login .more div {flex-direction: column;}
.member .idsearchWrap .login_box {padding:30px;}

.member .login .login_box {gap:30px; padding:40px;}
.member .login .login_box .titBox div img {width:80%;}
.member .login .more div a {padding:14px 10px; line-height:1;}

.member .login .more p {line-height:1.4; font-size: var(--fontSize18);}


}