@charset "utf-8";
/************************************************************************
 * filename : sub_style5.css
 * description :JUNO ACADEMY >RESERVATION > 서브 페이지
 * date : 2017.09.25
************************************************************************/
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 300;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
 }
/* reservation - index */

#reservation .section_tit .bar{display: block;width: 1px;background: #b2b2b2;height: 60px;margin: 38px auto 43px auto}
#reservation .section_filter{text-align: center;margin-bottom: 57px;}
#reservation .section_filter ul{overflow: hidden;display: inline-block;}
#reservation .section_filter ul li{float: left;width: 240px;height: 40px;box-sizing: border-box;margin-left: 10px;border:1px solid #93959a;text-align: center;line-height: 40px}
#reservation .section_filter ul li:first-child{margin-left: 0;}
#reservation .section_filter ul li a{display: block;font-size:18px;color:#231f20;font-weight: 300}
#reservation .section_filter ul li a br{display: none}
#reservation .section_filter ul li.active {background: #998778;border:1px solid #998778;}
#reservation .section_filter ul li.active a{display: block;font-weight: 600;color:#fff;}
#reservation .section_content{overflow: visible;padding-bottom:100px;}
#reservation .sec1_top .reservation_slide .owl-prev{position: absolute;left:-55px;;top:50%;width:25px;margin-top: -23.5px;}
#reservation .sec1_top .reservation_slide .owl-next{position: absolute;right:-55px;top:50%;;width:25px;margin-top: -23.5px;}
#reservation .sec1_top .reservation_slide .owl-prev img,
#reservation .sec1_top .reservation_slide .owl-next img{width: 100%;}

#reservation .reservation_info{margin-top:90px;}
#reservation .reservation_info:after {content:'';display:block;clear:both}
#reservation .reservation_info .ri_top {position:relative;height:31px}
#reservation .reservation_info .ri_top strong{display: block;font-size:30px;font-weight: 600;color:#231f20;position: relative;padding-bottom: 14px;margin-bottom: 43px;line-height: 30px}
#reservation .reservation_info .ri_top strong .bar{position: absolute;left:0;bottom:0;width: 50px;height: 1px;background: #000;}
#reservation .reservation_info .ri_top .sec1_mid_sel{position: absolute;right:249px;top:0;overflow: hidden}
#reservation .reservation_info .ri_top .sec1_mid_sel .sel{position: relative;}
#reservation .reservation_info .ri_top .sec1_mid_sel .sel select{background-color: #4c4c4c;color:#fff;padding:10.5px;width: 200px;text-align: center;  background-image: url('/static_resources/images/junoacademy/sub/rentalinquiry/menu_arr_down.png') ;background-repeat: no-repeat;background-size:14px;background-position: 180px center;border:0;border-radius: 0px; -webkit-appearance: none;-moz-appearance: none;appearance: none;}
#reservation .reservation_info .ri_top .sec1_mid_tel{position: absolute;right:0;top:0;font-size:18px;line-height: 37px;background: #231f20;color:#fff;font-weight: 600;width: 239px;text-align: center;}
#reservation .reservation_info .sec1_mid_date{position: absolute;right:0;top:0;background: #231f20;color:#fff;font-size:18px;line-height: 37px;width: 239px;text-align: center;}
#reservation .reservation_info a{color:#fff;position: absolute;top:0;}
#reservation .reservation_info a.date_prev{left:20px;}
#reservation .reservation_info a.date_next{right:20px;}
#reservation .reservation_info .ri_left{float: left;width: 50%;}
#reservation .reservation_info .ri_left table{table-layout: fixed;width: 100%;	}
#reservation .reservation_info .ri_left table th{vertical-align: middle;width: 13%;background: #998778;text-align: center;color:#fff;font-size:16px;font-weight: 600;border-bottom: 5px solid #fff;}
#reservation .reservation_info .ri_left table th span{min-height: 44px;line-height: 44px}
#reservation .reservation_info .ri_left table td{vertical-align: middle;width: 87%;border-bottom: 5px solid #fff;}
#reservation .reservation_info .ri_left table td span{font-size:18px;color:#231f20;font-weight: 300;padding:0 25px;box-sizing: border-box}
#reservation .reservation_info .ri_left table td .roomname {font-weight:800}
#reservation .reservation_info .ri_left table .row1 td,
#reservation .reservation_info .ri_left table .row3 td{background: #dedede;}
#reservation .reservation_info .ri_left table .row3 td{padding: 10px 0;}
#reservation .reservation_info .ri_left table td span.vat{margin: 7px 0 0 0;font-size:14px;color:#666;}
#reservation .reservation_info .ri_left table .row4 td {padding:7px 0}
#reservation .reservation_info .ri_left table .row4 td span{line-height: 1.5em}
#reservation .reservation_info .ri_left table .row4 dt+dd{margin-top: 0;}
#reservation .reservation_info .ri_left table .row4 dd{padding:0 25px 0 35px;position: relative;line-height: 24px;font-size:18px;color:#231f20;font-weight: 300;margin-top: 8px;word-break: keep-all}
#reservation .reservation_info .ri_left table .row4 dd:after{content: '';display: block;width: 5px;height: 5px;;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;background: #998778;position: absolute;left:25px;top:9.5px}
#reservation .reservation_info .ri_left table span{display: block}
#reservation .reservation_info .ri_right{position:relative;float: right;text-align: right;width: 50%;}
#reservation .reservation_info .ri_right img{max-width: 100%}

