@charset "utf-8";


.flex{display: flex;}
.flex-row { flex-direction: row }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap }
.items-start { align-items: flex-start }
.items-end { align-items: flex-end }
.items-center { align-items: center }
.items-baseline { align-items: baseline }
.justify-start { justify-content: flex-start }
.justify-end { justify-content: flex-end }
.justify-center { justify-content: center }
.justify-between { justify-content: space-between }
.justify-around { justify-content: space-around }

.cursor-pointer {cursor:pointer;}
.hidden{display:none;}

.reservationWrap{
	position: relative;
    width: 1920px !important;
	margin:0 auto;
	padding-top:150px;
	padding-bottom:100px;
}

.reservationWrap .inner {width:100%; max-width:1300px; padding:0 20px; margin:0 auto;}

.reservationWrap .inner section + section {
	margin-top:50px;
}

/* 기본 버튼 */
.reservationWrap .BtnSection{

}

.BtnSection .BtnArea {
    position: relative;
    display: block;
    width: 100%;
    background: none;
    text-align: center;
}

.BtnSection button {
    position: relative;
    display: inline-block;
	border-radius: 5px;
    width: auto;
    padding: 13px 3em;
    font-size: 20px;
    border: 1px solid #a48c7c;
    margin: 0px 6px;
    font-weight: 600;
    letter-spacing: -0.5px;
	background-color: var(--color-primary) !important;
	color: #fff;
}

.BtnSection > .TextBox {
    display: block;
    text-align: center;
}

.BtnSection > .TextBox p {
    position: relative;
    display: inline-block;
    line-height: 1.5;
    font-size: 13pt;
    font-weight: 500;
    color: #818181;
    background-color: #f1f1f1;
    border-radius: 15px;
    padding: 1.5em 7em;
    margin: 2em auto;
}

section .TopInfo {
    position: relative;
    display: table;
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 40px;
    border-bottom: 1px solid #333;
}

.TopInfo .Info {
    position: relative;
    display: inline-table;
    vertical-align: middle;
    font-size: 13pt;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

.TopInfo .Left {
    position: relative;
    display: table-cell;
    width: 50%;
    vertical-align: bottom;
}

.DayTimeSection {
    position: relative;
    display: table;
    width: 100%;
    padding: 45px;
    border-radius: 15px;
    border: 1px solid #ebebeb;
    box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.1);
}

.DayTimeSection .Info {
    position: relative;
    display: block;
    font-size: 13pt;
    color: #333;
    font-weight: 600;
    line-height: 1;
}

section .BigCont{position:relative; display:table; width:95%; margin:0 auto;}

#dayTimeCommonDiv .DayCont {
    position: relative;
    display: table-cell;
    width: 50%;
}

#dayTimeCommonDiv .DayDate {
    position: relative;
    display: block;
    width: 95%;
    padding: 1.5em;
    border-radius: 10px;
    background-color: #f8fafc;
}

#dayTimeCommonDiv .DayDate .cal_box{
	position: relative;
    padding: 1.5rem 1rem 1.5rem;
}

#my_cal #prevMonth.disabled, #my_cal #nextMonth.disabled {
	opacity: .3;
	cursor: default !important;
	pointer-events: none;
}

