/* =================================== */
/*	Web Font
/* =================================== */

/*코트라 볼드체*/
@font-face {
    font-family: 'KOTRA_BOLD-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*코트라 고딕체*/
@font-face {
    font-family: 'KOTRA_GOTHIC';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/KOTRA_GOTHIC.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*CORSVA체*/
@font-face {
	font-family: 'Monotype_Corsiva';
	src: url('../fonts/Monotype_Corsiva.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*나눔 고딕체*/
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

.nanumgothic * {
	font-family: 'Nanum Gothic', sans-serif;
}

/* =================================== */
/*	Basic Style
/* =================================== */

#pc-container{
	width:100%;
}

html{
	height:100%;
}

body {
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    line-height: 1;
}

ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

figure, p {
    margin: 0;
}

a {
    -webkit-transition: all .3s ease-in 0s;
       -moz-transition: all .3s ease-in 0s;
        -ms-transition: all .3s ease-in 0s;
         -o-transition: all .3s ease-in 0s;
            transition: all .3s ease-in 0s;
}

iframe {
    border: 0;
}

a, a:focus, a:hover {
    text-decoration: none;
    outline: 0;
}

a:focus, a:hover {
    color: inherit;
}

.mobile_br{
	display:none;
}

br {
	font-family:"Cooper Black", serif;
}

h1, h2, h3,
h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	margin: 0;
}

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
   clear: both;
}

.clear {
   *zoom: 1;
}

.btn {
    border-radius: 0;
}

.btn:hover,
.btn:focus {
    outline: 0;
}

#login {
	display:flex;
	align-items:center;
	height:100%;
}

#login .form-signin {
    max-width: 600px;
    padding: 19px 29px 29px;
    margin: 0 auto 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
#login .form-signin .form-signin-heading,
#login .form-signin .checkbox {
    margin-bottom: 20px;
}
#login .form-signin input[type="text"],
#login .form-signin input[type="password"] {
    font-size: 16px;
    height: auto;
    padding: 4.5px 9px;
    vertical-align:bottom;
}

/*달력 css*/
.cal_top{
    text-align: center;
    font-size: 30px;
    margin:20px 0;
}
.cal_top a{
    font-size: 35px;
}
.cal{
    text-align: center;
}
.sumper {
	margin-top:20px;
}
table.calendar{
	width:1200px;
    border: 1px solid black;
    display: inline-table;
    text-align: left;
}

table.calendar th {
    font-family: 'KOTRA_GOTHIC';
    font-size:24px;
    padding:15px 0;
    text-align:center;
    border:1px solid #000000;
}

table.calendar th:first-child {
    color:red;
}

table.calendar th:last-child {
    color:blue;
}

table.calendar tr:nth-child(n+2){
	height:171px;
}

table.calendar td{
	position:relative;
    vertical-align: top;
    border: 1px solid #000000;
    width: 171px;
    max-width:171px;
    overflow:hidden;
    padding-bottom:10px;
}

.cal-day {
    font-size:17px;
    padding:10px;
}

.cal-schedule {
	height:132px;
	overflow:hidden;
}

.info {
	font-size:15px;
	padding:0 5px;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}

.sche {
	font-size:25px;
	padding:10px 5px;
	cursor:pointer;
}

.sche:hover {
	text-decoration:underline;
}

.cal-holiday {
	position:absolute;
	bottom:10px;
	right:10px;
	font-size:15px;
	color:red;
}

.today {
	background-color:#f0ffff;
}

.empty {
    cursor:pointer;
}

.empty:hover {
	background-color:#eeeeee;
}

/*popup modal css*/
.modal .modal-dialog{
	width:768px;
}

.modal .depart_div {
	margin:10px 0;
}

.modal .name {
	width:150px;
}

.modal .phone, .modal .mo_phone {
	display:inline-block;
	width:100px;
}

.modal .person {
	width:80px;
}

.modal .be_text {
	margin:0 5px;
	line-height:34px;
	vertical-align:top;
}

.modal #re_date, .modal #mo_re_date{
	font-size:17px;
	line-height:34px;
}

.modal .re_time, .modal .mo_re_time {
	display:block;
	width:163px;
	border:1px solid #ced4da;
	font-size:17px;
	padding:10px 30px;
	border-radius:4px;
	margin:10px;
	cursor:pointer;
	transition:0.4s;
	text-align:center;
}

.modal .re_time.dis, .modal .mo_re_time.dis {
	background-color:#cccccc;
	pointer-events:none;
}

.modal .re_time.active, .modal .mo_re_time.active {
	background-color:#ffffff;
	border-color:#86b7fe;
	box-shadow:0 0 0 0.25rem rgb(13 110 253 / 25%);
}

.modal .price {
	width:150px;
}

.modal .info_time {
    display: flex;
    justify-content: space-between;
	color:#4682b4;
	font-size:30px;
	font-weight:bold;
	margin-bottom:30px;
}

