@charset "UTF-8";

/* header 시작 */
#header{position: fixed; top: 0; left: 0; width: 100%; background: #fff; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06); z-index: 99999;}
#header .inner{max-width: 1640px; height: 100%; padding: 20px 40px;}
.header-area{display: flex; justify-content: space-between; align-items: center; height: 96px;}
.logo > a > img{width: 100%;}
.logo > a >img:nth-child(1){display: none;}
.logo > a >img:nth-child(2){display: block;}
.login > i{
    color: var(--darkblue, #336);
    font-size: 52px;
}
.login > svg{
    fill: var(--darkblue, #336); 
    width: 52px; 
    height: 52px;
    display: block;
}
.login > svg > path{fill: inherit;}
.user-info{display: flex; gap: 20px; align-items: center;}
.user-name{font-size: 0.937rem; color: var(--darkblue, #336); font-weight: 655;}
.user-info button{display: flex; align-items: center; font-size: 0.937rem; font-weight: 600; color: var(--darkblue, #336); padding: 12px 16px; border-radius: 6px; border: 1px solid var(--darkblue, #336);}
/* header 끝 */

/* footer 시작 */
#footer{display: flex; align-items: center; border-top: 1px solid var(--border, #DFDFDF);}
#footer .inner{display: flex; justify-content: center; text-align: center; padding: 30px 40px;}
#footer .inner .copyright{
    color: #9E9E9E;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 120%;
}
/* footer 끝 */
.main{
    min-height: calc(var(--vh) - 78px);
    
}
/* login */
.main.login-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.form-wrap{
    width: 500px;
    padding: 36px 24px 14px 24px;
   
    border-radius: 6px;
    border: 1px solid var(--border, #DFDFDF);
    background: #F9F9F9;
}
.form-wrap .login-form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.form-wrap .form-top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.form-wrap .form-top .logo{
    width: 120px;
    height: 30px;
}
.form-wrap .form-top .logo > img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.form-wrap .form-top .txt{
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e1e1e;
}
.form-wrap .form-mid .id-input{
    margin-bottom: 10px;
}
.form-wrap .form-mid .pass-input{
    margin-bottom: 6px;
}
.form-wrap .form-mid .error-msg{
    color: #EC1C47;
    font-size: 0.803rem;
    font-weight: 400;
}
.form-wrap .btn-area{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.form-wrap .btn-area .login-btn{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 30px 12px;
    border-radius: 6px;
    background: var(--highlight, #5390C8);
    color: #FFF;
    font-family: "Gmarket Sans";
    font-size: 1rem;
    font-weight: 700;
    line-height: 120%;
}
/* login */





@media screen and (max-width:1200px){
    .second-section .inner{
        padding: 0 40px;
    }
}

@media screen and (max-width: 992px){
    #header .inner{
        padding: 15px var(--inner-padding-l);
    }
    .header-area{
        height: 70px;
    }
    .login > i{
        font-size: 44px;
    }
    .login > svg{
        width: 44px; 
        height: 44px;
    }
    .second-section .inner{
        padding: 0 20px;
    }
}
@media screen and (max-width: 768px){
    .logo{
        width: 120px;
    }
    .login > i{
        font-size: 38px;
    }
    .login > svg{
        width: 38px; 
        height: 38px;
    }
    .form-wrap{
        width: 400px;
        border-radius: 6px;
        border: 1px solid var(--border, #DFDFDF);
        background: #F9F9F9;
    }
}
@media screen and (max-width: 480px){
    #header .inner{
        padding: 10px var(--inner-padding-l);
    }
    .header-area{
        height: 60px;
    }
    .logo{
        width: 90px;
    }
    .login > i{
        font-size: 30px;
    }
    .login > svg{
        width: 30px; 
        height: 30px;
    }
    .user-info{
        gap: 10px;
    }
    .user-info button{
        padding: 6px 8px;
    }
    .main.login-wrap{
        background: #F9F9F9;
    }
    .form-wrap{
        width: auto;
        border-radius: 0;
        border: none;
    }
}