.modal,
.modal-box {
  z-index: 900;
}

.modal-sandbox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
}

.modal {
  display: none; 
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgb(0,0,0);
  background: rgba(0,0,0,.8);
  overflow: auto;
}

.modal-box {
  position: relative;
  width: 80%;
  max-width: 1120px;
  margin: 0;
  animation-name: modalbox;
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(0,0,.3,1.6);top: 50%;left: 50%;transform: translate(-50%, -50%);
}

.modal-header {
  padding: 20px 40px;
  background: #354a5d;
  color: #ffffff;
  background-image: url(/C:\Users\Kim_Office\Desktop\ANSAN0~2\img\images/about-us-banner.jpg);
  background-size: cover;
}

.modal-body {
  background: #fff;
  padding: 60px 40px;
}

/* Close Button */
.close-modal {
  text-align: right;
  cursor: pointer;
}

/* Animation */
@-webkit-keyframes modalbox {
  0% {top: 0;opacity: 0;}
  100% {opacity: 1;}
}
@keyframes modalbox {
  0% {top:0;opacity: 0;}
  100% {opacity: 1;}
}

/* Aditional Styles */

/* common */
.modal-body{text-align: right;padding:30px 30px;}
.modal-body p{text-align: center;font-size: 24px;margin-bottom:10px;}
.modal-body ul li{font-size: 20px;float: left;margin:0px 0;}
.modal-body ul li:nth-child(1){width:20%;text-align: left;}
.modal-body ul li:nth-child(2){width:80%;}

