<template>
    <div class="w1400">
        <section class="join-logo">
            <h1>회원가입</h1>
        </section>
        <section class="join-b">
            <div class="join-b-button">
                <input type="radio" id="one" v-model="selectedMembership" value="one">
                <label for="one" class="radio-t t1">기관회원
                    <img src="../../../resources/jpg/join-bt2.png" alt=""></label>
                <input type="radio" id="two" v-model="selectedMembership" value="two">
                <label for="two" class="radio-t t2">일반회원
                    <img src="../../../resources/jpg/join-bt.png" alt=""></label>

            </div>
        </section>
        <div v-if="selectedMembership === 'one'">
            <div class="login-info">
                <div>
                    <h3>회원정보</h3>
                    <hr>
                </div>
                <section class="join-sec1 joinsub0">
                    <div class="join-sec-sub ">
                        <span>아이디</span>
                    </div>
                    <div>
                        <input type="text" value="아이디를 입력하세요.">
                    </div>
                    <div>

                        <button>중복확인</button>
                    </div>
                </section>


                <section class="join-sec2 joinsub">

                    <div class="join-sec-sub">
                        <span>기관업체</span>
                    </div>
                    <div class="join-sub-input">
                        <input type="text">

                    </div>

                </section>


                <section class="join-sec3 joinsub">
                    <div class="join-sec-sub">
                        <span>비밀번호</span>
                    </div>
                    <div class="join-sub-input">
                        <input type="text">

                    </div>
                </section>


                <section class="join-sec4 joinsub">
                    <div class="join-sec-sub">
                        <span>비밀번호 확인</span>
                    </div>
                    <div class="join-sub-input">
                        <input type="text">

                    </div>
                </section>


                <section class="join-sec5 joinsub">
                    <div class="join-sec-sub">
                        <span>담당자명</span>
                    </div>
                    <div>
                        <input type="text">

                    </div>
                </section>


                <section class="join-sec6">
                    <div class="join-sec-sub">
                        <span>이메일</span>
                    </div>
                    <div>
                        <input type="text" name="email_id" id="email_id">
                    </div>
                    <div>@</div>
                    <div>
                        <input type="text" name="email_dns" id="email_dns">
                    </div>
                    <div>
                        <select name="email_sel" id="email_sel">
                            <option value="">직접 입력</option>
                            <option value="naver.com">naver</option>
                            <option value="hanmail.net">daum</option>
                            <option value="gmail.com">google</option>
                        </select>
                    </div>

                </section>
            </div>
            <div class="login-info2">
                <div>
                    <h3>회사소개</h3>
                    <hr>
                </div>
                <div class="login-info-grid">
                    <div class="login-info-grid-1">
                        <section class="join-sec0">
                            <div>
                                <p>logo</p>
                            </div>
                        </section>
                    </div>

                    <div class="login-info-grid-2">
                        <section class="join-sec1 joinsub0-1">
                            <div class="join-sec-sub ">
                                <span>회사명</span>
                            </div>
                            <div>
                                <input type="text" value="회사명을 입력해주세요.">
                            </div>

                        </section>


                        <section class="join-sec2 joinsub">

                            <div class="join-sec-sub">
                                <span>우리회사 키워드</span>
                            </div>
                            <div class="join-sub-input">
                                <input type="text">

                            </div>

                        </section>


                        <section class="join-sec3 joinsub j-s-3">
                            <div class="join-sec-sub">
                                <span>회사소개글</span>
                            </div>
                            <div class="join-sub-input">
                                <input type="text">

                            </div>
                        </section>


                        <section class="join-sec4 joinsub">
                            <div class="join-sec-sub">
                                <span>회사소개서 <br> 첨부파일</span>
                            </div>
                            <div class="join-sub-input">
                                <input type="file">

                            </div>
                        </section>
                    </div>
                </div>
                <div class="login-info">
                    <div>
                        <h3>회원정보</h3>
                        <hr>
                    </div>
                    <section class="join-sec1 joinsub0">
                        <div class="join-sec-sub ">
                            <span>아이디</span>
                        </div>
                        <div>
                            <input type="text" value="아이디를 입력하세요.">
                        </div>
                        <div>

                            <button>중복확인</button>
                        </div>
                    </section>


                    <section class="join-sec2 joinsub">

                        <div class="join-sec-sub">
                            <span>기관업체</span>
                        </div>
                        <div class="join-sub-input">
                            <input type="text">

                        </div>

                    </section>


                    <section class="join-sec3 joinsub">
                        <div class="join-sec-sub">
                            <span>비밀번호</span>
                        </div>
                        <div class="join-sub-input">
                            <input type="text">

                        </div>
                    </section>


                    <section class="join-sec4 joinsub">
                        <div class="join-sec-sub">
                            <span>비밀번호 확인</span>
                        </div>
                        <div class="join-sub-input">
                            <input type="text">

                        </div>
                    </section>


                    <section class="join-sec5 joinsub">
                        <div class="join-sec-sub">
                            <span>담당자명</span>
                        </div>
                        <div>
                            <input type="text">

                        </div>
                    </section>


                    <section class="join-sec6">
                        <div class="join-sec-sub">
                            <span>이메일</span>
                        </div>
                        <div>
                            <input type="text" name="email_id" id="email_id">
                        </div>
                        <div>@</div>
                        <div>
                            <input type="text" name="email_dns" id="email_dns">
                        </div>
                        <div>
                            <select name="email_sel" id="email_sel">
                                <option value="">직접 입력</option>
                                <option value="naver.com">naver</option>
                                <option value="hanmail.net">daum</option>
                                <option value="gmail.com">google</option>
                            </select>
                        </div>

                    </section>
                </div>

            </div>
        </div>
        <div v-if="selectedMembership === 'two'">
            <div class="login-info">
                <div>
                    <h3>회원정보</h3>
                    <hr>
                </div>
                <section class="join-sec1 joinsub0">
                    <div class="join-sec-sub ">
                        <span>아이디</span>
                    </div>
                    <div>
                        <input type="text" value="아이디를 입력하세요.">
                    </div>
                    <div>

                        <button>중복확인</button>
                    </div>
                </section>


                <section class="join-sec2 joinsub">

                    <div class="join-sec-sub">
                        <span>기관업체</span>
                    </div>
                    <div class="join-sub-input">
                        <input type="text">

                    </div>

                </section>


                <section class="join-sec3 joinsub">
                    <div class="join-sec-sub">
                        <span>비밀번호</span>
                    </div>
                    <div class="join-sub-input">
                        <input type="text">

                    </div>
                </section>


                <section class="join-sec4 joinsub">
                    <div class="join-sec-sub">
                        <span>비밀번호 확인</span>
                    </div>
                    <div class="join-sub-input">
                        <input type="text">

                    </div>
                </section>


                <section class="join-sec5 joinsub">
                    <div class="join-sec-sub">
                        <span>담당자명</span>
                    </div>
                    <div>
                        <input type="text">

                    </div>
                </section>


                <section class="join-sec6">
                    <div class="join-sec-sub">
                        <span>이메일</span>
                    </div>
                    <div>
                        <input type="text" name="email_id" id="email_id">
                    </div>
                    <div>@</div>
                    <div>
                        <input type="text" name="email_dns" id="email_dns">
                    </div>
                    <div>
                        <select name="email_sel" id="email_sel">
                            <option value="">직접 입력</option>
                            <option value="naver.com">naver</option>
                            <option value="hanmail.net">daum</option>
                            <option value="gmail.com">google</option>
                        </select>
                    </div>

                </section>
            </div>
        </div>



        <!---------------------------------------------------------------------------------------------------------------->



        <div class="join-w1400">

            <section class="join-email-bt">
                <input type="checkbox">
                <span>E-mail 구독서비스를 신청하시겠습니까?</span>
            </section>

            <section class="join-end-bt">
                <button>이전</button>

                <button>회원가입</button>
            </section>
        </div>

    </div>