#reservation .sec1_btm .state_btn{width: 170px;height: 40px;text-align: center;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;font-size:16px;font-weight: 300;display: block;margin:80px auto 170px auto;background: #231f20;color:#fff;line-height: 40px;position: relative !important}
#reservation .reservation_head {position:relative;margin-top:50px;line-height:1}
#reservation .reservation_head .ttl {position:relative;font-size:30px;font-weight:600;color:#231f20}
#reservation .reservation_head .ttl:after {content:'';display:block;position:absolute;bottom:-14px;left:0;width:50px;height:1px;background:#000;}
#reservation .reservation_head .tel {position:absolute;top:0;right:0;font-size:18px;line-height:37px;color:#fff;font-weight:600;width:239px;text-align:center;background:#231f20;}
#reservation .subroom.fir .reservation_info {margin-top:56px}

/* reservation - state */
#reservation .reservation_state table{width: 100%;table-layout: fixed;text-align: center;border-spacing:1px}
#reservation .reservation_state table th{width: 20%;background: #6e6e6e;text-align:center;vertical-align:middle}
#reservation .reservation_state table th span{display:block;font-size:16px;font-weight: 600;color:#fff;line-height: 44px}
#reservation .reservation_state table td{width: 20%;text-align:center;vertical-align:middle;border:1px solid #e1e1e1;background: #f3f3f3;}
#reservation .reservation_state table tr.bgfff td{background: #fff;}
#reservation .reservation_state table td span{display:block;line-height: 44px;font-size:18px;color:#231f20;font-weight: 300;padding:0 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
#reservation .reservation_state table td[colspan="5"] span{font-weight: 600;}
#reservation .reservation_state table td.gb1{background: #ed8f84 !important;}
#reservation .reservation_state table td.gb2{background: #edc484 !important;}
#reservation .reservation_state table td.gb3{background: #84ede7 !important;}
#reservation .reservation_state>p{margin-top: 21px;color:#6e6e6e;font-weight: 300;position: relative;padding-left: 27px;}
#reservation .reservation_state>p span{width: 20px;height: 1px;background: #8d8b8b;position: absolute;left:0;bottom:0;}
#reservation .m_state{display: none;}
#reservation .m_state_item:first-child{margin-top: 0;}
#reservation .m_state_item{border:1px solid #eaeaea;box-sizing: border-box;margin-top: 15px;padding-bottom: 6px;position: relative}
#reservation .m_state_item .date{word-break: keep-all;font-size: 16px;font-weight: 600;color: #333;line-height: 25px;background: #f4f4f4;position: relative;padding-left: 14px;padding: 4px 10px 4px 14px;margin-bottom: 6px;}
#reservation .m_state_item .date .bar{background: #ed1c24;width: 7px;height: 14px;position: absolute;left:0;top:9.5px}
#reservation .m_state_item p{padding:2px 10px;font-size:13px}
#reservation .m_state_item p strong,
#reservation .m_state_item p span{vertical-align: middle}
#reservation .m_state_item p strong{width: 60px;font-weight: 600;display: inline-block;}
#reservation .m_state_item .state{position: absolute;right:10px;top:4px;width: 50px;line-height: 25px;text-align: center;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;font-size: 13px;font-weight: 600}
#reservation .m_state_item .state.gb1{background: #ed8f84 !important;}
#reservation .m_state_item .state.gb2{background: #edc484 !important;}
#reservation .m_state_item .state.gb3{background: #84ede7 !important;}

