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

.modal.active {
  display: flex;
  opacity: 1;
}

.modal .inner_modal {
  max-height: 100vh;
  box-sizing: border-box;
  display: flex;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0 20px;
}



/* Hide scrollbar when the content is too long, but keep the functionality */

.modal .inner_modal::-webkit-scrollbar {
  display: none;
}

.modal .modal_content {
  /* width: 600px; */
  /* left: 600px;
  top: 200px; */
  max-width: 100%;
  /* background-color: white; */
  display: flex;
  position: relative;
  /* display: block; */
  /* margin: 0 auto; */
  /* padding: 50px; */
  color: white;
}

/* Superficial - you can remove these and everything still works */
.modal_body {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* justify-content: center; */
}
.modal_body_content{
  margin-bottom: 30px;
}
.modal_body_content span {
  margin-top: 5px;
  margin-left: 20px;
}

#modal_button {
  color : rgb(0, 114, 143);
  border: none;
}

/* .modal_content{
  display: flex;
  align-items: center;
} */

.modal_body .modal_key{
  display: flex;
  align-items: center;
}

.modal_body .modal_key .title {
  border: 1px solid var(--bd-color);
  color: var(--bg-color);
  padding: 10px;
  width: 100px;
  height: 46px;
  font-weight: 600;
  text-align: center;
  border-radius: 3px;
  /* box-shadow: inset 2px 2px rgb(255, 254, 254); */
  box-shadow: 0px 0px 1px 2px rgb(209, 209, 209);
  background-color: #ddd;
}

.modal_body .modal_key input{
  border: 1px solid var(--bd-color);
  /* border: 1px solid #6aac00; */
  background-color: rgb(247, 247, 247);
  margin-left: 10px;
  padding: 10px;
  width: 100%;
  border-radius: 3px;
  box-shadow: 0px 0px 1px 2px rgb(209, 209, 209);
  text-shadow: 0px 0px 1px 2px rgb(202, 247, 1);
  height: 46px;
  font-size: 25px;
}
.modal_body span{
  margin-top: 15px;
  margin-left: 90px;
}

/* register 개인정보 이용동의 */
.pop{
  position:fixed; 
  z-index:100; 
  width:100%; 
  height:100%; 
  left:0; 
  top:0; 
  display:none; 
  align-items:center; 
  justify-content:center;
}
.pop .pop_cover{
  position:absolute; 
  z-index:1001; 
  background:rgba(0,0,0,.8); 
  width:100%; 
  height:100%; 
  left:0; 
  top:0;
}


.pop .in{
  background:#fff; 
  border-radius:10px;  
  position:relative; 
  z-index:1002; 
  width:600px; 
  height:60vh; 
  overflow-y:scroll; 
  padding:25px;
}
.pop .in .txt{
  line-height: 200%;
  text-align: left;
}

.text-center {
  text-align: left;
}

.pop .in .txt .tit{
  font-size:18px; 
  color:#333; 
  font-weight: 300; 
  margin-bottom: 30px;
}
.pop .in .txt .con{
  font-size:15px; 
  color:#333; 
  font-weight: 300;
}
.pop-modal-close{
  z-index:10002;
  color: #fff;
  background-color: #fd7e14;
  font-weight: 300;
  border: 1px solid rgba(153, 74, 9, 0.3);
  border-radius: 5px;
  padding: 4px 14px;
  font-size: 16px;
  cursor: pointer;
  width: 60px;
  /* height: 35px; */
  text-align: center;
  /* line-height: 30px; */
  margin-top: 20px;
  margin-left: auto;
  margin-right: 20px;
}

.pop-modal-close:hover{
  background: #aaa;
  color: #fff;
}

@media(max-width:1024px){
.pop{padding:0 20px;}
.pop .in{height:60vh;}
}