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{
    overflow: hidden;
    border-radius: 50px;
    width: 480px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    box-shadow: 0px 0px 24px rgba(255, 255, 255, 0.35);;
  }
  .info_box *{
    font-family: 'KoPubWorldDotumMedium';
    color: #1c1c1c;
    letter-spacing:-.5px;
  }
  .info_box::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 3px; /* Border thickness */
    background: linear-gradient(90deg, #5f0580, #e5b9f5, #5f0580);
    background-size: 300% 300%; /* Enlarged to animate gradient */
    animation: gradient-animation 3s linear infinite;
    -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: 1;
  }
  .info_box::after{
    border-radius: 50px;
    content: '';
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.7) 30%);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 34px rgba(0, 0, 0, 0.15);
  }  
  @keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }  
  .info_box .form{
    position: relative;
    z-index: 1;
    text-align: center;
    height: 100%;
    width:100%;
    max-width: 350px;
    padding: 60px 0;
    margin: 0 auto;
    box-sizing:border-box;
  }
h4{
  font-weight:bold;
  font-size:30px;
  line-height:40px;
  margin: 0 0 26px;
}
.info-title{
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 10px;
}
.sub_title2{
  color: #191919;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -1px;
  margin: 0 0 14px;
}
.sub_title3{
  text-align: left;
  color: #191919;
  font-size:16px;
  font-weight: 600;
  margin-bottom: 12px;
}
.sub_title4{
  color: #969696;
  font-size:14px;
  font-weight: 600;
  text-align: left;
}
.sub_title4 span{
  color: #969696;
}
.sub_title5{
  text-align: center;
  color: #191919;
  font-size:14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.password-info{
  display: flex;
  gap: 10px;
}
.sub_title4.pw{
  margin: 6px 0 0 10px;
}
.password-info .check-box{
  display: flex;
  align-items: center;
  gap: 5px;
}
.password-info .check-box.check .pw{
  color: #7c2ba1;
}
.password-info span{
  display: block;
  width: 12px;
  height: 12px;
  background-image: url('/common/image/master/check_off.png');
  background-repeat: no-repeat;
  margin-top: 8px;
}
.password-info .check-box.check span{
  background-image: url('/common/image/master/check_on.png');
}
#frmLogin input.txt{
  border:2px solid #cfcfcf;
  width:335px;
  height:65px;
  font-size:18px;
  padding-left:30px;
  border-radius:18px;
}
#frmLogin input:focus{border:2px solid #8c1eb5; outline:none;}
#frmLogin input.txt::placeholder{color:#a7a7a7;}
.form-check{
  text-align:left; 
  padding:0;
}
.form-check label{
  cursor: pointer;
  font-size:18px;
  font-weight: 500;
  color:#696969;
}
.btn-warning {
    color: #a3a3a3;
    background-color: #000;
    border:none;
    border-radius:18px;
    cursor: pointer;
    margin: 0 auto 14px;
    width: 335px!important;
    height: 65px;
    letter-spacing:1px;
    font-size: 20px;
}
.btn-warning.on,
.btn-warning:hover{
  background-color: #6A1F86;
  border: none;
  color: #fff;
}
/* #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;
} */
.content-wrap{
  width: 335px;
  margin: 0 auto;
}
.find-wrap{
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}
.find-wrap div{
  width: 100px;
  border-radius: 30px;
  background-color: #fff;
  padding: 25px 0px;
}
.find-wrap a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #191919;
  font-size: 14px;
  font-weight: 500;
}
.find-wrap a:hover{
  text-decoration: none;
}
.find-wrap a img{
  width: 34px;
}
.line-txt {
	display:flex;
	align-items:center;
	color: #191919;
	font-size:14px;
  font-weight: 500;
  margin-bottom: 5px;
}
.line-txt::before{
	content:"";
	flex-grow:1;
	margin:0px 16px;
	background: #969696;
	height:1px;
}
.line-txt::after {
	content:"";
	flex-grow:1;
	margin:0px 16px;
	background: #969696;
	height:1px;
}
.line-sub-txt{
  color: #969696;
  margin-bottom: 0;
}
a.line-sub-txt{
  text-decoration: underline;
  text-underline-offset : 4px;
}
.find-check input{
  display: block;
}
.find-check label{
  background-color: #fff;
  border: 2px solid #cfcfcf;
  border-radius: 20px;
  font-size: 16px;
  display: flex;
  gap: 40px;
  width: 335px;
  height: 85px;
  align-items: center;  
  padding:0 40px;
  margin: 0 auto;
}
input[name="otp-check"],
input[name="find-id-check"],
input[name="find-pw-check"] {
  display: none; 
}
input[name="otp-check"]:checked + label,
input[name="find-id-check"]:checked + label,
input[name="find-pw-check"]:checked + label{
  border: 2px solid #a940d0;
}
.check-img{
  width: 57px;
  height: 57px;
}
.check-img.email{
  background: url('/common/image/master/mail_off.png') no-repeat;
}

