@charset "UTF-8";

input:focus{outline: 1px solid #2985db;}

.login {padding:118px 0 120px 0;}
.login-wrap {max-width: 1240px; width: 100%; margin: 0 auto;}

.login-wrap .input-con {display: flex; flex-direction: column; gap:8px;}
.login-wrap .input-con p {font-size: 14px ; line-height: 135%; font-size: 14px; color:#1d1e1f; letter-spacing: -2%; font-weight: 700;}
.login-wrap .input-con input[type='text'] {width: 100%; padding:12px 16px; border:1px solid #D5D7D9; background: #fff; border-radius: 8px; font-size: 18px; line-height: 150%; letter-spacing: -2%;}
.login-wrap .input-con input[type='password'] {width: 100%; padding:12px 16px; border:1px solid #D5D7D9; background: #fff; border-radius: 8px; font-size: 18px; line-height: 150%; letter-spacing: -2%;}

.login-box .title p{font-weight: 700; font-size: 60px; line-height: 135%; letter-spacing: -2%; color:#1D1E1F; text-align: center;}
.login-content-wrap {padding-top:60px ; display: flex; flex-direction: column; gap:24px; max-width: 480px; width: 100%; margin: 0 auto;}
.login-content {padding: 48px; gap:40px; display: flex;flex-direction: column; background: #F5F7FA; border: 1px solid #E6E8EB ; border-radius: 16px;}
.login-content .login-input-wrap {display: flex; flex-direction: column; gap:24px;}
.login-btn {background: #BEC1C3; color:#6E7275; font-size: 18px; line-height: 135%; letter-spacing: -2%; border-radius: 999px; padding: 0 24px; height: 52px; width: 100%;; }
.login-btn.active {background: linear-gradient(84.04deg, #1364BD 12.55%, #2DA8DE 91.66%); color:#fff;}
.vote-link {display: flex; gap:8px; align-items: center; justify-content: center;}
.vote-link p {font-weight: 400; font-size: 16px; line-height: 150%; letter-spacing: -2%; color: #7E8285;}
.vote-link a {font-weight: 400; font-size: 16px; line-height: 135%; letter-spacing: -2%; color: #2A79D1;}

.checkboxList {display: flex; gap:16px; flex-direction: column;}
.chkbox-input:disabled + label {opacity: 0.4; cursor: not-allowed;}


@media (max-width: 1280px) {
.checkboxList .chk_style {width: auto;}

 }

@media (max-width: 767px) {


  .login-box {padding: 0 16px;;}
  .login-box .title p {font-size: 24px ; text-align: left;}
  .login-content-wrap {padding-top: 32px;;}
  .login-content {padding: 24px 20px;;}

  .login-wrap .input-con input[type='text'] {font-size: 16px; padding: 10px 12px;}
  .login-wrap .input-con input[type='password'] {font-size: 16px; padding: 10px 12px;}

  .checkboxList {flex-direction: column; gap:20px;}
  .checkboxList .chk_style {width: 100%;}
  .info-wrap .info-title.mb-10 {margin-bottom: 30px;;}
}