@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* ========================================== MOBILE */
/* ======= LOGIN */
.logInner {padding: 60px 4.533% 90px;}
.logInner h3 {
    margin-bottom: 18px;
    font-size: 2.8rem;
    font-weight: 400;
}
.logInner input {
    width: 100%; height: 46px;
    font-size: 1.5rem;
    padding-left: 10px;
    border: 1px solid #ddd;
}
.logInner input[type="text"] {margin-bottom: 8px;}
.logInner input::placeholder {
    color: #c6c6c6;
    font-weight: 300;
}
.logInner button {
    margin: 22px 0 16px;
    width: 100%; height: 46px;
    font-size: 1.8rem; color: #fff;
    background: #161d35;
}
.logInner a.findpw,
.logInner a.findid{
    font-size: 1.4rem;
    color: #a9a9a9;
    text-align: right;
}
.logInner .login_form {
    padding-bottom: 18px;
    border-bottom: 1px solid #999;
}
.logInner .joinWrap {padding: 20px 0 0;}
.logInner .joinWrap p {font-size: 1.4rem;}
.logInner .joinWrap a.btn_join {
    display: block;
    height: 46px;
    margin-top: 10px;
    line-height: 43px;
    font-size: 1.8rem; color: #161d35;
    border: 1px solid #161d35;
    text-align: center;
}

/* ======= SNS LOGIN */
.snsInner{
    padding: 20px 0 0;
}
.snsInner h3{
    font-size: 1.8rem;
    text-align: center;
}
.snsInner .sns-wrap{
    display: flex;
    justify-content: center;
    gap: 10px;
}
.snsInner .sns-wrap button::before{
    position: absolute;
    content: '';
    width: 17px; height: 16px;
    background: url(../../img/ico_login_naver.png)no-repeat left/contain;
    left: 18%;
}
.snsInner .sns-wrap button.kakao::before{
    background-image: url(../../img/ico_login_kakao.png);
}
.snsInner .sns-wrap button{
    position: relative;
    color: #999; 
    width: 50%; height: 55px;
    border: 1px solid #999;
    font-size: 1.6rem;
    background: transparent;
    margin: 0;
}

