:root{
    --color--white:#ffffff;
    --color--background:#ffffff;
    --color--point : #7c00f8;
}

#login-body{
    width: 100%; height: 100vh; overflow-y: hidden;
    main{position: relative; padding: 0;}

    
    section{
        background-color: var(--color--background);
        position: relative;  
        width: 100%; height: 100vh;
        &::before{
            content: '';
            position: absolute;
            top:0; left: 0;
            width: 100%; height: 100%;
           /*  background: url(https://bizfit.co.kr/bfnew/site/comm/images/main/main_bg_login3.png); */
            background-size: 100%;
            background-repeat: no-repeat;
            opacity: 0.5;
        }
    }
    .inner{
        position: relative; 
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100dvh; width: 100vw; max-width: none;
        overflow: hidden;
        margin: 0 auto;
        .left, .right, #section-join-popup{
            max-height: 100vh;height: 100vh;
            display: flex;  flex-direction: column; padding: 2rem; 
        }
        .left{
            flex:1;
            backdrop-filter: blur(5px); background-color: #00000010;
            background: url(https://bizfit.co.kr/bfnew/site/comm/images/main/main_bg_login3.webp);
            background-repeat: no-repeat;
            background-size: cover;
            padding: 4rem;/*  flex-direction: row;  */
            position: relative; flex-grow: 1;
            &::after{
                content: '';
                background-color: #ffffff30;
                width: 100%; height: 100%; position: absolute;
                top: 0; left: 0;
            }
            .box{
               /*  background-color: #ffffff50; */ border-radius: 1rem;height: fit-content; width: 200px;
               position: relative; z-index: 1;
            }
            h1{font-size:2rem; padding-left: .5rem; margin-top: 2rem; margin-right: 0.5rem; padding-bottom: 2rem;}
            .logo{
                /* width: 170px; height: 80px;  */
                margin-bottom: 1rem;border-radius: 1rem;width: 100%;
                img{width: 100%;  margin: 0 auto; display: block; object-fit: contain;}
            }
        }
        .position_fixed{
            position: relative; width: 40%; height: 100%; display: flex; align-items: center;
            flex-shrink: 0; min-width: 700px;
        
        }
        .right{
            max-width: 800px; margin: 0 auto; 
            background-color: var(--color--white); justify-content: start; height: 100%;
            width: 100%; flex-grow: 0; flex-shrink: 0; overflow: hidden;padding: 4rem;
        }
        
        form{
           width: 100%;
            
            h2{font-size: 2rem; margin-bottom:3rem; text-align: center;}
            label{
                width: 100%; margin-bottom: 1rem;margin-bottom: 1.5rem;
                display: flex; align-items: center;border-bottom: 1px solid #cdcdcd;
                span{width: 3rem; font-size: 1.25rem; padding: 0 0.5rem ; flex-grow: 0; flex-shrink: 0;}
                input{width: 100%; padding: 1rem; border: none; background: transparent; }
                input[type="checkbox"]{width: 0.75rem;height: 0.75rem; margin-right: 0.25rem; border-radius: 0.5rem; margin-left: auto; }
                &.check{
                    border: none;margin-bottom: 2rem; font-size: 1rem;
                    input{width: 15px; height: 15px;}
                }
            }
            input#login_btn{
                padding: 1.25rem; width: 100%; border-radius: 0.25rem;  margin-top: 1rem; font-size: 1.1rem; 
                color: var(--color--white) !important; background-color: #000; cursor: pointer; font-weight: 600; 
            }
            input#login_btn:hover{opacity: 0.8;}
            .select{
                display: flex; gap: 1rem; margin-bottom: 2rem; justify-content: center;
                input[type="button"]{
                    border: 1px solid #00000030; padding: 1rem;font-weight: 500; border-radius: 0.25rem; 
                    font-size: 1rem;box-shadow: 0 0 0.5rem #00000010; border-radius: 3rem; max-width: 200px;
                }
                input.activ{
                    background:#000; color: #fff;
                }
            }
        }
        .flex{ 
            display: flex; justify-content: space-between; margin-top: auto;
            align-items: end;
            p{font-size: 1rem; color: #555; margin-bottom: 0.25rem; line-height: 150%; font-weight: 500;}
            input[type="button"]{
                border: 1px solid #00000030; padding: 0.75rem 1rem; width: 180px; font-size: 1rem; display: flex; 
                margin: 0; align-items: center; justify-content: center; border-radius: .5rem; cursor: pointer;
            } 
            input[type="button"]:hover{background-color: #00000010;}
        }
        #join{
            width: 100%;   max-width: 800px; margin: 0 auto;  height: 100%; padding: 4rem;
            overflow: hidden; background-color: var(--color--white);  overflow-y: scroll;
            .select{
                border: 1px solid #cdcdcd; padding: 1rem 0.5rem; border-radius: 0.25rem; margin: 0;
                margin-bottom: 1rem; flex-wrap: wrap;
                span{width: 100%;  flex-grow: 0; flex-shrink: 0;}
                em{color: red; font-weight: 700; padding-right: 0.15rem; font-style: normal;}
                label{
                    width:calc(50% - 1rem);
                    border: none; padding: 0;margin: 0; align-items: left;font-weight: 600;
                    input{width: fit-content; padding: 0; margin-right: 0.5rem; }

                }
            }
            >a{
                margin-bottom: 1rem;  font-size: 1rem; height: 3rem; display: flex; align-items: center;
                font-weight: 600; width: 100%; margin-bottom: 2rem;
                border-bottom: 1px solid #00000030; background-color: #fff;
                i{font-size: 1.25rem; margin-right: 0.5rem;}
            }
            h2{margin-bottom: 2rem; margin-top: 2rem;}
            form{ 
                width: 100%; height: fit-content;
                label{
                    border: 1px solid #00000030; border-radius: 0.25rem;
                    margin-bottom: 1rem;
                    em{color: red; font-weight: 700; padding-right: 0.15rem; font-style: normal;}
                    span{width: 6rem; font-size: 0.9rem; letter-spacing: -1px; color: #777;padding: 0; padding-left: 0.5rem;}
                    &.check{
                        border: none;
                        em{margin-right: 0.25rem; margin-left: 0.25rem;}
                        a{color: blue; text-decoration: underline;}
                    }
                    input{font-size: 1rem;}
                   
                }
                .flex{
                    display: flex; align-items: center; justify-content: space-between;
                    button{background-color: #444; width: 100%; border-radius: 0.25rem; height: 100%; display: block;  
                        padding: 1rem; margin-bottom: 1rem;
                    margin-left: 0.5rem;  display: block; color: var(--color--white); width: 6rem; font-size: 0.8rem;}
                }
              
            
            }
            #join_btn{
                width: 100%; background-color: #000000; padding: 1.1rem; color: white;
                margin-top: 3rem; font-size: 1.1rem; 
            }
            
        }

    }
   
    &.me{
       
        .inner .left{
            background: url(https://bizfit.co.kr/bfnew/site/comm/images/main/login_back_img2.webp);
            background-repeat: no-repeat;
            background-size: cover;
            background-position-x: left;
            position: relative;
            /* &::after{
                content: '';
                background-color: #00000030;
                width: 100%; height: 100%; position: absolute;
                top: 0; left: 0;
            } */
        }
    }
    
    .section-join{
        display: none; position: fixed !important; top: 0; z-index: 1;
        .inner .left .box{width: 250px;}
    }
}

@media (max-width: 1100px) { 
    #login-body .inner .left{display: none;}
    #login-body .inner .position_fixed{
        width: 90%; min-width: 100%;
        padding: 0; margin: 0 auto;
    }
   
}
@media (max-width: 500px) { 
    #login-body .inner .flex{
        flex-direction: column;
        p{width: 100%; text-align: center; margin-bottom: 1rem;}
        input[type="button"]{width: 100%; padding: 1rem;} 
    }
}