@charset "utf-8";

.reservation_wrap {border-top: 15px solid #87cefa; padding: 30px 0 100px;}
.reservation_wrap h3.tit {font-size: 30px; font-weight: bold; text-align: center; padding: 0 0 28px;}
.reservation_wrap h3.tit span {font-size: 18px; font-weight: 500; color: #87cefa;}

.reser_top {text-align: center; margin: 0 0 130px;}
.reser_top h2 {font-size: 40px; margin: 0 0 130px;}
.reser_top > p.reser_date {margin: 0 0 35px; font-size: 30px; font-weight: bold;}

.reser_calendar {}
.calendar_wrap {width: 865px; margin: 0 auto; border: 1px solid #c8c8c8; box-sizing: border-box; border-radius: 23px; box-shadow: 0 0 10px rgba(0, 0, 0, .2); padding: 45px 98px;}
.calendar_wrap .top {position: relative; margin: 0 0 55px;}
.calendar_wrap .top .prev_btn,
.calendar_wrap .top .next_btn {width: 43px; height: 43px; background-repeat: no-repeat; background-size: 100%; background-position: center; font-size: 0; position: absolute; top: 0; cursor: pointer;}
.calendar_wrap .top .prev_btn {background-image: url(../img/new/ico_calendar_prev.png); left: 0;}
.calendar_wrap .top .next_btn {background-image: url(../img/new/ico_calendar_next.png); right: 0;}
.calendar_wrap .top .current_month {font-size: 27px; font-weight: bold;}

.month_box {}
.month_box table {width: 100%;}
.month_box th,
.month_box td {padding: 10px 0;}
.month_box th {font-size: 27px; color: #000;}
.month_box td {font-size: 27px;}
.month_box td strong {display: block; font-size: 14px; font-weight: 500; color: #999; padding: 5px 0 0;}
.month_box td span {display: inline-block; cursor: pointer; line-height: 49px; font-weight: 500;}
.month_box .sun span {color: #cc0000;}
.month_box .sat span {color: #87cefa;}
.month_box .gray span {color: #999999;}
.month_box .selected span {width: 49px; height: 49px; background: #87cefa; border-radius: 50%; text-align: center; color: #fff;}
.month_box .end span {width: 49px; height: 49px; background: #999999; border-radius: 50%; text-align: center; color: #fff;}

.calendar_info {margin: 65px 0 0;}
.calendar_info ul {text-align: right; font-size: 0;}
.calendar_info ul li {display: inline-block; margin-right: 78px;}
.calendar_info ul li:last-child {margin-right: 0;}
.calendar_info ul li span {position: relative; padding-left: 43px; font-size: 20px; font-weight: 500;}
.calendar_info ul li span:after {content: ''; width: 29px; height: 29px; border-radius: 50%; position: absolute; left: 0; top: 0; background: #87cefa;}
.calendar_info ul li:first-child span:after {background: #999;}

.reser_time {margin: 0 0 50px;}
.reser_time .time_list {width: 832px; margin: 0 auto;}
.reser_time .time_list ul {font-size: 0;}
.reser_time .time_list ul li {text-align: center; display: inline-block; width: 268px; vertical-align: top; margin-right: 14px; margin-bottom: 20px; cursor: pointer;}
.reser_time .time_list ul li:nth-child(3n) {margin-right: 0;}
.reser_time .time_list ul li span {font-size: 24px; font-weight: 500; display: block; border: 3px solid #87cefa; border-radius: 14px; padding: 26px 0;}
.reser_time .time_list ul li.on span {color: #fff; background: #87cefa;}

.reser_input {width: 832px; margin: 0 auto 90px;}
.reser_input .input_wrap {margin: 0 0 16px;}
.reser_input .input_wrap > p {padding: 0 0 8px;}
.reser_input .input_wrap > p span {font-size: 20px; font-weight: 500; display: inline-block; position: relative; padding-right: 14px;}
.reser_input .input_wrap > p.req span:after {content: '*'; color: #87cefa; position: absolute; right: 0; top: 0;}

.reser_input .input_wrap .input_box {position: relative; margin-bottom: 20px;}
.reser_input .input_wrap .input_box:last-child {margin-bottom: 0;}
.reser_input .input_wrap .input_box input {height: 66px; width: 100%; border: 1px solid #999; border-radius: 11px; font-size: 20px; font-weight: 500; padding: 0 20px; box-sizing: border-box;}
.reser_input .input_wrap .input_box select {height: 66px; width: 100%; border: 1px solid #999; border-radius: 11px; font-size: 20px; font-weight: 500; padding: 0 20px; box-sizing: border-box;}
.reser_input .input_wrap .input_box .btn_delete {position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 23px; height: 24px; background: url(../img/new/btn_delete.png) no-repeat center/23px 24px; border: 0; font-size: 0;}

.btn_white,.btn_aqua {font-size: 18px; font-weight: 500; border-radius: 9px; width: 140px; height:46px; position: absolute; right: 7px; top: 50%; transform: translateY(-50%);}
.btn_white {color: #87cefa; border: 1px solid #87cefa; background: #fff;}
.btn_aqua {color: #fff; border: 1px solid #87cefa; background: #87cefa;}

.btn_fin {background: #AAA; color: #fff;}
.btn_fin {background: #AAA; color: #fff;}

.reser_txt {width: 832px; margin: 0 auto 140px;}
.reser_txt .textarea_box {margin: 0 0 14px;}
.reser_txt .textarea_box textarea {border: 1px solid #999; padding: 15px 24px; resize: none; width: 100%; height: 263px; border-radius: 11px; box-sizing: border-box; font-size: 20px; display: block;}
.reser_txt > p {font-size: 20px; font-weight: 500; text-align: center;}

.reser_subject {width: 832px; margin: 0 auto 130px;}
.reser_subject ul {margin: 50px 0 0; font-size: 0;}
.reser_subject ul li {width: 20%; display: inline-block; margin-bottom: 25px;}
.reser_subject ul.write_chk li {width: 25%; margin-right: 0;}
.reser_subject ul li label {font-size: 24px; font-weight: 500;}

.reser_agree {width: 832px; margin: 0 auto 40px;}
.reser_agree .box {border-radius: 17px; background: rgba(135, 206, 250, .2); padding: 30px 38px; margin-bottom: 20px;}
.reser_agree .box:last-child {margin-bottom: 0;}
.reser_agree .box dl {margin-bottom: 35px;}
.reser_agree .box dl:last-child {margin-bottom: 0;}
.reser_agree .box dt,
.reser_agree .box dd {}

.reser_agree .box dt {padding: 0 0 13px;}
.reser_agree .box dt strong {font-size: 24px; font-weight: 600;}
.reser_agree .box dt strong a {font-size: 18px; text-decoration: underline; margin-left: 10px;}
.reser_agree .box dd p {font-size: 20px; font-weight: 500;}

.reser_agree2 {width: 832px; margin: 0 auto 40px;}
.reser_agree2 .box {border-radius: 17px; background: rgba(135, 206, 250, .2); padding: 30px 38px; margin-bottom: 20px;}
.reser_agree2 .box:last-child {margin-bottom: 0;}
.reser_agree2 .box dl {margin-bottom: 35px;}
.reser_agree2 .box dl:last-child {margin-bottom: 0;}
.reser_agree2 .box dt,
.reser_agree2 .box dd {}

.reser_agree2 .box dt {padding: 0 0 13px;}
.reser_agree2 .box dt strong {font-size: 24px; font-weight: 600;}
.reser_agree2 .box dt strong a {font-size: 18px; text-decoration: underline; margin-left: 10px;}
.reser_agree2 .box dd p {text-align: left; font-size: 20px; font-weight: 500;}

.btn_agree {background: #87cefa; font-size: 20px; font-weight: bold; color: #fff; border-radius: 35px; width: 350px; height: 70px; border: 0;}
.btn_reset {background: #fff; font-size: 20px; font-weight: bold; color: #000000; border-radius: 35px; width: 350px; height: 70px; border: 1px solid #555;}

/* 예약완료 */
.reser_complete {border-top: 15px solid #87cefa; padding: 30px 0 100px;}
.reser_complete h2.tit {font-size: 40px; text-align: center;}

.reser_complete .top {margin: 85px auto 0; width: 645px; text-align: center;}
.reser_complete .top .aca_name {margin: 0 0 62px;}
.reser_complete .top .aca_name strong {font-size: 24px; display: inline-block; border: 4px solid #87cefa; border-radius: 38px; width: 340px; line-height: 72px;}

.reser_complete .top .reser_info {border-top: 3px solid #1d1d1d; border-bottom: 3px solid #1d1d1d;}
.reser_complete .top .reser_info dl {display: table; width: 100%; text-align: left;}
.reser_complete .top .reser_info dt,
.reser_complete .top .reser_info dd {display: table-cell; vertical-align: middle; border-bottom: 1px solid #999; padding: 16px 0;}
.reser_complete .top .reser_info dl:last-child dt,
.reser_complete .top .reser_info :last-child dd {border-bottom: 0;}

.reser_complete .top .reser_info dt {width: 160px; font-size: 20px; font-weight: 500;}
.reser_complete .top .reser_info dd {font-size: 20px; font-weight: bold; padding-left: 90px;}

.reser_complete .reser_location {text-align: center; margin: 65px 0 45px;}
.reser_complete .reser_location .img_box {height: 446px; overflow: hidden;}
.reser_complete .reser_location .img_box img {width: 100%; display: block;}
.reser_complete .reser_location p {font-size: 20px; font-weight: 500; margin: 45px 0 0;}

.reser_complete .aca_info {}
.reser_complete .aca_info .box {background: rgba(135, 206, 250, .2); width: 645px; margin: 0 auto; border-radius: 17px; padding: 35px 37px; box-sizing: border-box;}
.reser_complete .aca_info .box strong {font-size: 24px; display: block; padding: 0 0 20px;}
.reser_complete .aca_info .box p {font-size: 20px; font-weight: 500;}
.reser_complete .aca_info .box p:last-child {}

.pop_bg.agree {}
.pop_bg.agree .pop_wrap {max-width: 700px;}
.pop_bg.agree .pop_wrap .pop_cover .btn_center_box button {background: #87cefa;}
.layer_agree {padding: 32px 32px 0;}
.layer_agree h3 {padding: 0 0 10px; font-size: 18px;}
.layer_agree p {font-size: 16px;}
.layer_agree > div {margin: 0 0 30px;}
.layer_agree > div:last-child {margin: 0;}




@media (max-width: 900px){
	.reser_top h2 {margin: 0 0 65px; font-size: 35px;}
	.reservation_wrap h3.tit {font-size: 25px;}
	.reser_top > p.reser_date {font-size: 25px; margin: 0 0 25px;}

	.reser_calendar {padding: 0 20px;}
	.calendar_wrap {width: 100%;}
	.calendar_wrap .top .current_month {font-size: 22px;}

	.month_box th,
	.month_box td {font-size: 22px;}
	.month_box td span {line-height: 40px;}
	.month_box .end span {height: 40px; width: 40px;}
	.month_box .selected span {height: 40px; width: 40px;}
	.month_box td strong {font-size: 12px;}

	.calendar_info {margin: 40px 0 0;}
	.calendar_info ul li span {font-size: 15px; padding-left: 30px;}
	.calendar_info ul li span:after {width: 23px; height: 23px;}
	.calendar_info ul li {margin-right: 50px;}

	.reser_time {padding: 0 10px;}
	.reser_time .time_list {width: 100%;}
	.reser_time .time_list ul li {width: 33.33%; margin-right: 0; padding: 0 10px; box-sizing: border-box;}
	.reser_time .time_list ul li span {padding: 20px 0; font-size: 19px;}

	.reser_input {width: 100%; padding: 0 20px; box-sizing: border-box;}

	.reser_input .input_wrap > p span {font-size: 18px;}
	.reser_input .input_wrap .input_box input {height: 50px; font-size: 18px;}
	.btn_white, .btn_aqua {height: 36px; width: 120px; font-size: 16px;}

	.reser_txt {width: 100%; padding: 0 20px; box-sizing: border-box;}
	.reser_txt .textarea_box textarea {height: 200px; font-size: 18px; padding: 12px 20px;}
	.reser_txt > p {font-size: 18px;}

	.reser_subject {width: 100%; padding: 0 20px; box-sizing: border-box;}
	.reser_subject ul {margin: 0;}

	.reser_agree {width: 100%; padding: 0 20px; box-sizing: border-box;}
	.reser_agree .box {padding: 25px 30px;}
	.reser_agree .box dl {margin-bottom: 30px;}
	.reser_agree .box dt strong {font-size: 20px;}
	.reser_agree .box dt strong a {font-size: 14px;}
	.reser_agree .box dd p {font-size: 16px;}

	.reser_agree2 {width: 100%; padding: 0 20px; box-sizing: border-box;}
	.reser_agree2 .box {padding: 25px 30px;}
	.reser_agree2 .box dl {margin-bottom: 30px;}
	.reser_agree2 .box dt strong {font-size: 20px;}
	.reser_agree2 .box dt strong a {font-size: 14px;}
	.reser_agree2 .box dd p {text-align: left; font-size: 16px;}

	.btn_agree {width: 300px; height: 60px; font-size: 18px;}
	.btn_reset {width: 300px; height: 60px; font-size: 18px;}

	.reser_complete h2.tit {font-size: 35px;}
	.reser_complete .top {width: 100%; padding: 0 20px; box-sizing: border-box; margin-top: 40px;}
	.reser_complete .reser_location .img_box {height: 400px;}
	.reser_complete .reser_location p {font-size: 18px; margin-top: 20px;}
}

@media (max-width: 680px){
	.reser_complete h2.tit {font-size: 25px;}
	.reser_complete .top .aca_name strong {font-size: 18px; width: 200px; line-height: 50px; font-size: 15px;}
	.reser_complete .top .aca_name {margin: 0 0 30px;}
	.reser_complete .top .reser_info dt, .reser_complete .top .reser_info dd {padding: 10px 0; font-size: 15px;}
	.reser_complete .reser_location {margin: 30px 0 20px;}
	.reser_complete .reser_location .img_box {height: auto;}
	.reser_complete .reser_location p {font-size: 13px; padding: 0 20px;}
	.reser_complete .aca_info {padding: 0 20px;}
	.reser_complete .aca_info .box {width: 100%; padding: 20px;}
	.reser_complete .aca_info .box strong {font-size: 18px; padding: 0 0 10px;}
	.reser_complete .aca_info .box p {font-size: 15px;}

}

@media (max-width: 600px){
	.reser_top {margin-bottom: 65px;}
	.reser_top h2 {font-size: 25px; margin: 0 0 30px;}
	.reservation_wrap h3.tit {font-size: 20px; padding: 0 0 15px; letter-spacing: -0.5px;}
	.reser_top > p.reser_date {font-size: 20px; margin: 0 0 20px;}
	.calendar_wrap {padding: 20px;}
	.calendar_wrap .top .current_month {font-size: 18px;}
	.calendar_wrap .top .prev_btn, .calendar_wrap .top .next_btn {width: 30px; height: 30px;}
	.calendar_wrap .top {margin: 0 0 20px;}

	.month_box th,
	.month_box td,
	.month_box .selected span {font-size: 18px;}
	.month_box td span {line-height: 30px;}
	.month_box .end span,
	.month_box .selected span {width: 30px; height: 30px;}
	.calendar_info {margin: 30px 0 0;}
	.calendar_info ul li span:after {width: 18px; height: 18px; top: 2px;}
	.calendar_info ul li span {padding-left: 25px; font-size: 13px;}
	.calendar_info ul li {margin-right: 30px;}

	.reser_time {}
	.reser_time .time_list ul li {margin-bottom: 10px;}
	.reser_time .time_list ul li span {padding: 10px 0; font-size:15px;}

	.reser_input {margin-bottom: 45px;}
	.reser_input .input_wrap > p span {font-size: 16px;}
	.reser_input .input_wrap .input_box .btn_delete {right: 10px;}
	.reser_input .input_wrap .input_box input {padding: 0 10px; font-size: 16px;}
	.btn_white, .btn_aqua {font-size: 14px; width: 100px;}

	.reser_txt {margin-bottom: 65px;}
	.reser_txt .textarea_box textarea {font-size: 16px; height: 150px;}
	.reser_txt > p {font-size: 14px;}
	.reser_txt .textarea_box {margin: 0 0 7px;}

	.reservation_wrap h3.tit span {font-size: 16px;}
	.reser_subject {margin-bottom: 65px;}
	.reser_subject ul li label {font-size: 14px;}
	.reser_subject ul li {width: 25%;}
	.reser_subject ul.write_chk li {width: 33.33%;}

	.reser_agree {margin-bottom: 20px;}
	.reser_agree .box {padding: 20px;}
	.reser_agree .box dt strong {font-size: 16px;}
	.reser_agree .box dt strong a {font-size: 11px;}
	.reser_agree .box dt {padding: 0 0 7px;}

	.reser_agree .box dd p {font-size: 12px;}
	.reser_agree .box dl {margin-bottom: 25px;}

	.reser_agree2 {margin-bottom: 20px;}
	.reser_agree2 .box {padding: 20px;}
	.reser_agree2 .box dt strong {font-size: 16px;}
	.reser_agree2 .box dt strong a {font-size: 11px;}
	.reser_agree2 .box dt {padding: 0 0 7px;}

	.reser_agree2 .box dd p {text-align: left; font-size: 12px;}
	.reser_agree2 .box dl {margin-bottom: 25px;}

	.btn_agree {width:250px; height: 50px; font-size: 15px;}
	.btn_reset {width:250px; height: 50px; font-size: 15px;}

	.layer_agree h3 {font-size: 15px;}
	.layer_agree p {font-size: 13px;}
	.layer_agree > div {margin: 0 0 15px;}
}

@media (max-width: 400px){
	.reser_input .input_wrap .input_box input {font-size: 13px;}
}