@charset "utf-8";

/* 공통 */
.p_join .inner {
    max-width: 540px;
    margin: 0 auto;
    padding: 80px 20px;
    box-sizing:border-box;
    overflow: hidden;
}
    .p_join .inner .top_title {
        padding-bottom: 40px;
        border-bottom: 1px solid #888888;
        text-align: center;
    }


    /*----------------
          회원가입
    ----------------*/
 .j_box {
    position: relative;
}
    .p_join .j_box.bd {
        padding: 30px 0;
        box-sizing: border-box;
        border-top: 1px solid #DFDFDF;
        border-bottom: 1px solid #DFDFDF;
    }
.j_box input {
    border: 1px solid #999999;
    padding: 17px 10px;
    box-sizing: border-box;
    width: 100%;
    border-radius: 10px;
}
    .j_box input.last{
        border-radius:0 0 10px 10px;
    }
    .j_box input.number {
        width: calc(100% - 151px);
    }
    .p_join .j_box .time {
        position: absolute;
        bottom: 16.5px;
        right: 12px;
    }
     .j_box .dbBox {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
    }
         .j_box .dbBox input[type="text"] {
            width: calc( 100% - 150px);
        }

        .j_box .dbBox div {
            width: 140px;
            padding: 16.4px 10px;
            border: 1px solid #9F0827;
            text-align: center;
            cursor: pointer;
            box-sizing: border-box;
            border-radius: 10px;
        }
             .j_box .dbBox div.address {
                border: 1px solid #000000;
            }
.p_join .m_btn {
    width: 100%;
    height: 58px;
    line-height: 58px;
    background: #9F0827;
    cursor: pointer;
    text-align: center;
    border-radius:10px;
}
 .j_box .num {
    gap: 5px;
}
     .j_box .num.birth {
        gap: 2px;
    }
         .j_box .num.birth .mr {
            margin-right: 10px;
        }
     .j_box .num input {
        width: calc( (100% - 155px) / 2 );
    }
    .j_box .num select {
        border: 1px solid #999999;
        padding: 20px 10px;
        box-sizing: border-box;
        width: 120px;
        border-radius: 10px;
    }
.p_join .j_box .radioBox {
    display: flex;
    justify-content: space-between;
}
    .p_join .j_box .radioBox label {
        width: 49%;
        height: 58px;
    }
        .p_join .j_box .radioBox label input {
            width: 100%;
            height: 58px;
            cursor: pointer;
            position: relative;
        }
            .p_join .j_box .radioBox label input:before {
                content: "";
                position: absolute;
                top: 49%;
                left: 50%;
                transform: translate(-50%,-50%);
                color: #555555;
                font-size: 1.8rem;
                font-weight: 500;
                width: 100%;
                text-align: center;
            }
            .p_join .j_box .radioBox label input:checked {
                border: 2px solid #9F0827;
            }
            .p_join .j_box .radioBox label input span {
                position: absolute;
                top: 50%;
                left: 50%;
                color: #555555;
            }
            .p_join .j_box .radioBox label input:checked:before {
                color: #9F0827;
            }
            .p_join .j_box .radioBox label input.ag:before {
                content: "동의함";
            }
            .p_join .j_box .radioBox label input.dsag:before {
                content: "동의안함";
            }
            .p_join .j_box .radioBox label input.sol:before {
                content: "양력";
            }
            .p_join .j_box .radioBox label input.lun:before {
                content: "음력";
            }
            .p_join .j_box .radioBox label input.man:before {
                content: "남성";
            }
            .p_join .j_box .radioBox label input.woman:before {
                content: "여성";
            }
.p_join .termsBox {
    border: 1px solid #DFDFDF;
    border-radius: 10px;
}

    .p_join .termsBox li .df_st {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 14px 24px 12px;
        box-sizing: border-box;
    }
    .p_join .termsBox li.on .df_st {
        background: #F7F7F7;
    }
    .p_join .termsBox li .df_sb {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }
        .p_join .termsBox li .df_sb img {
            cursor: pointer;
            padding-left: 20px;
            box-sizing: border-box;
        }
    .p_join .termsBox li.on .df_sb img {
        transform: rotate(-90deg);
        padding:0;
    }
    .p_join .termsBox li .df_st .checkbox {
        margin-right: 20px;
        background: #fff;
    }
    .p_join .termsBox li:first-child {
        border-bottom: 1px solid #DFDFDF;
    }
    .p_join .termsBox li .detail {
        padding: 14px 30px 12px;
        box-sizing: border-box;
        display: none;
        border-bottom: 1px solid #DFDFDF;
        max-height:200px;
        overflow-y:auto;
    }
        .p_join .termsBox li:last-child .detail{
            border:0;
        }
        .p_join .termsBox li.on .detail {
            display: block;
        }
        .p_join .termsBox li.on .detail ul {
            width: 100%;
            border-top: 1px solid #666666;
            margin: 10px 0;
        }
            .p_join .termsBox li.on .detail ul li {
                display: flex;
                justify-content: flex-start;
            }
                .p_join .termsBox li.on .detail ul li div:first-child {
                    width: 40%;
                    background: #F5F5F5;
                }
                .p_join .termsBox li.on .detail ul li div {
                    width: 60%;
                    padding: 17px 19px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #DFDFDF;
                }
            /*------------
        로그인
     ------------*/
