:root {
    --bs-blue : #1e254a;
    --sub-blue : #22bdff;

    --bs-gray : #818181;

    --bs-line : #eee;

    --bs-shadow : 5px 5px 5px rgba(215, 215, 215, 0.15);
}

body { background-color : var(--bs-blue); font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-size:14px; color: #222; letter-spacing: -0.02em; font-weight:300; line-height:1.3;}

.container {width:100%; margin:0 auto; height:100vh; min-height:600px; min-width:280px; position: relative; padding:0 5%;}

.section.login {width:100%; position: relative; top:20%;}

.logo_wrap {display: block; width:100%; margin-bottom:30px;}
.logo_wrap > a {display: block; width:100%; text-align: center;}
.logo_wrap > a > img {width:80%; margin:0 auto; margin-bottom:15px; min-width:100px; max-width:220px;}
.logo_wrap > a > h2 {font-size:25px; color:#fff; font-weight:600;}

.log_wrap {display:block;}
.log_wrap input  {display:block;  margin:0 auto 1rem; width:100%; max-width:400px; text-align: center; line-height:50px; border-radius: 50px; border:0px solid #fff;}
.log_wrap input#password {margin-bottom:1.5rem;}

.log_wrap .extra_btn_wrap {display:block; width:100%; max-width:400px; margin : 0 auto;} 
.log_wrap .extra_btn_wrap > a {float:right; width:33.3%; text-align: right; padding-right:20px; margin-top:0.5rem; margin-bottom:1.5rem;}
.log_wrap .extra_btn_wrap > a > p {font-size:14px; color:#fff; font-weight:400;}
 


 .login .btn {display:block; width:100%; max-width:400px; height:50px; border:2px solid #fff; background-color: var(--bs-blue); color:#fff; font-weight:600; margin : 0 auto 1.5rem; border-radius: 50px;} 
/* .login .btn {display:block; width:100%; max-width:400px; height:50px; border:2px solid #fff; background-color: var(--bs-blue); color:#fff; font-weight:600; margin : 0 auto 0; border-radius: 50px;} */ 

.login .btn_kakao {border:2px solid #fee500; background-color: #fee500; color:#191600; margin:0 auto 0;}
.login .btn_kakao > img {width:20px; margin-right:10px;}



.copy {color:#fff; text-align:center; position: absolute; bottom: 5%; width:100%; margin-bottom:0;}


@media (max-width: 1600px){
    .container {width:100vw; height:100vh; position: relative; padding:0 20%;}
}


@media (max-width: 500px){
    .container {padding:10%;}
    .log_wrap input,
    .login .btn {height:38px;}
}


@media (max-height: 800px){
    .section.login {top:15%;}
}
@media (max-height: 700px){
    .section.login {top:10%;}
}
@media (max-height: 600px){
    .copy {margin-bottom:30px; position:relative;}
}