.cal_box button{
	-webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

.cal_box h2{
	font-size:2.0rem;
	font-weight:500;
}

.my_calendar {
    width:100%;
	border-collapse: collapse;
    margin: 0 auto;
}

.my_calendar th{
	text-align:Center;
	padding:20px 0;
    font-weight: normal;
    text-align: center;
	font-size:1.6rem;
	border-bottom:1px solid var(--gray05);
}

.my_calendar td{
	text-align:Center;
	height:40px;
    font-weight: normal;
    text-align: center;
	font-size:1.6rem;
}

.my_calendar tr th.disabled:first-child, .my_calendar tr td.disabled:first-child {
	color: var(--color-primary);
}

.my_calendar tr td.holiday{
    color: var(--color-primary);
}

.my_calendar tr th.disabled, .my_calendar tr td.disabled {
	opacity: .3;
	cursor: default !important;
	pointer-events: none;
}

.my_calendar td a{
    width: 44px;
    height: 44px;
    line-height: 44px;
    margin: 1.5px auto;
}

.my_calendar td a.ui-state-default{
	display: block;
    text-align: center;
    font-size: 16px;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    text-decoration: none !important;
}

.ui-state-active {
    background-color: var(--color-secondary);
    color: #fff;
	border-radius: 50em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.my_calendar td.action a{
	background-color: var(--color-primary);
    color: #fff;
	border-radius: 50em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#dayTimeCommonDiv .Info {
    position: relative;
    display: block;
    font-size: 13pt;
    color: #333;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 1em;
}

#dayTimeCommonDiv .DayTime {
    position: relative;
    display: block;
    width: 100%;
    padding: 1.5em;
    border-radius: 10px;
    background-color: #f8fafc;
    min-height: 7em;
}

#dayTimeCommonDiv .DayTime {
    content: "";
    clear: both;
    display: block;
    margin-bottom: 2%;
    overflow: hidden;
}

/* 날짜피커 */
#dayTimeCommonDiv .DayTime *{font-weight:500;}
#dayTimeCommonDiv .DayTime{content:""; clear:both; display:block; margin-bottom:2%; overflow:hidden;}
#dayTimeCommonDiv .DayTime .TimeList{position:relative; display:block; overflow:hidden;}
#dayTimeCommonDiv .DayTime ul{}
#dayTimeCommonDiv .DayTime ul li{display:block; float:left; width:20%; text-align:center; margin-top:2.5%;}
#dayTimeCommonDiv .DayTime ul li:nth-child(-n+5){margin-top:0;}
#dayTimeCommonDiv .DayTime li:nth-child(2n){margin-left:0px;}
#dayTimeCommonDiv .DayTime ul li label b{font-size:1.4rem;}
/* 시간표기 */
#dayTimeCommonDiv .DayTime label{display:block; width:95%; margin:0 auto; color:#111111; font-size:1.6rem; line-height:1; vertical-align:middle; border:1px solid #ccc; border-radius:50px; background-color:#ffffff; box-shadow:2px 2px 5px 0px #e5e5e5; cursor:pointer; padding:0.7em 0;}
#dayTimeCommonDiv .DayTime label span{font-size:1.4rem; display:none;}
#dayTimeCommonDiv .DayTime label:hover{border-color:var(--color-primary);; transition-duration:.3s;}
/* 예약불가 */
#dayTimeCommonDiv .DayTime li.Impossible label{color:#cccccc; border:1px solid #dfdfdf; background-color:#f7f7f7;}
#dayTimeCommonDiv .DayTime li.Impossible label:hover{color:#cccccc; border:1px solid #dfdfdf; background-color:#f7f7f7;}
/* 예약마감 */
#dayTimeCommonDiv .DayTime li.TimeEnd{width:100% !important;}
#dayTimeCommonDiv .DayTime li.TimeEnd label{border:none; background:none; box-shadow:none; cursor:default;}
#dayTimeCommonDiv .DayTime li.TimeEnd label b{line-height:1.4; color:#444;}
/* 선택된 */
#dayTimeCommonDiv .DayTime li.Selected label{color:#ffffff; background-color:var(--color-primary);}