.p_join .join_wrap{
    display:none;
}
.p_join .join_wrap.active {
    display: block;
}
.p_join .j_box input.no_bb {
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}

    .p_join .j_box .dbtnbox {
        display: flex;
    }
    .p_join .j_box .dbtnbox input{
        border-right:none;
        width:70%;
        border-radius:0;
    }
    .p_join .j_box .dbtnbox div {
        width: 30%;
        padding: 17px 10px;
        box-sizing: border-box;
        background: #9F0827;
        text-align: center;
        cursor:pointer;
    }
        .p_join .j_box .dbtnbox div.no_bb {
            border-bottom: none;
        }
        .p_join .m_btn.join_btn {
            background: none;
            border: 1px solid #9F0827;
            box-sizing: border-box;
        }
.p_join .m_btn.kakao_btn {
    background: #FFEB3B;
    color: #3E2723;
}
.p_join .m_btn img {
    width: 20px;
    height: auto;
}
.p_join .m_btn.naver_btn {
    background: #2CB24A;
}
.p_join .login_nav{
    display:flex;
}
    .p_join .login_nav p.top_title {
        width: 50%;
        height: 72px;
        line-height: 72px;
        border-bottom: 1px solid #dfdfdf;
        padding: 0;
        cursor:pointer;
    }
        .p_join .login_nav p.active {
            border-bottom: 3px solid #9F0827;
            color: #9F0827;
        }
        .p_join .event_box {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    .p_join .event_box li:nth-child(2n-1) {
        width: 32%
    }
    .p_join .event_box li:nth-child(2n) {
        width: 1px;
        height: 68px;
        background: #dfdfdf;
    }
    .p_join .event_box li {
        text-align: center;
    }
        .p_join .event_box li img {
            margin-bottom: 15px;
        }
        .p_join .event_box li p {
            line-height: 1.2;
            letter-spacing: -0.8px;
        }

.p_join .login_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
    .p_join .login_box > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
        .p_join .login_box > div label {
            margin-right: 10px;
        }
        .m_join .login_box > div p.line {
            width: 1px;
            height: 13px;
            background: #dfdfdf;
            margin: 0 10px;
        }
.p_join .sns_line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .p_join .sns_line p.line {
        width: 33%;
        height: 1px;
        background: #DFDFDF;
    }


    /*--------------------
        아이디 비번찾기
      --------------------*/
.p_find .inner .top_title {
    padding-bottom: 40px;
    border: none;
    text-align: center;
}
.p_find .ex_join .inner .top_title {
    border-bottom: 1px solid #888888;
}
.p_find .tabmenu {
    position: relative;
}

    .p_find .tabmenu li {
        width: 50%;
        float: left;
        position: relative;
    }

        .p_find .tabmenu li > label {
            display: block;
            width: 100%;
            height: 52px;
            line-height: 52px;
            color: #000;
            font-size: 2.4rem;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            border-bottom: 1px solid #dfdfdf;
        }

        .p_find .tabmenu li > input {
            display: none;
            box-sizing: border-box;
        }

            .p_find .tabmenu li > input:checked ~ label {
                border-bottom: 3px solid #9F0827;
                color: #9F0827;
                height: 50px;
                line-height: 50px;
            }

            .p_find .tabmenu li > input:checked ~ .tabCon {
                display: block;
            }


    .p_find .tabmenu .tabCon {
        display: none;
        width: 200%;
        padding-top: 50px;
        padding-bottom: 60px;
    }
.p_find .tb_c_2 {
    margin-left: -100%;
}
.p_find .tb_c_1_2 {
    margin-left: -100%;
}
.p_find .subtab li > label {
    display: block;
    width: calc(100% - 5px);
    height: 58px;
    line-height: 58px;
    color: #000;
    font-size: 1.8rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    border: 1px solid #DFDFDF;
    box-sizing: border-box;
    margin-right: 5px;
    border-radius: 10px;
}
    .p_find .subtab li:last-child > label {
        margin-right: 0;
        margin-left: 5px;
    }
.p_find .subtab li > input:checked ~ label {
    border: 2px solid #9F0827;
    color: #9F0827;
    height: 58px;
    line-height: 56px;
}
.p_find .j_box .radioBox label input.tel_f:before {
    content: "휴대폰 번호로 찾기";
}

.p_find .j_box .radioBox label input.email_f:before {
    content: "이메일 주소로 찾기";
}
/*---------------------------
      아이디 비번찾기_결과
      --------------------------*/

.p_join .result_img {
    text-align: center;
    width: 100%;
    padding: 40px 0;
}
    .p_join .result_img img {
        width: 100px;
        height: auto;
        margin-bottom: 20px
    }
.p_join .result_df {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.p_join .login_event{
    width:100%;
    height:auto
}
/* 모바일 */
@media screen and (max-width: 425px) {
    .p_join .sns_line p.line {
        width: 24%;
    }
} 
@media screen and (max-width: 400px) {
    .p_join .event_box li p {
        font-size: 11px;
    }
    .p_join .j_box .dbtnbox input {
        width: 64%;
    }

    .p_join .j_box .dbtnbox div {
        width: 36%;
    }
}