@charset "UTF-8";
@import url('/design/common/css/NEXONLv1.css');

/* 예약관련  */
.box2 .inner { border:2px solid #ddd; margin-bottom:20px;border-top: 2px solid #03974b;}
.box2 > div { position:relative;padding: 20px 40px; background:#fff;}
.box2 > div dl {display:flex;}
.box2 > div dl dt {width: 160px;padding: 10px 0 0 0;font-size: 18px; font-weight:700;}
.box2 .cont_depth01 > li {position:relative;padding: 8px 0 0 17px;}
.box2 .cont_depth01 > li:before {content:''; position:absolute;top: 13px; left:0; width:0; height:0;border-left: 3px solid #696109;border-top: 3px solid transparent;border-bottom: 3px solid transparent; border-radius:2px;}
.box2 .cont_depth02 > li {padding-left:13px; background:url('/sj-atc/images/sub/bul_dep02.png') no-repeat 0 9px !important; margin:3px 0 !important; font-size:14px; line-height:23px;}
.box2 .red { font-weight:600; }

@media all and (max-width:1240px) {
	.box2 > div dl {display:block;}
	.box2 > div dl dt {width:100%;}
	.box2 > div dl dd {width:100%;}
	.box2 > div dl dd > ul {margin-top:0;}
}
@media all and (max-width:599px) {
	.box2 > div {padding:25px;}
}


/* 달력 공통스타일 수정주의 */
.monthTab {border:3px solid #ddd; margin-bottom:20px;}
.monthTab ul {display:table; table-layout:fixed; overflow:hidden; width:100%; border:1px solid #ccc; border-left:0; border-right:0;}
.monthTab ul li {display:table-cell; border-left:1px solid #ccc; background:#f2f2f2;}
.monthTab ul li:first-child {border-left:0;}
.monthTab ul li a {display:block; padding:7px 0; background: #f2f2f2; color:#555; text-align:center;}
.monthTab ul li:hover a,
.monthTab ul li.on a {border-bottom:2px solid #006ed2; background:#fff; color:#006ed2; font-weight:600;}
.monthTab div {position:relative; padding:15px 10px;}
.monthTab div p {text-align:center; font-size:30px; font-weight:600;}
.monthTab div a {position:absolute; color:#555; padding:0 0 0 25px; left:20px; top:50%; transform:translateY(-50%);}
.monthTab div a:before {content:''; position:absolute; top:50%; left:0; width:7px; height:7px; border-bottom:2px solid #2b2b2b; border-right:2px solid #2b2b2b; transform:translateY(-50%) rotate(135deg);}
.monthTab div a.next {padding:0 25px 0 0; left:inherit; right:20px;}
.monthTab div a.next:before {right:0; left:inherit; transform:translateY(-50%) rotate(-45deg);}
@media all and (max-width:599px){
  .monthTab ul li a {font-size:13px;}
}
/* 놀이터달력 */
.reserList {position:relative;}
.reserList .monthTab ul li:hover a,
.reserList .monthTab ul li.on a {border-bottom:2px solid #37752e; color:#37752e;}
.reserList .cal {position:relative; width:100%; border:1px solid #ccc;}
.reserList .cal > p {font-size:25px; text-align:center; line-height:1.5; margin:15px;}
.reserList .cal > p span {display:block; font-size:16px; color:#999; letter-spacing:0;}
.reserList .cal table {width:100%; table-layout:fixed; text-align:center; font-size:16px;}
.reserList .cal table th {border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:10px 0; width:14.28%; background:#eee;}
.reserList .cal table td {position:relative; height:100px; padding:35px 10px 10px; text-align:left; vertical-align:top; border-left:1px dashed #ccc; border-top:1px dashed #ccc; }
.reserList .cal table tr:first-child td {border-top:0;}
.reserList .cal table tr td:first-child {border-left:0;}
.reserList .cal table td > span {position:absolute; left:10px; top:10px;}
.reserList .cal table td {line-height:22px; min-height:44px; overflow:hidden;}
.reserList .cal table td a {position:relative; display:block; color:#555; text-align:center; background:#eee; margin:5px 0; padding:2px 7px; line-height:1.4; font-size:13px; }
.reserList .cal table td a span {display:block; font-weight:700;}
.reserList .cal table td a:hover {background:#37752e; color:#fff; }
.reserList .cal table td.on {border:2px solid #6d6d6d;}
.reserList .cal table td.available {background:#ccedcc;}

@media all and (max-width:599px){
  .reserList .monthTab ul li a {font-size:12px;}
  .reserList .cal {overflow-x:scroll;}
  .reserList .cal table {width:599px;}
}
/* 대관달력 */
.calendar {position:relative;}
.calendar .cal {position:relative; float:left; width:40%; border:1px solid #ccc; padding:20px 30px;}
.calendar .cal:after {content:''; position:absolute; left:0; top:90px; width:100%; height:40px; background:#006ed2; z-index:-1;}
.calendar .cal > p {font-size:25px; text-align:center; line-height:1.5; margin-bottom:15px;}
.calendar .cal > p span {display:block; font-size:12px; color:#999; letter-spacing:0;}
.calendar .cal table {width:100%; table-layout:fixed; text-align:center;}
.calendar .cal table th {color:#fff; padding:7px 0 15px; width:14.28%;}
.calendar .cal table td {padding:4px; font-size:13px;}
.calendar .cal table td span.date a {display:block; padding:7px 0; background:#eee;}
.calendar .cal table td span.date a.on {background:#333; color:#fff;}
.calendar .type1 {overflow:hidden;}
.calendar .type1 .detail {float:right; width:55%;}
.calendar .type1 .detail h4 {display:inline-block; margin:0 0 10px !important; background:none; font-size:18px !important; border:1px solid #999; line-height:1.4; padding:8px 20px; text-align:center; border-radius:20px;}
.calendar .type1 .detail dl {border-bottom:1px solid #ddd; padding:15px;}
/*
.calendar .type1 .detail dl dt span {color:#fff; padding:2px 7px; margin-right:5px; border-radius:3px;  }
.calendar .type1 .detail dl dt span.fest { background:#008921;}
.calendar .type1 .detail dl dt span.hang { background:#d34500;}
.calendar .type1 .detail dl dt span.gong {background:#006ed2;}
.calendar .type1 .detail dl dt span.jun {background:#8e2ad4;}
.calendar .type1 .detail dl dt span.state {background:#006ed2;}
.calendar .type1 .detail dl dt span.black {color:#333 !important; padding:0}
*/
.calendar .type1 .detail dl dd {color:#666; margin-top:5px;}
.noEvent {background:#f8f8f8; text-align:center; padding:50px 0;}
@media all and (max-width:1240px){
  .calendar .cal {width:48%;}
  .calendar .type1 .detail {width:48%;}
}
@media all and (max-width:768px){
  .calendar .cal {width:100%; padding:20px;}
  .calendar .cal:after {height:35px; top:84px;}
  .calendar .cal > p {font-size:20px;}
  .calendar .cal table th {padding:5px 0 12px;}
  .calendar .cal table td span {padding:3px 0;}
  .calendar .type1 .detail {width:100%;}
  .calendar .type1 .detail h4 {margin:30px auto 10px !important;}
}
/* 신청 */
.reserWrite {position:relative;}
.reserWrite legend {margin:0 0 15px; padding:15px 0 0 0; background:url('/Main/Images/saemaul/sub/i_h4.png') no-repeat left top; font-size:25px; font-weight:700; line-height:1.5;}
.reserWrite .agree {margin-bottom:30px;}
.reserWrite .agree .text {background:#f5f5f5; padding:25px; max-height:300px; overflow-y:scroll;}
.reserWrite .agree .check {background:#555; color:#fff; padding:8px 25px;}
.reserWrite .agree .check label {margin-left:5px;}
.reserWrite .align {position:relative;}
.reserWrite .align .info {position:absolute; right:0; top:21px;}
.reserWrite dl:first-of-type {position:relative;}
.reserWrite dl:first-of-type:before {content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:#0561b7;}
.reserWrite dl {display:table; table-layout:fixed; width:100%; min-height:80px; padding:15px; border-bottom:1px solid #ddd;}
.reserWrite dl:last-of-type {margin-bottom:40px;}
.reserWrite dl dt {display:table-cell; vertical-align:middle; width:20%; padding-right:20px; font-weight:600;}
.reserWrite dl dd {display:table-cell; vertical-align:middle; width:80%;}
.reserWrite dl dd input[type="text"],
.reserWrite dl dd input[type="file"],
.reserWrite dl dd input[type="password"],
.reserWrite dl dd select, .reserWrite input { /*height:2.8px;*/ margin:3px 3px 3px 0; padding:7px 10px !important; border:1px solid #ccc; }
.reserWrite input[readonly] { background:#eee; }
.reserWrite input { margin-left:20px; }
.reserWrite input:first-child { margin-left:0; }
.reserWrite .birth {overflow:hidden;}
.reserWrite .birth > * {float:left;}
.reserWrite .birth input[type="text"] {width:calc(31.47% - 25px);}
.reserWrite .birth span {display:block; padding:0 20px 0 5px; line-height:48px;}
.reserWrite .birth span:last-of-type {padding-right:0;}
.reserWrite .birth:first-of-type {margin-top:10px;}
@media all and (max-width:1240px){
	.reserWrite dl dd input[type="text"],
	.reserWrite dl dd input[type="file"],
	.reserWrite dl dd input[type="password"],
	.reserWrite dl dd select {width:100%;}
	.reserWrite .birth input[type="text"] {width:calc(40% - 25px);}
	.reserWrite .birth input[type="text"]:first-of-type {width:calc(100% - 23px);}
	.reserWrite .birth span:first-of-type {padding:0 0 0 4px;}
}
@media all and (max-width:768px){
	.reserWrite dl dd #apply_adult,
	.reserWrite dl dd #apply_child {width:calc(100% - 23px) !important;}
	.reserWrite dl dd #apply_adult + span:first-of-type {display:inline-block; margin-top:5px;}
  .reserWrite #detail_birthYear { width:80%; }
  .reserWrite input:nth-of-type(2) { margin-left:0; }
}
@media all and (max-width:599px){
	.reserWrite dl {display:block; table-layout:auto; min-height:100%;}
	.reserWrite dl dt {display:block; width:100%; padding-right:0; }
	.reserWrite dl dd {display: table; width:100%; margin:10px 0 0 2px;}
	ul#applyTime li{width: 48%;}
}


/* table */
.scroll_txt {display:none;}
.tbl_area {overflow-x:auto; margin:20px 0; clear:both; width:100%; border-top:2px solid #0561b7;}
.tbl_type1 {/*border-top:1px solid #555;*/ margin-left:-1px; width:100%;}
/*
.tbl_type1 thead th {background:#f3f3f3; font-size:1.6rem; padding:15px 10px; }
.tbl_type1 tbody th {background:#f3f3f3; font-size:1.6rem;}
.tbl_type1 tbody td, .tbl_type1 tfoot td {background:#fff; font-size:1.6rem;}
.tbl_type1 tbody th, .tbl_type1 tbody td, .tbl_type1 tfoot th, .tbl_type1 tfoot td {border-left:1px solid #d4d4d4; border-bottom:1px solid #d4d4d4; text-align:center; padding:10px; word-break:break-all;}
*/
.tbl_type1 thead th,
.tbl_type1 tbody th,
.tbl_type1 tbody td {padding:10px 15px; /*font-size:14px;*/ text-align:center;}
.tbl_type1 thead th,
.tbl_type1 tbody th {background:#fafafb;}
.tbl_type1 thead th {border-left:1px solid #c4c4c4; border-bottom:1px solid #c4c4c4;}
.tbl_type1 tbody th, .tbl_type1 tbody td, .tbl_type1 tfoot th, .tbl_type1 tfoot td {border-left:1px solid #d4d4d4; border-bottom:1px solid #d4d4d4; word-break:break-all;}
.tbl_type1 tbody td a.cancel {display:inline-block; background:#555; color:#fff; border-radius:5px; padding:5px 10px; margin:0 5px; }
.tbl_type1.exam th span {display:inline-block; margin-right:7px; color:#c9281b;}
.tbl_type1.reserve th {font-weight:600;}
.tbl_type1.reserve th,
.tbl_type1.reserve td  {/*font-size:14px;*/}
@media all and (max-width:1023px) {
	.tbl_type1 {min-width:1023px;}
	.tbl_type1.exam {min-width:auto;}
	.scroll_txt {display:block; margin-top:25px; text-align:right; font-size:13px;}
	.scroll_txt span {padding:0 0 0 32px; background:url('../img/content/scroll_txt.gif') no-repeat left center;}
	.tbl_area {margin:10px 0 25px;}
}
@media all and (max-width:599px) {
	.scroll_txt {text-align:center;}
	.tbl_type1.exam {min-width:500px;}
}


/* 본인인증 */
.confirm {text-align:center;}
.confirm > h4 { text-align:left; }
.confirm > div {padding:50px;}
.confirm dl {display:block !important; background:url('/Main/Images/saemaul/sub/i_confirm.png') no-repeat 49% 0;}
.confirm dl dt {width:100% !important; background:none !important; padding:140px 0 0 0 !important;}
.confirm dl dd {width:100% !important; margin:15px 0 30px;}
@media all and (max-width:599px) {
	.confirm > div {padding:40px 25px;}
	.confirm dl {background-size:60px;}
	.confirm dl dt {padding:130px 0 0 0 !important;}
}

/*확인,목록*/
.boardBtn { margin:20px 0; text-align:center;  }
.boardBtn a { color:#fff; font-weight:600; }
.boardBtn .write a:hover { color:#fff; }
.boardBtn .write { color:#fff; background:#0561b7; padding:12px 20px; border-radius:5px; border:2px solid #0561b7; }
.boardBtn a { color:#0561b7; padding:12px 20px; border-radius:5px; border:2px solid #0561b7; }
.boardBtn a:hover { color:#fff; background:#0561b7; }

/* 테니스장예약(230504추가) */
.t_btn3{display: inline-block; padding: 4px 30px; font-weight: 600; color: #fff; background: #333; border: 2px solid #333; color: #fff !important; border-radius: 30px; margin-top: 17px;}
.t_btn3:hover{background: #fff; color: #333 !important;}

.t_btn4{display: inline-block; padding: 3px 10px; color: #fff !important; font-weight: 500; background: #0561b7; border: 1px solid #0561b7; border-radius: 5px; margin-left: 10px; font-size: 14px;}

.calendar_month > div{display: flex; justify-content: space-between; align-items: center;}
.calendar_month > div p{font-family: 'NEXONLv1', 'NotoSansKR', sans-serif; font-size: 35px; font-weight: 600; margin: 0 20px;}
.calendar_month > div a{font-size: 18px; color: #6d6d6d; font-family: 'NEXONLv1', 'NotoSansKR', sans-serif; position: relative;} 
.calendar_month > div a.prev{padding-left: 26px;}
.calendar_month > div a.next{padding-right: 26px;}
.calendar_month > div a::before{position: absolute; content: ""; left: 0; top: 8px; width: 10px; height: 10px; border-top: 1px solid #6d6d6d; border-left: 1px solid #6d6d6d; transform: rotate(-45deg);}
.calendar_month > div a.next::before{left: auto; right: 0; transform: rotate(135deg);}

.calendar_month > ul{display: flex; justify-content: space-between; width: 100%; margin-top: 10px;}
.calendar_month > ul li{width: calc(100% / 12); text-align: center; font-size: 17px; background: #ecf0f3; display: block; padding: 10px;}
.calendar_month > ul li.on{background: #0561b7;}
.calendar_month > ul li.on a{font-weight: 600; color: #fff;}

.calendar_cal > p{text-align: center; color: #0076e4; font-family: 'NEXONLv1', 'NotoSansKR', sans-serif; font-size: 30px; font-weight: 600; margin: 31px 0 18px;}
.calendar_cal > p span{margin-left: 5px; font-weight: 400; color: #464646; font-size: 27px;}
.calendar_cal table{table-layout: fixed; width:100%;}
.calendar_cal table th{border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; padding: 5px;}
.calendar_cal table td{border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; padding: 10px; padding-top:0; /*position: relative;*/ vertical-align:top; height: 150px;}
.calendar_cal table td:first-child{border-left: 0;}
.calendar_cal table td .date{/*position: absolute; left: 0; top: 0;*/ width: 40px; height: 40px; line-height: 40px; color: #adadad; text-align: center;} 
.calendar_cal table td .date a{background: #f3f3f3; color: #222; display: block;}
.calendar_cal table td .date a.on{background: #f19300 !important; color: #fff !important;}
.calendar_cal table td > a{display: block; text-align: center; font-size: 15px; border-radius: 6px; font-weight: 500; padding: 4px;}
.calendar_cal table td > a.r_pos{border: 1px solid #7caddb; background: #f2f9ff; margin-top: 30px; color: #1d6db9;}
.calendar_cal table td > a.r_com{border: 1px solid #e1a903; background: #fff9e7; margin-top: 6px; color: #cf6900;}
.calendar_cal table td > div {display:block;}

.donghak_reserve {display: inline-block; text-align: center; font-size: 15px; border-radius: 6px; font-weight: 500; padding: 4px 10px; margin: 6px 0 0 6px;}
.d_pos {border: 1px solid #7caddb; background: #f2f9ff; color: #1d6db9;}
.d_com {border: 1px solid #e1a903; background: #fff9e7; color: #cf6900;}

@media all and (max-width:950px){
	.calendar_month > ul li{font-size: 14px;}

}
@media all and (max-width:670px){
	.calendar_cal table td > a{font-size: 13px;}
}
@media all and (max-width:599px){
	.calendar_month > ul{flex-wrap: wrap;}
	.calendar_month > ul li{width: calc(100% / 6);}
	.calendar_cal{clear: both; overflow-x: scroll;}
	.calendar_cal table{table-layout: auto;}
}

/* 예약가능 버튼 클릭시 나오는 페이지 */
.r_popup{visibility: visible; opacity: 1;}
.r_popup{ text-align: center; position: fixed; z-index: 99999; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.5); transition: 0.3s;}
.r_popup .r_popup_wrap{max-width: 750px; width: 100%; background: #fff; padding: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: auto; border-radius: 10px;}

.r_close{position: absolute; font-weight: 600; bottom: 20px; left: 50%; transform: translateX(-50%); }

/* .r_close{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-weight: 600; display: block; text-indent: -9999px;}
.r_close::before,
.r_close::after{position: absolute; content: ""; left: 0; width: 20px; height: 2px; background: #787878; border-radius: 10px;}
.r_close::before{top: 2px; transform: rotate(45deg);}
.r_close::after{top: 2px; transform: rotate(-45deg);} */

#r_list{display: table; table-layout: fixed; overflow: hidden; width: 100%; border: 1px solid #ccc; border-left: 0; border-right: 0;}
#r_list li{display:table-cell; border-left:1px solid #ccc; background:#f2f2f2;}
#r_list li:first-child {border-left:0;}
#r_list li a{display:block; padding:7px 0; background: #f2f2f2; color:#555; text-align:center;}
#r_list li.on a,
#r_list li:hover a{border-bottom:2px solid #006ed2; background:#fff; color:#006ed2; font-weight:600;}
.r_table{max-height: 600px !important;}
.r_table table td{height: auto !important;}


@media all and (max-width:766px){
	.r_popup .r_popup_wrap{width: 94%;}
}
@media all and (max-width:480px){
	.r_popup .r_popup_wrap{padding: 20px;}
	#r_list{font-size: 14px;}
	.r_close{bottom: 10px;}
}

/* 테니스장 배치도 */
.calendar_box{margin-bottom: 20px;}
.calendar_box img{border: 1px solid #0076e4; background: #fff; box-shadow: 7px 7px 1px #ecf0f3;  padding: 3rem; margin: 0 0 4rem;}