/* ======= findpw */
#findpw,
#findid {
	display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,.2);
}
.findInner {
    position: absolute;
    width: 98.54%; padding: 18px 4.533%;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: #fff;
}
.findInner h3 {
    position: relative;
    padding-bottom: 10px;
    font-size: 2rem;
    border-bottom: 1px solid #ddd;
}
.findInner h3:after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 190px; height: 3px;
    background: #373c42;
}
.findInner p.cont {
    margin: 12px 0 16px;
    font-size: 1.5rem;
    white-space: pre-line;
    line-height: 1.2;
}
.findInner .inputWrap {
    padding: 15px;
    background: #f8f8f8;
    border: 1px solid #eee;;
}
.findInner .inputWrap input {
    display: block;
    width: 94%; height: 50px;
    padding-left: 12px;
    font-size: 1.5rem;
    margin: 0 auto 5px;
    border: 1px solid #f5f5f5;
}
.findInner .inputWrap input::placeholder {color: #9a9a9a;}
.findInner .btnWrap {margin-top: 16px;}
.findInner .btnWrap .btn_close {
    margin-right: 10px;
    background: #9a9a9a;
}
/* ======= JOIN */
/* === STEP 01 */
section > .signUp {padding: 60px 4.533% 90px;}
.trmInner h4 {
    margin-bottom: 13px;
    font-size: 2.4rem;
    font-weight: 400;
}
.trmInner .contWrap {
    padding: 20px 15px;
    height: 460px;
    line-height: 1.5;
    background: #f6f6f6;
    overflow-y: scroll;
}
.trmInner .contWrap p {
    font-size: 1.4rem;
    white-space: pre-line;
}
.trmInner .chkbox_agree {
    margin-top: 16px;
    text-align: right;
}
.trmInner .chkbox_agree input {
    display: inline-block;
    height: auto;
    vertical-align: middle;
}
.trmInner .chkbox_agree label {
    margin-left: 6px;
    font-size: 1.4rem;
    vertical-align: middle;
	cursor: pointer;
}
.trmInner article.term1,
.trmInner article.term2 {margin-bottom: 80px;}
.btnWrap {
    display: flex;
    margin-top: 26px;
    justify-content: center;
}
.btnWrap a, .btnWrap button {
    display: block;
    width: 100%; height: 45px;
    font-size: 1.5rem; color: #6f7377;
    line-height: 39px;
    text-align: center;
    border-radius: 10px;
}
.btnWrap a {
    margin-right: 8px;
    border: 1px solid #6f7377;
}
.btnWrap button {
    color: #fff;
    background: #161d35;
}

/* === STEP 02 */
.supInner table {
    width: 100%;
    border-spacing: 0;
}
.supInner caption {
    padding-bottom: 14px;
    font-size: 2.4rem;
    text-align: left;
    border-bottom: 2px solid #373c42;
}
.supInner th, .supInner td {display: block;}
.supInner th {
    margin: 15px 0 8px;
    font-size: 1.6rem;
    font-weight: 400;
    text-align: left;
}
.supInner td {position: relative;}
.supInner td input {
    width: 100%; height: 40px;
    padding-left: 10px;
    font-size: 1.4rem;
    border: 1px solid #d1d1d1;
}
.supInner td input::placeholder {color: #b6b6b6;}
.supInner td button {
    position: absolute;
    right: 10px; top: 7px;
    width: 72px; height: 26px;
    font-size: 1.4rem; color: #161d35;
    border: 1px solid #161d35;
    border-radius: 10px;
}
.supInner p.alert {
    margin: 8px 0 10px;
    padding-left: 10px;
    font-size: 1.4rem; color: #fa7a32;
    line-height: 1.3;
}
.supInner p.alert_ps {color: #161d35;}
.supInner .phone input {
    display: inline-block;
    /* width: 30%; */
    vertical-align: middle;
}
.supInner .phone select{
    width: 33.33%; 
    height: 40px;
    border: 1px solid #d1d1d1;
}
.supInner .phone span {
    display: inline-block;
    margin: 0 2px;
    vertical-align: middle;
}
.supInner .chk_memb th {
    padding-bottom: 12px;
    border-bottom: 1px solid #d1d1d1;
}
.supInner .chk_memb td {text-align: right;}
.supInner .chk_memb input {
    width: 15px; height: 15px;
    vertical-align: middle;
}
.supInner .chk_memb label {
    margin-left: 5px;
    font-size: 1.4rem;
    vertical-align: middle;
	cursor: pointer;
}
.supInner .add_info {margin-top: 60px; display: none;}
.supInner .add_info .go_site {
    float: right;
    margin-top: -2px;
    padding: 5px 7px;
    font-size: 1.4rem; color: #fff;
    background: #006277;
    border-radius: 5px;
}
.supInner .btnWrap {
    padding-top: 26px;
    border-top: 1px solid #161d35;
}

/* === STEP 03 */
.scInner i.icon {
    display: block;
    margin: 0 auto;
    width: 130px; height: 130px;
    background: url(../../img/icon_join_sc.png) no-repeat center/contain;
}
.scInner h3 {
    margin: 59px 0 36px;
    font-size: 7.2rem; color: #161d35;
    font-weight: 200;
    letter-spacing: -0.5rem;
    text-align: center;
}
.scInner p.cont {
    font-size: 1.6rem;
    line-height: 1.35;
    text-align: center;
    white-space: pre-line;
}
.scInner p.cont b {color: #006277;}
.scInner .btnWrap a.btn_login {
    color: #fff;
    background: #161d35;
    border: 0;
}
.supInner .phone select{
    width: 33.33%; 
    height: 40px;
    border: 1px solid #d1d1d1;
}
.supInner td.tel-join{
    display: flex;
    align-items: center;
}

/* ======= JOIN-MODAL 정보처리약관 */
#agree01,
#agree02{
    display: none;
}
.agree-wrap p{
    margin-bottom: 3px;
    font-size: 1.4rem;
}
.agree-wrap p input {
    margin-right: 3px;
}
.agree-wrap a{
    color: #333;
}
.inputWrap.agree p{
    font-size: 1.6rem;
    height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: pre-line;
}
.inputWrap .findInner h3.agreetxt{
    padding: 20px 0;
}
/* 성별 선택*/
.gen{
    display: flex;
    gap: 5px;
}
.gen .w50{
    width: 50%;
    display: flex;
    align-items: center;
    gap: 5px;
}
.gen input[type="radio"]+label{
    display: block;
    width: 100%;
    border: 1px solid #161d35;
    color: #161d35;
    padding: 15px;
    font-size: 1.6rem;
    text-align: center;
    cursor: pointer;
}
.gen input[type="radio"] {
    appearance: none;
    display: none;
    width: unset;
}
.gen input[type="radio"]:checked+label {
    background: #161d35;
    color: #fff;
}
.agree-wrap {
    padding-top: 15px;
}
/* ======== COMMON */
main {min-height: calc(100vh - 266px);}

/* ================================================ PC */
@media screen and (min-width:1084px){
    /* ======= LOGIN */
    .logInner {
        width: 464px;
        margin: 0 auto;
        padding: 148px 0 244px;
    }
    .logInner h3 {margin-bottom: 36px;}
    .logInner input {
        padding-left: 16px;
        height: 60px;
        font-size: 1.6rem;
        font-weight: 300;
    }
    .logInner button {
        margin: 22px 0 16px;
        height: 60px;
        font-size: 2rem;
    }
    .logInner .login_form {padding-bottom: 28px;}
    .logInner .joinWrap {
        display: flex;
        padding: 6px 0 0;
        justify-content: space-between;
        align-items: center;
    }
    .logInner .joinWrap a.btn_join {
        display: inline-block;
        padding: 6px 13px;
        height: auto;
        margin: 0;
        line-height: 1;
        font-size: 1.4rem; color: #161d35;
        border: 1px solid #161d35;
        border-radius: 6px;
    }
    .logInner .joinWrap a.btn_join:hover {
        color: #fff;
        background: #161d35;
    }
    .findInner {width: 720px; padding: 38px 50px;}
    .findInner p.cont {
        margin: 22px 0 20px;
        font-size: 1.5rem;
    }
    .findInner .btnWrap {margin-top: 24px;}

    /* ======= SNS LOGIN */
    .snsInner{
        padding: 35px 0 0;
    }
    .snsInner h3{
        margin-bottom: 20px;
    }
    
    /* ======= JOIN */
    /* === STEP 01 */
    .join_steps {
        margin-bottom: 89px;
        display: flex;
        justify-content: center;
    }
    .join_steps li {
        width: 33.333%;
        text-align: center;
    }
    .join_steps li p {
        font-size: 1.6rem;
        margin-bottom: 13px;
        opacity: .7;
        letter-spacing: -0.035rem;
    }
    .join_steps li span {
        position: relative;
        display: block;
        height: 3px;
        background: #b1b1b1;
    }
    .join_steps li span i.point {
        position: absolute;
        top: 50%; left: 50%; transform: translate(-50%,-50%);
        width: 11px; height: 11px;
        background: #b1b1b1;
        border-radius: 10px;
    }
    .join_steps li.on p {opacity: 1;}
    .join_steps li.now p {font-weight: 700;}
    .join_steps li.on span {background: #161d35;}
    .join_steps li.on span i.point {background: #161d35;}
    section > .signUp {
        width: 1080px;
        margin: 0 auto;
        padding: 89px 0 81px;
    }
    .trmInner .contWrap {
        padding: 16px 26px;
        height: 360px;
    }
    .trmInner .contWrap p {font-size: 1.6rem;}
    .trmInner .chkbox_agree label {margin-left: 4px;}
    .trmInner article.term1 {margin-bottom: 46px;}
    .btnWrap {margin-top: 74px;}
    .btnWrap a, .btnWrap button {
        width: 100%; height: 52px;
        font-size: 1.6rem;
        line-height: 50px;
    }
    .btnWrap a {margin-right: 18px;}
    
    /* === STEP 02 */
    .supInner .formWrap {
        width: 408px;
        margin: 0 auto;
    }
    .supInner th {font-weight: 700;}
    .supInner td input {
        height: 50px;
        padding-left: 13px;
    }
    .supInner td button {
        right: 13px; top: 11px;
        width: 72px; height: 28px;
    }
    .supInner p.alert {padding-left: 13px;}
    .supInner .phone {font-size: 0;}
    /* .supInner .phone input {width: 126px;} */
    .supInner .phone span {
        margin: 0 4px;
        font-size: 1.6rem;
    }
    .supInner .add_info .go_site {
        margin-top: -6px;
        padding: 7px 8px;
        border-radius: 10px;
    }
    .supInner .btnWrap {margin-top: 48px;}
    
    /* === STEP 03 */
    .scInner h3 {
        margin-top: 54px;
        font-size: 8.4rem;
    }
    .supInner td.tel-join select{
        height: 50px;
    }
    /* ======= COMMON */
    /* main {min-height: auto;} */
	input[type="number"]::-webkit-outer-spin-button,
	input[type="number"]::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
}