@font-face {
    font-family: "Pretendard Variable";
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: local("Pretendard Variable"),
        url("/assets/font/PretendardVariable.woff2") format("woff2-variations");
  }
  @font-face {
    font-family: 'NanumSquare';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: local("NanumSquare"),
        url("/assets/font/NanumSquareAcR.woff") format("woff");
  }
  @font-face {
    font-family: 'NanumSquare';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: local("NanumSquare"),
        url("/assets/font/NanumSquareAcB.woff") format("woff");
  }
  
  
  body{
      font-family:"Pretendard";
      letter-spacing:-1px;
      
  }
  
  ::-webkit-scrollbar {width: 7px; }
  ::-webkit-scrollbar-thumb {background: #aed2ff;border-radius:30px;}
  ::-webkit-scrollbar-track {background: transparent;}
  
  .marT15 {margin-top:15px;}
  .marT20 {margin-top:20px;}
  .marR8 {margin-right:8px;}
    
  /*********** 로그인 ***********/
  #login {background:#605DFF; width:100%; height:100vh; position:relative; display:flex; align-items:center; justify-content:center;}
  .loginWrap {width:500px; height:auto; background:#fff; padding:60px; display:flex; align-items:center; flex-direction:column; border-radius:50px;}
  .loginWrap .logo {display:flex; align-items:center; flex-direction:column; margin-bottom:50px;}
  .loginWrap .logo img {width:220px;}
  .loginWrap .logo .title {font-family: 'NanumSquare'; font-size:19px; padding-top:5px;}
  .formGroup input[type=checkbox] + label:after, .formGroup input[type=checkbox] + label:before, .formGroup input[type=checkbox] + label {transition: 0.3s;}
  .formGroup input[type=checkbox] {display: none;}
  .formGroup input[type=checkbox] + label {position: relative;padding: 6px 10px 6px 30px;font-size: 22px;color: #000;font-weight: 500;cursor: pointer;}
  .formGroup {position: relative;margin-bottom: 10px;}
  .member .bg-ico:before {position: absolute;left: 0;top: 0;width: 80px;height: 100%;display: block;content: '';border-radius: 15px 0 0 15px;z-index: 99;}
  .text-type1 input:not([type=radio]):not([type=checkBox]) {position: relative;width: 100%;height: 60px;line-height: 60px;background-color: #F8F7F7;font-size: 18px;color: #5b5b73;border: 0;border-radius: 50px;padding: 12px 25px 0 80px;}
  .text-type1 input ~ label {position: absolute;left: 80px;top: 50%;transform: translateY(-50%);font-size: 18px;color: #bbb;letter-spacing: -0.5px;transition: all 0.4s;}
  .text-type1 input:focus ~ label, .text-type1 input.has-content ~ label {top: 18px;font-size: 13px;color:#605dff;transition: all 0.4s;}
  .member {position: relative;width: 100%;overflow: hidden;}
  .member .bg-ico:before {position: absolute;left: 0;top: 0;width: 60px;height: 100%;display: block;content: '';border-radius: 15px 0 0 15px;z-index: 99;}
  .member .bg-ico.ico-id:before {background: url(/assets/images/login/id_icon.png) no-repeat 80%; background-size:20px;}
  .member .bg-ico.ico-pw:before {background: url(/assets/images/login/password_icon.png) no-repeat 83%; background-size:20px;}
  .member .loginBtn {background: #605DFF;color: #fff;width: 100%;display: flex;height: 60px;align-items: center;justify-content: center;border-radius: 50px;font-size:20px;margin-top: 25px;position: relative;overflow: hidden;z-index: 1;transition: color 0.4s ease-in-out;}
  .member .loginBtn:before {content: '';position: absolute;top: 0;left: -100%; width: 100%;height: 100%;background: #4b4f63;z-index: -1;transition: left 0.4s ease-in-out;}
  .member .loginBtn:hover:before {left: 0;}
  .member .loginBtn:hover {color: #fff;}
  
  @media (max-width:640px) {
      .loginWrap {width:80%; padding:50px;}
      .loginWrap .logo img {width:180px;}
  }
  @media (max-width:540px) {
      .loginWrap .logo img {width:150px;}
      .loginWrap .logo .title {font-size:17px;}
      .loginWrap .logo {margin-bottom:30px;}
      .text-type1 input:not([type=radio]):not([type=checkBox]) {height:50px; line-height:50px; font-size:16px;}
      .member .bg-ico.ico-pw:before {background-size:18px;}
      .member .bg-ico.ico-id:before {background-size:18px;}
      .text-type1 input:focus ~ label, .text-type1 input.has-content ~ label {font-size:12px; top:15px; }
      .text-type1 input:not([type=radio]):not([type=checkBox]) { padding:12px 25px 0 70px;}
      .text-type1 input ~ label {left:70px;}
      .text-type1 input ~ label {font-size:17px;}
      .member .loginBtn {margin-top:0; height:50px;font-size:18px;}
  }
  @media (max-width:480px) {
      .loginWrap {width:100%; margin-top:50px;}
      #login {background:#fff; align-items:flex-start;}
  }
  @media (max-width:400px) {
      .loginWrap {padding:50px 30px;}
      .loginWrap .logo .title {font-size:16px;}
  }
  @media (max-width:360px) {
      #login { align-items:center; }
      .loginWrap {padding:50px 20px;margin-top:0;}
      .member .bg-ico.ico-id:before ,.member .bg-ico.ico-pw:before {background-size:15px;}
      .text-type1 input:focus ~ label, .text-type1 input.has-content ~ label {top:13px;}
      .text-type1 input:not([type=radio]):not([type=checkBox]) {font-size:15px;}
  }