/* 폰트 */

@import url('https://webfontworld.github.io/pretendard/Pretendard.css');
body{
    position: relative;
    height: 100%;
	  color:#333;
    width:100%;
    letter-spacing: 0px;
	  line-height: 1.6;
    font-family: 'Pretendard', sans-serif;
    word-break: keep-all
}

/* 로그인 페이지 */

.login {width: 100%; height: 100vh; background: url(../img/login-bg.jpg) no-repeat center/cover; position: relative; display: flex; align-items: center; justify-content: center;}
.login::after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 1;}

.login-inner {position: relative; padding: 60px 40px; border-radius: 15px; background: rgba(0, 0, 0, 0.3); overflow: hidden; z-index: 2;}
.login-inner::after {content: ""; display: block; position: absolute; width: 100%; height: 100%; backdrop-filter: blur(5px); top: 0; left: 0; z-index: -1;}
.login-inner .log-tit {color: #fff; display: flex; flex-direction: column; align-items: center; margin-bottom: 50px}
.login-inner .log-tit span {font-size: 15px; color: #b3b3b3; margin-bottom: -5px;}
.login-inner .log-tit h2 {font-size: 44px; color: #fff;}
.log-wrap {display: flex; flex-direction: column; gap: 30px;}
.log-wrap .log-input {display: flex; flex-direction: column; gap: 20px;}
.log-wrap .log-input > div {display: flex; flex-direction: column; gap: 5px;}
.log-wrap .log-input > div span {font-size: 15px; color: rgba(255, 255, 255, .8); text-indent: 16px;}
.log-wrap .log-input > div input {width: 400px; height: 50px; border-radius: 50px; background-color: #f7f7f7; padding: 15px; outline: none;}

input:focus {outline: none; border: none;}
input::placeholder {font-size: 16px; color: #7b7b7b;}
.log-wrap button {font-family: inherit; width: 100%; height: 50px; border-radius: 50px; color: #fff; background-color: #F90628; font-size: 15px;}


/* 반응형 시작 */

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

}

@media screen and (max-width: 780px){
    .log-wrap .log-input > div input {width: 340px;}
    .login-inner .log-tit {margin-bottom: 40px;}
    .login-inner .log-tit h2 {font-size: 38px;}
}

@media screen and (max-width: 580px){
    .login-inner {width: 80vw; padding: 55px 30px;}
    .log-wrap .log-input > div input {width: 100%;}
}

@media screen and (max-width: 430px){
    .login-inner {width: 90vw; padding: 47px 25px;}
    .log-wrap .log-input > div input {height: 45px;}
    .login-inner .log-tit {margin-bottom: 30px;}
    .login-inner .log-tit h2 {font-size: 35px;}
}

@media screen and (max-width: 320px){
    .login-inner .log-tit span {font-size: 13px;}
    .login-inner .log-tit h2 {font-size: 33px;}
    .login-inner {padding: 47px 20px;}
}