.text-lg { font-size:16px; }
 #modal2 { height:450px;
        
    }


.modal .footer  {
  position: absolute;
   bottom: 10px;
    left: 2px;
    width: 100%;
    height:30px;
    background-color: #FFF;
    color: #777;
    text-align: center;
   
    border-top: 1px solid #c4c4c4;
}

.modal .footer h2 {color:#555555;
     margin: 5px 0px 0px 0px;
    font-size: 13px;
    
    font-weight: 400;line-height:20px;
}


.modal .head {
    position: relative;
    width: 100%;
    height:65px;
    background-color: #FFF;
    color: #777;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 1px solid #c4c4c4;
}
.modal .head h1 {color: #333;
        margin: 0px 0px 0px 0px;
        padding-top: 15px;
        padding-bottom: 0px;
        font-size: 1.25rem;
        font-weight: 400;
    }

.modal .head h2 {color: #555;
    margin: 0px;
    font-size: 13px;
    padding: 2px 5px;
    font-weight: 400;line-height:20px;
}



.modal .bottom {
   position: relative;
    width: 100%;
    height:90px;
    background-color: #FFF;
    color: #777;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 1px solid #c4c4c4;
}
.modal .bottom h1 {color: #333;
        margin: 0px 0px 0px 0px;
        padding-top: 10px;
        padding-bottom: 0px;
        font-size: 1.25rem;
        font-weight: 400;
    }

.modal .bottom h2 {color: #555;
   
    font-size: 14px;
    padding: 0px 0px;
    font-weight: 400;line-height:24px;
}

.modal .bottom h2 span{
    font-size:16px; 
}

.modal .bottom h2 span a{color: #c42127;margin: 0px 0px 7px 0px;
    font-size:20px;
     font-weight: 500;
}

table {
	font-size: 1em;font-size: 16px;
	font-family:"Noto Sans Korean", sans-serif;
}

.ui-datepicker.ui-datepicker-multi {
	width: 900px;
	height:240px;
}
/* 캘린더 */
.calendar_wrap {
    width: 100%;
    margin: 0 auto;
}



.calendar {
     width: 95%;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
}

/* /opm24/24_temp/css/style.css/
.ui-datepicker.ui-datepicker-multi {
	width:800px;
	height:239px;
} */

.ui-datepicker {
	  width: 95%;
	padding: .1em .1em 0;
	display: none;
}

