.login_wrap { width:100vw; height:100vh; display:flex; align-items:center; justify-content: center; flex-direction: column; }
.login_wrap .m_logo { margin-bottom: 19px; }
.login_wrap .inner { box-shadow:0 15px 15px 0 rgba(0, 0, 0, 0.05); border-radius:2rem; width:100%; max-width:800px; padding: 0 0 10rem; box-sizing:border-box; }
.login_wrap .inner .tit { font-size:3rem; color:var(--c3a); font-weight: 700; padding-top: 5.8rem; padding-bottom: 1.6rem; box-sizing:border-box; display:block; }
.login_wrap .inner form .input_inner { padding:0 14.4rem 0 }
.login_wrap .inner form .inputLine { display:flex; align-items:center; margin-top: 26px; }
.login_wrap .inner form .inputLine:first-child { margin-top: 0; }
.login_wrap .inner form .inputLine input,
.login_wrap .inner form .inputLine select { height:43px; border: 0; border-bottom: 1px solid #ccc; box-sizing:border-box; padding-left: 6px; font-size:1.6rem; width:100%; }
.login_wrap .inner form .inputLine input:first-child { /*max-width:calc(100% - 29px - 140px - 150px - 5px);*/ }
.login_wrap .inner form .inputLine input.typing { max-width:140px; }
.login_wrap .inner form .inputLine input[type="password"] { max-width:100%; }
.login_wrap .inner form .inputLine input:-ms-input-placeholder { color: var(--c66); }
.login_wrap .inner form .inputLine input::-webkit-input-placeholder { color: var(--c66); } 
.login_wrap .inner form .inputLine input::-moz-placeholder { color: var(--c66); }
.login_wrap .inner form .inputLine input::-moz-placeholder { color: var(--c66); }
.login_wrap .inner form .inputLine select { max-width:150px; margin-left: 5px; }
.login_wrap .inner form .inputLine .sla { font-size:2rem; color:var(--c66); font-weight: 600; text-align: center; display:inline-block; width:29px; flex-shrink: 0; }
.login_wrap .inner form .saveLine { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
.login_wrap .inner form .saveLine .left { position: relative; }
.login_wrap .inner form .saveLine .left input { position:absolute; visibility: hidden; }
.login_wrap .inner form .saveLine .left label { font-size:14px; color:var(--c66); font-weight: 600; display: flex; align-items: center; }
.login_wrap .inner form .saveLine .left label i { display:inline-flex; width:16px; height:16px; align-items:center; justify-content: center; text-align: center; border: 2px solid #bbb; box-sizing:border-box; border-radius: 2px; transition: all 0.3s; margin-right: 8px; }
.login_wrap .inner form .saveLine .left label i:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 600; font-style: normal; font-size:10px; color:var(--main_red); opacity:0; transition:all 0.3s; }
.login_wrap .inner form .saveLine .left input:checked ~ label i { border-color: var(--main_red); }
.login_wrap .inner form .saveLine .left input:checked ~ label i:before { opacity:1; }
.login_wrap .inner form .saveLine .lost { display:flex; align-items: center; justify-content: center; }
.login_wrap .inner form .saveLine .lost li { display:flex; align-items: center; }
.login_wrap .inner form .saveLine .lost li:before { content:""; display:inline-block; width: 1px; height:14px; background: var(--cDa); margin: 0 17px; }
.login_wrap .inner form .saveLine .lost li:first-child:before { display:none; }
.login_wrap .inner form .saveLine .lost li a { font-size:14px; color:var(--c3a); }
.login_wrap .inner form .btn_box { display:flex; align-items: center; justify-content: space-between; margin-top: 3rem; }
.login_wrap .inner form .btn_box button,
.login_wrap .inner form .btn_box a { width:50%; max-width:242px; height:50px; text-align: center; display:inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; border-radius:200px; box-sizing:border-box; }
.login_wrap .inner form .btn_box a { border: 1px solid var(--cDa); color:var(--c99); }
.login_wrap .inner form .btn_box .login_btn { border: 0; background: var(--main_red); color:var(--white); }
.login_wrap .inner form .sns_login { display: flex; align-items: center; justify-content: space-between; padding: 5rem 10rem 0; box-sizing:border-box; }
.login_wrap .inner form .sns_login li { }
.login_wrap .inner form .sns_login li a { display:inline-flex; align-items: center; font-size:14px; color:#888; }
.login_wrap .inner form .sns_login li a img {  margin-right: 10px; }



.join_wrap h1 { font-size:3.6rem; color:var(--black); font-weight: 700; text-align: center; padding: 7.6rem 0 6.6rem; box-sizing:border-box; }
.join_wrap .join_flow { margin: 0 auto; width:100%; max-width:888px; margin-bottom: 5rem; }
.join_wrap .join_flow ul { display:flex; align-items: center; justify-content: space-between; position:relative; width:calc(100% + 30px); margin-left: -15px; }
.join_wrap .join_flow ul:before,
.join_wrap .join_flow ul:after { content:""; display:block; width:100%; height:1px; position:absolute; top:50%; left:0; }
.join_wrap .join_flow ul:before { background:var(--cDa);  z-index:1; }
.join_wrap .join_flow ul:after { z-index:2; background:var(--main_red); width:0; }
.join_wrap .join_flow ul li { flex-shrink: 0; display:flex; align-items: center; }
.join_wrap .join_flow ul li .inner { display:flex; align-items: center; padding: 0 15px; box-sizing:border-box; position: relative; z-index: 3; background: var(--white); }
.join_wrap .join_flow ul li:first-child:before { display:none; } 
.join_wrap .join_flow ul li i { display:flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--cDa); box-sizing: border-box; font-size:18px; color:var(--caa); width:40px; height:40px; margin-right: 1.3rem; }
.join_wrap .join_flow ul li .txt { font-size:1.8rem; color:var(--c3a); flex-shrink: 0; font-weight: 300; }
.join_wrap .join_flow ul li.pass .inner * { opacity: 0.5; }
.join_wrap .join_flow ul li.active i { border-color: var(--main_red); color:var(--main_red); }

.join_wrap .join_flow ul.per30:after { width:30%; }
.join_wrap .join_flow ul.per60:after { width:60%; }
.join_wrap .join_flow ul.per100:after { width:100%; }


.join_wrap .outter .inner { width:100%; max-width:888px; margin: 0 auto; box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.05); border-radius:0 0 3rem 3rem; padding: 0 3rem 6rem; box-sizing: border-box; }
.join_box .inner input { position: absolute; opacity: 0; }
.join_box .inner label { display:inline-flex; align-items: center; font-weight: 300; color:var(--c88); }
.join_box .inner label i { border: 2px solid var(--ccc); display:inline-flex; align-items: center; justify-content: center; text-align: center; box-sizing:border-box; border-radius:3px; font-style: normal; transition: all 0.3s; }
.join_box .inner label i:before { content:"\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 600; color:var(--main_red); opacity: 0; transition: all 0.3s; }
.join_box .inner .all_line { border-bottom: 1px solid #eaeaea; box-sizing:border-box; font-size:1.8rem; padding: 0 1rem 2rem; }
.join_box .inner .all_line label { display: flex; align-items: center; }
.join_box .inner .all_line label i { margin-right: 1.8rem; width:23px; height:23px; font-size:13px; }
.join_box .inner .chk_list { padding: 0 2rem 4.8rem; margin-bottom: 3rem; box-sizing:border-box; border-bottom: 1px solid #eaeaea; }
.join_box .inner .chk_list li { display:flex; align-items: center; justify-content: space-between; margin-top: 2rem; position:relative; }
.join_box .inner .chk_list li:first-child { margin-top: 2.8rem; }
.join_box .inner .chk_list li:last-child { flex-wrap:wrap; }
.join_box .inner .chk_list li label span { color:var(--main_red); }
.join_box .inner .chk_list li i { width:19px; height:19px; margin-right: 1.6rem; font-size:11px; }
.join_box .inner .chk_list li a { display:inline-flex; width:90px; height:30px; align-items: center; justify-content: center; text-align: center; border-radius:5px; background:#fafafa; border: 1px solid #eaeaea; box-sizing:border-box; font-size:1.5rem; color:var(--c88); }
.join_box .inner .chk_list li .sms { width:100%; margin-top: 12px; display:flex; align-items: center; }
.join_box .inner .chk_list li .sms > div { margin-left: 3.6rem; }
.join_box .inner .chk_list li .sms label i { width:15px; height:15px; margin-right: 1rem; font-size:9px; }

.join_box .inner input:checked ~ label i { border-color: var(--main_red); }
.join_box .inner input:checked ~ label i:before { opacity:1; }


.join_wrap .submit { font-size:1.6rem; color:#fff; background:var(--c22); border-radius:1rem; border: 0; width:100%; height:50px; display:flex; align-items: center; justify-content: center; text-align: center; }
.join_wrap .actionBtn { font-size:1.6rem; color:#fff; background:var(--c22); border-radius:1rem; border: 0; width:100%; height:50px; display:flex; align-items: center; justify-content: center; text-align: center; }
.join_wrap .btnGroup { display:flex; gap: 10px }
.join_wrap .actionBtn.greyBtn{ background:var(--c66) }

.join_wrap input[type="text"],
.join_wrap input[type="password"],
.join_wrap select { border-radius: 5px; height: 50px; border: 1px solid #eaeaea; box-sizing: border-box; padding-left: 1.9rem; font-size:16px; color:var(--caa); }
.join_wrap select { padding-left: 1.4rem; }
.join_wrap input[type="text"] {  }
.join_wrap input:-ms-input-placeholder { color: var(--caa); }
.join_wrap input::-webkit-input-placeholder { color: var(--caa); } 
.join_wrap input::-moz-placeholder { color: var(--caa); }
.join_wrap input::-moz-placeholder { color: var(--caa); }
.join_wrap .sla { display: inline-flex; width:34px; text-align: center;justify-content: center; align-items: center; font-size:16px; color:#666; }
.join_wrap .input_line { display:flex; align-items: center; padding: 0 10px; box-sizing:border-box; margin-top: 3rem; }
.join_wrap .input_line:first-child { margin-top: 0; }
.join_wrap .input_line label,
.join_wrap .input_line .blank { display: inline-flex; width:160px; font-size:1.8rem; color:var(--c88); font-weight: 300; flex-shrink: 0; }
.join_wrap .input_line label span {  }
.join_wrap .input_line label.important {  }
.join_wrap .input_line label.important span { position:relative; display:inline-block; }
.join_wrap .input_line label.important span:before { content:""; display:inline-block; width:6px; height:6px; background:var(--main_red); border-radius: 50%; position: absolute; right: -10px; top:2px; }
.join_wrap .input_line .input_box { width:calc(100% - 160px); display:flex; align-items: center; }
.join_wrap .ibtn { margin-left: 10px; width: 100px; height:50px; border-radius: 5px; background: var(--c22); border: 0; font-size:16px; color:#fff; }
.join_wrap .ibtn:disabled {  background: var(--caa);  }
.join_wrap .mail_line .ibtn { width: 80px; }

.join_wrap .mail_line input[type="text"],
.join_wrap .mail_line select { width:33.33%; }
.join_wrap .mail_line input[type="text"] { max-width:173px; }
.join_wrap .mail_line select { max-width:178px; margin-left: 10px; }

.join_wrap .ps_box { margin-top: 5px; padding-bottom: 4.8rem; border-bottom: 1px solid #eaeaea; box-sizing: border-box; margin-bottom: 3rem;}
.join_wrap .ps_box .ps { font-size:14px; color:var(--c88); line-height: 20px; font-weight: 300; }


.inJoin_box .input_line { flex-wrap:wrap; }
.inJoin_box .mail_line input[type="text"] { width:100%; max-width:100%; color:var(--c88); background: var(--gray); }
.inJoin_box .input_line .danger { width:100%; padding-left: 160px; box-sizing:border-box; font-size:14px; color:var(--main_red); font-weight: 300; margin-top: 6px; }
.inJoin_box .input_line.last { border-bottom: 1px solid #eaeaea; padding-bottom: 4.6rem; margin-bottom: 3rem; }


.complete_box {  }
.complete_box .mes { display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; padding: 7.4rem 0 8rem; box-sizing: border-box; border-bottom: 1px solid #eaeaea; margin-bottom: 3rem; }
.complete_box .mes .simbol { border-radius:50%; background: var(--main_red); font-size:0; }
.complete_box .mes .name { font-size:4rem; color:#969696; font-weight: 600; margin: 3.4rem 0 3rem; }
.complete_box .mes .name strong { color:var(--black); }
.complete_box .mes .txt { font-size:2rem; color:#888; line-height: 3.6rem; }
.complete_box .submit {  }







@media (max-width:992px){

    .login_wrap .inner { padding-bottom: 7rem; }
    .login_wrap .inner form .input_inner { padding: 0 10rem 0; }

    .login_wrap .inner form .btn_box button,
    .login_wrap .inner form .btn_box a { max-width:calc(50% - 10px); }
    .login_wrap .inner form .btn_box button { margin-right: 10px; }
    .login_wrap .inner form .btn_box a { margin-left: 10px; }
    .login_wrap .inner form .sns_login li { max-width:calc(50% - 10px); margin-left: 10px; }
    .login_wrap .inner form .sns_login li:first-child { margin-right: 10px; margin-left: 0; }

}


@media (max-width:768px){

    .login_wrap .inner { padding-bottom: 5rem; }
    .login_wrap .inner form .input_inner { padding: 0 5rem 0; }
    .login_wrap .inner .tit { padding-top: 3rem; }
    .login_wrap .inner form .sns_login { padding: 3rem 5rem 0; }


    .join_wrap .input_line label,
    .join_wrap .input_line .blank { width:120px; }
    .join_wrap .input_line .input_box { width: calc(100% - 120px); }
    .inJoin_box .input_line .danger { padding-left: 120px; }


    .complete_box .mes { padding-top: 0; }
    

}

@media (max-width:620px){

    .login_wrap .inner form .input_inner { padding: 0 2rem 0; }
    .login_wrap .inner .tit { padding-top: 2rem; }
    .login_wrap .inner form .sns_login { flex-wrap:wrap; justify-content:center; margin-top: 1rem; padding-left: 0; padding-right: 0; }
    .login_wrap .inner form .sns_login li { margin: 2rem 2rem 0 !important; text-align: center; }


    .join_wrap .join_flow ul { flex-wrap:wrap; margin-top: -2rem; }
    .join_wrap .join_flow ul:before,
    .join_wrap .join_flow ul:after { display:none; }
    .join_wrap .join_flow ul li { width:50%; max-width:unset; text-align: center; max-width:50%; justify-content: center; margin-top: 2rem; }
    .join_box .inner .chk_list li .sms { flex-wrap:wrap; }

    .join_wrap .input_line {flex-direction: column; align-items:start; }
    .join_wrap .input_line label,
    .join_wrap .input_line .blank { width:100px; margin-bottom: 1rem; }
    .join_wrap .input_line .input_box { width: 100%; }
    .inJoin_box .input_line .danger { padding-left: 0; }
    

}


@media (max-width:479px){

    .login_wrap .inner { padding: 0 2rem 5rem; }
    .login_wrap .inner .tit { padding-top: 0; }

    .login_wrap .inner form .mail_line { flex-wrap:wrap; }
    .login_wrap .inner form .mail_line input:first-child { width:calc(100% - 29px); }
    .login_wrap .inner form .mail_line input.typing,
    .login_wrap .inner form .mail_line select { margin-top: 5px; width:calc(50% - 5px); max-width:calc(50% - 5px); }
    .login_wrap .inner form .mail_line select { margin-left: 10px; }

    .login_wrap .inner form .btn_box button,
    .login_wrap .inner form .btn_box a { max-width:calc(50% - 5px); }
    .login_wrap .inner form .btn_box button { margin-right: 5px; }
    .login_wrap .inner form .btn_box a { margin-left: 5px; }
    .login_wrap .inner form .sns_login { flex-direction: column; }
    .login_wrap .inner form .sns_login li { max-width:100%; width:100%; margin: 5px 0 !important; }


    .join_wrap .outter .inner { padding: 0 1rem 4rem; }
    .join_box .inner .all_line { padding: 0 0 2rem; }
    .join_box .inner .chk_list { padding: 0 0.5rem 3rem; }
    .join_box .inner .chk_list li { flex-wrap:wrap; }

    .join_wrap .mail_line .input_box { flex-wrap:wrap; }
    .join_wrap .mail_line input[type="text"] { width:100%; max-width:calc(50% - 17px); }
    .join_wrap .mail_line select { width:100%; max-width:calc(100% - 80px - 10px); margin-left: 0; margin-top: 10px; }
    .join_wrap .mail_line .ibtn { margin-top: 10px; }

    .join_wrap .input_line .input_box { width:100%; }
    .join_wrap .inJoin_box .input_line .input_box input[type="text"] { max-width:100%; }


}