/* 로딩중 202310 */
.LoadingArea{content:""; clear:both; position:absolute; left:0px; top:0px; width:100%; height:100%;  z-index:998;}
.LoadingArea .LoadingBg{position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:rgba(245, 245, 245, 0.85); z-index:998;}
.LoadingArea .SpinnerBox{position:absolute; top:50%; left:50%; margin-left:auto; width:100%; overflow:hidden;  z-index:999; transform:translate(-50%, -50%);} 
.LoadingArea .Spinner {margin:0 auto; width:100%; text-align:center;}
.LoadingArea .Spinner > div {width:10px; height:10px; background-color:#333; border-radius:100%; display:inline-block; -webkit-animation:Bouncedelay 1.4s infinite ease-in-out both; animation:Bouncedelay 1.4s infinite ease-in-out both; margin:0 2px;}
.LoadingArea .Spinner .Bounce1{-webkit-animation-delay:-0.32s; animation-delay:-0.32s;}
.LoadingArea .Spinner .Bounce2{-webkit-animation-delay:-0.16s; animation-delay:-0.16s;}
.LoadingArea .Spinner span{display:block; font-size:12pt; margin-top:0.5em; color:#444;}

@-webkit-keyframes Bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}

@keyframes Bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}


/*예약정보입력*/
.InputSection {
    position: relative;
    display: table;
    width: 100%;
    padding: 45px;
    border-radius: 15px;
    border: 1px solid #ebebeb;
    box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.1);
}