.ui-state-hover::before { content:""; width:100%; height:6px; background:#ffffff; position:absolute; bottom:8px; left:0; display:inline-block; opacity:0.1}
.ui-datepicker thead tr { background:#ffffff; color:#666; }

.ui-datepicker th {font-size:14px;
	padding:0;
	text-align: center;
	 font-weight: 400;
	border: 0;
	width:38px;
	height:39px; 
}
.ui-datepicker td { background-color: #FFF;
	border: 0;
	padding:0;
	width:38px;
	height:39px;
}
.ui-datepicker td span,
.ui-datepicker td a {font-size:14px;
	display: block;
	padding:0 !important;
	text-align: right;
	text-decoration: none;
	width:100%;
	height:100%;
	line-height:39px;
}



/*월화수목*/
.ui-datepicker thead tr { background:#ebf3fa; color:#121212; }
 .ui-datepicker td span {width:5px;
    height:5px;
    background: #395cde;
    border-radius: 5px;
    display: block;
    position: absolute;
    top:80%;
    left:50%;opacity:0.7}

}

/*점*/




/* 손없는 날 글씨 위치 */
.day-info {
    position: absolute;
    top:20px;
    left:16%;
    width: 120px;
    height: 20px;
    color: #FFF;
    padding-left: 10px;
    font-size: 14px;
}

.day-info e {
    display: inline-block;
    width:9px;
    height:9px;
    background-color: #99abf0;
    border: 1px solid #99abf0;
    border-radius: 100%;
    margin-right: 5px;
    position: absolute;
    top: 5px;
    left: 5px;
}
.day-info b {
    position: absolute;
    top: -1px;
    left: 25px;   
    color: #000;
}

@media (max-width: 767px) {
/* STEP 03 */
.day-info {
    position: absolute;
    top:25px;
    left:55px;
    width: 120px;
    height: 20px;
    color: #FFF;
    padding-left:5px;
    font-size: 12px;
}

.day-info e {
    display: inline-block;
    width:9px;
    height:9px;
    background-color: #99abf0;
    border: 1px solid #99abf0;
    border-radius: 100%;
    margin-right: 5px;
    position: absolute;
    top: 2px;
    left:2px;
}
.day-info b {
    position: absolute;
    top: -1px;
    left:15px;   
    color: #888;
}

}








 .ui-datepicker td span {width:5px;
    height:5px;
    background: #395cde;
    border-radius: 5px;
    display: block;
    position: absolute;
    top:20px
    left:10%;opacity:0.7}



.calendar .head {
    width: 100%;
    height: 39px; 
    line-height: 39px;
    background-color: #ffffff;
    color: #333333;
    border-radius: 0px;
    border-bottom: 0px; 
}
.calendar .head li {
    display: block;
    width: 38px;
    height: 50px;
    float: left;
}
.calendar .week {
    width: 100%;
    float: left;
    border-bottom: 0px solid #F7F7F7;
}
.calendar .week li {
    display: block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin: 1px;
    float: left;
    border-radius: 100%;
    border: 0px solid #FFF;
    color: #000;
     font-weight: 500;
	position:relative
}
.calendar .outdated {
    color: #eee !important;
}

.dayhover::before { content:""; width:32px; height:6px; background:#ffffff; position:absolute; bottom:8px; left:0; display:inline-block; opacity:0.1}

/* 달력 동그라미
.calendar .nday {
    border: 2px solid #e74c3c !important;
}*/
.calendar .nday span{
	width:5px; height:5px; background:#154ba4; border-radius:5px;
	display:block; position:absolute; top:2px; height:4px;
}

.modal .btn-back {
    position: absolute;
    top: 00px;
    left: 0px;
    z-index: 10;
    cursor: pointer;
    padding: 0px 0px;
    color: #444;
    font-size: 16px;
}

 .modal .btn-back i {
     top:0px;
    left: 0px;
   color: #444;
    font-size: 36px;  padding: 0px 0px;

    }
.modal .btn-back i{
   
    
}
.modal .bottom .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
/* */



@media screen and (min-width:1200px) {
/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {

	color:#1d1718;
	
	font-weight:500;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
color: #1d1718;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	

}
 #modal2 { height:460px;    }

table { font-family: Arial, Helvetica, sans-serif;}
.ui-datepicker th { font-family:"Noto Sans Korean", sans-serif;font-weight:500;
    color: #000;
}

 .ui-datepicker td span {
    position: absolute;
    top:80%;
    left:50%;opacity:0.7}

	.modal .head {
    position: relative;
    width: 100%;
    height:80px;
    background-color: #fafafa;
      color: #383838;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 1px solid #c4c4c4;
}
    .modal .head h1 {
        margin: 0px 0px 0px 0px;
        padding-top: 15px;
        padding-bottom: 0px;
        font-size: 1.875rem;
        font-weight: 400;
    }

 .modal .bottom h1 {
        margin: 0px 0px 0px 0px;
        padding-top: 15px;
        padding-bottom: 0px;
        font-size: 1.875rem;
        font-weight: 400;
    }

.modal .bottom h2 {color: #555;
     margin: 5px 0px 0px 0px;
    font-size: 13px;
    
    font-weight: 400;line-height:20px;
}
.modal .bottom h2 span{color: #c42127;
 
    font-size:14px;
    
}

.modal .bottom h2 span a{color: #c42127;
    font-size:18px;
}


    .modal .head h2 {color: #666;
       margin: 0px 0px 0px 0px;
        font-size: 14px;
        font-weight: 400;
    }
    .modal .head .btn-close {
        top: 20px;
        right: 20px;
    }
 .modal .bottom .btn-close {
        top: 20px;
        right: 20px;
    }

.text-lg { font-size: 18px; }

}