@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&family=Noto+Sans+SC:wght@300&display=swap');

body { font-family: "Noto Sans KR","Noto Sans SC","MalgunGothic","돋움", dotum, sans-serif;  font-weight: 300;}
.NSB { font-weight: 400;}
.contents { max-width:1200px; width:100%; padding:0;padding-bottom: 120px; }
.contents a { color:#3d3d3d; text-decoration:none;}
.contents a.order:hover { color:#ff5200;}

.sub_contents h4 { line-height:30px; font-family: "Noto Sans KR", sans-serif;}
.sub_contents h4:before { top:0;}
@media screen and (max-width: 1100px) { .sub_contents h4 { line-height:22px;}}

.p_reserve_box { margin-bottom:50px; display:inline-block; width:100%;}

.p_reserve_box > div { float:left; width:24%; min-height:1055px; box-sizing:border-box; border:1px solid #ddd; margin-left:1.3333%;}
.p_reserve_box > div:first-child { margin-left:0;}
.p_reserve_box > div > ul {list-style:none; padding:0; margin:0;}
.p_reserve_box > div > ul > li > a { display:block; min-height:60px; line-height:20px; border-bottom:1px solid #eee; padding:20px 30px 20px; box-sizing:border-box; width:100%; word-break:break-word; transition:ease-in-out 0.3s;}
.p_reserve_box > div > ul > li > a:hover { background-color:#dde9f7;}
.p_reserve_box > div > ul > li > a.select { background-color:#dde9f7; font-weight: 400;}

.sub_contents .p_reserve_box h5 { text-align:center; margin:0; padding:0; line-height:59px; height:59px; background-color:#f5f5f5; border-bottom:1px solid #eee; font-family: "Noto Sans KR", sans-serif;}
.sub_contents .p_reserve_box h5:before { content:""; position:absolute; left:-1px; top:-1px; padding-right:2px; transform: none; height:2px; width:100%;}

.p_reserve_box .program_date ul li { text-align:center;}
.p_reserve_box .program_date .date_pager { position:relative; width:80%; margin:10px auto 0;}
.p_reserve_box .program_date .date_pager > a { display:block; position:absolute; width:80px; height:44px; top:11px; border:1px solid #ccc; line-height:44px; text-align:center; transition:ease-in-out 0.3s;}
.p_reserve_box .program_date .date_pager > a:hover { background-color:#dde9f7;}
.p_reserve_box .program_date .date_pager > a.prev { left:0; padding-left:5px;}
.p_reserve_box .program_date .date_pager > a.next { right:0; padding-right:5px;}
.p_reserve_box .program_date .date_pager > a:after  { content:""; display:block; width:6px; height:11px; position:absolute; top:50%; margin-top:-5.5px;  background:url("/resources/img/reserve_id.png") no-repeat }
.p_reserve_box .program_date .date_pager > a.prev:after { background-position:-63px 0; left:20px;}
.p_reserve_box .program_date .date_pager > a.next:after { background-position:-94px 0; right:20px;}

.p_reserve_box .program_time ul li a span { display:block;}
.p_reserve_box .program_time ul li a span.time { float:left;}
.p_reserve_box .program_time ul li a span.rest { float:right;}

.sub_contents .p_reserve_box .program_total h5 { background-color:#333; color:#fff; z-index:2;}
.sub_contents .p_reserve_box .program_total h5:before { content:""; position:absolute; left:0; top:-1px; padding-right:0; transform: none; height:2px; width:100%; }
.sub_contents .p_reserve_box .program_total ul { box-sizing:border-box;}
.sub_contents .p_reserve_box .program_total ul.info { background-color:#f5f5f5; padding:30px 30px 14px 30px; }
.sub_contents .p_reserve_box .program_total ul li { margin-bottom:14px;}
.sub_contents .p_reserve_box .program_total ul li span { display:block;}
.sub_contents .p_reserve_box .program_total ul li span.tt { font-size:14px; color:#304896; margin-bottom:5px;}
.sub_contents .p_reserve_box .program_total ul li span { font-size:16px;font-weight:bold;}

.sub_contents .p_reserve_box .program_total ul.info_write { padding:23px 30px 5px 30px;}
.sub_contents .p_reserve_box .program_total ul.info_write li { position:relative; clear:both;}
.sub_contents .p_reserve_box .program_total ul.info_write li label { display:block; font-size:14px; margin-bottom:10px; }
.sub_contents .p_reserve_box .program_total ul.info_write li input { width:100%; box-sizing:border-box; background-color:#fff; border:1px solid #ccc; height:40px; line-height:40px; padding:0 10px;}

.sub_contents .p_reserve_box .program_total ul.info_write li .txt_info  { position:relative; display:inline-block; float:right; margin:0;}
.sub_contents .p_reserve_box .program_total ul.info_write li .txt_info a { display:block;  font-size:13px; padding:3px 15px; margin:5px 3px 10px 0; min-height:inherit; border-bottom:none;  background-color:#ddd; border-radius:50px; width:auto; transition:ease-in-out 0.3s;}
.sub_contents .p_reserve_box .program_total ul.info_write li .txt_info a:hover { background-color:#6f6f6f; color:#fff;}
.sub_contents .p_reserve_box .program_total ul.info_write li .txt_info span.t_box { display:none;  position:absolute; top:32px; left:0;  font-size:13px; width:120px; padding:10px; background-color:#dde9f7; z-index:5; border:1px solid #ddd; }
.sub_contents .p_reserve_box .program_total ul.info_write li .txt_info:first-child span.t_box { left:-80px;}
.sub_contents .p_reserve_box .program_total ul.info_write li .txt_info:hover span.t_box { display:block;}

.sub_contents .p_reserve_box .program_total ul.info_write .passenger .tt { color:inherit; margin-bottom:10px;}
.sub_contents .p_reserve_box .program_total ul.info_write .passenger input { width:100%;}

.sub_contents .p_reserve_box .program_total ul.info_write .passenger button { position:absolute; top:35px; right:0; border:1px solid #ccc; background-color:#fff; cursor:pointer; transition:all .3s; text-indent:-99999px; width:30px; height:30px; transition:ease-in-out 0.3s;}
.sub_contents .p_reserve_box .program_total ul.info_write .passenger label { position:absolute; height:40px; line-height:40px; left:10px;}
.sub_contents .p_reserve_box .program_total ul.info_write .passenger button.ps_plus { margin-right:41px;}
.sub_contents .p_reserve_box .program_total ul.info_write .passenger button.ps_minus { margin-right:6px;}
.sub_contents .p_reserve_box .program_total ul.info_write .passenger button:after { content:""; display:block; width:11px; height:8px; position:absolute; top:50%; left:50%; margin-top:-4px; margin-left:-5.5px;  background:url("/resources/img/reserve_id.png") no-repeat  }
.sub_contents .p_reserve_box .program_total ul.info_write .passenger button:hover {background-color:#dde9f7;}
.sub_contents .p_reserve_box .program_total ul.info_write .passenger button.ps_minus:after { background-position:-31px 0; }
.sub_contents .p_reserve_box .program_total ul.info_write .passenger button.ps_plus:after { background-position:0 0; }



.sub_contents .p_reserve_box .program_total p.text { padding:0 32px 14px 32px; margin:0; font-size:14px;}
.sub_contents .p_reserve_box .program_total .p_reserve_btn {padding:0 32px; margin-bottom:30px; margin-top:5px;}
.sub_contents .p_reserve_box .program_total .p_reserve_btn a { display:block; width:100%; background-color:#cc3159; text-align:center; color:#fff; height:50px; line-height:50px; transition:ease-in-out 0.3s;}
.sub_contents .p_reserve_box .program_total .p_reserve_btn a:hover { background-color:#bb2c51;}

.sub_contents .p_reserve_box .program_total p.agreement { margin-top:0px; padding:0 32px; position:relative; font-size:14px; height:18px;}
.sub_contents .p_reserve_box .program_total p.agreement label { position:absolute; top:-2px; left:54px; width: auto; line-height:20px; height:20px; }
.sub_contents .p_reserve_box .program_total p.agreement input[type="checkbox"]:not(.chk) + label { display: block;  border:none; vertical-align:middle;}
.sub_contents .p_reserve_box .program_total p.agreement input[type="checkbox"]:not(.chk) { position:relative; width:18px; height:18px; border:1px solid #ddd; margin:0;}


@media screen and (max-width: 1010px) {
.p_reserve_box > div { width:49%; min-height:888px; margin-bottom:18px;}
.p_reserve_box .program_time { margin-left:0; min-height:888px;}
.p_reserve_box .program_date .date_pager { width:100%;}
.p_reserve_box .program_date .date_pager a { top:0;}
.p_reserve_box .program_date .date_pager > a.prev { left:10px;}
.p_reserve_box .program_date .date_pager > a.next { right:10px;}
}
	
@media screen and (max-width: 622px) {
	.p_reserve_box > div { width:100%; margin-left:0; min-height:inherit;}
	.p_reserve_box .program_time { min-height:inherit;}
	.p_reserve_box .program_date ul li { width:50%; float:left;}
	.p_reserve_box .program_date .date_pager > a { top:-63px; background-color:#fff; text-indent:-999999px; width:42px;}
	.p_reserve_box .program_date ul li:nth-child(1) a,
	.p_reserve_box .program_date ul li:nth-child(3) a,
	.p_reserve_box .program_date ul li:nth-child(5) a,
	.p_reserve_box .program_date ul li:nth-child(7) a,
	.p_reserve_box .program_date ul li:nth-child(9) a,
	.p_reserve_box .program_date ul li:nth-child(11) a,
	.p_reserve_box .program_date ul li:nth-child(13) a,
	.p_reserve_box .program_date ul li:nth-child(15) a { border-right:1px solid #eee;}
}

@media screen and (max-width: 380px) {.p_reserve_box .program_date ul > li > a { font-size:14px; padding: 20px 10px 20px;}}

table.basic { width:100%; border-bottom:1px solid #ddd; clear:both; border-top:2px solid #333; border-collapse:collapse;}
table.basic th { padding:20px; background-color:#f5f5f5; }
table.basic td {border-bottom:1px solid #ddd; text-align:center;}
table.basic caption { display:block; height:0; width:0; text-indent:-999999px; }
table.basic .align_left { text-align:left;}
.program_mypage table.basic p.info span { display:block; line-height:22px; }
.program_mypage table.basic .p_table_btn a { display:block; width:80%; max-width:180px; text-align:center; margin:0 auto; height:45px; line-height:45px; color:#fff; }
.program_mypage table.basic .p_table_btn a:first-child { margin-bottom:9px;}
.program_mypage table.basic .p_table_btn a.red { background-color:#cc3159;}
.program_mypage table.basic .p_table_btn a.bb { background-color:#5a5a5a;}

@media screen and (max-width: 550px) {	 .program_mypage table.basic { font-size:14px;} }
@media screen and (max-width: 425px) { 
	table.basic { word-break:break-all;} 
	table.basic th { padding:15px 10px;}
}

/*r_main*/
.inquire { border:1px solid #cecece; border-right:none; border-left:none; width:100%; display:inline-block;}
.inquire h5 { width:20%; min-width:270px;  height:226px; box-sizing:border-box; padding:130px 0 0 0; background-color:#f4f4f4; margin:0; text-align:center; float:left; font-family: "Noto Sans KR", sans-serif; font-size:26px; position:relative; color:#333333;}
.inquire h5:before { content:""; display:block; position:absolute; top:52px; left:50%;  background:url("/resources/img/r_main_sp.png") no-repeat 0 0; width:70px; height:70px; margin-left:-35px; transform: none; }
.inquire_no { float:left; width:60%; margin:43px 0 0 9%;}
.inquire_no p { height:44px;    margin: 18px 0;}
.inquire_no p label { display:block; float:left; height:44px; line-height:44px; width:130px; text-align:right; margin-right:15px; font-size:18px;}
.inquire_no p input { width:50%; height:42px; border:1px solid #d5d5d5; margin-right:10px; float:left; padding:0 10px;}
.inquire_no p a { display:block; float:left; background-color:#383866; color:#fff; height:44px; line-height:44px; padding:0 45px; font-weight:400; transition:ease-in-out 0.3s;}
.inquire_no p a:hover { background-color:#2f5ec8;}

.reservation_detail { margin-top:59px; display:inline-block; width:100%;}
.reservation_detail ul { width:100%; padding:0; }
.reservation_detail ul li { float:left; width:23%;  list-style:none; margin-left:2.6%;}
.reservation_detail ul li:first-child { margin-left:0;}
.reservation_detail ul li a { display:block; border:1px solid #2f5ec8; background-color:#f4f4f4; transition:ease-in-out 0.1s;}
.reservation_detail ul li a span { display:block; text-align:center;}
.reservation_detail ul li a span.tit { font-size:22px; padding-top:28px; font-weight:400; letter-spacing:-0.5px; margin-bottom:30px;}
.reservation_detail ul li a span.ico { background:url("/resources/img/r_main_sp.png") no-repeat; height:84px; margin:0 auto 52px;}
.reservation_detail ul li.program a span.ico { width:79px; background-position:-100px 0;}
.reservation_detail ul li.pool a span.ico { width:108px; background-position:-199px 0;}
.reservation_detail ul li.lesson a span.ico { width:108px; background-position:-316px 0;}
.reservation_detail ul li.rental a span.ico { width:86px; background-position:-446px 0;}
.reservation_detail ul li a span.res:before { content:""; display:block; width:100%; height:20px; background:url("/resources/img/r_main_btbg.png") repeat-x; margin-top:-20px; position:absolute; top:0;}
.reservation_detail ul li a span.res { display:block; width:100%; height:52px; background-color:#2f5ec8; color:#fff; position:relative; line-height:39px; font-size:19px; font-weight:400;}

.reservation_detail ul li a:hover { background-color:#fff; border:1px solid #383866;}
.reservation_detail ul li a:hover span.res:before { background:url("/resources/img/r_main_btbg_hover.png") repeat-x; }
.reservation_detail ul li a:hover span.res { background-color:#383866;}

.agreement_w { margin-bottom:30px; }
.agreement_w h5 {font-family: "Noto Sans KR", sans-serif; font-size:26px; margin:70px 0 25px 0; padding:0;}
.agreement_w h5:before { display:none;}
.agreement_w .box { border:1px solid #cecece; height:240px; width:100%; box-sizing:border-box; padding:25px; overflow:scroll; }
.agreement_w .box p { margin:0; font-size:15px;}
.agreement_w .agre { background-color:#eaeaea; width:100%; height:58px; border:1px solid #cecece; border-top:none; box-sizing:border-box; text-align:center; display:inline-block;}
.agreement_w .agre p { width:240px; margin:15px auto 0;}
.agreement_w .agre input[type="checkbox"]:not(.chk) + label {   border:none; vertical-align:middle; float:left; width:210px; background-color: inherit; text-align:center;}
.agreement_w .agre input[type="checkbox"]:not(.chk) { position:relative; width:18px; height:18px; border:1px solid #ddd; margin:4px 0 0 0;}

@media screen and (max-width: 1040px) {
	.inquire_no { margin-left:5%;}
	.inquire_no p input { width:37%;}
}

@media screen and (max-width: 850px) {
	.inquire h5 { width:100%; float:none; height:215px;}
	.inquire_no { margin:40px auto; float:none; width:480px;}
	.reservation_detail ul li a span.tit { font-size:17px;}
}
@media screen and (max-width: 620px) {
	.reservation_detail ul li { width:48%; margin-left:3%; margin-bottom:20px;}
	.reservation_detail ul li.lesson { margin-left:0;}
	.inquire_no { width:285px;}
	.inquire_no p input { width:34%;margin-right:0;}
	.inquire_no p label { width:90px;}
	.inquire_no p a { padding: 0 15px;}
}