</template>

<script>


export default {
    data() {
        return {
            selectedMembership: 'one'
        }
    },
    methods: {

    },
    watch: {

    },
    computed: {

    },
    mounted() {
        console.log('Join mounted');
    }
}
</script>

<style scoped>
.join-b {
    width: 100%;

    /* border: 1px solid red; */
}

.join-logo {
    padding: 6rem;
}

.join-logo h1 {
    font-family: SBaggroM;
    color: #0e0077;
    font-size: 4rem;
}

.join-b-button {
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    gap: 6rem;
    flex-direction: row;
    /* padding: 9rem; */
}

.join-b-button input[type="radio"] {
    display: none;
}

.join-b-button button {
    height: 20rem;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 2rem;
    text-align: center;
    box-shadow: 2px 2px 5px #86868644;
    /* padding: 1rem; */
}

.join-b-button button p {
    padding: 3rem 0 0;
    /* padding: 3rem 0rem 1rem 3rem; */
    font-size: 3rem;
    font-family: SBaggroM;
    color: #014099;

}

.join-b-button button img {
    width: 200px;
    height: 100px;
    text-align: center;
    margin: 0 auto;
    /* border: 1px solid red; */
    background-position: center;
}


.background {
    background-color: #000000;
}

.join-b-button button:nth-child(1).background {
    background-color: #000000;
}


