@charset "utf-8";



#modal, #modal2 {
   max-width: 450px;
   width: 100%;
   margin: auto;
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   height: 80vh;
   z-index: 10000000001;
   overflow: auto;
   background: #fff;
   display: none;
}

.modal-body {
   background: #fff;
}

.modal-body .c-block {
   border-top: 1px solid #dcdcdc;
   padding: 15px 0;
}

.modal-head {
   font-size: 1.8rem;
   text-align: left;
   background: #144490;
   color: #FFF;
   padding: 25px;
}

.modal-head .search-text {
   font-weight: bold;
}

.modal-inner {
   padding: 0 25px 25px;
}

.modal-inner .modal-title {
   font-size: 1.8rem;
}

.modal-inner .modal-title-icn {
   display: inline-block;
   vertical-align: sub;
   margin-right: 12px;
}

.modal-inner .modal-col {
   position: relative;
   font-size: 1.6rem;
   line-height: 3em;
}

.modal-inner .modal-col select, .modal-inner .modal-col button {
   border: 1px solid rgb(169, 169, 169);
   border-radius: 3px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
   height: 28px;
   width: 100px;
   font-size: 1.6rem;
   vertical-align: middle; 
   display: inline-block;
   text-align: left;
   line-height: 1;
}

.modal-inner .modal-col .n-box {
   display: inline-block;
   position: absolute;
   right: 25%;
}

.modal-inner .modal-col2 .n-box {
   right: 5%;
}

.modal-inner .modal-col2 select {
   width: 150px;
}

.modal-inner .cal-box {
   padding-top: 20px !important;
}

.modal-inner .cal-box label {
   font-size: 1.8rem;
   display: block;
}

.modal-inner .cal-box .cal-input {
   padding: 6px;
   border-radius: 3px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
   background-image: url(/_shared/images/root/common/ico_form_calendar.png);
   background-position: right center;
   background-repeat: no-repeat;
   cursor: pointer;
}

.modal-inner .num-select-box {
   margin-top: 2.5em;
}

.modal-inner .btn-area01 {
   text-align: center;
}

.modal-inner .btn-area01 .submit-btn {
   width: 45%;
   font-size: 1.6em;
   border: 0;
   padding: 0.5em 0 0.5em;
   background: #d54100;
   color: #FFF;
   margin-top: 10%;
   
}

.btn-area02 {
   position: absolute;
   top: 10px;
   right: 10px;
}

.close-modal-btn {
   width: 35px;
   height: 35px;
   position: relative;
   border: none;
   background: none;
   cursor: pointer;
}

.close-modal-btn span::before {
   transform: rotate(-45deg);
}

.close-modal-btn span::after {
   transform: rotate(45deg);
}

.close-modal-btn span::before, .close-modal-btn span::after {
   display: block;
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 84%;
   height: 16%;
   margin: -8% 0 0 -42%;
   background: #FFF;
}

#modal-bg {
   z-index: 100;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.6);
   display: none;
}

.fixbg {
   position: fixed;
   left: 0;
   right: 0;
   height: auto;
   overflow-y: scroll;
}
@media (max-width: 500px){
   .modal-inner .modal-col .n-box {
      right: 5%;
   }
   .modal-inner .modal-col2 .n-box {
      right: 0;
   }
   
   .modal-inner .modal-col2 .n-box select {
      width: 100px;
   }
}