:root {

  /* Colors: */
  --t_main_color: #0072BC;
  --t2l_color: #CE0E1E;
  --result_n_color: #FF4B5A;
  --result_p_color: #3B77FF;
  --mono_point: #111111;
  --mono_main: #4E4E4E;
  --mono_sub: #828282;
  --mono_dea: #BBBBBB;
  --mono_line: #E2E2E2;
  --mono_back: #F9F9F9;
  font-size: 10px;
}



body {
  font-weight: 300;
  font-family: 'Pretendard';
  margin: 0;
  padding: 0;
  caret-color: transparent;
}

input {
  width: 100%;
  /* height: 2.5vw; */
  height: 4.8rem;
  font-size: 1.8rem;
  font-weight: 300;
  font-family: 'Pretendard';
}



a:hover,
a:visited,
a:link,
a:active {
  color: var(--mono_sub);
  text-decoration: none;
}


.left-align-wrapper {
  display: flex;
  /* width: 63%; */
  width: 60rem;
  height: 100%;
  /* border: 1px solid pink; */
  align-items: center;
  justify-content: center;
}

.left-side {
  /* border: 1px solid red; */
  width: 50%;
  box-sizing: border-box;
  height: 100%;
  float: left;
  display:flex;
  align-items: flex-end;
  justify-content: center;
  /*background-color: #B7E9F4;*/
}

.left-side img {
  position: absolute;
}
/* 수정 전  
.left-side img:nth-child(1) {
  width: 50%;
  display:flex;
}
*/
/*수정 후 */
.left-side img:nth-child(1) {
    width: 50%;
    display: flex;
    max-width: 1280px;
    height: 100%;
}


.left-side img:nth-child(2) {
  display:flex;
  width: 20%;
  top: 39%;
}

.left-side img:nth-child(3) {
  display:flex;
  width: 10%;
  bottom:16%;
}

.left-side img:nth-child(4) {
  display:flex;
  width: 11%;
  bottom:6%;
}
.right-side {
  /* border: 1px solid blue; */
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  float: left;

}








/* 상단 타이틀 */
.title {
  margin-bottom: 3rem;
}

.title p:nth-child(1) {
  margin: 0;
  font-weight: bold;
  text-align: left;
  color: var(--mono_point);
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 3.5rem;
  letter-spacing: -1px;
}

.title p:nth-child(2) {
  text-align: left;
  color: var(--mono_sub);
  /* font-size: 0.9vw; */
  font-size: 1.8rem;
  letter-spacing: -1px;
}

/* 이메일 주소 비밀번호 */
.input_login input {
  font-size: 1.4rem;
  padding: 1.2rem 2.4rem;
  border: 1px solid var(--mono_line);
}
.login-btn{
    border:none;
    background-color: var(--t_main_color);
    color: #ffffff;
    cursor:pointer;
    width:100%;
    height: 4.8rem;
    font-size: 1.8rem;
    font-weight: 300;
    font-family: 'Pretendard';
    line-height:4.8rem;
}

.login-btn input {
  border: none;
  background-color: var(--t_main_color);
  color: #ffffff;
  cursor:pointer;
}

/* 가장큰 래퍼 */
.input-inner {
  width: 40rem;
  margin-top: -5rem;
  /* border: 1px solid skyblue; */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}



/* 아이디 비번찾기 */
.find-user {
  color: var(--mono_sub);
  height: 1.4rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  font-size: 1.6rem;
  margin-top: 1.5rem;
}

.vertical-line {
  border-left: 1px solid var(--mono_line);
  height: 80%;
  /* 또는 필요에 따라 조정 */
  margin: 0 1rem;
  caret-color: transparent;
}









@media screen and (max-width:1050px) {
  .left-side {
    /* border: 1px solid red; */
    width: 100%;
    box-sizing: border-box;
    height: 30%;
    display:flex;
    align-items: flex-end;
    justify-content: center;
    background-color: #B7E9F4;
  }
  /* 수정 전  
  .left-side img:nth-child(1) {
    position:absolute;
    width: 100%;
    display:flex;
  }
  */
  /* 수정 전*/
  .left-side img:nth-child(1) {
    position:absolute;
    width: 100%;
    display:flex;
    height: 30%;
  }
  
  
  .left-side img:nth-child(2) {
    display:flex;
    width: 50%;
    top: 3%;
  }
  
  .left-side img:nth-child(3) {
    display:flex;
    width: 11%;
    top: 10%;
  }
  
  .left-side img:nth-child(4) {
    display:flex;
    width: 22%;
    top: 24%;
  }

  .right-side {
    width: 100%;
    display: block;
  }

  .left-align-wrapper {
    display: flex;
    align-items:center;
    width: 100%;
    height:auto;
    /* border: 1px solid pink; */

  }

  /* 상단 타이틀 */
  .title {
    margin-bottom: 3rem;
  }

  .title p:nth-child(1) {
    margin: 0;
    font-weight: bold;
    text-align: left;
    color: var(--mono_point);
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 3.5rem;
    letter-spacing: -1px;
  }

  .title p:nth-child(2) {
    text-align: left;
    color: var(--mono_sub);
    font-size: 1.5rem;
    letter-spacing: -1px;
  }




  /* 이메일 주소 비밀번호 */
  .input_login input {
    font-size: 1.4rem;
    padding: 1.2rem 2.4rem;
    border: 1px solid var(--mono_line);
  }

  .login-btn input {
    border: none;
    background-color: var(--t_main_color);
    color: #ffffff;
    cursor:pointer;
  }

  /* 가장큰 래퍼 */
  .input-inner {
    margin:3rem 0;
  

}



@media screen and (max-width:768px) {
  
  .left-side img:nth-child(2) {
    display:flex;
    width: 60%;
    top: 3%;
  }
  
  .left-side img:nth-child(3) {
    display:flex;
    width: 16%;
    top: 9%;
  }
  
  .left-side img:nth-child(4) {
    display:flex;
    width: 22%;
    top: 24%;
  }
}


@media screen and (max-width:450px) {
  
  .left-side {
    box-sizing: border-box;
    display:flex;
    align-items: flex-end;
    justify-content: center;
    /*background-color: #B7E9F4;*/
    height: 22%;
    width:100%;
    float: left;
  }

  .left-side img:nth-child(2) {
    display:flex;
    width: 60%;
    top: 3%;
  }
  
  .left-side img:nth-child(3) {
    display:flex;
    width: 20%;
    top: 6.5%;
  }
  
  .left-side img:nth-child(4) {
    display:flex;
    width: 30%;
    top: 17%;
  }
  
  /* 가장큰 래퍼 */
  .input-inner {
    width:90%;
  }
}



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

  .left-side img:nth-child(2) {
    display:flex;
    width: 85%;
    top: 2.5%;
  }
  
  .left-side img:nth-child(3) {
    display:flex;
    width: 25%;
    top: 7%;
  }
  
  .left-side img:nth-child(4) {
    display:flex;
    width: 40%;
    top: 17%;
  }
  
  /* 가장큰 래퍼 */
  .input-inner {
    width:90%;
  }
 
}