@charset "UTF-8";

div.login-wrap{width:100%; min-height:100vh; overflow:hidden; position:relative; padding-bottom:3rem;}
div.login-wrap:before{content:''; display:block; width:100%; height:40%; background:var(--bg-gradi); position:absolute; top:0; left:0; z-index:-1;}
div.login-wrap:after{content:''; display:block; width:100%; height:40%; background:url("../img/login_bg.jpg")center/100% auto no-repeat; position:absolute; top:0; left:0; z-index:-1; opacity:.1;}
div.login-wrap section.lg-top{display:flex; width:100%; align-items:center; justify-content:space-between; padding:0 3rem;}
div.login-wrap section.lg-top div.logo{width:20rem; height:auto;}
div.login-wrap section.lg-top div.logo a{display:block; width:100%; height:100%;}
div.login-wrap section.lg-top div.logo img{display:block; width:100%; height:100%; object-fit:contain;}
div.login-wrap section.lg-top div.home{color:#fff; border-bottom:1px solid #fff; opacity:.7; transition:0.2s;}
div.login-wrap section.lg-top div.home a{display:inline-block; padding-bottom:0.125rem;}
div.login-wrap section.lg-top div.home:hover{opacity:1;}
div.login-wrap section.lg-mid{}
div.login-wrap section.lg-mid div.login-box{background:rgba(255,255,255,0.8); backdrop-filter:blur(5px); box-shadow:10px 20px 30px rgba(0,0,0,0.1); width:640px; padding:3.5rem; border-radius:3rem 3rem 0 3rem; margin:0 auto; margin-top:5rem;}
div.login-wrap section.lg-mid div.login-box h3.box-tit{text-align:center; font-family:'Montserrat_B','Pretendard-Bold',sans-serif; word-break:keep-all; font-size:1.8rem; color:var(--color-main01); margin-bottom:3rem;}
div.login-wrap section.lg-mid div.login-box div.box-con{}
div.login-wrap section.lg-mid div.login-box div.box-con div.login-form{}
div.login-wrap section.lg-mid div.login-box div.box-con div.login-form div.form-item{position:relative; margin-bottom:0.5rem;}
div.login-wrap section.lg-mid div.login-box div.box-con div.login-form div.form-item input{border-radius:50px; width:100%; border:2px solid #eee; height:4rem; padding:0 1.3rem; padding-top:0.5rem;}
div.login-wrap section.lg-mid div.login-box div.box-con div.login-form div.form-item span.label{position:absolute; top:50%; left:1.5rem; transform:translateY(-50%); transition:0.2s;}
div.login-wrap section.lg-mid div.login-box div.box-con div.login-form div.form-item input:valid + span.label,
div.login-wrap section.lg-mid div.login-box div.box-con div.login-form div.form-item input:focus + span.label,
div.login-wrap section.lg-mid div.login-box div.box-con div.login-form div.form-item input:active + span.label{top:0.6rem; left:1.2rem; transform:scale(0.8); color:#777;}
div.login-wrap section.lg-mid div.login-box div.box-con label.id-save{}
div.login-wrap section.lg-mid div.login-box div.box-con a.btn-login{display:block; margin-top:2rem; padding:1.25rem; text-align:center; background:var(--color-main01); color:#fff; font-size:1.125rem; border-radius:50px; font-family:'Montserrat_B','Pretendard-Bold',sans-serif;}
div.login-wrap section.lg-mid div.login-box ul.mbtn-list{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:2rem; gap:1rem;}
div.login-wrap section.lg-mid div.login-box ul.mbtn-list li{color:#999;}
div.login-wrap section.lg-mid div.login-box ul.mbtn-list li:hover{color:#333;}
div.login-wrap section.lg-mid div.login-box ul.mbtn-list li a{padding:0.5rem;}
div.login-wrap p.copy{width:100%; height:3rem; line-height:3rem; text-align:center; position:fixed; bottom:0; left:0; font-size:0.8rem; color:#aaa;}


@media screen and (max-width:640px){

    div.login-wrap section.lg-mid div.login-box{width:80%; padding:3rem;}

}
@media screen and (max-width:480px){

    div.login-wrap section.lg-top{justify-content:center; padding:0;}
    div.login-wrap section.lg-top div.logo{width:70%; height:auto;}
    div.login-wrap section.lg-top div.home{display:none;}
    div.login-wrap section.lg-mid div.login-box{width:85%; background:#fff; padding:3rem 2rem; border-radius:2rem 2rem 0 2rem;}
    div.login-wrap section.lg-mid div.login-box h3.box-tit{font-size:1.6rem;}
    div.login-wrap section.lg-mid div.login-box div.box-con div.login-form div.form-item input{height:3.5rem; padding:0 1rem; padding-top:0.7rem;}
    div.login-wrap section.lg-mid div.login-box div.box-con div.login-form div.form-item input:valid + span.label, 
    div.login-wrap section.lg-mid div.login-box div.box-con div.login-form div.form-item input:focus + span.label, 
    div.login-wrap section.lg-mid div.login-box div.box-con div.login-form div.form-item input:active + span.label{top:0.4rem; left:0.8rem;}
    div.login-wrap section.lg-mid div.login-box div.box-con a.btn-login{padding:1rem;}

}