@charset "utf-8";


/*대관신청 확인페이지*/
.box {background-color:#f7f7f7; border:1px solid #e7e7e7; padding:15px} /*라인박스*/
.box select {background-color:#fff; border-color:#d8d8d8; display:block; font-size:0.8rem; margin:0 auto; padding:0.7rem 2rem 0.7rem 1rem; width:30%}

/*달력 안 예약 현황*/
.CalendarList .type01 {background-color:#f3f3f3; color:#828282; display:block; border:1px solid #e8e8e8; margin:-1px 0 0 0; padding:0 0.3rem} /*예약 대기중*/
.CalendarList .type02 {background-color:rgba(229,115,115,0.3); color:#d87979; display:block; border:1px solid #efc0c1; margin:-1px 0 0 0; padding:0 0.3rem} /*예약 완료*/

/*캘린더 리스트*/
.CalendarList {border-top:1px solid #e8e8e8}
.CalendarList table {width:100%}
.CalendarList thead tr {background-color:#f7f7f7}
.CalendarList thead th {border:1px solid #e8e8e8; line-height:3rem; text-align:center; padding:0 0.3rem}
.CalendarList tbody td {border:1px solid #e8e8e8; position:relative; padding:0 0.3rem; text-align:center; vertical-align:top}
.CalendarList tbody .day {display:block; font-weight:bold; padding:1rem 0 0 0} /*오늘날짜*/
.CalendarList tbody .time {font-weight:300; padding:0.5rem 0; line-height:1.6; min-height:5rem}
.CalendarList tbody .time > a {border:1px solid #e8e8e8; display:block; position:relative; margin:-1px auto 0; padding:5px 0} 
.CalendarList tbody .time > a:hover {background-color:#2f3293; border:1px solid #2f3293; color:#fff}
.CalendarList tbody .time span {padding:5px 0; margin-top:-1px}
.CalendarList tbody .time span a {font-weight:bold}
.CalendarList tbody .time .btn-cal a {background:#2292d2; border-radius:2px; box-sizing:border-box; color:#fff; display:block; margin-bottom:10px; padding:6px 5px; width:100%}
/* .CalendarList tbody .time a:before {content:''; background-color:#666; border-radius:100%; width:3px; height:3px; position:absolute; left:0; top:0.55rem} */
.CalendarList .sun {color:#e57373}
.CalendarList .sat {color:#3358dc}
.CalendarList tbody .time span.holiday {background-color:#F44336; border:1px solid #F44336; border-radius:100px; display:inline-block; color:#fff; padding:0 20px} /*휴무일*/
 
/*오늘 날짜*/
.CalendarList tbody td.current {background-color:rgba(227,242,253,0.5)}

/*calendar*/
div#cal-ym {margin:0 auto 15px; text-align:center; position:relative}

div#cal-ym > a,
div#cal-ym .btn-area a {border:1px solid #DDD; border-radius:10px; display:inline-block; font-weight:bold; height:20px; padding:7px 13px 9px; line-height:23px}
div#cal-ym a.prev, div#cal-ym a.next {font-size:20px; font-weight:bold; height:20px; padding:7px 13px 9px; margin:0 10px}
div#cal-ym span.date {color:#333; font-size:35px; font-weight:bold; font-family:"Malgun Gothic","맑은고딕"; vertical-align: -5px}
div#cal-ym .btn-area {position:absolute; right:0; top:0}

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
.cOrange {color:#dd6021}

/*BtnArea*/
.BtnArea {text-align:right; margin-bottom:30px}
.BtnArea button {background:#464646; border:0; color:#fff; cursor:pointer; font-size:14px; font-family:inherit; height:40px; padding:0 15px; min-width:80px}
.BtnArea button:hover {background:#000; border-color:#000; color:#fff; transition:all .2s}

/*시설 목록*/
.reserve-list {font-size:0.8rem; margin-bottom:1.25rem; text-align:center}
.reserve-list p {color:#666; margin-bottom:10px}
.reserve-list select {background-color:#f7f7f7; background-position:95% 50%; border:1px solid #d8d8d8; display:inline-block; padding:0.7rem 2rem 0.7rem 1rem; width:100%}

/*예약관련설명*/
.explain {margin-bottom:0.5rem; margin-top:2rem}
.explain:after {content:''; clear:both; display:block}
.explain ul:nth-child(1) {float:left}
.explain ul:nth-child(2) {float:right}
.explain ul li{display:inline-block; margin:0 3px}
.explain ul li.state em, .explain ul li i {display:inline-block; height:15px; width:15px; margin-right:5px; vertical-align:-2px}
.explain ul li i {border-radius:100%}

/*예약현황 type*/
.state em {font-size:0.6rem; padding:0 5px; margin-right:3px}
.state .white {border:1px solid #ccc} 
.state .ltgray {background-color:#eaeaea; border:1px solid #ccc}
.state .circle {background-color:#000; border-radius:100%; width:6px !important; height:6px !important; padding:0 !important; vertical-align:2px !important}
.state .gray {background-color:#666; color:#fff}
.state .green {background-color:#8eb7a6; color:#fff}
.state .red {background-color:#dd6021; color:#fff}

.Calendar-area {border:1px solid #d8d8d8; display:table; position:relative; width:100%; margin-bottom:30px}
.Calendar-area .Calendar {border-right:1px solid #d8d8d8; display:table-cell; width:60%; padding:10px}
.Calendar-area .timeList {display:table-cell; width:40%; padding:10px; text-align:center}

/*캘린더 날짜*/
div.DateArea {clear:both; position:relative; padding:5px 0 10px 0; overflow:hidden; text-align:center}
div.DateArea span {display:inline-block; color:#333; font-size:18px; font-weight:500; line-height:39px}
div.DateArea a {border:1px solid #ddd; border-radius:100px; display:inline-block; font-size:18px; width:35px; height:35px; position:absolute; top:6px}
div.DateArea a.pre_month {left:0}
div.DateArea a.next_month {right:0}
div.DateArea a.pre_month:before {content:''; border-top:1px solid #999; border-right:1px solid #999; display:inline-block; transform:rotate(-135deg); vertical-align:-2px; width:8px; height:8px; margin-left:4px}
div.DateArea a.next_month:before {content:''; border-top:1px solid #999; border-right:1px solid #999; display:inline-block; transform:rotate(45deg); vertical-align:-2px; width:8px; height:8px; margin-left:-2px}
div.DateArea a.pre_month:hover:before, 
div.DateArea a.next_month:hover:before{color:#fff}
div.DateArea a.All-schedule {border:1px solid #1975c0; color:#1975c0; padding:0 20px; width:auto; line-height:38px}
div.DateArea a:hover {border:1px solid #1975c0; background:#1975c0; color:#fff}

/*예약 상황*/
div.process {position:absolute; right:0; top:30px}
div.process ul li {display:inline-block; margin-left:5px}
div.process ul li span {color:#000; display:inline-block; position:relative; padding-left:5px}
div.process ul li span:before {content:''; border-radius:5px; width:3px; height:3px; position:absolute; left:0; top:50%; transform:translateY(-50%)}
div.process ul li span.type01:before {background-color:#999} /*예약 대기중*/
div.process ul li span.type02:before {background-color:#e57373} /*예약 완료*/

/*달력 안 예약 현황*/
.Calendar-table ul li .type01 {background-color:#f3f3f3; color:#828282; display:block; padding:0 3px} /*예약 대기중*/
.Calendar-table ul li .type02 {background-color:rgba(229,115,115,0.3); color:#d87979; display:block; border:1px solid #efc0c1; margin:-1px 0 0 0; padding:0 3px} /*예약 완료*/

/*캘린더 리스트*/
.Calendar-table {border-top:2px solid #000; color:#000}
.Calendar-table table {width:100%}
.Calendar-table thead {border-bottom:1px solid #e8e8e8}
.Calendar-table thead th {font-weight:500; line-height:3.5; text-align:center; padding:0 3px}
.Calendar-table tbody td {background-color:#f7f7f76; border-left:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; height:70px; position:relative; text-align:center; vertical-align:top}
.Calendar-table tbody tr td:first-of-type {border-left:0}
.Calendar-table tbody .day {display:block; line-height:normal; padding:8px 0 0 0}
 
.Calendar-table .sun {color:#e57373}
.Calendar-table .sat {color:#3358dc}
.Calendar-table .reserve {background-color:#e7f3ee; display:block; width:100%; height:100%} /*예약 가능 흰배경*/
.Calendar-table .reserve-no {background-color:#f7f7f7; display:block; width:100%; height:100%} /*예약 불가능 흰배경*/
.Calendar-table .state {display:block; text-align:center}
.Calendar-table .state .circle {display:inline-block}
/*.Calendar-table .current,
.Calendar-table .current a {background-color:#fff !important}*/
/*휴무일*/
.holiday {background-color:#F44336; border:1px solid #F44336; border-radius:100px; display:inline-block; font-size:11px; color:#fff; padding:0.1rem 0.5rem; line-height:normal; white-space:nowrap}

/*시간 예약*/
.timeList .tt {font-size:16px; font-weight:500}
.timeList .tt strong {color:#1975ba; margin-right:10px}
.timeList ul {border-top:2px solid #000; clear:both; padding:1px 0 0 1px; margin:18px 0 20px; overflow:hidden}
.timeList ul li {border:1px solid #d8d8d8; font-size:14px; float:left; width:50%; margin:-1px 0 0 -1px; height:50px; line-height:1.2; position:relative}
.timeList ul li a {display:block; height:100%; padding-top:15px}
.timeList ul li a.active {border:1px solid #1975c0; color:#1975c0}
.timeList ul li input {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin-left:-2.25rem}
.timeList ul li label {cursor:pointer; display:block; width:100%; height:100%; line-height:3rem; transition:all .3s}
.timeList ul li label:hover {background-color:#eff6f3}
.timeList ul li:nth-child(-n+2) {border-top:0}
.timeList ul li.reserve-no {border:none; color:#d16d0c; font-size:17px; font-weight:500; float:none; line-height:1.5; width:100%; padding:35% 0} /*예약 불가능 사유*/
/*시간 목록 제거*/
.timeList ul li.remove {background-color:#eee; padding:8px 0 0 0}
.timeList ul li.remove strong {color:#999; display:block; font-size:14px; font-weight:500; text-decoration:line-through}

/*버튼*/
.timeList button {border:1px solid #253269; border-radius:100px; background-color:#fff; color:#253269; font-size:0.8rem; width:100%; height:2.5rem; transition:all .3s; cursor:pointer}
.timeList button i {margin-left:5px; vertical-align:-1px}
.timeList button:hover {background-color:#253269; color:#fff}

/*로딩바*/
.timeList {position:relative}
.timeList .loading {position:absolute; top:0; left:0; background:rgba(0,0,0,0.1); width:100%; height:100%}
.timeList .loading .xi-spinner-1 {display:block; font-size:2rem; animation:xi-spin 3s infinite linear; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
@-webkit-keyframes xi-spin{
	0%{-webkit-transform:rotate(0);transform:rotate(0)}
	100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}
}
@keyframes xi-spin{
	0%{-webkit-transform:rotate(0);transform:rotate(0)}
	100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}
}

/*예약취소팝업*/
.cancel-pop {padding:1.5rem}

/*개인정보 수집 동의*/
.privacy_agree .title_depth01 {color:#333; font-size:18px; font-weight:500; margin:20px 0 10px}
.privacy_agree .group {border:1px solid #ddd; border-top:1px solid #666; margin-bottom:15px; padding:20px 25px}
.privacy_agree .group .title_depth02 {color:#333; font-size:15px; font-weight:500}
.privacy_agree .group .bul_dot strong,
.privacy_agree .group .bul_dot div {font-size:14px; margin-bottom:10px; padding-left:8px; position:relative}
.privacy_agree .group .bul_dot strong:before {content:''; position:absolute; top:9px; left:0; width:3px; height:3px; border-radius:100px; background:#666}

@media screen and (max-width:1000px) {

	.explain ul:nth-child(1),
	.explain ul:nth-child(2) {float:none}
	.Calendar-area .Calendar,
	.Calendar-area .timeList {border:0; display:block; width:100%}
	.holiday {padding:0 5px; white-space:inherit; line-height:1.1} /*휴무일*/
}

----------------------------------------------------------------------------------------------------------------------------------------------------------
.customerWrap h3.tt{background:#25408f; color:#fff; font-size:24px; font-weight:600; padding:20px 0; margin-bottom:10px !important; text-align:center}
.customerWrap .personal h4.stt {color:#333; font-size:17px; font-weight:600; margin:20px 0;}
.customerWrap .personal .personal_info {background:#f7f7f7; border:1px solid #e7e7e7; color:#666; font-size:12px; line-height:20px; padding:0 10px; margin:0 0 10px 0}
.customerWrap .personal .check {font-size:13px; margin-top:5px}
.customerWrap .personal .check input {vertical-align:-3px}

.customerWrap .personal_form {border-top:2px solid #555555; margin:15px 0 30px 0}
.form-group {border-bottom:1px solid #e7e7e7; display:table; text-align: left; padding:10px 15px; margin-bottom:0; width:100%}
.form-group label {color:#333; display:table-cell; font-family:'NBG','NanumBarunGothic','나눔바른고딕','Malgun Gothic','맑은고딕'; font-size:15px; font-weight:500; height:34px; line-height:2.5; margin:0; width:120px; vertical-align:middle}
.form-group div {display:table-cell; font-size:15px; line-height:2.3; text-align:left; width:calc(100% - 120px); vertical-align:middle}
.form-group .col-xs-1 {width:20px}
.form-group.name input {width:250px}
.form-group.tel .col-xs-3 {width:70px}
.form-group.email .col-xs-3 {width:80px}
.form-group.email .col-xs-4 {width:160px}
.form-group.person .col-sm-2 {color:#666; font-size:14px}
.form-group.person input {display:inline-block; width:70px; margin-right:3px}

.form-group .input-group {float:left}
.form-group .input-group select option {font-size:12px}
.copy {background:#f7f7f7; border:1px solid #e7e7e7; margin:15px 0 0 0; padding:15px; line-height:1.8}
.copy2 {background:#f7f7f7; border:1px solid #e7e7e7; font-size:13px; margin:15px 0 0 0; padding:20px; line-height:20px}
.customerWrap .btn {clear:both; margin:30px 0 0 0; text-align:center; width:100%; overflow:hidden}
.customerWrap .textbox { padding:3px; margin-bottom:2px;border-radius:3px;}

.form-group .input-group .icheck-inline {float:left; margin-top:5px;}
.form-group .input-group .icheck-inline label {color:#666; font-size:13px; float:left; margin:0 20px 0 0; width:auto;}
.form-group .input-group .icheck-inline input {float:left; vertical-align: middle; }
.btn_close {position:absolute; top:25px; right:15px; cursor:pointer}

/****모바일 ****/
@media all and (max-width:767px) {
	.form-group {margin:0; padding:10px; width:100% !important}
	.form-group label {display:block; float:none; margin:0 0 5px 0; width:100%; height:auto; line-height:inherit}
	.form-group div {display:block; width:100%; line-height:inherit}
	.form-group.email .col-xs-3 {width:70px}
	.form-group.email .col-xs-4 {width:100px}
}

#changewrap {font-family: 'NBG','NanumBarunGothic','나눔바른고딕','Malgun Gothic','맑은고딕'}
	.header{background: url('/upload/skin/change/basic/topbg_navy.gif') repeat center top; color:#fff;  font-size:28px; font-weight:600; padding:15px 0; margin:0; text-align:center}
	.header span{display:block; font-family:"Malgun Gothic","맑은고딕"; font-size:28px; color:#fff; font-weight:bold}

/*표*/
.body{/*padding:10px*/}
.body .tb1_type{border-collapse:collapse; color: #333; font-size:14px; width:100%; }
.body .tb1_type tbody th{border-bottom: 1px solid #e7e7e7; line-heigh:150%; padding:10px; font-weight:normal; text-align:left}
.body .tb1_type tbody th:first-child{border-left:0} 
.body .tb1_type tbody td{border-bottom: 1px solid #e7e7e7; font-weight:normal; line-height:150%; padding:7px}
.body .tb1_type tbody td:last-child{border-right:0}
.body .tb1_type tbody td select{height:30px}
.body .tb1_type tbody td input {border:1px solid #e3e3e3; border-radius:3px; height:30px}

/*버튼*/
.body .btn{margin:25px 0; text-align:center}
.body .btn a {color:#fff; cursor:pointer; text-decoration: none; display:inline-block; height:40px; font-family: 'NBG','NanumBarunGothic','나눔바른고딕','Malgun Gothic','맑은고딕'; line-height:40px; padding:0 20px}
.body .btn .apply {background:#2C2A97} 
.body .btn .refer {background:#D15900}
.body .btn .close {background:#666}

/*박스*/
.box {border:1px solid #ddd; background-color:#f9f9f9; padding:1rem}
.info-box {border:1px solid #ddd; background-color:#f9f9f9; margin-bottom:2.5rem; min-height:4rem; padding:1.5rem 1rem}
.top-box {background-color:#fff; border:1px solid #ccc; border-top:2px solid #333; color:#666; font-size:16px; margin-bottom:2.5rem; padding:2rem}
.top-box > strong {color:#333; display:block; font-size:0.9rem; font-weight:500; margin-bottom:10px}
.top-box ul li strong {font-weight:500}
.top-box .txt {display:block; margin-bottom:1rem}