@charset "utf-8";

/*-------------------------------------------------------------------
@ TEMPLATE UI : 2024.04.01 J.G.H
-------------------------------------------------------------------*/

/* 회원가입 : 공통 */
#container.member {width: 1410px; margin: 0 auto;}
.step {
display: flex; 
justify-content: end;
position: relative;
top: -70px;
}
.step > li {
position: relative;
width: 56px;
height: 60px;
margin-left: 10px;
font-size: 0;
text-indent: -9999em;
line-height: 0;
}
.step > li::before,
.step > li::after {
content: '';
display: block;
clear: both;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.step > li::before {
right: 0;
width: 16px;
height: 16px;
background-color: #1C3E70;
border-radius: 50%;
}
.step > li::after {
left: 0;
width: 30px;
height: 2px;
background-color: rgba(112, 112, 112, .16);
}
.step > li:first-child {margin-left: 0;}
.step > li:first-child::after {display: none;}
.step > li.on {width: 171px;}
.step > li.on::before {
display: flex;
justify-content: center;
align-items: center;
width: 131px;
height: 60px;
background-color: #DF6D1B;
border-radius: 30px;
color: #fff;
font-weight: 500;
font-size: 20px;
line-height: 30px;
}
.step > li.on:nth-child(1)::before {content: '가입인증';}
.step > li.on:nth-child(2)::before {content: '약관동의';}
.step > li.on:nth-child(3)::before {content: '정보입력';}
.step > li.on:nth-child(4)::before {content: '가입완료';}

/* 회원가입&로그인 공통 input */
.input-label {
position: relative; 
width: 100%; 
height: 78px;
margin-top: 30px;
background-color: #fff;
border-radius: 6px;
border: 1px solid #D2D7E1;
}
.input-label.error,
.input-label.error {border: 1px solid #FC1B1B;}
.input-label [type="text"],
.input-label [type="email"],
.input-label [type="password"] {
width: 100%;
height: 100%; 
padding: 0 20px;
box-sizing: border-box;
background-color: transparent;
border: 0 none;
color: #1C3E70;
font-size: 20px;
line-height: 28px;
outline: none; 
}
.input-label input::placeholder {color: #1C3E70; letter-spacing: 0;}
.input-label label { 
position: absolute; 
left: 0%; bottom: 0; 
width: 100%; 
height: 100%; 
text-align: left; 
pointer-events: none;
}
.input-label label::after {
content:""; 
position: absolute; 
left: -1px; bottom: -1px;
width: 0;
/*transition: all .5s ease; */
}
.input-label [type="text"]:focus + label::after,
.input-label [type="email"]:focus + label::after,
.input-label [type="password"]:focus + label::after  {border-radius: 6px; border: 1px solid #193D71;}
.input-label.error input:focus + label::after  {border-color: #FC1B1B;}
.input-label label span {
position: absolute; 
top: 50%; left: 20px;
transform: translateY(-50%);
transition: all .5s ease;
color: #595F6B;
font-size: 20px;
line-height: 28px;
}
.input-label [type="text"]:focus + label span, 
.input-label [type="text"]:valid + label span,
.input-label [type="email"]:focus + label span, 
.input-label [type="email"]:valid + label span {transform: translateY(-40px); font-size: 14px; letter-spacing: 0;}
.input-label [type="password"]:focus + label span, 
.input-label [type="password"]:valid + label span {transform: translateY(-40px); font-size: 14px; letter-spacing: 0;}
.input-label [type="text"]:focus + label::after,
.input-label [type="text"]:valid + label::after,
.input-label [type="email"]:focus + label::after,
.input-label [type="email"]:valid + label::after {width: 100%; height: 100%; transform: translateX(0);}
.input-label [type="password"]:focus + label::after,
.input-label [type="password"]:valid + label::after {width: 100%; height: 100%; transform: translateX(0);}

/* 테스트 코드 */
/* .input-label [type="text"]:focus + label span, 
.input-label [type="text"]:valid + label span  {transform: translateY(-40px); font-size: 14px; letter-spacing: 0; opacity: 1;}
.input-label [type="text"]:focus + label::after,
.input-label [type="text"]:valid + label::after {width: 100%; height: 100%; transform: translateX(0);}
.input-label [type="text"]::placeholder,
.input-label [type="text"]::placeholder {transition: all .5s ease;}
.input-label [type="text"]:focus::placeholder,
.input-label [type="text"]:valid::placeholder {opacity: 0; font-size: 0;} */


.input-flex {display: flex;}
.input-flex .input-label {margin-right: 15px;}
.input-flex .input-label input {width: 100%;}
.input-flex .input-label + .input-label {margin: 30px 0 0 15px;}
.input-label {display: flex; align-items: center;}

/* 회원가입 : STEP01 */
.step-accre .tit-txt {font-size: 30px; text-align: center; line-height: 46px;}
.step-accre .tit-txt [class*="color"] {
display: inline-block;
font-weight: 700; 
font-size: 30px; 
line-height: 46px;
vertical-align: top;
}
.step-accre .tit-txt .color1 {color: #1C3E70;}
.step-accre .tit-txt .color2 {color: #DF6D1B;}
.step-accre .flex {display: flex; margin-top: 59px;}
.step-accre .flex > div {width: calc(100% / 2); height: 577px; padding: 55px 40px 0;}
.step-accre .conv,
.step-accre .phone {background-color: #fff; border-radius: 30px;}
.step-accre .conv {margin-right: 15px;}
.step-accre .phone {
margin-left: 15px;
background: #fff url('/magi/assets/images/member/ico_phone.png') no-repeat center center;
}
.step-accre .flex h2 {
color: #1C3E70;
font-size: 36px;
text-align: center;
line-height: 48px;
}
.step-accre .flex p {
margin-top: 19px;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
}
.step-accre .phone p {text-align: center;}
.step-accre .flex [class*="btn-"] {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 78px;
border-radius: 10px;
font-weight: 700;
font-size: 20px;
line-height: 28px;
}
.step-accre .flex .btn-kakao {
margin-top: 39px;
background: #F8DA24 url('/magi/assets/images/member/ico_kakao.png') no-repeat 40px center;
}
.step-accre .flex .btn-naver {
margin-top: 40px;
background: #fff url('/magi/assets/images/member/ico_naver.png') no-repeat 40px center;
color: #19241e;
border: 1px solid #C3CAD6;
}
.step-accre .flex .btn-google {
margin-top: 40px;
background: #fff url('/magi/assets/images/member/ico_google.png') no-repeat 40px center;
border: 1px solid #C3CAD6;
color: #193D71;
}
.step-accre .flex .btn-phone {margin-top: 313px; background-color: #193D71; color: #fff;}

/* 회원가입 : STEP02 */
.step-terms h2 {color: #1C3E70; font-size: 36px; line-height: 48px;}
.step-terms .flex {
display: flex;
flex-direction: row-reverse;
justify-content: left;
margin-top: 60px;
}
.step-terms .flex h3 {
margin-left: 52px;
font-weight: 700;
font-size: 24px;
line-height: 33px;
white-space: nowrap;
}
.step-terms .flex .checked label {width: 36px; height: 36px;}
.step-terms .flex .checked label::after {width: 36px; height: 36px; background-size: 36px 36px;}
.step-terms .round-box {
margin-top: 33px;
padding: 60px;
background-color: #fff;
border-radius: 30px;
}
.step-terms .round-box .scroll {overflow: hidden;}
.step-terms .round-box h4 {margin: 30px 0 5px;}
.step-terms .round-box p {line-height: 28px;}
.step-terms .content {height: 380px;}
.step-terms .mCSB_scrollTools {width: 5px; background-color: #EDEFF3;}
.step-terms .mCSB_scrollTools .mCSB_draggerRail {background-color: #EDEFF3;}
.step-terms .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {height: 60px; background-color: rgba(210, 215, 225, 1);}
.step-complete .btnDecide,
.step-input .btnDecide {width: 330px;}
.step-terms .btnDecide {margin-top: 60px; width: 330px;}

/* 회원가입 : STEP03 */
.step-input h2 {
color: #1C3E70;
font-weight: 700;
font-size: 36px;
text-align: center;
line-height: 42px;
}
.info-input {width: 690px; margin: 59px auto 0;}
.info-input .btnDupli {
min-width: 80px;
width: auto;
height: 36px;
margin-right: 20px;
background-color: #1C3E70;
border-radius: 6px;
color: #fff;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
}
.info-input .btnDupli:disabled {background-color: #EDEFF3; color: #8C94A3;}
.info-input p {margin-top: 18px; letter-spacing: 0;}
.info-input p.error {color: #FC1B1B;}
.info-input p.confirm {color: #1C3E70; font-weight: 500;}
.output-line {
display: flex;
align-items: center;
height: 108px;
border-bottom: 1px solid #1C3E70;
}
.output-line .output-text,
.output-line [type="text"] {
width: 100%;
height: 100%;
padding: 0 20px;
background-color: transparent;
border: 0;
color: #1C3E70;
font-weight: 500;
font-size: 24px;
line-height: 34px;
outline: none;
cursor: auto;
}
.output-line .output-text {display: flex; align-items: center;}
.output-line p {margin: 0 30px 0 0; white-space: nowrap;}
.output-line .label-wrap{width:100%;}

/* 회원가입 : STEP04 */
.step-complete h2 {
color: #1C3E70;
font-weight: 400;
font-size: 60px;
text-align: center;
line-height: 86px;
letter-spacing: -2px;
}
.step-complete dl {
display: flex;
justify-content: center;
align-items: center;
padding-top: 84px;
}
.step-complete dl dt,
.step-complete dl dd {font-size: 30px; line-height: 42px;}
.step-complete dl dt {margin-right: 20px; font-weight: 700;}
.step-complete dl dd {margin-right: 100px;}
.step-complete .btnDecide {margin-top: 89px;}
.step-complete .flex {
display: flex;
flex-wrap: wrap;
height: 420px;
margin-top: 120px;
background-color: #fff;
border-radius: 30px;
}
.step-complete .flex h3 {
width: 100%;
padding-top: 55px;
color: #F58220;
font-weight: 700;
font-size: 36px;
text-align: center;
line-height: 48px;
}
.step-complete .flex > div {width: calc(100% / 2); padding-left: 24px;}
.step-complete .flex h4 {
display: flex;
align-items: baseline;
color: #1C3E70;
font-weight: 700;
font-size: 24px;
line-height: 34px;
}
.step-complete .flex h4 em {
display: flex;
justify-content: end;
align-items: end;
width: 66px;
height: 66px;
margin-right: 30px;
padding: 0 6px 13px 0;
background-color: #F58220;
border-radius: 50%;
color: #fff;
font-weight: 700;
letter-spacing: 0;
}
.step-complete .flex ul {margin: 0 0 0 96px;}
.step-complete .flex ul > li {position: relative; margin-top: 18px; padding-left: 15px;}
.step-complete .flex ul > li::after {
content: '';
display: block;
clear: both;
position: absolute;
top: 10px; left: 0;
width: 5px;
height: 5px;
background-color: #2B2F36;
border-radius: 50%;
}
.step-complete .flex ul > li .color {display: block; color: #D93B3B;}

/* 로그인 : 간편로그인&일반로그인 */
.login {display: flex; justify-content: space-between;}
.login .flex {width: 570px; margin-top: 58px;}
.login .flex h2 {
margin-bottom: 58px;
color: #1C3E70;
font-weight: 700;
font-size: 54px;
text-align: center;
line-height: 85px;
}
.login .flex [class*="btn-"] {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 78px;
border-radius: 10px;
font-weight: 700;
font-size: 20px;
line-height: 28px;
}
.login .flex .btn-kakao {background: #F8DA24 url('/magi/assets/images/member/ico_kakao.png') no-repeat 40px center;color:#1a1a1a;}
.login .flex .btn-kakao + .txt {
margin-top: 11px;
font-size: 14px;
text-align: right;
line-height: 20px;
letter-spacing: 0;
}
.login .flex .btn-naver {
margin-top: 62px;
background: #fff url('/magi/assets/images/member/ico_naver.png') no-repeat 40px center;
color: #19241E;
border:1px solid #c3cad6;
}
.login .checked {margin-top: 30px; vertical-align: top;}
.login .checked .click > span {
padding-left: 36px;
font-size: 16px;
line-height: 20px;
white-space: nowrap;
color:#1a1a1a;
}
.login .btnDecide {min-width: 100%; width: 100%; margin-top: 38px;}
.login .flex .btn-google {
margin-top: 62px;
background: #fff url('/magi/assets/images/member/ico_google.png') no-repeat 40px center;
border: 1px solid #C3CAD6;
color: #193D71;
}
.login .id-pw {
display: flex;
justify-content: center;
align-items: center;
margin-top: 58px;
}
.login .id-pw > a {
display: block;
position: relative;
padding: 0 12px 0 11px;
color: #595E6B;
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
.login .id-pw > a::after {
content: '';
display: block;
clear: both;
position: absolute;
top: 7px; left: 0;
width: 1px;
height: 12px;
background-color: #D5D8E1;
}
.login .id-pw > a:first-child {padding-left: 0;}
.login .id-pw > a:first-child::after {display: none;}
.login .input-label [type="text"]:focus + label::after,
.login .input-label [type="email"]:focus + label::after,
.login .input-label [type="password"]:focus + label::after {border-width: 2px !important;}
.find-id-pw p {margin-top: 18px;}
.login p.error,
.find-id-pw p.error {margin-top: 18px; color: #FC1B1B;}

/* 로그인 : 아이디&비밀번호 찾기 */
.find-id-pw {margin-top: 58px;} 
.find-id-pw .flex .tab {width: 100%;}
.find-id-pw .tabpanel {width: 690px; margin: 116px auto 0 !important;}
.find-id-pw .tit {
margin-bottom: 89px;
color: #2B2F36;
font-weight: 700;
font-size: 30px;
text-align: center;
line-height: 42px;
}
.find-id-pw .checked {margin-top: 30px; vertical-align: top;}
.find-id-pw .checked .click > span {
padding-left: 36px;
font-size: 16px;
line-height: 20px;
white-space: nowrap;
}
.find-id-pw .checked + .error {margin-left: 39px;}
.find-id-pw .explain {margin-top: 120px; padding-top: 57px; border-top: 1px solid #D2D7E1;}
.find-id-pw .btnDecide {margin-top: 40px;}
.find-id-pw .top-line {padding-top: 120px; border-top: 2px solid #1C3E70;}
.find-id-pw .top-line .text-certified {
padding: 0 0 270px;
background: url('/magi/assets/images/member/ico_phone.png') no-repeat center calc(100% + 22px) / 180px 180px;
font-weight: 700;
font-size: 30px;
text-align: center;
line-height: 42px;
}
.find-id-pw .top-line .text-certified + .btn-flex > a {margin-top: 100px;}
.find-id-pw .txt-tit {
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 42px;
text-align: center;
line-height: 60px;
}
.find-id-pw .txt-tit .name {
margin: 0 20px  0;
color: #F58220; 
font-weight: 700; 
font-size: 42px; 
line-height: 60px;
}
.find-id-pw .txt-txt {
margin-top: 86px;
font-size: 20px; 
text-align: center; 
line-height: 32px;
}
.find-id-pw .btn-flex {display: flex; justify-content: space-between; align-items: center; width: 690px; margin: 40px auto 0;}
.find-id-pw .btn-flex > a {width: 330px; margin: 0;}
.find-id-pw .ui_btn-basis2 {height: 78px;}
.find-id-pw .ui_btn-basis2.w450 {min-width: 450px; margin: 0 auto 0;}
.find-id-pw .ui_btn-basis2.w690 {min-width: 690px; margin: 0 auto 0;}

.flex-text {display: flex; justify-content: end;}
.flex-text .first {width: calc(50% + 30px);}
.flex-text .last {width: calc(50% - 10px);}

/* 회원 탈퇴 */
.roundbox-check {
width: 930px;
margin: 59px auto 0;
padding: 77px 0 80px 240px;
background-color: #fff;
border-radius: 20px;
}
.roundbox-check > li {line-height: 0;}
.roundbox-check > li .checkeds {margin-top: 27px;}
.roundbox-check > li:first-child .checkeds {margin-top: 0;}
.roundbox-check > li .checkeds p {
margin-top: 0;
padding-left: 36px;
font-size: 24px;
line-height: 20px;
white-space: nowrap;
}
.mCustomScrollBox:focus .mCSB_draggerContainer{outline:2px dashed #193D71;}

@media screen and (max-width:1180px){
    #container.member{max-width:1100px;}
    .login .flex{width:500px;}
}