.light {
    z-index: 1;
    background-color: #ff0000;
}

.join-b-button button:nth-child(2) {
    background-color: #e6fff1;
}

.join-b-button button:nth-child(2) img {
    width: 100px;
}

.join-b-button button:nth-child(2) p {
    color: #0e5e2e;
}

.radio-t {
    padding: 3rem;
    height: 25rem;
    font-size: 3rem;
    border-radius: 2rem;
    font-family: SBaggroM;
    margin: 0 auto;
    box-shadow: 2px 2px 5px #33333330;
    text-align: center;
}

.t1 {
    padding: 6rem 0;
    color: #014099;
    background-color: #e2ecfc;
}

.t1 img {
    padding: 1rem;
    width: 90%;
    margin: 0 auto;
}

.t2 img {
    padding: 1rem;
    width: 50%;
    margin: 0 auto;

}

.t2 {
    padding: 6rem 0;
    color: #0e5e2e;
    background-color: #e6fff1;
}

/* 공통요소-------------------------------------------------------------------------*/
hr {
    margin: 1rem 0 3rem 0;
    border: 1px solid #cbcbcb;
}

section div span {
    font-size: 1.5rem;
    font-family: "Pretendard-Regular";

    float: left;
    color: #3f87f7;
    padding: 1rem 5rem 1rem 5rem;
}

section div input {
    width: 100%;
    padding: 1rem;
    border: 1px solid #cbcbcb;
    color: #cbcbcb;
    border-radius: 0.5rem;
}

section div button {
    width: 100%;
    padding: 1rem;
    cursor: pointer;
    border-radius: 0.5rem;
}

section div select {
    width: 100%;
    padding: 1rem;
    border: 1px solid #cbcbcb;
    border-radius: 0.5rem;
    color: #6b6b6b;
    font-family: "Pretendard-Regular";

}


/* -------------------------------------------------------------------------------- */






.login-info,
.login-info2 {
    width: 50%;
    margin: 0 auto;

}

.login-info2 {
    display: block;
}

.login-info2.Chacked {
    display: none;
}

.login-info h3,
.login-info2 h3 {
    color: #0e0077;

    font-size: 2rem;
    font-family: "Pretendard-Regular";

    padding: 3rem 1rem 1rem 1rem;
}

.joinsub0 {
    padding: 1rem;
    display: grid;
    grid-template-columns: 200px 2fr 1fr;
    gap: 1rem;
}

.j-s-3 {
    display: grid;
    grid-template-rows: 30rem;
}

.j-s-3 input {
    height: 100%;
}

.join-sec1 button {
    font-size: 1.5rem;
    color: white;
    font-family: "Pretendard-Regular";

    background-color: #3f87f7;
}

.joinsub {
    padding: 1rem;
    display: grid;
    grid-template-columns: 200px 2fr;
    gap: 1rem;
}

.join-sec6 {
    padding: 1rem;
    display: grid;
    grid-template-columns: 200px 1fr 10px 1fr 1fr;
    gap: 1rem;
}

.join-sec6 div:nth-child(3) {
    padding: 1rem 0;
    font-size: 1.5rem;
    font-family: "Pretendard-Regular";

}

.login-info-grid {
    display: grid;
    grid-template-columns: 100px 1fr;

}

.join-sec0 {
    display: grid;
    padding: 2rem;
    grid-row: 1 / span 3;

}

.join-sec0 div p {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    color: #333;
    font-size: 2.5rem;
    font-family: "Pretendard-Regular";
    background-color: #b5b5b5;
    /* border: 1px solid red; */
    box-shadow: 2px 2px 5px #33333328;
}

.joinsub0-1 {
    padding: 1rem;
    display: grid;
    grid-template-columns: 200px 2fr;

}

.join-w1400 {
    width: 50%;
    margin: 0 auto;

}

.join-email-bt {
    font-size: 1.6rem;
    padding: 3rem 3rem 3rem 0rem;
}

.join-email-bt input[type=checkbox] {
    margin: 1rem;
    /* border: 1px solid red; */
    transform: scale(1.5);
}

.join-email-bt span {
    color: #898989;
    font-family: "Pretendard-Regular";

}

.join-end-bt {
    display: grid;
    grid-template-columns: 25% 73%;
    gap: 1rem;
    padding: 6rem 0rem 6rem 0rem;
}

.join-end-bt button {
    padding: 2rem;
    cursor: pointer;
    border-radius: 1.2rem;
    font-size: 1.5rem;
    font-family: "Pretendard-Regular";

}

.join-end-bt button:nth-child(2) {
    background-color: #3f87f7;
    color: white;


}
</style>