#reservation .m_state_item.no_data{text-align: center;font-weight: 600;font-size:14px;background: #f4f4f4;padding:10px 0}

/* reservation - form */
#reservation .reservation_form{display: none;overflow: hidden;font-size:16px}
#reservation .reservation_form .rf_left{float: left;width: 700px;}
#reservation .reservation_form .rf_right{float:right;width: 700px;}
#reservation .reservation_form span{display: block;color:#fff;font-size:16px;background: #998778;text-align: center;font-weight: 600;line-height: 44px}
#reservation .reservation_form .rf_left div{overflow: hidden;margin-top: 5px;}
#reservation .reservation_form .rf_left div:first-child{margin-top: 0;}
#reservation .reservation_form .rf_left span{float: left;width: 130px;margin-right: 6px;}
#reservation .reservation_form .rf_left p{float: left;width: 564px;box-sizing: border-box;border:1px solid #e1e1e1;height: 44px;background: #fff;}
#reservation .reservation_form .rf_left p input{box-sizing: border-box;width: 99%;height: 42px;line-height: 42px;border:0;padding:10px;font-size:16px}
#reservation .reservation_form .rf_right div{height: 240px;box-sizing: border-box;margin-top: 5px;border:1px solid #e1e1e1;padding:10px;border-radius: 0;-webkit-appearance: none;font-size:16px;line-height: 22px;background: #fff;}
#reservation .reservation_form .rf_right div dt+dd{margin-top: 0;}
#reservation .reservation_form .rf_right div dd{padding-left: 20px;position: relative;margin-top: 7px;}
#reservation .reservation_form .rf_right div dd:after{content: '';display: block;position: absolute;left:0;top:9.5px;width: 5px;height: 5px;background:#333;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#reservation .reservation_form .rf_left #r_period1{vertical-align: middle;width:200px;height: 41px;line-height:41px;background: url(/static_resources/images/junoacademy/sub/rentalinquiry/calendar_icon.png) no-repeat 5px center;background-size: 25px 25px;padding: 10px 10px 10px 40px;font-size:16px}
#reservation .reservation_form .rf_left #r_period1+span,
#reservation .reservation_form .rf_left #r_use_time1+span{width: auto;vertical-align: middle;float: none;display: inline-block;color:#333;background: none;margin:0;line-height: normal;}
#reservation .reservation_form .rf_left #r_period2{vertical-align: middle;width:200px;height: 41px;line-height:41px;background: url(/static_resources/images/junoacademy/sub/rentalinquiry/calendar_icon.png) no-repeat 5px center;background-size: 25px 25px;padding: 10px 10px 10px 40px;font-size:16px}
#reservation .reservation_form .rf_left #r_use_time1_h,
#reservation .reservation_form .rf_left #r_use_time1_m,
#reservation .reservation_form .rf_left #r_use_time2_h,
#reservation .reservation_form .rf_left #r_use_time2_m{height: 30px;font-size:16px;margin-top: 6px;;margin-right: 4px;margin-left: 6px;}
#reservation .reservation_form .rf_left #r_use_time1_m+span{margin:0 10px;background: none;color: #333;width: auto;float: none;display: inline-block;}
#reservation .reservation_form .rf_left .r_gb{padding-top: 12px;padding-left: 10px;}

