@charset "UTF-8";

/* 시설 선택 */
.fac .choose ul {display: flex; flex-wrap: wrap; width: calc(100% + 4rem);}
.fac .choose li {width: 50%; padding-right: 4rem; padding-bottom: 4rem;}
.fac .choose .box {position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; min-height: 28rem; padding: 5rem; background: #f1f6fa;}
.fac .choose .box::after {content: ''; position: absolute;}
.fac .choose .box1::after {right: 6rem; bottom: 5rem;}
.fac .choose .box1.icon1::after {width: 16.6rem; height: 12.1rem; background: url('../images/bg-choose1.png') no-repeat center / cover;}
.fac .choose .box1.icon2::after {width: 18.2rem; height: 12.9rem; background: url('../images/bg-choose2.png') no-repeat center / cover;}
.fac .choose .box1.icon3::after {width: 18rem; height: 13.7rem; background: url('../images/bg-choose3.png') no-repeat center / cover;}
.fac .choose .box1.icon4::after {width: 19.7rem; height: 14.3rem; background: url('../images/bg-choose4.png') no-repeat center / cover;}
.fac .choose .box1.icon5::after {width: 17rem; height: 13.9rem; background: url('../images/bg-choose5.png') no-repeat center / cover;}
.fac .choose .box2::after {right: 5rem; bottom: 5rem; width: 15.8rem; height: 12.8rem; background: url('../images/bg-choose6.png') no-repeat center / cover;}
.fac .choose .box strong {font-family: sm; font-size: 2.8rem; line-height: 1; color: #000000;}
.fac .choose .box p {min-height: 5.1rem; margin-top: 2rem; font-family: pm; font-size: 1.7rem; color: #555555;}
.fac .choose .box .button {margin-top: 3rem;}

@media screen and (max-width: 1365px) {
	.fac .choose ul {width: 100%;}
	.fac .choose li {width: 100%; padding-right: 0;}
}

@media screen and (max-width: 700px) {
	.fac .choose li:last-child {padding-bottom: 0;}
	.fac .choose .box {min-height: auto; padding: 3rem;}
	.fac .choose .box::after {background-size: 70% !important;right: 0 !important;bottom: 1rem !important;}
	.fac .choose .box p {min-height: auto;}
}

/* 캘린더 */
.fac-cal .search {position: relative;}
.fac-cal .search .control {display: flex; justify-content: center; align-items: center; padding-top: .2rem;}
.fac-cal .search .control strong {margin: 0 4rem; font-family: sm; font-size: 3rem; line-height: 1; color: #000000;}
.fac-cal .search .control .prev,
.fac-cal .search .control .next {position: relative; top: -.2rem; display: flex; width: 2.8rem; height: 2.8rem; text-indent: -9999rem;}
.fac-cal .search .control .prev {background: url('../images/btn-month-prev.png') no-repeat center / cover;}
.fac-cal .search .control .prev:hover {background: url('../images/btn-month-prev-on.png') no-repeat center / cover;}
.fac-cal .search .control .next {background: url('../images/btn-month-next.png') no-repeat center / cover;}
.fac-cal .search .control .next:hover {background: url('../images/btn-month-next-on.png') no-repeat center / cover;}
.fac-cal .search .state {position: absolute; right: 0; top: 0;}
.fac-cal .search .state ul {display: flex; align-items: center;}
.fac-cal .search .state .color {display: flex; align-items: center; font-family: pr; font-size: 1.8rem; color: #333333;}
.fac-cal .search .state .color2 {margin-left: 4rem;}
.fac-cal .search .state .color::before {content: ''; width: 1.5rem; height: 1.5rem; margin-right: 1rem; border-radius: 100%;}
.fac-cal .search .state .color1::before {background: #00baff;}
.fac-cal .search .state .color2::before {background: #302a6c;}

.fac-cal .cal-box {position: relative; line-height: 1.6; margin-top: 4rem; padding-bottom: 2rem;}
.fac-cal .cal-box table {position: relative;}
.fac-cal .cal-box thead {position: relative;}
.fac-cal .cal-box thead::before {content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background: #302a6c; border-radius: 10px;}
.fac-cal .cal-box thead th {padding: 1rem 1rem; font-family: sl; font-size: 2rem; font-weight: 400; color: #ffffff;}
.fac-cal .cal-box tbody {position: relative; top: 2rem; display: table-header-group;}
.fac-cal .cal-box tbody::after {content:''; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #aebbc2;}
.fac-cal .cal-box tbody::before {content:''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: #aebbc2;}
.fac-cal .cal-box tbody td {height: 18rem; padding: 1.5rem; background:#fff; border-right: 1px solid #aebbc2; border-bottom: 1px solid #aebbc2; vertical-align: top;}
.fac-cal .cal-box tbody td:hover {background: #f1f6fa;}
.fac-cal .cal-box tbody td .date {font-family: sl; font-size: 2rem; color: #000;}
.fac-cal .cal-box tbody td.sun .date {color: #f03737;}
.fac-cal .cal-box tbody td.sat .date {color: #3941ed;}
.fac-cal .cal-box tbody td .order ul {margin-top: 1rem;}
.fac-cal .cal-box tbody td .order li {display: flex; align-items: flex-start; margin: 1rem 0; font-family: pr; font-size: 1.6rem; color: #121212;}
.fac-cal .cal-box tbody td .order span {position: relative; top: .7rem; display: flex; flex-shrink: 0; width: 1rem; height: 1rem; margin-right: 1rem; background: #00baff; border-radius: 100%;}
.fac-cal .cal-box tbody td .order span.no {background: #00baff;}
.fac-cal .cal-box tbody td .order span.yes {background: #302a6c;}

@media screen and (max-width: 960px) {
	.fac-cal .cal-box {overflow-x: hidden; min-height: 130px;}
	.fac-cal .cal-box.on {min-height: auto;}
	.fac-cal .cal-box table {width: 1300px;}
	.fac-cal .cal-box:after {content: ''; position: absolute; right: 0px; top: 7rem; z-index: 1; width: 100%; height: calc(100% - 7rem); background: rgba(31,59,101,0.1) url('../images/img_mobile_text.png') no-repeat center 4rem;}
	.fac-cal .cal-box.on:after,
	.fac-cal .cal-box.no-scroll:after {display: none;}
	.fac-cal .cal-box thead th {font-size: 1.8rem;}
	.fac-cal .cal-box tbody td .date {font-size: 1.8rem;}
	.fac-cal .cal-box tbody td .order li {font-size: 1.5rem;}
}

@media screen and (max-width: 830px) {
	.fac-cal .search .control {justify-content: flex-start;}
	.fac-cal .search .control strong {margin: 0 2rem; font-size: 2.8rem;}
	.fac-cal .search .state .color2 {margin-left: 2rem;}
}

.fac .step {margin-top: 1rem;}
.fac .step > ul {display: flex; justify-content: flex-end; align-items: center;}
.fac .step > ul > li {margin-left: 2rem;}

@media screen and (max-width: 830px) {
	.fac .step {margin-top: 3rem;}
}

/* 일반인 사용신청 */
.fac .noti {display: flex; padding: 4rem; background: #fff; border: 10px solid #f1f6fa; font-size: 2.8rem;}
.fac .noti .ico {flex-shrink: 0; width: 15rem; padding-right: 4.5rem;}
.fac .noti .text {flex-grow: 1; padding-top: 1.5rem;}

@media screen and (max-width: 805px) {
	.fac .noti {flex-wrap: wrap; padding: 3rem;}
	.fac .noti .ico {width: 100%; display: flex; justify-content: center;}
	.fac .noti .text {padding-top: 3rem;}
}

/* 일반인 사용신청 사진보기 */
.btn-floatWindow {display: inline-flex; justify-content: center; align-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid #4e4e4e; border-radius: .5rem; text-indent: -9999rem; background: url('../images/btn-view-pic.png') no-repeat center;}
.btn-floatWindow:hover {background: #4e4e4e url('../images/btn-view-pic-on.png') no-repeat center;}
.floatWindow {display: none; text-align: left;}
.floatWindow.on {display: block;}
.floatWindow .pic {margin-top: 3rem;}


/* 딤 레이어 */
.reservation .dim-box {position: fixed; left: 0; top: 0; z-index: 200; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0,0,0,.5); padding: 0 4rem;}
.reservation .inner-box {overflow: hidden; overflow-y: auto; position: relative; max-width: 120rem; max-height: 70rem; background: #fff; padding: 4rem; border: 10px solid #f1f6fa;}
.reservation .close {position: absolute; right: 4rem; top: 3.8rem; display: flex; justify-content: center; align-items: center; width: 3.5rem; height: 3.5rem; border: 2px solid #2c2c2c;}
.reservation .close span {overflow: hidden; display: block; width: 1.6rem; height: 1.6rem; background: url('../images/btn-close-pop.png') no-repeat center / cover; text-indent: -9999rem; transition: transform .35s;}
.reservation .close:hover span {transform: rotate(270deg);}

@media screen and (max-width: 1500px) {
	.reservation .inner-box {height: 50rem;}
}

@media screen and (max-width: 768px) {
	.reservation .inner-box {padding: 2.5rem;}
	.reservation .close {right: 2.5rem; top: 2.2rem;}
}

/* 딤 테이블 */
.reser-table {position: relative; line-height: 1.6;}
.reser-table:after {content: ''; position: absolute; right: 0px; top: 0px; width: 1px; height: 100%; background: #fff;}
.reser-table table {position: relative;}
.reser-table table::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: #000000;}
.reser-table table.align-c td {text-align: center;}
.reser-table thead {position: relative;}
.reser-table thead::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #000000;}
.reser-table thead th {padding: 1.35rem 1rem; background: #f1f1f1; border-bottom: 1px solid #dddee0; font-weight: normal; font-family: pb; font-size: 1.6rem; color: #000000;}
.reser-table tbody {display: table-header-group;}
.reser-table tbody::after {content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #8a8a8a;}
.reser-table tbody th {padding: 1.2rem 2rem; background:#f1f6fa; border-bottom: 1px solid #c5c5c5; font-family: pm; font-weight: 400; font-size: 1.7rem; color: #000000;}
.reser-table tbody td {padding: 1.2rem 2rem; background:#fff; border-bottom: 1px solid #c5c5c5; font-family: pm; font-size: 1.5rem; text-align: left; color: #666666; line-height: 1.6;}
.reser-table tbody td .yes,
.reser-table tbody td .no {display: flex; justify-content: center; align-items: center;}
.reser-table tbody td .yes {color: #00baff;}
.reser-table tbody td .no {color: #302a6c;}
.reser-table tbody td .yes::before,
.reser-table tbody td .no::before {content: ''; width: 1rem; height: 1rem; margin-right: 1rem; border-radius: 100%;}
.reser-table tbody td .yes::before {background: #00baff;}
.reser-table tbody td .no::before {background: #302a6c;}
.reser-table tbody td.title {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.reser-table tbody td.title a {font-size: 1.6rem; color: #121212;}
.reser-table tbody td.title a span {position: relative;}
.reser-table tbody td.title a span::after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #000; transition: width .35s;}
.reser-table tbody td.title a:hover span::after {width: 100%;}
.reser-table.center tbody td {text-align: center;}
.reser-table .align-l {text-align: left !important;}
.reser-table .align-c {text-align: center !important;}
.reser-table .align-r {text-align: right !important;}
.reser-table .align-t {vertical-align: top !important;}

@media screen and (max-width: 1120px){
	.reser-table  {overflow-x: hidden; min-height: 21rem;}
	.reser-table.on {min-height: auto;}
	.reser-table table {width: 130rem;}
	.reser-table:after {content: ''; position: absolute; right: 0px; top: 0px; z-index: 1; width: 100%; height: 100%; background: rgba(31,59,101,0.1) url('../images/img_mobile_text.png') no-repeat center 2rem;}
	.reser-table.on:after {display: none;}
	.reser-table thead th,
	.reser-table tbody th,
	.reser-table tbody td {font-size: 1.7rem;}
}

/* 딤 테이블2 */
.reser-table2 {position: relative; line-height: 1.6;}
.reser-table2:after {content: ''; position: absolute; right: 0px; top: 0px; width: 1px; height: 100%; background: #fff;}
.reser-table2 table {position: relative;}
.reser-table2 table::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: #000000;}
.reser-table2 table.align-c td {text-align: center;}
.reser-table2 thead {position: relative;}
.reser-table2 thead::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #000000;}
.reser-table2 thead th {padding: 1.35rem 1rem; background: #f1f1f1; border-right: 1px solid #dddee0; border-bottom: 1px solid #dddee0; font-weight: normal; font-family: pm; font-size: 1.7rem; color: #000000;}
.reser-table2 tbody {display: table-header-group;}
.reser-table2 tbody::after {content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #8a8a8a;}
.reser-table2 tbody th {padding: 1.2rem 2rem; background:#f1f6fa; border-right: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5; font-family: pm; font-weight: 400; font-size: 1.7rem; color: #000000;}
.reser-table2 tbody td {padding: 1.2rem 2rem; background:#fff; border-right: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5; font-family: pr; font-size: 1.6rem; text-align: left; color: #555555; line-height: 1.6;}
.reser-table2.center tbody td {text-align: center;}
.reser-table2 tbody td a {color: #333;}
.reser-table2.mini thead th,
.reser-table2.mini tbody th,
.reser-table2.mini tbody td {padding: .7rem; font-size: 1.5rem;}
.reser-table2 .align-l {text-align: left !important;}
.reser-table2 .align-c {text-align: center !important;}
.reser-table2 .align-r {text-align: right !important;}
.reser-table2 .align-t {vertical-align: top !important;}
.reser-table2 .con-list1 > ul > li {font-size: 1.6rem; color: #555;}
.reser-table2 .circle-num-list > ul > li {font-size: 1.6rem; color: #555;}
.reser-table2 .circle-num-list > ul > li > .num {top: .3rem;}

@media screen and (max-width: 1120px){
	.reser-table2 {overflow-x: hidden; min-height: 13rem;}
	.reser-table2.on {min-height: auto;}
	.reser-table2.no-scroll {min-height: auto;}
	.reser-table2 table {width: 130rem;}
	.reser-table2.no-scroll table {width: 100%;}
	.reser-table2.no-scroll:after {content: ''; position: absolute; right: 0px; top: 0px; width: 1px; height: 100%; background: #fff;}
	.reser-table2:after {content: ''; position: absolute; right: 0px; top: 0px; z-index: 1; width: 100%; height: 100%; background: rgba(31,59,101,0.1) url('../images/img_mobile_text.png') no-repeat center 2rem;}
	.reser-table2.on:after {display: none;}
	.reser-table2 thead th,
	.reser-table2 tbody th,
	.reser-table2 tbody td {font-size: 1.7rem;}
}

/* 딤 작성폼 */
.apply-form .must-text {display: flex; justify-content: flex-end; font-family: pm; font-size: 1.6rem; color: #155fbb;}
.apply-form {display: flex; flex-wrap: wrap; border-top: 2px solid #2c2c2c;}
.apply-form .row {display: flex; justify-content: flex-start; align-items: flex-start; width: 100%;}
.apply-form .row .title {display: flex; align-items: flex-start; flex-shrink: 0; width: 24rem; height: 100%; min-height: 7rem; padding: 2rem 0 2rem 3rem; background: #f5f7f9; border-bottom: 1px solid #e1e1e1; font-family: pm; font-size: 1.8rem; color: #050505;}
.apply-form .row .title .must {display: flex; position: relative; left: 1rem; top: .4rem; width: .8rem; height: .9rem; background: url('../images/ic-must.png') no-repeat center / cover; text-indent: -9999rem;}
.apply-form .row .insert {display: flex; align-items: center; flex-grow: 1; padding: 1.5rem 3rem; min-height: 7rem; border-bottom: 1px solid #e1e1e1; font-family: pr; font-size: 1.6rem; color: #666666;}
.apply-form .row .insert.wrap {flex-wrap: wrap;}
.apply-form .row .insert .vertical {display: flex; flex-direction: column; align-items: flex-start; width: 100%;}
.apply-form .row .insert .horizon {display: flex; align-items: center; width: 100%;}
.apply-form .row .insert input[type="text"] {width: 100%; height: 4rem; padding: 0 2rem; border: 1px solid #cccccc; border-radius: .5rem; font-family: pr; font-size: 1.5rem; color: #666666;}
.apply-form .row .insert input[type="text"].date {background: url('../images/ic-date.png') no-repeat calc(100% - 1.7rem) center;}
.apply-form .row .insert input[type="text"]:focus {background-color: #eff4f7; border-color: #8497b2; transition: .35s;}
.apply-form .row .sel-line {display: flex; align-items: center;}
.apply-form .row select {display: flex; height: 4.5rem; padding-left: 1.5rem; padding-right: 6.5rem; background: url('../images/ic-search-arrow.png') no-repeat calc(100% - 1.5rem) center; border: 1px solid #d1d1d1; border-radius: .5rem; font-family: pm; font-size: 1.6rem; color: #333; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.apply-form .row select:focus {background-color: #eff4f7; border-color: #8497b2; transition: .35s;}
.apply-form .row .insert textarea {width: 100%; min-height: 16rem; padding: 2rem; border: 1px solid #cccccc; border-radius: .5rem; font-family: pr; font-size: 1.5rem; color: #666666;}
.apply-form .row .insert textarea:focus {background-color: #eff4f7; border-color: #8497b2; transition: .35s;}
.apply-form .row .insert .multselBox {width: 100%; padding: 1rem; border: 1px solid #d1d1d1; border-radius: .5rem; font-family: pm; font-size: 1.6rem; color: #333;}
.apply-form .row .insert .multselBox:focus {background-color: #eff4f7; border-color: #8497b2; transition: .35s;}
.apply-form .row .insert .attach {display: flex; align-items: center; margin-top: 1rem;}
.apply-form .row .insert .attach .add {margin-right: 1rem;}
.apply-form .row .insert .attach input {display: flex; height: 3rem; padding: 0 1rem; background: #fff; border: 1px solid #0d5dbe; border-radius: .5rem; font-family: pm; font-size: 1.4rem; color: #0d5dbe;}
.apply-form .row .insert .attach input:hover {background: #0d5dbe; color: #fff;}
.apply-form .row .max400 {max-width: 40rem;}

@media screen and (max-width: 1220px) {
	.apply-form .row .reser-date {width: 100%;}
	.apply-form .row .sel-line {justify-content: space-between; width: 100%;}
	.apply-form .row .sel-line select {width: 100%; padding-right: 3.5rem;}
	.apply-form .row .sel-line.sel1 {margin: 1rem 0;}
}

@media screen and (max-width: 805px) {
	.wrap-sexual .noti {flex-wrap: wrap; padding: 3rem;}
	.wrap-sexual .noti .ico {width: 100%; display: flex; justify-content: center;}
	.wrap-sexual .noti .text {padding-top: 3rem;}
}

@media screen and (max-width: 650px) {
	.apply-form .row {flex-wrap: wrap;}
	.apply-form .row .title {width: 100%; height: auto; min-height: auto; padding: 1.5rem 2rem;}
	.apply-form .row .insert {min-height: auto; padding: 1.5rem 2rem;}
}

/* 딤 장소정보 */
.reser-location .row {display: flex; justify-content: flex-start; align-items: flex-start;}
.reser-location .thumb {flex-shrink: 0; width: 46rem;}
.reser-location .thumb img {width: 100%; border-radius: .5rem;}
.reser-location .info {flex-grow: 1; padding-left: 4rem;}

@media screen and (max-width: 1100px) {
	.reser-location .thumb {width: 30rem;}
}

@media screen and (max-width: 900px) {
	.reser-location .row {flex-direction: column;}
	.reser-location .thumb {width: 100%;}
	.reser-location .info {padding-left: 0; padding-top: 4rem;}
}

/* 커스텀 체크박스 */
.cm-check {position: relative;}
.cm-check input {position: absolute; opacity: 0;}
.cm-check span {display: inline-block; position: relative; font-family: pm; font-size: 1.6rem; color: #333333; letter-spacing: 0;}
.cm-check span::before {content: ""; position: absolute;}

.cm-check.style1 span {padding-left: 3.5rem; line-height: 3rem;}
.cm-check.style1 span::before {width: 2.5rem; height: 2.5rem; border: 1px solid #ccc; left: 0; top: .3rem; border-radius: 100%; background: #fff;}
.cm-check.style1 input:focus + span::before {border-color: #0067f0;}
.cm-check.style1 input:focus:checked + span::before {border-color: #0067f0;}
.cm-check.style1 input:checked + span::before {background: #0067f0 url("../images/ic_check_on.png") no-repeat center; border-color: #0067f0;}
.cm-check.style1 input:checked + span {color: #000;}
.cm-check.style1.read-yes input + span::before {background: #999 url("../images/ic_check_on.png") no-repeat center; border-color: #999;}
.cm-check.style1.read-no input + span::before {background: #eaeaea; border-color: #9B9B9B;}


/* 버튼 */
.btn-control .row {display: flex; justify-content: flex-end;}
.btn-control.center .row {justify-content: center;}
.btn01,.btn02,.btn03,.btn04,.btn05,.btn06 {display: inline-flex; justify-content: center; align-items: center; min-width: 13rem; height: 5rem; padding: 0 1.5rem; border-radius: .5rem; font-family: pm; font-size: 1.6rem; color: #fff !important; transition: .35s;}
.btn01.small,.btn02.small,.btn03.small,.btn04.small,.btn05.small,.btn06.small {min-width: 9rem; height: 4rem; font-size: 1.4rem;}
.btn01 {background: #00baff;}
.btn01:hover {background: #0d5dbe;}
.btn02 {background: #fff; border: 1px solid #333; color: #333 !important;}
.btn02:hover {background: #000; color: #fff !important;}
.btn03 {background: #05bcd7;}
.btn03:hover {background: #006274;}
.btn04 {background: #39329c;}
.btn04:hover {background: #302a6c;}
.btn05 {background: #ff8400;}
.btn05:hover {background: #934c00;}
.btn06 {background: #9f9f9f;}
.btn06:hover {background: #616161;}

.normal-button .btn-style1 p {padding: 0 1rem;}