@charset "utf-8";

.login_background{margin: 0;padding: 0;width: 100%;height: 100%;background-color : rgba(224,235,252, 0.6);position: absolute;}

.login_wrap{width: 580px;height: auto;min-height: 380px;padding-bottom: 30px;background-color: #fff;position: relative;top: 250px;margin: 0 auto;border-radius: 30px;box-shadow: rgba(0, 36, 134, 0.178) 0px 7px 29px 0px;}
.logo_img{margin: 0 auto;width: 300px;height: 72px;padding: 30px 0;}
.input_group{width: 500px;height: auto;margin: 0 auto;}
.input_group>.user_id>input{width: 100%;padding: 12px;border: 2px solid #F1F2F7;border-radius: 10px;margin: 0 auto;box-sizing: border-box;margin-bottom: 15px;}
.input_group>.user_password>input{width: 100%;padding: 12px;border: 2px solid #F1F2F7;border-radius: 10px;margin: 0 auto;box-sizing: border-box;margin-bottom: 15px;}
.input_group>.user_id>input::placeholder{color: #BABDCE;font-weight: 500;}
.input_group>.user_password>input::placeholder{color: #BABDCE;font-weight: 500;}
.input_group>.user_id>input:hover{border: 2px solid #333;transition: 0.4s;}
.input_group>.user_password>input:hover{border: 2px solid #333;transition: 0.4s;}
.input_group>.user_password{position: relative;}
.pw_toggle_btn{position: absolute;top: 45%;right: 14px;transform: translateY(-65%);background: none;border: none;cursor: pointer;padding: 4px;display: flex;align-items: center;justify-content: center;}
.pw_toggle_btn:hover svg{stroke: #333;}

.id_save{width: 500px;height: auto;margin: 5px auto 25px;align-items: center;}
.id_save>input{display: none;}
.id_save>label{position: relative;padding-left: 30px;font-size: 14px;font-weight: 500;}
.id_save>label::before{content: '';position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 14px;height: 14px;border: 2px solid #F1F2F7;border-radius: 4px;background-color: #fff;}
.id_save>input:checked + label::before{border-color: #599AFF;background-color: #599AFF;}
.id_save>input:checked + label::after{content: '✔';position: absolute;top: 45%;left: 3px;transform: translateY(-50%);color: #fff;font-size: 14px;}
.id_save>label:hover:before{border: 2px solid #333;transition: 0.3s;}

.login_btn{width: 500px;height: auto;margin: 0 auto;}
.login_btn>a{width: 500px;height: auto;margin: 0 auto;}
.login_btn button{width: 100%;padding: 12px 0;border-radius: 10px;background-image: linear-gradient(to right, #2262C6, #3581F6);color: #fff;font-size: 16px;font-weight: 600;letter-spacing: 1px;}
.login_btn button:hover{background-image: linear-gradient(to right,#3581F6, #599AFF);}

.register_btn{width: 500px;height: auto;margin: 10px auto 0;}
.register_btn>a{display: block;width: 100%;padding: 12px 0;text-align: center;border-radius: 10px;border: 2px solid #2262C6;color: #2262C6;font-size: 16px;font-weight: 600;letter-spacing: 1px;text-decoration: none;box-sizing: border-box;}
.register_btn>a:hover{background-color: #2262C6;color: #fff;transition: 0.3s;}

#wrap>a{background-color: #2262C6;border: none;color: #fff;font-size: 16px;font-weight: 700;border-radius: 50px;position: absolute;right: 20px;bottom: 20px;align-items: center;text-align: center;padding: 10px;}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .login_wrap {width: 90%;height: auto;top: 150px;padding: 20px;}
    .input_group { width: 100%;}
    .id_save {width: 100%;}
    .login_btn {width: 100%;}
    .register_btn {width: 100%;}
}
@media (max-width: 550px) {
    .login_background{background-color: #fff;}
    .login_wrap {top: 100px;box-shadow: none;}
    .logo_img {width: 250px;height: 72px;padding: 20px 0;}
    .id_save > label {font-size: 14px;}
    .login_btn button {font-size: 14px;}
    #wrap>a{display: none;}
}