.modal-body ul li input,textarea{width:100%;padding:10px 20px;border:1px solid #eee;background-color: #eee;}
.modal-body ul li input:focus,textarea:focus{border:1px solid #000;background-color: #fff;outline: none;}
.modal-body ul li input{height:45px;}
.modal-body ul li textarea{resize:none;height:200px;padding-top:20px;}
button.close-modal{width:100%;text-align: center;background-color: #ff864b;border:0;padding:10px 0; color:#fff;font-size:20px;font-weight: bolder;margin-top:20px;}

.modal_middle{border-bottom:1px solid #cacaca;padding:13px 0;}

.modal_ratings{text-align:left;}

/* 1:1 modal */

#modal-1on1 .modal-body{text-align: right;padding:30px 30px;}
#modal-1on1 .modal-body p{text-align: center;font-size: 24px;margin-bottom:10px;}
#modal-1on1 .modal-body ul li{font-size: 20px;float: left;margin:0px 0;}
#modal-1on1 .modal-body ul li:nth-child(1){width:20%;text-align: left;}
#modal-1on1 .modal-body ul li:nth-child(2){width:80%;}

.modal1on1top li{border-top:2px solid #000;padding:20px 0;}

#modal-1on1 .modal-body ul li input,textarea{width:100%;padding:10px 20px;border:1px solid #eee;background-color: #eee;}
#modal-1on1 .modal-body ul li input:focus,textarea:focus{border:1px solid #000;background-color: #fff;outline: none;}
#modal-1on1 .modal-body ul li input{height:60px;}
#modal-1on1 .modal-body ul li textarea{resize:none;height:200px;padding-top:20px;}
button.close-modal{width:100%;text-align: center;background-color: #ff864b;border:0;padding:10px 0; color:#fff;font-size:20px;font-weight: bolder;margin-top:20px;}


/* write modalQNA */

#modal-writeqna .modal-body{text-align: right;padding:30px 30px;}
#modal-writeqna .modal-body p{text-align: center;font-size: 24px;margin-bottom:10px;}
#modal-writeqna .modal-body ul li{font-size: 20px;float: left;margin:0px 0;}
#modal-writeqna .modal-body ul li:nth-child(1){width:20%;text-align: left;}
#modal-writeqna .modal-body ul li:nth-child(2){width:80%;}
#modal-writeqna .modal-body ul li:nth-child(3){width:20%;text-align: center;}
#modal-writeqna .modal-body ul li:nth-child(4){width:10%;position:relative;}
#modal-writeqna .modal-body ul li:nth-child(4) input{height:20px;position:absolute;left:0;top:6px;}
.modal-checkbox{}
#permitted:checked ~ .blocked {
  display: block;
}

#permitted:checked ~ .blocked2 {
  display: block;
}
.blocked{  display: none;  appearance: none;  }
.blocked2{  display: none;   }

.modal1on1top li{border-top:2px solid #000;padding:15px 0;}

#modal-writeqna .modal-body ul li input,textarea{width:100%;padding:10px 20px;border:1px solid #eee;background-color: #eee;}
#modal-writeqna .modal-body ul li input:focus,textarea:focus{border:1px solid #000;background-color: #fff;outline: none;}
#modal-writeqna .modal-body ul li input{}
#modal-writeqna .modal-body ul li input:visited{background-color: #fff;width:50px;}
input.visited,textarea.visited{background-color: #fff!important;}

#modal-writeqna .modal-body ul li textarea{resize:none;height:150px;padding-top:20px;}


/* password modal */

#modal-password .modal-body{text-align: right;padding:30px 30px;}
#modal-password .modal-body p{text-align: center;font-size: 24px;margin-bottom:10px;}
#modal-password .modal-body ul li{font-size: 20px;float: left;margin:0px 0;}
#modal-password .modal-body ul li:nth-child(1){width:20%;text-align: left;}
#modal-password .modal-body ul li:nth-child(2){width:80%;}

#modal-password .modal-body ul li input,textarea{width:100%;padding:10px 20px;border:1px solid #eee;background-color: #eee;}
#modal-password .modal-body ul li input:focus,textarea:focus{border:1px solid #000;background-color: #fff;outline: none;}
#modal-password .modal-body ul li input{height:60px;}
#modal-password .modal-body ul li input:visited{background-color: #fff;width:50px;}

#modal-password .modal-body ul li textarea{resize:none;height:150px;padding-top:20px;}

input.visited,textarea.visited{background-color: #fff!important;}
.modal1on1top li{border-top:2px solid #000;padding:15px 0;}


/* agreement modal */
.modal-textbox{width:100%;height:440px;overflow: auto;text-align: left;padding: 22px;margin-left: -14px;font-size:14px;line-height: 1.5;}



/* halbutable modal */
#modal-halbutable .modal-box{width:725px!important;;}
#modal-halbutable .modal-body{height:578px;overflow:auto;padding:5px;}

#modal-halbutable #pyo-head{width:100%;}
#modal-halbutable #pyo-head thead tr{}
#modal-halbutable #pyo-head thead tr td{padding: 5px 15px 8px 0px;text-align:right;height:;font-size:16px;border-bottom:1px solid #f0f0f0;color:#888;font-weight:300;}
#modal-halbutable #pyo-head thead tr td:nth-child(1){width:10%;text-align:center;}
#modal-halbutable #pyo-head thead tr td:nth-child(2){width:20%;}
#modal-halbutable #pyo-head thead tr td:nth-child(3){width:20%;}
#modal-halbutable #pyo-head thead tr td:nth-child(4){width:20%;}
#modal-halbutable #pyo-head thead tr td:nth-child(5){width:20%;}

#modal-halbutable #pyo{width:100%;background-color:#fff;}
#modal-halbutable #pyo tr{}
#modal-halbutable #pyo tbody tr:nth-child(1){display:none;}
#modal-halbutable #pyo tr td{text-align:right;height:;font-size:16px;padding:5px 15px 5px 0px;color:#333;}
#modal-halbutable #pyo tr td:nth-child(1){width:10%;text-align:center;}
#modal-halbutable #pyo tr td:nth-child(2){font-weight:bold;color:red;width:20%;}
#modal-halbutable #pyo tr td:nth-child(3){width:20%;}
#modal-halbutable #pyo tr td:nth-child(4){width:20%;}
#modal-halbutable #pyo tr td:nth-child(5){font-weight:bold;width:20%;}

/* reserv modal */
#modal-wreserv .modal-box{width:800px!important;max-width:800px!important;}
#modal-wreserv .modal-body{}
#modal-wreserv .modal-body .modal-reserv-left{width:50%;float:left;padding:0 10px;}
#modal-wreserv .modal-body .modal-reserv-right{width:50%;float:left;padding:0 10px;border-left:1px dashed #aaa;}
#modal-wreserv .modal-body p{font-size:18px;border-bottom:1px solid #555;text-align:left;padding:0px 0 0px;margin-bottom: 5px;font-weight:bold;}
.modal-reserv-line{padding-top:15px;}

.modal-reserv-right input{height:30px;height:45px;}
.modal-reserv-right .reserv-name input{width:100%;padding-left:5px;}
.modal-reserv-right .reserv-inputs input{text-align:center;}
.reserv-inputs .resnum1{width:25%;}
.reserv-inputs .resnum2{width:36.7%;}


.modal-reserv-agree{width:100%;text-align:left;padding: 10px 0 5px;}
.modal-reserv-agree label{font-size:15px;font-weight:bold;}
.reserv-agreebox{width:100%;height:100px;overflow:auto;border:1px solid #aaa;padding:5px 10px;text-align:left;}

.modal-button{padding:30px 0 0;padding: 0px 10px 10px;background: #fff;}
.modal-button > button{
	width: 100%;
    border: 0px solid #aaa;
    background-color: #ff864b;
    color: #fff;
    cursor: pointer;
    height: 70px;
    font-size: 22px;
    letter-spacing: -1px;
    font-weight: 600;
}



input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
  }