.modal {
  opacity: 0;
  position: fixed ;
  z-index:999;
  top: 0;
  left: 0;
  display:none;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal.show {
  backdrop-filter: blur(10px);
  overflow-x: hidden;
  overflow-y: auto;
  display: block;
  animation: fade-in 0.3s;
  animation-fill-mode: forwards;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.modal.disappeear{
  animation: fade-out 0.3s;
}

.modal.show::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

.modal-show{
  overflow: hidden;
}
.modal-box{
  padding: 20px;
    background-color: white;
    position: relative;
    margin: 100px auto;
    border-radius: 15px;
    animation: pop-in 0.5s;
  }


.modal-box.confirm{
  max-width: 400px;
}

.modal-box.container{
  max-width: 600px;
}

.modal-box.remove{
  animation: pop-out 0.5s;
}

.modal-content{
  padding:20px;
}


.modal-content p{
  text-align: left;
  font-size:13px;
}



.modal-content img{
  max-width: 100%;
  margin:10px auto
}

.modal-content .policy-title{
  text-align: left;
  font-weight: bold;
}


.modal-content ul, .modal-content li{
font-size:13px;
  text-align: left;
}
.modal-title{
  letter-spacing: -1px;
  font-size:25px;
  font-weight: 700;
}

.modal-title.sub{
  font-size:15px;
  font-weight: 300;
}

.modal-btn.btn{
  margin:5px;
  display: inline-block;
  padding: 5px 20px;
  font-size: 15px;
  border-radius: 50px;
  font-weight: 700;
}

.modal-btn:hover{
  opacity: 0.5;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}




@keyframes pop-in {
  from {
    margin-top:50px;
  }
  to {
    margin-top:100px;

  }
}


@keyframes pop-out {
  from {
    margin-top:100px;
  }
  to {
    margin-top:50px;
  }
}