@charset "utf-8";
/* gpl css
 * @latest 2021.01.28 SSJ
 * @latest 2021.02.24 SSJ
 * @latest 2021.02.26 SSJ
*/



/*경기체육사랑 프로그램예약 목록 공통 */
.gplList {}
.wzsrch-box {border-radius:10px;}
.wzsrch-box .wzbtn:not(.ico-excel) {background-color:#333; border-color:#333; padding:9px 18px; border-radius:0;}
.wzsrch-box .wzbtn:before {float:none;}
.wzsrch-box select {background: url(/widesign/img/arrow_black.png) #fff no-repeat right 8px center !important;background-size: 6px !important;font-size: 15px; width:8% !important;}
.wzsrch-box input[type="text"] {font-size:15px;}

.wzsrch-box .datePickDiv {}
.wzsrch-box .datePickDiv .prvWeek,
.wzsrch-box .datePickDiv .nxtWeek {font-size:15px;padding: 0 5px;}
.wzsrch-box .datePickDiv .prvWeek:hover, 
.wzsrch-box .datePickDiv .nxtWeek:hover {font-weight:600; text-decoration:underline;}
.wzsrch-box .datePickDiv .prvWeek:before {content:'';border-right: 7px solid #333;border-top: 5px solid transparent;border-bottom: 5px solid transparent;overflow: hidden;display: inline-block;margin-right: 5px;vertical-align: middle;}
.wzsrch-box .datePickDiv .nxtWeek:after {content:'';border-left: 7px solid #333;border-top: 5px solid transparent;border-bottom: 5px solid transparent;overflow: hidden;display: inline-block;margin-left: 5px;vertical-align: middle;}

.subCon ul.num li a {border:1px solid #e8e8e8;}

	@media (max-width:899px){
		.wzsrch-box {padding:20px 10px;}
		.wzsrch-box .wm49 {width:49% !important;}
		.wzsrch-box select, .wzsrch-box input[type="text"] {margin-bottom:5px;font-size: 15px;}
	}


/*경기체육사랑 프로그램예약 목록*/
.gplListTbl {border-top:2px solid #333;}
.gplListTbl thead tr th {font-size:18px;padding:20px 10px;line-height:130%;border-bottom:1px solid #ccc;background:#fcfcfc;word-break: break-all;}
.gplListTbl tbody tr th {font-weight:600;font-size:17px; border-bottom:1px solid #ececec;}
.gplListTbl tbody tr td {font-size:16.5px;line-height:150%;border-bottom:1px solid #ececec;padding: 15px 5px;word-break:break-all;}
.gplListTbl tbody tr td img {height:auto !important; max-height:100px;}
.gplListTbl tbody tr td.txt-l {border-right:1px solid #ececec;}
.gplListTbl tbody tr td.txt-l + .txt-c {font-size:14px;padding: 10px 5px;line-height: 130%;}
.gplListTbl tbody tr td span.full {color:#c20000; font-weight:600; font-size:14px;}
.gplListTbl tbody tr td.imgtd {text-align:center;}
.gplListTbl tbody tr td.imgtd .imgbox {width:97%;height:0;padding-bottom: 60%;position:relative;overflow:hidden;display: inline-block;}
.gplListTbl tbody tr td.imgtd .imgbox img {position:absolute;top:-999px;bottom:-999px;right:-999px;left:-999px;margin:auto;min-width: 100%;min-height: 100%;max-width: 120%;max-height: 120%;}
.gplListTbl tbody tr td .wzbtn-table {padding:7px 5px;font-size:14px;/* font-weight:600; */}
.gplListTbl tbody tr td .wzbtn-table:hover {color:#fff;}
.gplListTbl tbody tr td .wzbtn-table:not(.btn-del):hover {background-color:#051e4a;border-color:#051e4a;font-weight: 600;}
.gplListTbl tbody tr:hover th,.gplListTbl tbody tr:hover td {background:#f9f9f9;}
	.gplListTbl.gplListTbl_detail tbody tr td {font-size:14.5px;padding: 15px 10px;line-height: 120%;}
	.gplListTbl.gplListTbl_detail tbody tr td span.finished {color:#0917c9;}
	.gplListTbl.gplListTbl_detail tbody tr td span.cancle {color:#c20000;}
	.gplListTbl.gplListTbl_detail tbody tr td span.cancle span {display:block;}


.tabListbox {width:100%; position:relative; overflow:hidden;}
.rollingList {width:100%;float:left;display:block; margin:20px 0 50px;}
ul.tabsTrack {display:table; table-layout:fixed; float:left; width:100%; margin:0; padding:0; padding-left:0 !important; list-style:none; background:#fff;}
ul.tabsTrack li {display:table-cell;vertical-align:middle;width: 33.333%;position:relative;cursor:pointer;text-align:center;word-break:keep-all;box-sizing:border-box;overflow:hidden;border:1px solid #ccc;border-left:none;margin: 0;padding: 0;}
ul.tabsTrack li.active {box-sizing:border-box;background:#2091cb; border:1px solid #2091cb; border-left:1px solid #2091cb;}
ul.tabsTrack li button, ul.tabsTrack li a {font-size: 17.5px !important;padding:15px;font-weight:600;width: 100%;text-align: center;}
ul.tabsTrack li a {display:block;}
ul.tabsTrack li.active button, ul.tabsTrack li.active a {color:#fff;}
ul.tabsTrack li:first-child {border-left:1px solid #ccc;}

	@media (min-width:800px){
		ul.tabsTrack {}
		ul.tabsTrack li {}
		
	}
	@media (max-width:799px){
		ul.tabsTrack {display:flex; flex-flow:wrap;}
		ul.tabsTrack li {font-size:13px; background-image:linear-gradient(to bottom, #fff, #fafafa, #f9f9f9);}
		ul.tabsTrack li.active {margin-bottom:0;}
	}


.permitSet {width: 100%; float: left; font-size: 16.5px; margin-bottom: 20px;}
.permitSet dt {display: inline-block;}
.permitSet dt:after {content:":";margin: 0 5px;}
.permitSet dd {display: inline-block; vertical-align: middle; margin-right: 10px;}
.permitSet dd input[type="radio"] {vertical-align: middle;}
.permitSet dd label {position: relative; width: auto; text-indent: 0; left: auto; cursor: pointer;}

	@media (max-width:799px){
		.gplListTbl thead tr th {padding: 15px 3px;font-size: 15px;word-break:break-all;}
		.gplListTbl tbody tr th, .gplListTbl tbody tr td {font-size: 14.5px;padding:15px 5px;}
		.gplListTbl tbody tr td .wzbtn-table {font-size: 12px !important;padding: 4px 2px;line-height: 130%;}
        .gplListTbl tbody tr td img {max-width:100px;height: auto !important; max-height:60px; border: 1px solid #ccc;box-sizing: border-box;}	
	}






/*경기체육사랑 프로그램예약 상세*/
.subPtitle {font-size:22px;font-weight:600;line-height:150%;position:relative;display:block;width: 100%;float: left;padding: 5px 0 15px 25px; box-sizing:border-box;}
.subPtitle:before {content:"";width: 10px;height: 10px;position: absolute;left: 0px;top: 14px;background: #b10b0b;background: #12225f;/* opacity: 0.7; */}
.subPtitle:after {content:"";width: 10px;height: 10px;position: absolute;left: 6px;top: 19px;background: #12225f;background: #58c1f3;opacity: 0.8;}

.gplView {width:100%; float:left;}
.gplView .viewimgbox {width:30%;float:left;height:0;padding-bottom: 20%;position:relative;overflow:hidden;display: inline-block;}
.gplView .viewimgbox img {position:absolute;top:-999px;bottom:-999px;right:-999px;left:-999px;margin:auto;min-width: 100%;min-height: 100%;max-width: 100%;max-height: 120%;vertical-align: middle;}

.gplView dl.mainInfo {width:70%;float:left;padding-left: 20px;box-sizing: border-box;}
.gplView dl.mainInfo dt {clear:both;width: 20%;font-size:17px;line-height:150%;padding: 3px 15px;vertical-align: top;float: left;position: relative;font-weight: 600;letter-spacing: -0.5px;box-sizing: border-box;}
.gplView dl.mainInfo dt:before {content:"";display: inline-block;width: 4px;height: 4px;background: #333;/* transform: rotate(-45deg); */position: absolute;left: 5px;top: 13px;}
.gplView dl.mainInfo dd {font-size:16.5px;line-height:150%;color: #555;padding: 1px 10px 10px;float: left;width: 80%;box-sizing: border-box;}
.gplView dl.mainInfo dd a.download {text-decoration:underline}

.gplView dl.mainInfo dd ul.mngrUl {width:100%;box-sizing:border-box;background: #fff;padding: 10px 20px;border-radius: 10px;}
.gplView dl.mainInfo dd ul.mngrUl li {}
.gplView dl.mainInfo dd ul.mngrUl li span {font-weight: 600;position: relative;padding-left: 8px;margin-right: 12px;width: 70px;box-sizing: border-box;display: inline-block;margin-bottom: 2px;}
.gplView dl.mainInfo dd ul.mngrUl li span:before {content:"";display: inline-block;width: 3px;height: 3px;background: #838383;position: absolute;left: 0;top: 10px;}

.gplView dl.mainInfo.wd100 {border:1px solid #ececec;padding: 20px;border-radius: 10px;}
.gplView dl.mainInfo.wd100 dt {width:30%;}
.gplView dl.mainInfo.wd100 dd {width:70%;padding-left: 20px;}
.gplView dl.mainInfo.wd100 img {max-width:100%; margin:10px 0;}

.wzpopup .gplView dl.mainInfo dt {width:30%; word-break:keep-all;}
.wzpopup .gplView dl.mainInfo dd {width:70%;}
.wzpopup .gplView dl.mainInfo.wd100 dt:nth-of-type(1) ~ dt,
.wzpopup .gplView dl.mainInfo.wd100 dd:nth-of-type(1) ~ dd {border-top:1px solid #ececec;padding-top: 15px;}
.wzpopup .gplView dl.mainInfo.wd100 dt:nth-of-type(1) ~ dt:before {top:24px;}

	@media (max-width:899px){
		.subPtitle {font-size:19px; padding-top:8px;}
		.gplView .viewimgbox {width:100%;padding-bottom: 50%;margin-bottom: 20px;}
		.gplView dl.mainInfo {width:100%;clear:both;padding-left: 0;}
		.gplView dl.mainInfo dt {width:35%;}
		.gplView dl.mainInfo dd {width:65%;padding-top: 4px;font-size: 15px;}

		.wzpopup .gplView>.wd100.p20 { padding:10px !important;}
	}
	@media (min-width:600px) and (max-width:899px){
		.gplView .viewimgbox {width:50%;padding-bottom: 30%;margin: 0 25% 20px;float: none;}
	}

.wzsrch-box.detailListSrch .datePickDiv .datePicker {width:auto;max-width:105px !important;background: url(/images/wzwg/site/mngr/datepicker.png) no-repeat 5px center #fff;padding-left: 25px !important;font-size: 15px;}
.wzsrch-box .wzbtn:not(.ico-excel) {background-color:#333; border-color:#333; padding:9px 18px; border-radius:0;}
.wzsrch-box.detailListSrch .wzbtn.ico-excel {padding:9px 12px;border-radius:0;margin-right:10px;background: #fff;}
.wzsrch-box .wzbtn:before {float:none;}

	@media (max-width:1100px){
		.wzsrch-box.detailListSrch .wzbtn.ico-excel {margin:5px 0 0; font-size:15px;clear:both;}
	}
	@media (max-width:899px){
		.wzsrch-box div.wm100 {margin-bottom:10px;}
		.wzsrch-box div.wm100 select:only-of-type {width:28% !important; margin-right:0;}
		.wzsrch-box.detailListSrch .datePickDiv {margin-bottom:5px;}
		.wzsrch-box.detailListSrch .datePickDiv .datePicker {width:48%; max-width:none !important;}
		.wzsrch-box.detailListSrch .datePickDiv ~ select {width:24% !important;}
		.wzsrch-box.detailListSrch input[type="text"].wm100,
		.wzsrch-box.detailListSrch .wzbtn {margin-top:5px;}
	}





/*경기체육사랑 프로그램 예약하기*/
.rsvtnbasicInfo {padding: 20px 0;border-top: 2px solid #333;background-color: #fff !important;border-bottom: 1px solid #ececec;}

.gplRsvtn.gplView .viewimgbox {width:20%;padding-bottom: 14%;line-height: 180px;border: 1px solid #ececec;box-sizing: border-box;}
.gplRsvtn.gplView dl.mainInfo dt {padding: 6px 10px;border-top: 1px solid #ececec;}
.gplRsvtn.gplView dl.mainInfo dd {border-top:1px solid #ececec;padding: 7px 10px;}
.gplRsvtn.gplView dl.mainInfo dt:first-of-type, .gplRsvtn.gplView dl.mainInfo dd:first-of-type {border-top:none;}
.gplRsvtn.gplView dl.mainInfo dt:before {content:""; display:none;}

.gplRsvtn .personInfo {width:100%; float:left; border-top:2px solid #333; border-bottom:1px solid #ececec;}
.gplRsvtn .personInfo dt {width:20%;float:left;font-size:17px;line-height:150%;padding: 14px 10px 14px 30px;font-weight: 600;box-sizing: border-box;border-top:1px solid #ececec;}
.gplRsvtn .personInfo dd {width:30%;float:left;font-size:16.5px;line-height:150%;padding: 14px 10px;text-align: left;box-sizing: border-box;border-top:1px solid #ececec;}
.gplRsvtn .personInfo dt:nth-of-type(2n+1) {clear:both;}
.gplRsvtn .personInfo dt:first-of-type,.gplRsvtn .personInfo dd:first-of-type,
.gplRsvtn .personInfo dt:first-of-type(2),.gplRsvtn .personInfo dd:first-of-type(2) {border-top:none;}

	@media (max-width:899px){
		.gplRsvtn.gplView .viewimgbox {width:40%; padding-bottom:25%; margin:0 30% 20px;}

		.gplRsvtn .personInfo dt {width:35%;clear:both;padding: 8px 10px;}
		.gplRsvtn .personInfo dd {width:65%;padding: 8px 10px;font-size: 15px;}
	}



	.calendarArea {width:35%;float:left;background: #f5f5f5;border-radius: 10px;padding: 20px;box-sizing: border-box;}
	.selectRsvtnArea {width:100%; float:left; padding-left:20px; box-sizing:border-box;}
	.selectRsvtnArea h6 {font-size:18px; line-height:150%; margin-bottom:10px;}
	.selectRsvtnArea h6:before {content:""; width:4px; height:4px; display:inline-block; background:#333; vertical-align:middle; margin-right:5px;}

	/*달력영역*/
	.calendarArea .calDateTop {text-align:center;margin-bottom: 20px;}
	.calendarArea .calDateTop select {width:25%;background-color: #fff;}
	.calendarArea .calDateTop .monthbtn {display:inline-block;}
	.calendarArea .calDateTop .monthbtn.monthPre, .calendarArea .calDateTop .monthbtn.monthNxt {width: 10%;display: inline-block;height: 40px;vertical-align: middle;line-height: 45px;}
	.calendarArea .calDateTop .monthbtn.monthPre:before {content:"";border-right: 10px solid #0d4663;border-top: 7px solid transparent;border-bottom: 7px solid transparent;border-left: 0px solid transparent;}
	.calendarArea .calDateTop .monthbtn.monthNxt:before {content:"";border-left: 10px solid #0d4663;border-top: 7px solid transparent;border-bottom: 7px solid transparent;border-right: 0px solid transparent;}
	.calendarArea .calDateTop .monthbtn.monthPre:before,
	.calendarArea .calDateTop .monthbtn.monthNxt:before {display: inline-block; line-height: normal;}

	.rsvCalendar {width:100%;table-layout:fixed;text-align:center;border-collapse: collapse;}
	.rsvCalendar thead th {font-size:17px; padding:15px 5px; border-bottom:2px solid #ccc;}
	.rsvCalendar tbody td {font-size: 14px;color: #6f6f6f;line-height:140%;padding:10px 5px;box-sizing: border-box;border-bottom:1px solid #ddd;}
	.rsvCalendar tbody td:first-child {color:#c20000;}
	.rsvCalendar tbody td:last-child {color: #0a64c1;}
	.rsvCalendar tbody td.not {background:#f5f5f5;color: #b7b7b7;font-size: 13px;}
	.rsvCalendar tbody td.today {font-weight:600;background: #2091cb;color: #fff;}
	.rsvCalendar tbody td.ableDate {background: #dce0e2;border: 1px solid rgba(255,255,255,0.4);}
	.rsvCalendar tbody td.ableDate:hover {font-weight:600;}

	.calendarArea .calGuide {width:100%;clear:both;margin-top:10px;box-sizing: border-box;}
	.calendarArea .calGuide p {font-size:16px;color:#555;text-align: left;}
	.calendarArea .calGuide .colorBox {background: #dce0e2;width:20px;height:20px;float:left;margin-right:10px;}

	.selectRsvtnArea .gplListTbl tbody tr td {padding:10px 5px; font-size:16px;}
	.selectRsvtnArea .gplListTbl tbody tr td .disabled {background-color:#ddd !important;}
	
	
	@media (max-width:899px){
		.calendarArea {width: 100%;background: #fff;text-align: center;padding: 0 0 20px;}
		.calendarArea .calDateTop {width: 100%; max-width: 500px; margin: 0 auto; background: #f5f5f5; padding-top: 20px; border-radius: 10px 10px 0 0;}
		.calendarArea .rsvCalendar {width: 100%; max-width: 500px;  margin: 0 auto; background: #f5f5f5;}
        .rsvCalendar tbody td.ableDate {border:none;}
        .calendarArea .calGuide {width:100%;max-width: 500px;margin:0 auto;padding: 10px 15px 20px;background: #f5f5f5;border-radius: 0 0 10px 10px;}
		.selectRsvtnArea {width:100%; padding-left:0;}
		.selectRsvtnArea .gplListTbl tbody tr td {font-size:15px; padding:7px 5px;}
		.selectRsvtnArea .gplListTbl tbody tr td input[type="text"] {width:35px !important;}
	}