<template>
    <div class="w1400">
        <div class=" login-sec">
            <section class="login-logo">
                <div class="login-logo-d">
                    <img src="../../../resources/jpg/logo/keris.gif" alt="">
                    <h1>AI 디지털교과서 통합지원센터</h1>
                </div>
            </section>

            <section class="login-input">
                <div class="login-input-d">
                    <div class="ID">
                        <input type="text" class="id" value="아이디를 입력하세요.">
                    </div>
                    <div class="PW">
                        <input type="password" class="password" value="비밀번호를 입력하세요.">
                    </div>
                </div>
            </section>

            <section class="login-checkbox">
                <div class="login-checkbox-i">
                    <input type="checkbox">
                    <span>
                        로그인상태 유지
                    </span>
                </div>
                <div class="login-checkbox-b">
                    <button>아이디 찾기</button>
                    <button>비밀번호찾기</button>
                    <button>회원가입</button>
                </div>
            </section>
            <section class="login-button">
                <button>로그인</button>
            </section>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods: {

    },
    watch: {

    },
    computed: {

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


<style scoped>
.w1400 {
    overflow-y: hidden;
    margin: 0 auto;
    text-align: center;
}

.login-sec section {
    /* border: 1px solid red; */
}

.login-logo {
    width: 100%;
    padding-top: 11rem;

}

.login-logo-d img {
    width: 300px;
    text-align: center;
    /* border: 1px solid red; */
    margin: 0 auto;
    padding: 3rem;
}

.login-logo-d h1 {
    /* border: 1px solid red; */
    font-family: SBaggroM;
    font-weight: 500;
    color: #063a6d;
    font-size: 2.5rem;
}

.login-input {
    width: 100%;
    display: flex;
    flex-direction: column;


}

.login-input-d div {
    width: 100%;

    padding: 1rem;
}

.ID input,
.PW input {
    width: 40rem;
    height: 6rem;
    border: 1px solid #9a9a9a;
    border-radius: 1.2rem;
    padding: 1rem;
    color: #9a9a9a;
}

.login-checkbox {

    width: 100%;
}

.login-checkbox-i {
    width: 40rem;
    text-align: left;
    margin: 0 auto;
    /* border: 1px solid red; */

}

.login-checkbox-i input[type=checkbox] {
    text-align: left;
    margin: 1rem;
    /* border: 1px solid red; */
    transform: scale(1.5);
}

.login-checkbox-i span {
    font-size: 1.5rem;
}

.login-checkbox-b {
    padding: 6rem;
}

.login-checkbox-b button {
    padding: 1rem;
    /* margin: 1rem; */
    color: #333;
    font-family: "Pretendard-Regular";
    font-weight: 500;
    font-size: 1.5rem;
    background-color: #06396d00;
}

.login-checkbox-b button:nth-child(1) {
    position: relative;
}

.login-checkbox-b button:nth-child(1)::after,
.login-checkbox-b button:nth-child(2)::after {
    content: 'ㅣ';
    float: right;
    display: block;
    margin-left: 20px;
}

.login-button {
    width: 100%;
    padding: 0rem 0rem 10rem 0rem;
}

.login-button button {
    width: 40rem;
    padding: 2rem;
    background-color: #3f87f7;
    color: white;
    font-size: 1.7rem;
    border-radius: 1.2rem;
    cursor: pointer;
}
</style>