.modal .info_content {

}

.modal .modal-footer {
	text-align:left;
}

/*날짜 선택 달력 css*/
.ui-widget-header {
border: 0px solid #dddddd;
background: #fff;
}

.ui-datepicker-calendar>thead>tr>th {
font-size: 14px !important;
}

.ui-datepicker .ui-datepicker-header {
position: relative;
padding: 10px 0;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
border: 0px solid #c5c5c5;
background-color: transparent;
font-weight: normal;
color: #454545;
text-align: center;
}

.ui-datepicker .ui-datepicker-title {
margin: 0 0em;
line-height: 16px;
text-align: center;
font-size: 14px;
padding: 0px;
font-weight: bold;
}

.ui-datepicker {
display: none;
background-color: #fff;
border-radius: 4px;
margin-top: 10px;
margin-left: 0px;
margin-right: 0px;
padding: 20px;
padding-bottom: 10px;
width: 300px;
box-shadow: 10px 10px 40px rgba(0,0,0,0.1);
}

.ui-widget.ui-widget-content {
    border: 1px solid #eee;
}

#datepicker:focus>.ui-datepicker {
display: block;
}

.ui-datepicker-prev,
.ui-datepicker-next {
cursor: pointer;
}

.ui-datepicker-next {
float: right;
}

.ui-state-disabled {
cursor: auto;
color: hsla(0, 0%, 80%, 1);
}

.ui-datepicker-title {
text-align: center;
padding: 10px;
font-weight: 100;
font-size: 20px;
}

.ui-datepicker-calendar {
width: 100%;
}

.ui-datepicker-calendar>thead>tr>th {
padding: 5px;
font-size: 20px;
font-weight: 400;
}


.ui-datepicker-calendar>tbody>tr>td>a {
color: #000;
font-size: 12px !important;
font-weight: bold !important;
text-decoration: none;

}


.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover {
cursor: auto;
background-color: #fff;
}

.ui-datepicker-calendar>tbody>tr>td {
    border-radius: 100%;
    width: 44px;
    height: 30px;
    cursor: pointer;
    padding: 5px;
    font-weight: 100;
    text-align: center;
    font-size: 12px;
}

.ui-datepicker-calendar>tbody>tr>td:hover {
    background-color: transparent;
    opacity: 0.6;
}

.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 {
border: 0px solid #cccccc;
background-color: transparent;
font-weight: normal;
color: #2b2b2b;
}

.ui-widget-header .ui-icon {
background-image: url('../img/btns.png');
}
.ui-icon-circle-triangle-e {
background-position: -20px 0px;
background-size: 36px;
}

.ui-icon-circle-triangle-w {
background-position: -0px -0px;
background-size: 36px;
}

.ui-datepicker-calendar>tbody>tr>td:first-child a{
color: red !important;
}

.ui-datepicker-calendar>tbody>tr>td:last-child a{
color: #0099ff !important;
}

.ui-datepicker-calendar>thead>tr>th:first-child {
    color: red !important;
}

.ui-datepicker-calendar>thead>tr>th:last-child {
    color: #0099ff !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 0px;
    background: #f1f1f1;
    border-radius: 50%;
    padding-top: 5px;
    padding-bottom: 5px;
}


.inp {padding:10px 10px; background-color:#f1f1f1; border-radius:4px; border:0px;}
.inp:focus {outline:none; background-color:#eee;}

@media(max-width:980px){
	#login .form-signin input[type="text"],
	#login .form-signin input[type="password"] {
	    font-size: 24px;
	    padding: 13px 9px;
	}

	.cal_top{
	    font-size: 54px;
	}
	.cal_top a{
	    font-size: 63px;
	}

	.cal-schedule {
		height:86px;
	}

	table.calendar{
		width:980px;
	}

	table.calendar tr:nth-child(n+2){
		height:139px;
	}

	table.calendar td{
	    width: 139px;
	    max-width:139px;
	}

	.cal-day {
	    font-size:23px;
	}

	.info {
		font-size:20px;
		white-space:normal;
	}

	.cal-holiday {
		font-size:20px;
	}

	.depart_div label {
		font-size:33px;
	}

	.modal .depart_div {
		margin:20px 0;
	}

	.modal #re_date, .modal #mo_re_date{
		font-size:33px;
		line-height:63px;
	}

	.modal .be_text {
		margin:0 10px;
		line-height:63px;
	}

	.form-control {
		font-size:33px;
		height:63px;
	}

	.modal .name {
		width:250px;
	}

	.modal .phone, .modal .mo_phone {
		width:130px;
	}

	.modal .person {
		width:80px;
	}

	.modal .re_time, .modal .mo_re_time {
		width:290px;
		font-size:33px;
	}

	.modal .price {
		width:200px;
	}

	.btn {
		font-size:27px;
		padding:10px 20px;
	}

	.modal .info_time {
		font-size:45px;
	}

	.sche {
		font-size:38px;
	}
}