html,body{height:100%;}
  @font-face {
    font-family: 'KoPubWorldDotumLight';
    font-style: normal;
    font-weight: 500;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumLight.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumLight.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumLight.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumLight.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumLight.ttf') format("truetype");
    font-display: swap; 
} 
@font-face {
    font-family: 'KoPubWorldDotumMedium';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumMedium.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumMedium.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumMedium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumMedium.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumMedium.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'KoPubWorldDotumBold';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/kopus/KoPubWorldDotumBold.ttf') format("truetype");
    font-display: swap; 
}
  .wrapper{
    height: 100vh;
    position: relative;
    overflow: hidden;
  }
  .bg-roll{
    display:flex; gap: 20px;
    padding: 0 90px;
  }

  @media(max-width:1300px){
    .bg-roll{
      padding: 0;
    }
  }

  .roll-group{
    width:calc(100vw / 5);
    min-width: 244px;
    height: 100vh;
    position: relative;
  }
  .roll li{
    width: 100%;
    margin-bottom: 20px;
    border-radius:12px;
    overflow:hidden;
    box-shadow: 10px 10px 14px rgba(0,0,0,0.08);
  }
  .roll li img{width:100%; display:block; min-width: 244px;}
  
  .bg-roll .dark{
    width:100vw;
    height:100vh;
    position: absolute; top:0; left:0; background:rgba(0,0,0,0.5);
    margin:0;
  }
  /* ---------------------------------------------------------------------------------------------------------- */
  .info_box{
    border-radius: 20px;
    width: 480px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    background:#fafafa;
    box-shadow: 10px 10px 24px rgba(0,0,0,0.08);
  }
  .info_box *{
    font-family: 'KoPubWorldDotumMedium';
    color: #1c1c1c;
    letter-spacing:-.5px;
  }
  .info_box .form{
    text-align: center;
    height: 100%;
    width:100%;
    padding: 60px;
    box-sizing:border-box;
  }
  .form-group{
    margin-bottom: 14px!important;
  }

h4{
  font-weight:bold;
  font-size:30px;
  line-height:40px;
  margin: 0 0 26px;
}
.sub_title2{
  font-size:20px;
  margin: 0 0 35px;
}
.sub_title3{
  font-size:14px;
  margin: 0 0 7px;
}
.sub_title4{
  font-size:13px;
  line-height:18px;
  margin: 0 0px;
}
#frmLogin input.txt{
  border:2px solid #cdcdcd;
  width:308px;
  height:55px;
  font-size:18px;
  padding-left:44px;
  border-radius:10px;
}
#frmLogin input:focus{border:2px solid #6a1f86; outline:none;}
#frmLogin input.txt::placeholder{color:#a7a7a7;}
#frmLogin input.txt:nth-child(1){margin-top:20px;}
.form-check{text-align:left; margin:0px 20px 26px; padding:0;}
.form-check label{
  cursor: pointer; font-size:15px; color:#a7a7a7;
}
.btn-warning {
    color: #ccbcd4;
    background-color: #6a1f86;
    border:none;
    border-radius:50px;
    cursor: pointer;
    margin: 0 auto 14px;
    width: 306px!important;
    height:58px;
    letter-spacing:1px;
    font-size: 18px;
}
.btn-warning:hover{
  background:#4a165e;
  color: #ccbcd4;
}
/* #userid{
  background-image:url(/common/image/master/id.png);
  background-repeat:no-repeat;
  background-position: 14px center;
}
#userpw{
  background-image:url(/common/image/master/pw.png);
  background-repeat:no-repeat;
  background-position: 14px center;
} */

  .roll1{animation: rolling1 1000s linear infinite;
  }
  .roll2{
    animation: rolling2 1000s linear infinite;
  }
  .roll-group-2 .roll1, .roll-group-4 .roll1{
    animation: rolling1-1 1000s linear infinite;
    border:1px solid transparent;
  } 
  .roll-group-2 .roll2, .roll-group-4 .roll2{
    animation: rolling2-2 1000s linear infinite;
    border:1px solid transparent;
  } 

    @keyframes rolling1 {
      0% { transform: translateY(0); }
      50% { transform: translateY(-100%); }
      50.01% { transform: translateY(100%); }
      100% { transform: translateY(0%); }
    }

    @keyframes rolling2 {
      0% { transform: translateY(0); }
      100% { transform: translateY(-200%); }
    }

    @keyframes rolling1-1 {
      0% { transform: translateY(0%); }
      50% { transform: translateY(100%); }
      50.01% { transform: translateY(-100%); }
      100% { transform: translateY(0%); }
    }

    @keyframes rolling2-2 {
      0% { transform: translateY(-200.5%); }
      100% { transform: translateY(-.5%); }
    }

    input[type=checkbox] + label {
      display:block;
      margin:.2em;
    }
    input[type=checkbox] {display:none;}
    input[type=checkbox] + label:before {
        content:"";
        border:.1em solid #767676;
        border-radius: .2em;
        display:inline-block;
        width:15px;
        height:15px;
        padding-left:3px;
        padding-bottom: 0px;
        margin-right: 6px;
        vertical-align: middle;
        color:transparent;
        transition:.2s;
        /* background: url(/common/front/img/login/new/check.svg) no-repeat center center; */
    }

    input[type=checkbox]:checked + label:before {
        background: url(/common/front/img/login/new/checka.svg) no-repeat center center;
        border:none;
        color:#fff;
    }

    .login-form{position: relative;}
    .login-form span{
      position: absolute; top:50%; left: 11%;
    }

    @media (max-width:520px){
      .bg-roll{display: flex;
      justify-content: center;}
      .roll-group {
          min-width: 155px;
      }
      .roll li img{min-width: auto;}

      .info_box {
        width:75%;
        height: auto;
      }
      .info_box .form{
        padding: 13% 10%;
      }
      h4 {
        font-size: 5vw;
        line-height: 6vw;
        margin: 0 0 26px;
      }
      .sub_title2 {
        font-size: 3vw;
        margin: 0 0 10px;
      }
      #frmLogin input.txt:nth-child(1) {
          margin-top: 4%;
      }
      #frmLogin input.txt{
        width:80%;
        height: 45px;
        font-size:3vw;
        padding-left:16%;
      }
      .login-form span {
        top: 40%;
        left: 15.5%;
      }
      .form-check {
          text-align: left;
          margin: 0px 10%;
          padding: 0;
      }
      .form-check label{
        font-size: 2vw;
      }
      .input[type=checkbox] + label:before{
        width:15px;
        height: 15px;
      }
      .btn-warning{
        width:80%!important;
        height: 45px;
        font-size: 3.5vw;
      }
      .sub_title3{
        font-size: 2vw;
        margin: 0 0 10%;
      }
      .sub_title4{
        font-size: 2vw;
        line-height: 3vw;
      }
    }
    @media (max-width:280px){
      .roll li img{min-width: auto;}

      .info_box {
        width:80%;
      }
      
      #frmLogin input.txt{
        width:90%;
        height: 40px;
        font-size:3vw;
        padding-left:16%;
      }
      .login-form span {
        top: 35%;
        left: 10.5%;
      }
      .form-check {
          text-align: left;
          margin: 0px 7%;
          padding: 0;
      }

      .btn-warning{
        width:90%!important;
        height: 40px;
      }
      .sub_title3{
        width:80%;
        font-size: 2vw;
        margin: 0 auto 10%;
        word-break: keep-all
      }
    }

    .asso{display: flex; align-items: center; justify-content: center; background: ;}