@charset "utf-8";

/* 서브페이지 헤더 */
.s_header { margin-bottom: 60px;}
.s_header .sub_tit {margin-bottom: 40px; font-size: 4rem; font-family: 'Jalnan'; line-height: 1.6;}
.s_header .s_nav {width: 100%; max-width: 1200px; height: 72px; background-color: #2772E2; border-radius: 12px; position: relative;}
.s_nav ul {display: flex;}
.s_nav ul li {width: fit-content; min-width: 96px; color: #fff; line-height: 72px;}
.s_nav .home {height: 100%; background-color: #003A88; text-indent: -9999em; overflow: hidden; position: relative; z-index: 1; border-radius: 12px;}
.s_nav .home a::before {content: ''; display: block; width: 24px; height: 24px; text-indent: -9999em; background: url(../../images/home.svg) no-repeat center; position: absolute; top: 50%; left: 28px; transform: translateY(-50%);}
.s_nav .home a {display: block; width: 100%; height: 100%} 
.s_nav .s_depth01, .s_nav .s_depth02 {width: fit-content; height: 100%; margin-left: -24px; border-radius: 12px}
.s_nav .s_depth01 {background-color: #1A60C9; z-index: 2;}
.s_nav .s_depth02 {background-color: #2772E2; z-index: 3;}
.s_nav .s_depth01 a, .s_nav .s_depth02 a {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 0 20px 0 40px; position: relative;}
.s_nav .s_depth01 span, .s_nav .s_depth02 span {padding-right: 60px; color: #fff; font-size: 1.8rem; }
.s_nav .s_depth01 a::after, .s_nav .s_depth02 a::after {display: block; content: ''; width: 20px; height: 20px; padding: 0 20px; background: url(../../images/menu-arrow_w.svg) no-repeat center;}
/* .s_nav .list-member {display: none; position: absolute; top: 100%; background-color: #003A88; z-index: 1; } */
.s_nav .list-member {display: none; top: 100%; background-color: #003A88; z-index: 1; }
.s_nav .list-member li {width: 100%; color: #fff;  line-height: 50px;}
.s_nav .list-member li:not(:last-of-type) {border-bottom: 1px solid #55677e;}
.s_nav .list-member li a {padding: 0 20px 0 20px;}
.s_nav .list-member li a span {font-size: 1.6rem; font-weight: 400;}
.s_nav .list-member li a::after {display: none;}

@media (max-width: 1024px) {
    .s_header .s_nav {height: 60px; border-radius: 8px;}
    .s_nav>ul {height: 100%;}
    .s_nav ul li {min-width: 60px;}
    .s_nav .home {border-radius: 8px 0 0 8px / 12px;}
    .s_nav .home a::before {left: 50%; transform: translate(-50%, -50%);}
    .s_nav .s_depth01, .s_nav .s_depth02 {margin-left: 0; border-radius: 0;}
    .s_nav .s_depth01 a, .s_nav .s_depth02 a {padding-left: 24px;}
    .s_nav .s_depth01 a::after, .s_nav .s_depth02 a::after {padding: 20px;}
    .s_nav .s_depth01 span, .s_nav .s_depth02 span {font-size: 1.6rem; }
}

@media (max-width: 768px) {
    .s_header .sub_tit {margin-bottom: 20px;}
    .s_nav .s_depth01 {display: none;}
    .s_nav .s_depth02 {flex: 1; border-radius: 8px;}
    .s_nav .s_depth02 a {padding-right: 0;}
    .s_nav .list-member {width: 100%;}
    .s_nav .list-member li a {padding-right: 0;}
}

@media (max-width: 480px) {
    .s_nav ul li {min-width: 40px;}
    .s_header .s_nav {height: 40px;}
    .s_nav .home a::before {background-size: 14px 14px; }
    .s_nav .s_depth02 a {padding-left: 20px;}
    .s_nav .s_depth02 a::after {background-size: 12px 12px;}
    .s_nav .list-member li {line-height: 40px;}
    .s_nav .list-member li a span {font-size: 1.4rem;}
}

.conBox {width: 100%; height: fit-content; padding: 24px; border-radius: 8px; background: var(--color-gray10);}
.conBox .txtBox {width: 100%; height: 100%; padding: 16px 24px; border-radius: 8px; background: #fff;}

@media (max-width: 768px) {
    .conBox {padding: 16px;}
    .conBox .txtBox {padding: 16px 20px;}
}

/* 공공체육시설 > 시설 */
.desc_wrap {width:100%; display: flex; gap: 40px; justify-content: space-between;}

.desc_wrap .img-box {width: 572px; height: 350px; overflow: hidden; border-radius: 8px;}
.desc_wrap .img-box img {width: 100%; height: 100%; object-fit: cover;}

.desc_wrap .sisul-desc {flex: 1}
.sisul-desc .badge {display: flex; gap: 4px; margin-bottom: 1rem;}
.sisul-desc .badge span {display: block; width: 64px; padding: 4px; border-radius: 2px; color: #fff; font-size: 1.4rem; font-weight: 500; text-align: center;}
.badge span.possible {background-color: #0DBF67;}
.badge span.impossible {background-color: #444;}
.badge span.free {background-color: #4C6EF4;}
.badge span.cost {background-color: #F76707;}
.sisul-tit {margin-bottom: 2rem; font-size: 2.8rem; font-weight: 600; line-height: 1.6; letter-spacing: -0.04rem;}

.sisul-info {border-top: 2px solid #000;}
.sisul-info dl {display: flex; border-bottom: 1px solid var(--color-stroke);}
.sisul-info dl dt {flex: 0 0 160px;}
.sisul-info dl dt, .sisul-info dl dd {font-size: 1.7rem; padding: 20px 0;}
.sisul-info dl dd {flex:1; color: var(--font-gray);}

@media (max-width: 520px) {
    .sisul-info {border-bottom: 2px solid #000;}
    .sisul-info dl {flex-direction: column; border-bottom: none;}
    .sisul-info dl dt, .sisul-info dl dd {width: 100%; padding: 20px 10px;}
    .sisul-info dt {flex:1 !important; background-color: var(--color-gray20);}
}

/* .desc-table {border-top: 2px solid #000;}
.desc-table tr {border-bottom: 1px solid var(--color-stroke);}
.desc-table th,td {font-size: 1.7rem !important;}
.desc-table th {font-weight: 500; text-align: left;}
.desc-table td {color: var(--font-black20);} */

.reservation-info {margin-bottom: 80px; background-color: #FFF7EC; border: 1px solid #FFF1DE;}
.reservation-info::before {border: 1px solid #FFF1DE;}
.reservation-info .reservation-btn {color: #fff; text-align: center; padding: 12px 40px; background-color: var(--color-orange); font-size: 2rem; font-weight: 600; border-radius: 4px;}

@media (max-width: 1024px) {
    .desc_wrap {flex-direction: column; gap: 20px;}
    .desc_wrap .img-box ,
    .desc_wrap .sisul-desc {width: 100%;}    
}

/*==== 이용안내 ====*/
.caution-info {background-color: var(--color-gray10);}
.caution-info::before {border: 1px solid var(--color-gray20);}

/* 예약하기 */

/* 예약하기 > 예약하기 */
.tab-list {display: flex; width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 12px 8px; justify-content: flex-start; margin-bottom: 40px ;}
.tab-list li {background-color: #f7f7f7; border-radius: 50px;}
.tab-list li.active {background-color: #ECF6FF; border: 1px solid #D5E8F9;}
.tab-list li.active a {color: var(--color-secondary); font-weight: 600;}
.tab-list li a {display: block; padding: 12px 20px; white-space: nowrap; text-align: center; font-size: 1.7rem;}

/* .sisul-searchBar {width: 100%; padding: 20px 28px; margin-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background: var(--color-gray10); border-radius: 12px;}
.sisul-searchBar strong.total {font-size: 1.7rem;}
.sisul-searchBar strong.total .f_orange {font-weight: 600; color: var(--color-orange);}
.sisul-searchBar .select-srh {display: flex; align-items: center; gap: 8px;}
.sisul-searchBar .select-srh select {height: 44px; padding: 12px 126px 12px 20px; font-size: 1.5rem; font-family: 'Pretendard'; background: #fff; border-radius: 4px; border: 1px solid var(--color-gray10);}
.sisul-searchBar .select-srh select {background-image:url('../../images/select-arrow2.svg'); background-size: 10px auto;; background-repeat: no-repeat; background-position: 95% 50%;}
.sisul-searchBar .select-srh .search-btn {height: 44px; padding: 12px 32px; background: #222; color: #fff; font-size: 1.7rem;  border-radius: 4px;}

@media (max-width: 768px) {
    .sisul-searchBar {flex-direction: column; align-items: flex-start; gap: 20px; padding: 30px 24px;}
    .sisul-searchBar .select-srh {flex-direction: column; gap: 12px; width: 100%;}
    .sisul-searchBar .select-srh select {width: 100%;}
    .sisul-searchBar .select-srh .search-btn {width: 100%;}
} */

.sisul-list {width: 100%; height: 100%; margin-bottom: 80px;}
.sisul-list ul {width: 100%; display: flex; flex-wrap: wrap; gap: 24px;}
.sisul-list ul .info-list {width: calc((100% / 3) - 16px); border: 1px solid #eee; border-radius: 12px; overflow: hidden;}
.info-list .lst_thumb {width: 100%; height: 260px; min-height: 260px; object-fit: contain;}
.info-list .lst_thumb img {width: 100%; height: 100%; object-fit: cover;}
.info-list .lst_cont {padding: 20px 28px;}
.info-list .lst_cont .tit-box {margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-stroke);}
.info-list .lst_cont .tit-box p {line-height: 1.3; margin-bottom: 6px; font-size: 1.5rem; color: var(--font-black20);}
.info-list .lst_cont .tit-box strong {display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.3; font-size: 2rem; font-weight: 600; color: var(--font-black10);}
.info-list .lst_cont hr {margin-bottom: 16px; color: var(--color-stroke);}
.info-list .lst_cont .sisul-desc {gap: 16px; margin-bottom: 30px; flex-direction: column;}
.info-list .lst_cont .sisul-desc li {display: flex; width:100%; flex-wrap: no-wrap; align-items: flex-start; overflow: hidden; font-size: 1.5rem;}
.info-list .lst_cont .sisul-desc li .stit {flex: 0 0 80px; font-weight: 500;}
.info-list .lst_cont .sisul-desc li .txt {flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--font-black20);}

.info-list a.view-more {width: 100%; padding: 12px 10px; display: flex; justify-content: center; align-items: center; width: 100%; border-radius: 4px; background-color: var(--color-gray20); transition: background-color 0.3s ease;}
.info-list a.view-more:hover {background-color: var(--font-gray); color: #fff;}
.info-list a.view-more i {display: flex; font-size: 1.5rem; font-weight: 500; }
.info-list a.view-more i::after {display: block; content: ''; width: 16px; height: 16px; background: url(../../images/viewmore.svg);}
.info-list a.view-more:hover i::after {display: block; content: ''; width: 16px; height: 16px; background: url(../../images/viewmore_w.svg); background-repeat: no-repeat; background-position: center;}
.info-list a.view-more.rsrv {background-color: var(--color-primary); color: #fff;}
.info-list a.view-more.rsrv:hover {background-color: #222;}

@media (max-width: 1024px) {
    .sisul-list ul .info-list {width: calc(50% - 12px);}
}

@media (max-width: 768px) {
    .info-list .lst_thumb {height: 400px;}
    .sisul-list {margin-bottom: 60px;}
    .sisul-list ul .info-list {width: 100%;}
}

/* 검색결과 없음 */
.no-results {display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 80px; padding: 40px 0;}
.no-results p {display: flex; align-items: center; flex-direction: column; color: var(--font-gray); font-size: 1.8rem; font-weight: 500;}
.no-results p::before {display: block; content: ''; width: 60px; height: 62px; margin-bottom: 20px; background: url(../../images/noresult.svg) no-repeat center;}

@media (max-width: 768px) {
    .no-results {margin-bottom: 60px;}
}

/* 진행단계 */
.process-box {width: 100%; padding: 40px 0; margin-bottom: 80px; display: flex; justify-content: center; align-items: center; border: 2px solid var(--color-gray20); border-radius: 12px;}
.process-box ol {position: relative; display: flex; width: 100%; justify-content: center; align-items: center; gap: 134px;}
.process-box ol li {display: flex; flex-direction: column; align-items: center; min-width: 100px; color: var(--font-gray); position: relative;}
.process-box ol li.active {color: var(--font-green);}
.process-box ol li .step {display: block; font-size: 1.4rem; font-weight: 400;}
.process-box ol li .step-tit {font-size: 1.8rem; font-weight: 600; line-height: 1.6;}
.process-box ol li .step-check {display: block; width: 32px; height: 32px; margin-bottom: 10px; border-radius: 100%; background-color: var(--color-gray20); background-image: url(../../images/check.svg); background-repeat: no-repeat; background-position: center;}
.process-box ol li.active .step-check {background-color: var(--color-yellowgreen);}

.process-box ol li:not(:first-child)::before {display: block; content: ''; width: 100px; border: 1px dashed #e2e2e2; position: absolute; top: 14px; left: -117px;}
.process-box ol li.active:not(:first-child)::before {border: 1px dashed var(--color-yellowgreen);}

@media (max-width: 1024px) {
    .process-box ol li:not(:first-child)::before {display: none;}
    .process-box ol {width: 100%; gap: 0; justify-content: space-evenly;}
}

@media (max-width: 768px) {
    .reservation-tit {font-size: 3.2rem;}
    .process-box {border: none; padding: 0; margin-bottom: 60px;}
    .process-box ol li .step {font-size: 1.2rem;}
    .process-box ol li .step-tit {font-size: 1.6rem;}
}

@media (max-width: 480px) {
    .process-box ol {gap: 0;}
    .process-box ol li {min-width: 50px;}
    .process-box ol li .step {font-size: 1.2rem;}
    .process-box ol li .step-tit {display: none;}
}


.reservation-tit {margin-bottom: 40px; text-align: center; font-size: 4rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.6; word-break: keep-all;}
.reservation-tit span {color: #168AC3;}

@media (max-width: 768px) {
    .reservation-tit {font-size: 3.2rem;}
}

@media (max-width: 480px) {
    .reservation-tit {font-size: 2.8rem;}
}

/* 단체 구분 버튼 */
.user-type {display: flex; width: 100%; gap: 24px; margin-bottom: 80px;}
.user-type .option-btn {display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;}
.user-type .option-btn {width: calc(50% - 12px); height: 100%; padding: 40px 0; font-size: 2rem; font-weight: 500; color: var(--font-black20); background-color: var(--color-gray10); border-radius: 8px; transition: background-color 0.3s, color 0.3s;}
.user-type .option-btn::before {display: block; content: ''; width: 80px; height: 80px; margin-bottom: 20px; border-radius: 100%; background-color: #fff; background-repeat: no-repeat; background-position: center;}
.user-type .option-btn.single::before {background-image: url(../../images/usertype01_gray.svg); }
.user-type .option-btn.multiple::before {background-image: url(../../images/usertype02_gray.svg); }

input[type="radio"]:checked + .option-btn {color: var(--color-primary); border: 2px solid var(--color-primary); background: var(--color-skyblue); box-shadow: 0 0 10px rgba(0, 58, 136, 0.2);}
input[type="radio"]:checked + .option-btn.single::before {background-image: url(../../images/usertype01_navy.svg);}
input[type="radio"]:checked + .option-btn.multiple::before {background-image: url(../../images/usertype02_navy.svg);}

@media (max-width: 480px) {
    .user-type {flex-direction: column; gap: 12px;}
    .user-type .option-btn {width: 100%; padding: 20px 0; font-size: 1.8rem;}
}

button.status-btn {min-width: 80px; padding: 6px 12px; font-size: 1.6rem; color: #fff; border-radius: 2px;}
button.possible {background-color: var(--color-green) ;}
button.impossible {pointer-events: none; user-select: none; background-color: var(--font-black20);}
button.selected {background-color: var(--color-primary);}

button.reservation-btn02 {text-align: center; padding: 16px 140px; background-color: #222; border-radius: 4px;}
button.reservation-btn02:hover {background-color: var(--color-primary);}
button.reservation-btn02 i {gap: 4px; color: #fff; font-size: 2rem; font-weight: 500;}
button.reservation-btn02 i::after {width: 24px; height: 24px; display: block; content: ''; background: url(/ocsport/images/nextPage.svg) no-repeat center;}
a.prevPage-btn {width: 180px; padding: 16px 10px; color: var(--color-primary); border: 1px solid var(--color-primary); background-color: var(--color-gray10); border-radius: 4px;}
a.prevPage-btn i {color: var(--color-primary); font-size: 2rem; font-weight: 500;}
a.prevPage-btn i::before {width: 24px; height: 24px; display: block; content: ''; background: url(/ocsport/images/prevPage.svg) no-repeat center;}
button.nextPage-btn {width: 180px; padding: 16px 10px; color: var(--color-primary); background-color: #222; border-radius: 4px;}
button.nextPage-btn:hover {background-color: var(--color-primary);}
button.nextPage-btn i {gap: 4px; color: #fff; font-size: 2rem; font-weight: 500;}
button.nextPage-btn i::after {width: 24px; height: 24px; display: block; content: ''; background: url(/ocsport/images/nextPage.svg) no-repeat center;}

@media (max-width: 768px) {
    button.reservation-btn02 i {font-size: 1.7rem;}
    a.prevPage-btn i,
    button.nextPage-btn i {font-size: 1.7rem;}
    a.prevPage-btn,
    button.nextPage-btn  {padding: 10px; width: 160px;}

}

@media (max-width: 480px) {
    button.reservation-btn02 {width: 100%; padding: 16px 0;}
}

/* 약관동의 */
.policy {width: 100%; height: auto; padding: 32px; background-color: var(--color-gray10); border-radius: 4px; margin-bottom: 40px;}
.policy:not(:last-of-type) {margin-bottom: 80px;}
.policy .scroll-box {max-height: 300px; overflow-y: scroll; margin-bottom: 24px; padding: 20px 32px; background-color: #fff;}
.policy .policy-tit {display: inline-block; line-height: 1.6; font-size: 1.8rem; font-weight: 600; margin-bottom: 10px;}
.policy .policy-txt {display: flex; justify-content: space-between;}
.policy .policy-lst li {font-size: 1.6rem; line-height: 1.5;}
.agree-box {display: flex; gap: 20px;}
.agree-box label {display: flex; flex-direction: row; align-items: center; gap: 5px;}

@media (max-width: 768px) {
    .policy .policy-txt {flex-direction: column; gap: 10px;}
}

.certification_wrap {width: 100%; padding: 60px 20px; margin-bottom: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid var(--color-stroke); border-radius: 4px;}
.certification_wrap .certification {position: relative; width: 150px; height: 150px; margin-bottom: 20px; border-radius: 100%; background-color: #C1E0FF;}
.certification_wrap .certification::after {position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); content: ''; width: 100px; height: 121px; background: url(../../images/certification.png) no-repeat;}
.certification_wrap .tit {margin-bottom: 4px; font-size: 3.2rem; font-weight: 600; color: var(--color-primary); line-height: 1.3;}
.certification_wrap .txt {margin-bottom: 40px; font-size: 1.8rem; color: var(--font-gray); word-break: keep-all; text-align: center; line-height: 1.3;}
.certification_wrap .certification-btn {padding: 10px 40px; color: var(--color-primary); font-size: 1.8rem; font-weight: 500; border-radius: 4px; background-color: var(--color-skyblue); border: 1px solid var(--color-primary);}
.certification_wrap .certification-btn:hover {background-color: var(--color-primary); color: #fff;}

@media (max-width: 768px) {
    .certification_wrap {padding: 40px 20px; margin-bottom: 40px;}
    .certification_wrap .certification {width: 120px; height: 120px;}
    .certification_wrap .certification::after {width: 90px; height: 90px; background: url(../../images/certification.png) no-repeat center/contain;}
    .certification_wrap .tit {font-size: 2.8rem; margin-bottom: 4px;}
    .certification_wrap .txt {font-size: 1.6rem; margin-bottom: 30px;}

}

@media (max-width: 480px) {
	.policy {padding: 20px;}
	.agree-box {flex-direction: column; gap: 8px;}
}

/* 예약정보 입력 :step 3*/
table .subject {display: flex; flex-direction: column; gap: 12px;}

button.check-target {width: fit-content; background: #777; color:#fff; margin-left: 4px; padding: 6px 16px; border-radius: 4px; display: inline-flex;justify-content: center;align-items: center;}
button.check-target:hover {background-color: var(--color-primary);}
.required-indicator {color: var(--color-orange); font-weight: 600;}
.sr-only {position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;border: 0;clip: rect(0, 0, 0, 0);clip-path: inset(50%);white-space: nowrap;}
input#input-num {width: 100px;}
.account_box {display: flex; flex-direction: column; gap: 12px;}
.account_box > div {display: flex; gap: 4px; flex-direction: column;}
.account_box label {padding-left: 4px; font-size: 1.5rem; color: #444;}
.account_box .inp_row {display: flex; flex-direction: row; gap: 4px;}
.account_box .inp_row input:nth-child(1){width: calc(30% - 3px);}
.account_box .inp_row input:nth-child(2) {width: calc(70% - 3px);}

@media (max-width: 768px) {
    .account_box .inp_row {flex-direction: column;}
    .account_box .inp_row input:nth-child(1),
    .account_box .inp_row input:nth-child(2) {width: 100%;}
}


/* 예약정보 입력 :step 4*/
button.reservation-check {text-align: center; padding: 16px 140px; background-color: #222; border-radius: 4px; color: #fff; font-size: 2rem; font-weight: 500;}
button.reservation-check:hover {background-color: var(--color-primary);}

@media (max-width: 768px) {
    button.reservation-check {font-size: 1.7rem;}
}

@media (max-width: 480px) {
    button.reservation-check {width: 100%; padding: 16px 0;}
}


/* 테이블 in select 박스 */
.table td .tbl-in-select {display: flex; flex-wrap: wrap; align-items: center; gap: 10px;}

/* 테이블 옵션 금액 */
.price-wrap {font-size: 1.6rem;}
.price-wrap strong {font-size: 2.0rem; font-weight: 600;}
.price-wrap em {font-size: 2.0rem; }
.ultimate-price {display: flex; align-items: baseline; }
.price-wrap.txt-orange strong{color:#F76707; font-size: calc(2.4rem + 1vw);}

@media (max-width: 768px) {
    .ultimate-price {flex-direction: column; align-items: flex-start;}
}


/*==== 예약내역 확인 ====*/
.reserv-cancel {padding: 6px 12px; color: #fff; font-size: 1.6rem; background-color: #444; border-radius: 2px;}
.reserv-cancel:hover {background-color: var(--color-orange);}


/*==== 공지사항 글쓰기 ====*/
a.cancel {background-color: var(--font-black10); font-size: 1.8rem; color: #fff; padding: 10px 40px; border-radius: 4px; }
button.register {background-color: var(--color-primary); font-size: 1.8rem; color: #fff; padding: 10px 40px; border-radius: 4px;}

@media (max-width: 768px) {
    a.cancel, button.register {font-size: 1.6rem;}
}


/* 3차메뉴 : 탭표시 */
/* .tab-wrap {position:relative;margin-bottom:40px;}
.tab-wrap ul {position:relative;}
.tab-wrap ul li {position:relative;float:left;box-sizing:border-box;z-index:10;}
.tab-wrap.tab1 ul li {width:100%;}
.tab-wrap.tab2 ul li {width:50%;}
.tab-wrap.tab3 ul li {width:33.33%;}
.tab-wrap.tab4 ul li {width:25%;}
.tab-wrap.tab5 ul li {width:20%;}
.tab-wrap.tab6 ul li {width:16.66%;}
.tab-wrap ul li a {position:relative;display:table;width:100%;height:68px;padding:0;background:#f5f6f9;color:#4f5051;font-size:18px;line-height:28px;border:1px solid #d5d6d9;box-sizing:border-box;}
.tab-wrap ul li a span {position:relative;display:table-cell;padding:0 30px 0 20px;vertical-align:middle;}
.tab-wrap ul li a span:before {content:'';display:block;position:absolute;top:31px;right:16px;width:18px;height:4px;background:url("../../images/sub/tab_off.png") no-repeat;}
.tab-wrap ul li:hover {border-left:0;box-shadow:4px 2px 6px #c0c4ca;transition:0.2s ease-out;}
.tab-wrap ul li:hover a {position:relative;background:#fff;color:#2f3036;border:1px solid #818387;border-left:0;}
.tab-wrap ul li:hover a:before {content:'';display:block;position:absolute;top:0;left:0;width:1px;height:100%;background:#4f5051;z-index:11;}
.tab-wrap ul li:hover a span {padding:0 30px 0 16px;}
.tab-wrap ul li:hover a span:before {background:url("../../images/sub/tab_hover.png") no-repeat;}
.tab-wrap ul li.on {border-left:0;box-shadow:4px 2px 6px #c0c4ca;}
.tab-wrap ul li.on a {background:#fff !important;color:#2f3036;font-weight:500;border:4px solid #199687;}
.tab-wrap ul li.on:hover a:before {display:none;}
.tab-wrap ul li.on a span {padding:0 30px 0 16px;}
.tab-wrap ul li.on a span:before {top:28px;right:12px;background:url("../../images/sub/tab_on.png") no-repeat;}
 */
 
 /* 3차메뉴 : 탭표시 */
 .tab-wrap {width:100%;margin-bottom:40px;}
.tab-wrap ul {display:flex;width:100%;flex-wrap:nowrap;gap:8px;overflow-x:auto;}
.tab-wrap ul li {height:fit-content;background:#f7f7f7;border-radius:50px;}
.tab-wrap ul li a {display:block;height:40px;padding:0 30px;white-space:nowrap;text-align:center;line-height:40px;font-size:1.7rem;}
.tab-wrap ul li.on,
.tab-wrap ul li:hover {background-color:#ECF6FF; border:1px solid #D5E8F9;}
.tab-wrap ul li:hover a,
.tab-wrap ul li.on a {color:var(--color-secondary);font-weight:600;}


/* 예약달력 */
.cal-wrap {display: flex; flex-direction: column; width:100%; margin-bottom: 80px;}
.cal-wrap .cal_tt {position:relative; margin-bottom: 30px; text-align:center;}
.cal-wrap .cal_tt .month {display:flex; justify-content: center; align-items: center; gap: 20px; color:#101010;font-size:40px;font-weight:600;line-height:1.3; word-break: keep-all; order: 1;}
.cal-wrap .cal_tt a {display: block; width: 40px; height: 40px; text-indent: -9999em;}
.cal-wrap .cal_tt .prev {background:url("../../images/content/prev3.gif") no-repeat center;}
.cal-wrap .cal_tt .next {background:url("../../images/content/next3.gif") no-repeat center;}
/* .cal-wrap .cal_tt .month {position:relative;display:inline-block;color:#101010;font-size:48px;font-weight:600;line-height:54px;}
.cal-wrap .cal_tt a {position:absolute;top:15px;width:36px;height:27px;font-size:0;}
.cal-wrap .cal_tt .prev {left:-70px;background:url("../../images/content/prev3.gif") no-repeat;}
.cal-wrap .cal_tt .next {right:-70px;background:url("../../images/content/next3.gif") no-repeat;} */
.cal-wrap .cal_con {clear:both;position:relative;width:100%;margin-bottom:20px; order: 2;}
.cal-wrap .cal_con table {position:relative;table-layout:fixed;width:100%;border-top:2px solid #202020;border-bottom:1px solid #dfe0e3;border-collapse:collapse;z-index:20;}
.cal-wrap .cal_con table thead tr {float:none;width:100%;border-bottom:1px solid #dfe0e3;background:#fff;}
.cal-wrap .cal_con table tbody tr {float:none;width:100%;border-top:1px solid #dfe0e3;}
.cal-wrap .cal_con table th {color:#4f5051;font-size:17px;font-weight:500;line-height:20px;border-left:1px solid #dfe0e3;}
.cal-wrap .cal_con table th:first-child {border-left:0;}
.cal-wrap .cal_con table thead th {padding:16px 0;}
.cal-wrap .cal_con table td {height:130px;background:#f1f2f4;color:#4f5051;font-size:15px;line-height:20px;border-left:1px solid #dfe0e3;vertical-align:top;z-index:10;}
.cal-wrap .cal_con table td:first-child {border-left:0;}
.cal-wrap .cal_con table td .dateCell {cursor:auto;display:block;height:130px;}
.cal-wrap .cal_con table td .num {display:inline-block;padding:18px 10px 8px 20px;}
.cal-wrap .cal_con table th.sun,
.cal-wrap .cal_con table td.sun .num,
.cal-wrap .cal_con table td.holiday .num {color:#c32b2b !important;}
.cal-wrap .cal_con table th.sat,
.cal-wrap .cal_con table .sat .num {color:#4771d2 !important;}
.cal-wrap .cal_con table .ok {background:#e1edfd;}
.cal-wrap .cal_con table .ok .dateCell {cursor:pointer !important;}
.cal-wrap .cal_con table .on {background:#fff;border:1px solid #202020;}
.cal-wrap .cal_con table .on .num {color:#101010;}
.cal-wrap .cal_con table .schedule .con {display:block;padding:0 15px 0 20px;}
.cal-wrap .cal_con table .schedule .con ul {overflow:hidden; height:60px;}
.cal-wrap .cal_con table .schedule .con .xList {overflow:hidden; height:20px;}
.cal-wrap .cal_con table .schedule .con ul li .txt {overflow:hidden;display:block;position:relative;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;background:url("../../images/sub/conList5.gif") no-repeat left 11px;vertical-align:top;box-sizing:border-box;}
.cal-wrap .cal_con table .schedule .con ul li .time {display:none;}
.cal-wrap .cal_con table .schedule .con ul li .name {display:none;}
.cal-wrap .cal_con table .schedule:hover .dateCell {cursor:pointer;position:relative;}
.cal-wrap .cal_con table .schedule:hover .num {position:relative;z-index:11;}
/*달력 hover 네모박스크기는 min-height으로 조정*/
.cal-wrap .cal_con table .schedule:hover .con {display:block;position:absolute;top:0;left:0;width:100%;min-height:130px;padding:0 10px 0 10px;background:#fff;border:4px solid #129cf2;z-index:10;}
.cal-wrap .cal_con table .schedule:hover .con ul {overflow:visible;height:100%;margin-top:42px;padding-bottom:5px;}
.cal-wrap .cal_con table .schedule:hover .con ul li {margin-bottom:5px;}
.cal-wrap .cal_con table .schedule:hover .con ul li .txt {overflow:visible;display:block;position:relative;white-space:normal;text-overflow:clip;padding-left:12px;background:url("../../images/sub/conList4.gif") no-repeat left 6px;font-weight:500;vertical-align:top;box-sizing:border-box;}
.cal-wrap .cal_con table .schedule:hover .con ul li .time {display:block;padding-left:12px;color:#6f7073;font-size:14px;font-weight:200;}
.cal-wrap .cal_con table .schedule:hover .con ul li .name {display:block;padding-left:12px;color:#6f7073;font-size:14px;font-weight:200;}
.cal-wrap .cal_con table .rs_btn {display:none;text-align:center;}
.cal-wrap .cal_con table .rs_btn a {display:inline-block;margin:0 3px;width:64px;height:36px;line-height:36px;font-size:14px;font-weight:200;}
.cal-wrap .cal_con table .rs_btn a.btn1 {background:#199688;color:#fff;}
.cal-wrap .cal_con table .rs_btn a.btn2 {background:#2f3036;color:#fff;}
.cal-wrap .cal_con table .hide {display:none;position:absolute;top:10px;right:10px;}
.cal-wrap .cal_con table .hide a {display:block;width:31px;height:31px;background:#2f3036 url("../../images/hide.gif") no-repeat center 6px;font-size:0;border-radius:60px;}
/* .cal-wrap .cal_info {position:relative;padding-top:15px;} */
.cal-wrap .cal_info {display:flex; justify-content: end; margin-bottom:20px; order: 3;}
.cal-wrap .cal_info .noti {float:left;}
.cal-wrap .cal_info .noti.pc {display:block;}
.cal-wrap .cal_info .noti.tm {display:none;}
.cal_info .mark span {display:inline-block;position:relative;margin-left:22px;padding-left:18px;font-size:15px;}
.cal_info .mark span:before {content:'';display:block;position:absolute;top:50%;left:0;transform:translateY(-50%);width:13px;height:13px;}
.cal_info .mark span.select:before {background:#fff;border:1px solid #202020;}
.cal_info .mark span.possible:before {background:#d2ecfb;border:1px solid #a5b9c4;}
.cal_info .mark span.impossible:before {background:#eff0f4;border:1px solid #b6b7bb;}
.cal-wrap .btn_w {display:block;padding-top:25px;}

/* 카카오지도 */
.map_w {width:100% !important;height:530px;margin-bottom:40px; background:#f8f9fd;border:1px solid #dfe0e3;box-sizing:border-box;}
.map_w .root_daum_roughmap {width:100% !important;}

/* 로그인 */
.login_w {padding:60px 0 120px 0;}
.login_w .log_tt {position:relative;margin-bottom:82px;padding:0 0 0 445px;}
.login_w .log_tt:before {content:'';display:block;position:absolute;top:10px;left:125px;width:254px;height:118px;background:url("../../images/sub/login.png") no-repeat;}
.login_w .log_tt .tit {color:#333a88;font-family:"DW";font-size:42px;line-height:52px;letter-spacing:1px;}
.login_w .log_tt .conList {margin-top:20px;word-break:keep-all;}
.login_w .log_ip {position:relative;text-align:center;}
.login_w .log_ip:before {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:8px;background:url("../../images/sub/diag3.gif") repeat left top;}
.login_w .log_ip .list {padding:70px 0 20px 0;}
.login_w .log_ip .list li input {display:inline-block;padding-left:55px;width:640px;height:65px;line-height:65px;background:#fff;color:#808184;font-size:17px;border:1px solid #d5d6d9;text-align:left;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;}
.login_w .log_ip .list li input[type="text"] {background:url("../../images/sub/login_id.gif") no-repeat 20px 19px;border-bottom:0;}
.login_w .log_ip .list li input[type="password"] {background:url("../../images/sub/login_pwd.gif") no-repeat 20px 19px;}
.login_w .log_ip .btn {cursor:pointer;display:inline-block;width:640px;height:65px;background:#69717e;color:#fff;font-size:17px;border:0;}


/*== Responsible ==****************************************************************/
@media all and (max-width:1240px) {
    /* 3차메뉴 : 탭표시 */
/*     .tab-wrap.tab1 ul li {width:100%;}
    .tab-wrap.tab2 ul li {width:50%;}
    .tab-wrap.tab3 ul li {width:33.33%;}
    .tab-wrap.tab4 ul li {width:25%;}
    .tab-wrap.tab5 ul li {width:33.33%;}
    .tab-wrap.tab6 ul li {width:33.33%;} */

    /* 예약달력 */
    .cal-wrap .cal_con table td {height:120px;background:#f1f2f4;color:#4f5051;font-size:15px;line-height:20px;border-left:1px solid #dfe0e3;vertical-align:top;z-index:10;}
    .cal-wrap .cal_con table td .dateCell {cursor:auto;display:block;height:120px;}
    .cal-wrap .cal_con table td .num {display:inline-block;padding:12px 10px 8px 10px;}
    .cal-wrap .cal_con table .schedule .con {display:block;padding:0 15px 0 10px;}
    .cal-wrap .cal_con table .schedule:hover .con {display:block;position:absolute;top:0;left:0;width:calc(100% - 28px);min-height:122px;padding:0 10px;background:#fff;border:4px solid #129cf2;z-index:10;}
    .cal-wrap .cal_con table .schedule:hover .con ul {overflow:visible;height:100%;margin-top:36px;padding-bottom:10px;}

    /* 로그인 */
    .login_w .log_tt {position:relative;margin-bottom:82px;padding:0 20px 0 320px;}
    .login_w .log_tt:before {content:'';display:block;position:absolute;margin:-50px 0 0 0;top:50%;left:20px;width:254px;height:118px;background:url("../../images/sub/login.png") no-repeat;}
    .login_w .log_ip .list li input {display:inline-block;padding-left:55px;width:70%;height:65px;line-height:65px;background:#fff;color:#808184;font-size:17px;border:1px solid #d5d6d9;text-align:left;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;}
    .login_w .log_ip .btn {cursor:pointer;display:inline-block;width:70%;height:65px;background:#69717e;color:#fff;font-size:17px;border:0;}
}

@media all and (max-width:1000px) {
    /* 예약달력 */
    .cal-wrap .cal_tt .month {color:#101010;font-size:32px;font-weight:600;}
    .cal-wrap .cal_tt .prev,
	.cal-wrap .cal_tt .next {background-size: 80%;}
    .cal-wrap .cal_con {clear:both;position:relative;width:100%; order: 3;}
    .cal-wrap .cal_con table .ok:hover .dateCell {cursor:pointer !important;position:absolute;left:0;width:100%;}
    .cal-wrap .cal_con table .ok:hover .num {position:relative;z-index:11;}
    .cal-wrap .cal_con table .ok:hover .con {display:block;position:absolute;top:0;left:0;width:calc(100% - 38px);min-height:120px;padding:0 15px;background:#fff;border:4px solid #2848b7;z-index:10;}
    .cal-wrap .cal_con table .ok:hover .rs_btn {display:block;margin-top:50px;}
    .cal-wrap .cal_con table .ok:hover .hide {display:none !important;}
    .cal-wrap .cal_con table .schedule:hover .dateCell {cursor:pointer;position:absolute;left:0;width:100%;}
    .cal-wrap .cal_con table .schedule:hover .con {display:block;position:absolute;top:0;left:0;width:calc(100% - 38px);min-height:150px;padding:0 15px;background:#fff;border:4px solid #2848b7;z-index:10;}
    .cal-wrap .cal_con table .schedule:hover .con ul {overflow:visible;height:100%;margin-top:36px;padding-bottom:15px;}
    .cal-wrap .cal_con table .schedule:hover .rs_btn {display:block;margin-top:0 !important;}
    .cal-wrap .cal_con table .schedule:hover .hide {display:block;}
    .cal-wrap .cal_info {order: 2;}
    .cal-wrap .cal_info .noti {float:none;margin-top:0;padding:15px 10px 15px 40px;background:url("../../images/sub/noti.png ") no-repeat 15px 18px;border:2px dotted #d5d6d9;}
    .cal-wrap .cal_info .noti.pc {display:none;}
    .cal-wrap .cal_info .noti.tm {display:block;}
    .cal-wrap .cal_info .mark {position:relative;top:0;right:0;float:right;margin-top:8px;}
    /* .cal-wrap .btn_w {display:none;} */
}

@media all and (max-width:767px) {
    /* 로그인 */
    .login_w {padding:30px 0 0 0;}
    .login_w .log_tt {position:relative;margin-bottom:0;padding:0 20px;}
    .login_w .log_tt:before {display:none;}
    .login_w .log_tt .tit {color:#333a88;font-family:"DW";font-size:45px;line-height:55px;letter-spacing:1px;text-align:center;}
    .login_w .log_tt .log_box {background:#fbfbfd;margin-top:20px;padding:25px 20px 20px 30px;border:2px dotted #d5d6d9;}
    .login_w .log_tt .conList {margin-top:0;font-size:16px;word-break:keep-all;}
    .login_w .log_ip:before {display:none;}
    .login_w .log_ip .list {padding:40px 0 20px 0;}
    .login_w .log_ip .list li input {display:inline-block;padding-left:55px;width:calc(100% - 40px);height:65px;line-height:65px;background:#fff;color:#808184;font-size:17px;border:1px solid #d5d6d9;text-align:left;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;}
    .login_w .log_ip .btn {cursor:pointer;display:inline-block;width:calc(100% - 40px);height:65px;background:#69717e;color:#fff;font-size:17px;border:0;}
}