.tab_area {font-size: 0; position: absolute;right: 0; bottom: 0;border:1px solid gray; border-bottom: 0;}
.tab_area li{background: white; display: inline-block; color: black; box-sizing: border-box; height:30px; width:100px; text-align: center; line-height: 30px; font-size: 16px;cursor: pointer;}
.tab_area li.r {border-right: 1px solid gray;}
.tab_area li.active{background: #231f20; color: white;}
#calendar {width: 100%;}
#calendar td, #calendar th {background: white;}

@media all and (max-width:1440px){
	#reservation .reservation_info .ri_left{width: 49%;}
	#reservation .reservation_info .ri_left table th{width: 20%;font-size:14px}
	#reservation .reservation_info .ri_left table td{width: 80%;}
	#reservation .reservation_info .ri_left table td span{font-size:14px;padding:0 10px;word-break: keep-all}

	#reservation .reservation_form .rf_left,
	#reservation .reservation_form .rf_right{width: 500px;}

	#reservation .reservation_form .rf_left p{width: 364px;}
	#reservation .reservation_form .rf_left #r_period1,
	#reservation .reservation_form .rf_left #r_period2{width: 130px;}


}

@media all and (max-width:1024px){
	#reservation .section_filter ul li {width: 184.5px;}
	#reservation .section_filter ul li a{font-size: 16px;}
	#reservation .section_filter{margin-bottom: 30px;}
	#reservation .sec1_mid{margin:20px auto 50px auto}
	#reservation .sec1_mid .sec1_mid_sel .sel select{width: 180px;background-position:161px center}
	#reservation .sec1_mid .sec1_mid_tel{font-size:14px;width: 180px;}
	#reservation .reservation_info{margin-top:40px;}
	#reservation .reservation_info .ri_left,
	#reservation .reservation_info .ri_right{float: none;width:700px;margin:0 auto}
	#reservation .reservation_info .ri_right{text-align: center}
	#reservation .reservation_info .ri_right {overflow:hidden;padding-bottom:32px}

	#reservation .reservation_state table th span{font-size:14px;}
	#reservation .reservation_state table td span{font-size:14px}

	#reservation .reservation_form span{font-size:14px}
	#reservation .reservation_form .rf_left,
	#reservation .reservation_form .rf_right{width: 100%;float: none}
	#reservation .reservation_form .rf_left p{width: 632px;font-size: 14px;}
	#reservation .reservation_form .rf_left p input{font-size:14px}
	#reservation .reservation_form .rf_left #r_period1,
	#reservation .reservation_form .rf_left #r_period2{font-size:14px}
	#reservation .reservation_form .rf_left #r_use_time1_h,
	#reservation .reservation_form .rf_left #r_use_time1_m,
	#reservation .reservation_form .rf_left #r_use_time2_h,
	#reservation .reservation_form .rf_left #r_use_time2_m{font-size:14px;}
	#reservation .reservation_form .rf_right{margin-top: 5px;}
	#reservation .reservation_form .rf_right span{margin-right: 6px;height: 194px;width: 130px;float: left;line-height: 194px}
	#reservation .reservation_form .rf_right div{height: auto;float: left;width: 632px;;font-size:14px;line-height: 18px;margin-top: 0;}

	#reservation .sec1_btm .state_btn{font-size:14px;margin:50px auto 110px auto}
}
@media all and (max-width:768px){
	#reservation .section_content{width: 100%;}
	#reservation .section_tit .bar{display: none}
	#reservation .section_filter{margin-bottom: 15px;}
	#reservation .section_filter ul{display: block;}
	#reservation .section_filter ul li {width: 24.25%;margin-left: 1%;line-height:17px;padding:5px 0;height: auto}
	#reservation .section_filter ul li:first-child+li+li,
	#reservation .section_filter ul li:first-child+li+li+li{line-height: 34px}
	#reservation .section_filter ul li a{font-size: 13px;}
	#reservation .section_filter ul li a br{display:block}
	#reservation .reservation_slide .owl-dots{text-align: center;margin:4px 0}
	#reservation .reservation_slide .owl-dot{display: inline-block;float: none;background:none;border:1px solid #e1e1e1}
	#reservation .reservation_slide .owl-dot:first-child{margin-left: 0;}
	#reservation .reservation_slide .owl-dot.active{background: #998778;border: none}
	#reservation .reservation_info .ri_left table th{width:100px;}
	#reservation .reservation_info .ri_left table span{font-size:13px}

	#reservation .p_state{display: none}
	#reservation .m_state{display:block;}
	#reservation .reservation_state>p span{bottom:initial;top:-10px}
	#reservation .reservation_state>p{padding-left: 0;;margin-top: 40px;}

	#reservation .reservation_info>strong{font-size:18px;margin-bottom: 20px;padding-bottom: 8px;}
	#reservation .reservation_form .rf_left>div>span{width: 100px !important;line-height: 35px;font-size:13px;position: absolute;left:0;top:0;}
	#reservation .reservation_form .rf_left div{position: relative}
	#reservation .reservation_form .rf_left p{width: 100%;padding-left: 100px;height: 35px;}
	#reservation .reservation_form .rf_left p input{height: 33px;line-height: 33px;padding:1px 10px}
	#reservation .reservation_form .rf_right{position: relative;}
	#reservation .reservation_form .rf_left #r_period1,
	#reservation .reservation_form .rf_left #r_period2{height: 31px;line-height: 31px;width: 130px;background-size: 17px 17px;padding: 0 0 0 26px;}
	#reservation .reservation_form .rf_left #r_period1+span{height: 35px;line-height: 35px}
	#reservation .reservation_form .rf_left #r_use_time1_h,
	#reservation .reservation_form .rf_left #r_use_time1_m,
	#reservation .reservation_form .rf_left #r_use_time2_h,
	#reservation .reservation_form .rf_left #r_use_time2_m{height: auto}
	#reservation .reservation_form .rf_left .r_gb{padding-left: 110px;padding-top: 8px;}
	#reservation .reservation_form .rf_left #r_use_time1_m+span{line-height: normal;margin-right: 54px;line-height: 35px;height: 35px}
	#reservation .reservation_form .rf_left .row2 span,
	#reservation .reservation_form .rf_left .row3 span{height: 70px;line-height: 70px}
	#reservation .reservation_form .rf_left .row2 p,
	#reservation .reservation_form .rf_left .row3 p{height: 70px}
	#reservation .reservation_form .rf_left .row3 p{font-size:13px}
	#reservation .reservation_form .rf_right span{display: none;}
	#reservation .reservation_form .rf_right div{width: 100%;font-size:13px;padding:0;border:0;margin-top: 10px;}
	#reservation .reservation_form .rf_right div dd{padding-left: 10px;margin-top: 4px;color:#575757}
	#reservation .reservation_form .rf_right div dd:after{width: 3px;height: 3px;top:7.5px}

	#reservation .reservation_form .rf_left p input{line-height: 14px}

	#reservation .reservation_info .ri_left table td span.vat{font-size:13px}

	#reservation .reservation_head .tel {display:inline-block;width:auto;padding:0 20px;height:36px;line-height:36px;font-size:14px;}
	
}

@media all and (max-width:700px){
	#reservation .reservation_info .ri_left,
	#reservation .reservation_info .ri_right{width: 100%;}
  #reservation .reservation_info .ri_left, #reservation .reservation_info .ri_right img {height: auto;  width: 100%;}
	#reservation .reservation_info .ri_top{height: 132px;}
	#reservation .reservation_info .ri_top strong{margin-bottom: 10px;}
	#reservation .reservation_info .ri_top .sec1_mid_sel,
	#reservation .reservation_info .ri_top .sec1_mid_tel{position: static;float: left;width: 49.5%;}
	#reservation .reservation_info .sec1_mid_date{position: relative;right: initial;float: left;width: 49.5%;}
	#reservation .reservation_info .ri_top .sec1_mid_sel .sel select{width: 100%;background-position: 95% center}
	#reservation .reservation_info .ri_top .sec1_mid_sel{margin-right: 1%;margin-top: -1px;}
	#reservation .reservation_info .ri_top .sec1_mid_tel,
	#reservation .reservation_info .sec1_mid_date{font-size:13px;line-height: 36.5px;}
	#reservation .reservation_info a{font-size:18px}

	#reservation .reservation_info .ri_left table .row4 dd{padding:0 19px;font-size:14px;}
	#reservation .reservation_info .ri_left table .row4 dd:after{left:10px}
}
@media all and (max-width:340px){
	#reservation .reservation_form .rf_left #r_period1,
	#reservation .reservation_form .rf_left #r_period2{background-size:10px 10px;padding:0 0 0 20px;width: 90px;}
}