.InputSection .Left{}
.InputSection .BigCont{position:relative; display:table; width:95%; margin:0 auto;}
.InputSection .BigCont .Label{position:relative; display:inline-table; width:95%; margin:0 auto;}
.InputSection .BigCont .Label + .Label{margin-top:1em;}
.InputSection .BigCont .Label label + label{margin-left:1em;}
.InputSection .BigCont .Label span{position:relative; display:inline-table; width:20%; font-size:1.6rem; color:#333; font-weight:600; line-height:1; vertical-align:middle;}
.InputSection .BigCont .Label .InputBox{position:relative; display:inline-table; width:80%;}
.InputSection .BigCont .Label input{width:100%; height:44px; border:0; border-bottom:1px solid #c3c3c3; font-size:1.4rem; color:#000;}
.InputSection .BigCont .Label input::placeholder{color:#adadad;}
.InputSection .BigCont .Label textarea{width:100%; height:150px; border:0; border:1px solid #c3c3c3; font-size:1.4rem; color:#000;}
.InputSection .BigCont .Label textarea::placeholder{color:#adadad;}
.InputSection .BigCont .Label.LabelFirst{margin-top:1.5em;}

.PriceSideWrap .CheckBox{position:relative;}
.PriceSideWrap .CheckBox input{display:none;}
.PriceSideWrap .CheckBox em{display:table-cell; position:relative; width:auto; text-align:left; vertical-align:middle; font-style:normal; font-weight:normal;}
.PriceSideWrap .CheckBox em b{display:block; position:relative; width:20px; height:20px; border:1px solid #777; border-radius:3px; background-color:#ffffff;}
.PriceSideWrap .CheckBox em b:after{content: ''; display:block; position:absolute; left:6px; top:1px; width:4px; height:11px; border-bottom:3px solid #333; border-right:3px solid #333; transform:rotate( 45deg ); -webkit-transform:rotate( 45deg );-moz-transform:rotate( 45deg ); display:none;}
.PriceSideWrap .CheckBox input:checked ~ em{}
.PriceSideWrap .CheckBox input:checked ~ em b:after{display:block;}
.PriceSideWrap .CheckBox input:checked ~ pre{}

.PriceSideWrap .Radiobox{display:inline-table; position:relative; line-height:1em; table-layout:fixed; vertical-align:middle; cursor:pointer;} 
.PriceSideWrap .Radiobox input{display:none;} /* 일단숨김 */
.PriceSideWrap .Radiobox mark{background:none; margin:0px; padding:0px;}
.PriceSideWrap .Radiobox small{display:table-cell; width:20px; vertical-align:middle;}
.PriceSideWrap .Radiobox small em{display:block; position:relative; width:20px; font-style:normal; font-weight:normal; overflow:hidden;}
.PriceSideWrap .Radiobox small em b{display:block; position:relative; top:0; width:20px; height:20px; border:1px solid #adadad; border-radius:50%; background-color:#ffffff; overflow:hidden;}
.PriceSideWrap .Radiobox small em b:after{content: ''; display:block; position:absolute; top:50%; margin-top:-6px; left:50%; margin-left:-6px; font-size:1em; width:12px; height:12px; background-color:#333; border-radius:50%; display:none;} /* 일단숨김 */
.PriceSideWrap .Radiobox big{display:table-cell; line-height:1.5em; vertical-align:middle; padding-left:5px;}
.PriceSideWrap .Radiobox big p{color:#666; font-size:13pt;}
.PriceSideWrap .Radiobox input:checked ~ * big p{color:#666;}
.PriceSideWrap .Radiobox input:checked ~ * small em{}
.PriceSideWrap .Radiobox input:checked ~ * small em b{border-color:#482b8d;}
.PriceSideWrap .Radiobox input:checked ~ * small em b:after{display:block; color:#482b8d; transition:all 0.2s ease;}
.PriceSideWrap .Radiobox input:checked ~ * big{}
.PriceSideWrap .Radiobox input:disabled ~ * {cursor:no-drop;}
.PriceSideWrap .Radiobox input:disabled ~ * big{color:#a1a1a1;}
.PriceSideWrap .Radiobox input:disabled:checked~ * small em b{border-color:#dddddd;} 
.PriceSideWrap .Radiobox input:disabled:checked~ * small em b:after{color:#dddddd;}
.PriceSideWrap .Radiobox input:checked ~ * small em b{border:1px solid #333;}
.PriceSideWrap .Radiobox input:checked ~ * small em span.Checked{display:block; color:#382f5d;}

/*폼체크*/
.FormAgreeChk{position:relative; display:block; width:95%; overflow:hidden; margin-top:20px; margin:0 auto 0 auto;}
.FormAgreeChk label{position:relative; display:block; vertical-align:middle; line-height:2.0; width:50%;}
.FormAgreeChk .CheckBox{position:relative; display:inline-table; vertical-align:middle;}
.FormAgreeChk .CheckBox input{display:none;}
.FormAgreeChk .CheckBox em{display:table-cell; position:relative; text-align:left; vertical-align:middle; font-style:normal; font-weight:normal;}
.FormAgreeChk .CheckBox em b{display:block; position:relative; width:20px; height:20px; border:1px solid #a5a5a5; border-radius:3px; background-color:#ffffff;}
.FormAgreeChk .CheckBox em b:after{content: ''; display:block; position:absolute; left:5.0px; top:2px; width:6px; height:10px; border-bottom:2px solid #a5a5a5; border-right:2px solid #a5a5a5; transform:rotate( 45deg ); -webkit-transform:rotate( 45deg );-moz-transform:rotate( 45deg ); display:none;}
.FormAgreeChk .CheckBox input:checked ~ em{}
.FormAgreeChk .CheckBox input:checked ~ em b:after{display:block;}
.FormAgreeChk .CheckBox input:checked ~ pre{}
.FormAgreeChk .TextBox{position:relative; display:inline; vertical-align:middle;}
.FormAgreeChk .TextBox span{font-size:1.4rem; color:#888; padding-left:5px;}
.FormAgreeChk .TextBox a{display:inline-block; text-decoration:underline; font-size:1.4rem; padding:0; margin:0; width:auto; margin-left:5px; border:none;} 


@media screen and (max-width: 1279px) {

	.reservationWrap{
		position: relative;
		width: 100% !important;
		max-width:720px;
		margin:0 auto;
		padding-top:70px;
		padding-bottom:50px;
	}

	.reservationWrap .inner {width:100%; max-width:100%; padding:0 20px; margin:0 auto;}

	#dayTimeCommonDiv .DayCont {
		position: relative;
		display: table;
		width: 100%;
	}

	#dayTimeCommonDiv .DayCont + .DayCont {
		margin-top: 4vw;
	}

	#dayTimeCommonDiv .DayDate {
		position: relative;
		display: block;
		width: 100%;
		padding: 1.5em;
		border-radius: 10px;
		background-color: #f8fafc;
	}

	.DayTimeSection {
		position: relative;
		display: table;
		width: 100%;
		padding: 20px;
		border-radius: 15px;
		border: 1px solid #ebebeb;
		box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.1);
	}

	.InputSection {
		position: relative;
		display: table;
		width: 100%;
		padding: 20px;
		border-radius: 15px;
		border: 1px solid #ebebeb;
		box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.1);
	}

	/*폼체크*/
	.FormAgreeChk label{position:relative; display:block; vertical-align:middle; line-height:2.0; width:100%;}
	.FormAgreeChk .TextBox{position:relative; display:inline; vertical-align:middle;}
	.FormAgreeChk .TextBox span{font-size:1.2rem; color:#888; padding-left:5px;}
	.FormAgreeChk .TextBox a{display:inline-block; text-decoration:underline; font-size:1.2rem; padding:0; margin:0; width:auto; margin-left:5px; border:none;} 

	.BtnSection > .TextBox p {
		position: relative;
		display: inline-block;
		line-height: 1.5;
		font-size: 1.4rem;
		font-weight: 500;
		color: #818181;
		background-color: #f1f1f1;
		border-radius: 15px;
		padding: 20px 50px;
		margin: 2em auto;
	}

	.InputSection .BigCont .Label span{position:relative; display:inline-table; 
	width:20%; font-size:1.4rem; color:#333; font-weight:600; line-height:1; 
	vertical-align:middle;}

}


/*  모달 상담 예약*/
.modal_reservationWrap{
	position: relative;
    width: 100%;
	max-width:720px;
	margin:0 auto;
	padding-top:70px;
	padding-bottom:50px;
}

.modal_reservationWrap .inner {width:95%; padding:0 20px; margin:0 auto;}

.modal_reservationWrap .inner section + section {
	margin-top:50px;
}

.modal_reservationWrap #dayTimeCommonDiv .DayCont {
    position: relative;
    display: table;
    width: 100%;
}

.modal_reservationWrap #dayTimeCommonDiv .DayCont + .DayCont {
    margin-top: 4vw;
}

.modal_reservationWrap #dayTimeCommonDiv .DayDate {
    position: relative;
    display: block;
    width: 100%;
   padding: 1.5em;
    border-radius: 10px;
    background-color: #f8fafc;
}

/*폼체크*/
.modal_reservationWrap .FormAgreeChk{position:relative; display:block; width:95%; overflow:hidden; margin-top:20px; margin:0 auto 0 auto;}
.modal_reservationWrap .FormAgreeChk label{position:relative; display:block; vertical-align:middle; line-height:2.0; width:100%;}
.modal_reservationWrap .FormAgreeChk .CheckBox{position:relative; display:inline-table; vertical-align:middle;}
.modal_reservationWrap .FormAgreeChk .CheckBox input{display:none;}
.modal_reservationWrap .FormAgreeChk .CheckBox em{display:table-cell; position:relative; text-align:left; vertical-align:middle; font-style:normal; font-weight:normal;}
.modal_reservationWrap .FormAgreeChk .CheckBox em b{display:block; position:relative; width:20px; height:20px; border:1px solid #a5a5a5; border-radius:3px; background-color:#ffffff;}
.modal_reservationWrap .FormAgreeChk .CheckBox em b:after{content: ''; display:block; position:absolute; left:5.0px; top:2px; width:6px; height:10px; border-bottom:2px solid #a5a5a5; border-right:2px solid #a5a5a5; transform:rotate( 45deg ); -webkit-transform:rotate( 45deg );-moz-transform:rotate( 45deg ); display:none;}
.modal_reservationWrap .FormAgreeChk .CheckBox input:checked ~ em{}
.modal_reservationWrap .FormAgreeChk .CheckBox input:checked ~ em b:after{display:block;}
.modal_reservationWrap .FormAgreeChk .CheckBox input:checked ~ pre{}
.modal_reservationWrap .FormAgreeChk .TextBox{position:relative; display:inline; vertical-align:middle;}
.modal_reservationWrap .FormAgreeChk .TextBox span{font-size:1.4rem; color:#888; padding-left:5px;}
.modal_reservationWrap .FormAgreeChk .TextBox a{display:inline-block; text-decoration:underline; font-size:1.4rem; padding:0; margin:0; width:auto; margin-left:5px; border:none;} 

@media screen and (max-width: 767px) {

	.reservationWrap{
		position: relative;
		width: 100% !important;
		max-width:100%;
		padding-top:35px;
		padding-bottom:50px;
	}
	
	section .TopInfo {
		position: relative;
		display: table;
		width: 100%;
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid #333;
	}

	.reservationWrap .inner {width:100%; max-width:95%; margin:0 auto; padding:0px;}

	/* 메인영역 */
	section .BigCont{position:relative; display:table; width:95%; margin:0 auto;}

	.DayTimeSection{position:relative; display:table; width:100%; padding:2vw; border-radius:4vw; border:1px solid #ebebeb; box-shadow:0px 3px 7px 0 rgba(0, 0, 0, 0.1);}
	.DayTimeSection .DayCont{position:relative; display:table; width:100%;}
	.DayTimeSection .DayCont + .DayCont{margin-top:4vw;}
	.DayTimeSection .Info{position:relative; display:block; font-size:4vw; color:#333; font-weight:600; line-height:1; margin-top:3vw; margin-bottom:0vw;}

	.DayTimeSection .DayDate{position:relative; display:block; width:100%; padding:4vw; border-radius:2vw; background-color: #f8fafc;}
	
	#dayTimeCommonDiv .Info {
		position: relative;
		display: block;
		font-size: 4vw;
		color: #333;
		font-weight: 600;
		line-height: 1;
		margin-bottom: 3vw;
	}

	#dayTimeCommonDiv .DayCont {
        position: relative;
        display: table;
        width: 100% !important;
    }

	#dayTimeCommonDiv .DayDate {
        position: relative;
        display: block;
        width: 100%;
        padding: 1.0em;
        border-radius: 10px;
        background-color: #f8fafc;
    }

	#dayTimeCommonDiv .DayDate .cal_box{
		position: relative;
		padding: 1.0rem 0.5rem 1.0rem;
	}

	.my_calendar {
		width:100%;
		border-collapse: collapse;
		margin: 0 auto;
	}

	.my_calendar th{
		text-align:Center;
		padding:10px 0;
		font-weight: normal;
		text-align: center;
		font-size:1.4rem;
		border-bottom:1px solid var(--gray05);
	}

	.my_calendar td{
		text-align:Center;
		height:40px;
		font-weight: normal;
		text-align: center;
		font-size:1.4rem;
	}

	.my_calendar tr th.disabled:first-child, .my_calendar tr td.disabled:first-child {
		color: var(--color-primary);
	}

	.my_calendar tr td.holiday{
		color: var(--color-primary);
	}

	.my_calendar tr th.disabled, .my_calendar tr td.disabled {
		opacity: .3;
		cursor: default !important;
		pointer-events: none;
	}

	.my_calendar td a{
		width: 44px;
		height: 44px;
		line-height: 44px;
		margin: 1.5px auto;
	}

	.my_calendar td a.ui-state-default{
		display: block;
		text-align: center;
		font-size: 16px;
		position: relative;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		text-decoration: none !important;
	}

	.ui-state-active {
		background-color: var(--color-secondary);
		color: #fff;
		border-radius: 50em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.my_calendar td.action a{
		background-color: var(--color-primary);
		color: #fff;
		border-radius: 50em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* 모달 팝업*/

	.modal_reservationWrap {
		position: relative;
		width: 100%;
		max-width:100%;
		margin: 0 auto;
		padding-top:35px;
		padding-bottom:50px;
	}

	.modal_reservationWrap .inner {
		width: 100%;
		padding: 0 0px;
		margin: 0 auto;
	}

}

@media screen and (max-width: 430px) {

	.reservationWrap{
		position: relative;
		width: 100% !important;
		max-width:100%;
		padding-top:35px;
		padding-bottom:50px;
	}
	
	section .TopInfo {
		position: relative;
		display: table;
		width: 90%;
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid #333;
	}

	.reservationWrap .inner {width:100%; max-width:95%; margin:0 auto; padding:0px;}

	/* 메인영역 */
	section .BigCont{position:relative; display:table; width:95%; margin:0 auto;}

	.DayTimeSection{position:relative; display:table; width:100%; padding:2vw; border-radius:4vw; border:1px solid #ebebeb; box-shadow:0px 3px 7px 0 rgba(0, 0, 0, 0.1);}
	.DayTimeSection .DayCont{position:relative; display:table; width:100%;}
	.DayTimeSection .DayCont + .DayCont{margin-top:4vw;}
	.DayTimeSection .Info{position:relative; display:block; font-size:4vw; color:#333; font-weight:600; line-height:1; margin-top:3vw; margin-bottom:0vw;}

	.DayTimeSection .DayDate{position:relative; display:block; width:100%; padding:4vw; border-radius:2vw; background-color: #f8fafc;}
	
	#dayTimeCommonDiv .Info {
		position: relative;
		display: block;
		font-size: 4vw;
		color: #333;
		font-weight: 600;
		line-height: 1;
		margin-bottom: 3vw;
	}

	#dayTimeCommonDiv .DayCont {
        position: relative;
        display: table;
        width: 100% !important;
    }

	#dayTimeCommonDiv .DayDate {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        padding: 0.5em !important;
        border-radius: 10px !important;
        background-color: #f8fafc !important;
    }

	#dayTimeCommonDiv .DayDate .cal_box{
		position: relative;
		padding: 0.5rem 0.5rem 0.5rem;
	}

	.my_calendar {
		width:100%;
		border-collapse: collapse;
		margin: 0 auto;
	}

	.my_calendar th{
		text-align:Center;
		padding:5px 0;
		font-weight: normal;
		text-align: center;
		font-size:1.4rem;
		border-bottom:1px solid var(--gray05);
	}

	.my_calendar td{
		text-align:Center;
		height:40px;
		font-weight: normal;
		text-align: center;
		font-size:1.4rem;
	}

	.my_calendar tr th.disabled:first-child, .my_calendar tr td.disabled:first-child {
		color: var(--color-primary);
	}

	.my_calendar tr td.holiday{
		color: var(--color-primary);
	}

	.my_calendar tr th.disabled, .my_calendar tr td.disabled {
		opacity: .3;
		cursor: default !important;
		pointer-events: none;
	}

	.my_calendar td a{
		width: 38px;
		height: 38px;
		line-height: 38px;
		margin: 1.5px auto;
	}

	.my_calendar td a.ui-state-default{
		display: block;
		text-align: center;
		font-size: 16px;
		position: relative;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		text-decoration: none !important;
	}

	.ui-state-active {
		background-color: var(--color-secondary);
		color: #fff;
		border-radius: 50em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.my_calendar td.action a{
		background-color: var(--color-primary);
		color: #fff;
		border-radius: 50em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* 모달 팝업*/

	.modal_reservationWrap {
		position: relative;
		width: 100%;
		max-width:100%;
		margin: 0 auto;
		padding-top:35px;
		padding-bottom:50px;
	}

	.modal_reservationWrap .inner {
		width: 100%;
		padding: 0 0px;
		margin: 0 auto;
	}

}