input[name="otp-check"]:checked + label .check-img.email,
input[name="find-id-check"]:checked + label .check-img.email,
input[name="find-pw-check"]:checked + label .check-img.email{
  background: url('/common/image/master/mail_on.png') no-repeat;
}
.check-img.phone{
  border: none;
  background: url('/common/image/master/phone_off.png') no-repeat;
}
input[name="otp-check"]:checked + label .check-img.phone,
input[name="find-id-check"]:checked + label .check-img.phone,
input[name="find-pw-check"]:checked + label .check-img.phone{
  background: url('/common/image/master/phone_on.png') no-repeat;
}
.find-user-wrap{
  margin-top: 25px;
}
.btn-gray{
  background-color: #969696;
  color: #fff;
  font-size: 16px;
  margin-top: 20px;
}
.find-id-result{
  background-color: #fff;
  border: 1px solid #cfcfcf;
  width: 100%;
  border-radius: 10px;
  padding: 60px 0;
}
.find-id-result p{
  color: #191919;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}
.find-form{
  position: relative;
  margin-bottom: 10px;      
}    
.find-form.type01{
  display: flex;
  width: 100%;
  gap: 12px;
}
.find-form.type01 input.txt{
  flex: 1;
  width: inherit !important;
}
.btn-check{
  background-color: #5f0580;
  border: none;
  border-radius: 18px;
  padding: 0 15px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: 0.5s;
}
.btn-check:hover{
  opacity: 0.75;
}
  .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;
    }
    input[type=checkbox] {display:none;}
    input[type=checkbox] + label:before {
        content:"";
        display:inline-block;
        width:30px;
        height:30px;
        margin-right: 12px;
        vertical-align: middle;
        transition:.2s;
        background: url(/common/image/master/save_off.png) no-repeat center center;
    }

    input[type=checkbox]:checked + label:before {
        background: url(/common/image/master/save_on.png) no-repeat center center;
        border:none;
        color:#fff;
    }

    .login-form{
      position: relative;
      margin-bottom: 12px;
    }
    .login-form span{
      position: absolute;
      top:50%;
      right: 30px;
      transform: translateY(-50%);
    }
    .form-group{
      margin-bottom: 20px;
    }

    @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;
        border-radius: 36px;
      }
      .info_box::before,
      .info_box::after{
        border-radius: 36px;
      }      
      .info_box .form{
        padding: 12% 10%;
      }
      h4 {
        font-size: 5vw;
        line-height: 6vw;
        margin: 0 0 26px;
      }
      .sub_title2 {
        font-size: 3vw;
        margin: 0 0 10px;
      }
      #frmLogin input.txt{
        width:100%;
        height: 45px;
        font-size:3vw;
        padding-left:8%;
        border-radius: 12px;        
      }
      .login-form span {
        right: 12%;
      }
      .login-form span img{
        width: 18px;
      }      
      .input[type=checkbox] + label:before{
        width:15px;
        height: 15px;
      }
      .btn-warning{
        width:100%!important;
        height: 50px;
        font-size: 3.5vw;
      }
      .sub_title3{
        font-size: 3vw;
        margin: 0 0 6%;
      }
      .sub_title5{
        font-size: 11px;
      }
      .find-wrap a,
      .sub_title4{
        font-size: 2.6vw;
        margin: 0 0 6%;
      }
      .info-title{
        font-size: 26px;
        margin-bottom: 20px;
      }
      .content-wrap{
        width: 100%;
      }
      .login-form{
        margin-bottom: 10px;
      }
      input[type=checkbox] + label:before,
      input[type=checkbox]:checked + label:before{
        background-size: contain;
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
      .form-check label{
        font-size: 14px;
      }
      .find-wrap div{
        width: 30%;
      }
      .find-check label{
        width: 100%;
        height: 65px;
        font-size: 3vw;
        gap: 20px;
        border-radius: 14px;        
      }
      .check-img{
        width: 25%;
        max-width: 35px;
        aspect-ratio: 1;
        height: auto;
        background-size: contain !important;
      }
      .btn-check,
      .btn-warning{
        font-size: 3vw;
      }
      .password-info{
        flex-direction: column;
        gap: 0;
      }
      .btn-warning{
        border-radius: 14px;
      }         
    }

    @media (max-width:460px){
      .info_box{
        border-radius: 26px;
      }      
      .info_box::before,
      .info_box::after{
        border-radius: 26px;
      }      
      .info-title{
        font-size: 1.2rem;
        margin-bottom: 1rem;
      }
      .find-user-wrap{
        margin-top: 1rem;
      }
      .find-check label{
        padding: 0 25px;
      }
      #frmLogin .find-user-wrap input.txt{
        padding-left: 4%;
      }
    }      


     @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:8%;
      }
      .login-form span {
        top: 50%;
        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
      }
    }

  .btn-send-otp:disabled {
    background: #ccc;
    cursor: not-allowed;
  }

  
  .atag {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .atag:hover {
    color: #969696;
  }