/* @charset "utf-8"; */

/*-------------------------------------------------
Author : WEB,Seo
Create date : 2025. 01. 17
Last update : 
-------------------------------------------------*/

/* ========== import ========== */
@import url('/resources/css/default/jquery-ui.css');
@import url('/resources/css/default/normalize.css');
@import url('/resources/css/assets/fonts.css');
@import url('/resources/css/assets/mixin.css');
@import url('/resources/css/assets/screen-ui.css');


.mn_txt2 {
    margin-top: 1.5rem;
    font-size: 5rem;
    font-weight: 600;
    color: #272727;
}

/* id/pw 찾기 모달 팝업 */

.login-wrap .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #27272790;
    z-index: 100;
}

.login-wrap .find-modal-wrap {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60rem;
    padding: 3rem;
    border: 1px solid #333;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 101;
}

.modal-overlay.modal-on {
    display: block;
}

.find-modal-wrap.modal-on {
    display: block;
}

.modal-head-wrap i {
    font-size: 2rem;
    color: #707070;
}

.modal-tit-wrap {
    display: flex;
    margin-bottom: 1rem;
    align-items: flex-end;
}

.modal_tit {
    margin-right: 1rem;
    font-size: 2rem;
    font-weight: 700;
}

.modal_sub_tit {
    font-size: 1.4rem;
    font-weight: 700;
    color: #FA7A32;
}

.modal_desc {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 400;
    color: #424242;
}

.modal-input-wrap {
    padding: 1.5rem;
    border-top: 1.5px solid #272727;
    border-bottom: #424242;
    background-color: #EDF4F5;
}

.modal-input-wrap input {
    width: 34rem;
    height: 4.5rem;
    border: 1px solid #006277;
    border-radius: 0.8rem;
    background-color: #f7f7f7;
}

.find_prev_btn {
    width: 8rem;
    height: 4.5rem;
    margin-top: 2rem;
    margin-left: auto;
    font-size: 2rem;
    font-weight: 600;
    border-radius: 0.8rem;
    background-color: #eee;
    color: #006277;
}

.find_next_btn {
    width: 8rem;
    height: 4.5rem;
    margin-top: 2rem;
    margin-left: 1rem;
    font-size: 2rem;
    font-weight: 600;
    border-radius: 0.8rem;
    background-color: #006277;
    color: #fff;
}


/* login */
.login-area {
    padding: 7rem 0 10rem;
    background: url(/resources/images/member/login_bg.png) center / cover;
}

.login-box-cont {
    display: flex;
    max-width: 128rem;
    height: auto;
    padding: 10rem 10rem;
    justify-content: space-between;
    align-items: flex-end;
    border: 3px solid #cccccc50;
    border-radius: 5rem;
    background-color: #ffffff55;
    backdrop-filter: blur(5px);
    box-shadow: 1rem 1rem 2rem #99999960,
        0.2rem 0.2rem 1rem #99999940 inset;
}

.login-txt-cont {
    width: 50rem;
}

.login_tit {
    margin-bottom: 3rem;
}

.login_tit_line {
    content: '';
    width: 100%;
    margin-top: 3rem;
    border-bottom: 1px solid #006277;
}

/* text 관련 (추후 공통 css 체크) */

/* .login_tit .point_txt {
    font-size: 1.7rem;
    font-weight: 700;
    color: #FA7A32;
}

.login_tit h2 {
    margin-top: 1.5rem;
    font-size: 5rem;
    font-weight: 600;
    color: #272727;
} */

/* text */

.login_input input {
    width: 100%;
    height: 6rem;
    margin: 1rem 0rem 3rem;
    border: 1px solid #707070;
    border-radius: 0.8rem;
}

.login_input label {
    font-size: 2rem;
    font-weight: 700;
    color: #006277;
}

.login_input i {
    margin-right: 0.7rem;
}

.req_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 400;
    color: #7D7777;
}

.req_area a {
    text-decoration: underline;
}

.login_img_box {
    width: 34rem;
}

.login_btn {
    width: 100%;
    height: 5.5rem;
    margin-top: 3rem;
    border-radius: 0.8rem;
    background-color: #006277;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
}

/* singup */

/* 약관 동의 */

.signup-area {
    position: relative;
}

.signup-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/resources/images/common/main_rsv-logo.png);
    background-position: center 85%;
    background-size: 40rem;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: -1;
}

.signup-cont-wrap {
    text-align: right;
}

.signup_tit {
    text-align: center;
}

.signup-process {
    display: flex;
    align-items: flex-end;
    text-align: center;
}

.agree-bar {
    width: 33%;
}

.input-bar {
    width: 34%;
}

.comp-bar {
    width: 33%;
}

.signup-wrap .process_tit {
    font-size: 2.4rem;
    font-weight: 600;
    color: #eeeeee;
}

.signup-wrap .process_line {
    position: relative;
    content: '';
    width: 100%;
    margin-top: 1.5rem;
    border-bottom: 2px solid #eeeeee;
}

.signup-wrap .process_ell {
    position: absolute;
    top: 0.1rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background-color: #eeeeee;
}

.agree-bar .process_tit {
    font-size: 2.4rem;
    font-weight: 600;
    color: #006277;
}

.agree-bar .process_line {
    position: relative;
    content: '';
    width: 100%;
    margin-top: 1.5rem;
    border-bottom: 2px solid #006277;
}

.agree-bar .process_ell {
    position: absolute;
    top: 0.1rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background-color: #006277;
}

.signup-cont-wrap {
    padding: 5rem;
    border: 1.5px solid #707070;
    border-radius: 1rem;
}

.cont-wrap .step-box {
    display: flex;
    width: 100%;
    align-items: center;
    text-align: left;
}

.step-box label {
    margin-right: 1rem;
    font-size: 2rem;
    font-weight: 600;
}

.step-box .step_txt {
    font-size: 1.6rem;
    font-weight: 400;
}

.step-box span {
    color: #FA7A32;
}

.step-box span:not(:first-child) {
    color: #FA7A32;
}

.step_line {
    content: '';
    width: 100%;
    margin: 3rem 0;
    border-bottom: 2px solid #949494;
}

.step-box .icon_box {
    margin-left: auto;
    cursor: pointer;
}

.step-box .icon_box i {
    text-align: right;
    font-size: 2.5rem;
    color: #707070;
}

.tac-desc-box {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    width: 100%;
    padding: 0 2.5rem;
    text-align: left;
    overflow: auto;
    background-color: #F4F7F8;
}

.tac-desc-box.active {
    display: block;
    max-height: 40rem;
    margin-bottom: 3rem;
    opacity: 1;
    padding: 2.5rem;
}

.info-desc-box {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    width: 100%;
    padding: 0 2.5rem;
    text-align: left;
    overflow: auto;
    background-color: #F4F7F8;
}

.info-desc-box.active {
    display: block;
    max-height: 40rem;
    margin-bottom: 3rem;
    opacity: 1;
    padding: 2.5rem;
}

.cont-wrap .more_tit {
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: #4e4e4e;
}

.cont-wrap .more_desc {
    margin-bottom: 2.5rem;
    font-size: 1.6rem;
    font-weight: 400;
    color: #4e4e4e;
}

.cont-wrap .more_desc:last-child {
    margin-bottom: 0rem;
}

.sign_next_btn_box {
    display: flex;
    justify-content: flex-end;
}

.home_btn {
    width: 10rem;
    height: 4.5rem;
    margin-right: 1rem;
    border-radius: 0.8rem;
    background-color: #eee;
    font-size: 1.7rem;
    font-weight: 600;
    color: #006277;
}

.next_btn {
    width: 10rem;
    height: 4.5rem;
    border-radius: 0.8rem;
    background-color: #006277;
    font-size: 1.7rem;
    font-weight: 600;
    color: #fff;
}

/* 회원가입 정보 입력 */

.input-area {
    display: none;
    position: relative;
}

.input-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/resources/images/common/main_rsv-logo.png);
    background-position: center 79%;
    background-size: 40rem;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: -1;
}

.input-wrap .process_tit {
    font-size: 2.4rem;
    font-weight: 600;
    color: #006277;
}

.input-wrap .process_line {
    position: relative;
    content: '';
    width: 100%;
    margin-top: 1.5rem;
    border-bottom: 2px solid #006277;
}

.input-wrap .process_ell {
    position: absolute;
    top: 0.1rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background-color: #006277;
}

.input-wrap .comp-bar .process_tit {
    font-size: 2.4rem;
    font-weight: 600;
    color: #eeeeee;
}

.input-wrap .comp-bar .process_line {
    position: relative;
    content: '';
    width: 100%;
    margin-top: 1.5rem;
    border-bottom: 2px solid #eeeeee;
}

.input-wrap .comp-bar .process_ell {
    position: absolute;
    top: 0.1rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background-color: #eeeeee;
}

.input-cont-wrap {
    width: 100%;
    padding: 5rem;
    border: 1.5px solid #707070;
    border-radius: 1rem;
}

.input-cont-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.input-cont-box {
    display: flex;
    justify-content: space-between;
}

.input-cont-box:not(:last-child) {
    margin-bottom: 3rem;
}

.input-cont {
    width: 48%;
}

.input-box {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.tit-box {
    display: flex;
    height: 4.5rem;
    align-items: center;
}

.input-column {
    width: 0.4rem;
    height: 1.8rem;
    margin-right: 1rem;
    background-color: #006277;
}

.input-box input {
    width: 100%;
    height: 4.5rem;
    border: 1px solid #707070;
    border-radius: 0.8rem;
}

.radio-box {
    display: flex;
}

.input_line {
    content: '';
    width: 100%;
    margin-bottom: 1rem;
    border-bottom: 1px solid #707070;
}

.radio-box label {
    margin-right: 3rem;
}

/* radio checkbox 선택 아코디언 */

.check_addition {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.7s ease-in-out;
}

.check_addition.active {
    opacity: 1;
    max-height: 500px;
    transition: all 0.7s ease-in-out;
}

.check_addition input {
    width: 100%;
}

.check_addition input:first-child {
    margin-bottom: 1rem;
}

.addition_wrap {
    width: 48%;
}

.addition-box {
    align-items: center;
}

/* .addition-box .tit-box {
    margin-bottom: 0;
} */

.cku_btn {
    width: 100%;
    height: 100%;
    padding: 0.7rem 1rem;
    border-radius: 0.8rem;
    background-color: #006277;
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
}

/* input btn */
.mail_btn,
.dup_btn,
.phone_btn {
    width: 8.5rem;
    height: 4.5rem;
    border-radius: 0.8rem;
    background-color: #006277;
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
}

.btn-wrap {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.prev_btn {
    width: 10rem;
    height: 4.5rem;
    border-radius: 0.8rem;
    background-color: #eeeeee;
    font-size: 1.7rem;
    font-weight: 600;
    color: #006277;
}

.next_btn_box {
    width: 10rem;
    height: 4.5rem;
    border-radius: 0.8rem;
    background-color: #006277;
    font-size: 1.7rem;
    font-weight: 600;
    color: #fff;
}

/* 회원가입 완료 */

.signup2-wrap .process_tit {
    font-size: 2.4rem;
    font-weight: 600;
    color: #006277;
}

.signup2-wrap .process_line {
    position: relative;
    content: '';
    width: 100%;
    margin-top: 1.5rem;
    border-bottom: 2px solid #006277;
}

.signup2-wrap .process_ell {
    position: absolute;
    top: 0.1rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background-color: #006277;
}

.signup2-wrap .comp-bar .process_tit {
    font-size: 2.4rem;
    font-weight: 600;
    color: #006277;
}

.signup2-wrap .comp-bar .process_line {
    position: relative;
    content: '';
    width: 100%;
    margin-top: 1.5rem;
    border-bottom: 2px solid #006277;
}

.signup2-wrap .comp-bar .process_ell {
    position: absolute;
    top: 0.1rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background-color: #006277;
}

.signup2-cont-wrap {
    display: flex;
    justify-content: space-between;
}

.left-cont-box {
    display: flex;
    flex-direction: column;
    padding: 8rem 3rem 3rem;
    width: 35%;
    height: 60rem;
    border-radius: 3rem;
    justify-content: space-between;
    align-items: center;
    background: url(/resources/images/member/signup2_bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

.left-cont-box .logo-box {
    text-align: center;
}

.left-cont-box .logo-box img {
    width: 80%;
}

.left-cont-box .signup2_tit {
    margin-top: 1rem;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
}

.signup2-wrap .signup2-column {
    content: '';
    width: 0;
    height: 40%;
    border-left: 1px solid #fff;
}

.introduce_btn {
    display: block;
    width: 17rem;
    height: 3.5rem;
    border: 1px solid #fff;
    border-radius: 30rem;
    text-align: center;
    line-height: 3.3rem;
}

.left-cont-box .signup2_desc {
    width: 100%;
    margin-top: 2rem;
    font-size: 1.5rem;
    line-height: 2.3rem;
    word-break: break-all;
}

.right-cont-box {
    display: flex;
    flex-direction: column;
    padding: 5rem 5rem;
    width: 64%;
    height: 60rem;
    border-radius: 3rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url(/resources/images/common/main_rsv-logo.png);
    background-color: #F4F7F8;
    background-position: center;
    background-size: 30rem;
    background-repeat: no-repeat;
}

.right-cont-box .signup2_desc {
    margin-bottom: 1rem;
    font-size: 2.6rem;
    font-weight: 400;
    color: #4e4e4e;
}

.right-cont-box .signup2_tit {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 5rem;
    color: #006277;
}

/* 나의 대관 신청 */

.rental-area .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #27272790;
    z-index: 100;
}

.rental-area .res-form {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100rem;
    padding: 3rem;
    border: 1px solid #333;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 101;
}

.rental-area .res-form.modal-on {
    display: block;
}

.rental-area .res-form .res_tit {
    font-size: 2.4rem;
}

.rental-area .res-form i {
    font-size: 2.4rem;
    color: #707070;
}

.rental-area .res-form .cancel_btn {
    width: 12rem;
}

.daterangepicker {
    width: fit-content;
}

.daterangepicker * {
    font-family: 'paperlogy', sans-serif;
}


/* 날짜 범위 지정 시 배경 색상 */
.daterangepicker td.in-range {
    background-color: #EDF4F5;
    border-color: transparent;
    color: #000;
    border-radius: 0;
}

/* 날짜 클릭 시 배경 색상 */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #006277;
    border-color: transparent;
    color: #fff;
}

.daterangepicker .drp-buttons {
    display: flex !important;
    justify-content: space-between;
    text-align: left;
    align-items: center;
}

.daterangepicker .drp-buttons button {
    width: auto;
}

.daterangepicker .drp-selected {
    display: block;
    width: 100%;
}

.daterangepicker .drp-selected::before {
    content: "선택 기간\00a0\00a0:";
    margin-right: 0.5rem;
    font-weight: 600;
    color: #006277;
}

.daterangepicker td.end-date {
    border-radius: 0 4px 4px 0;
}

/* 확인 취소 폰트 색상 */
.daterangepicker .drp-buttons .btn-primary {
    color: #006277;
}

.daterangepicker .drp-buttons .btn-default {
    color: #878787;
}


/* 서브 메뉴 헤더 */

.rental .sub-head,
.refound .sub-head,
.edit .sub-head {
    background: url('/resources/images/sub/sub-head02.jpg') top center / cover no-repeat;
}

/* .sh-txt {
    height: calc(100% - 5rem);
    color: var(--white-color);
}

.sh-h1 {
    font-size: 3.5rem;
    font-weight: 600;
}

.sh-txt span {
    font-size: 1.5rem;
}

.sub-tab {
    height: 5rem;
    background: #00303a7a;
}

.sub-tab li {
    height: 5rem;
    color: var(--white-color);
    border-right: 1px solid #ffffff79;
    width: 21rem;
}

.sub-tab li:first-child {
    border-left: 1px solid #ffffff79;
} */

/* .page .mn-header span {
    width: 30rem;
    text-align: right;
} */

/* .page .mn_txt {
    font-size: 4rem;
} */

.page .mn_txt img {
    width: 4.5rem;
    filter: invert(24%) sepia(86%) saturate(1065%) hue-rotate(157deg) brightness(67%) contrast(103%);
}

/* .cate {
    color: var(--main-color);
    position: relative;
    font-weight: 600;
}

.cate:before {
    content: '';
    width: 0.2rem;
    height: 3rem;
    display: inline-block;
    background: #448998;
    margin-left: 2rem;
    margin-right: 2rem;
} */

/* .page .reserve-sec {
    padding: 15rem 0;
    background: none;
} */

/* .mypage-head-wrap {
    display: flex;
    flex-direction: column;
}

.mypage_tit {
    text-align: left;
}

.mypage_line {
    content: "";
    width: 100%;
    border-bottom: 1px solid #949494;
}

.mypage-nav {
    display: flex;
    justify-content: left;
}

.rental-wrap .mypage-nav li:first-child {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0 2rem;
    font-size: 2.6rem;
    font-weight: 700;
    color: #006277;
    border-bottom: 3px solid #006277;
}

.mypage-nav li {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0 2rem 0.5rem 2rem;
    font-size: 2.6rem;
    font-weight: 500;
    color: #b9b9b9;
    border-bottom: 3px solid #b9b9b9;
} */

.fillter-wrap {
    width: 100%;
}

.fillter-wrap select {
    flex: 0 0 13rem;
    height: 4.5rem;
    padding: 0 0 0 16px;
    border-radius: 0.8rem;
    background-color: #006277;
    font-size: 1.7rem;
    font-weight: 600;
    color: #fff;
}

.fillter-wrap select:focus {
    outline: none;
}

.fillter-wrap option {
    background-color: #fff;
    color: #006277;
}

.mp-cal-box {
    flex: 0 0 30rem;
    height: 4.5rem;
    padding: 0 1.3rem;
    border: 1px solid #006277;
    border-radius: 0.8rem;
}

.mp-cal-box input {
    width: 90%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #006277;
}

.mp-cal-box .mp_cal_btn {
    width: 2.5rem;
    height: 2.5rem;
    background: url(/resources/images/mypage/calendar.svg);
    background-size: cover;
    background-position: center;
}

/* .mp-date-select label {
    display: block;
    width: 8rem;
    height: 4.5rem;
    text-align: center;
    background-color: #006277;
    border-radius: 30px;
    color: #fff;
} */

.mp-date-select {
    flex: 0 0 50rem;
}

.mp-date-select button {
    display: block;
    width: calc(100% / 6);
    height: 4.5rem;
    text-align: center;
    background-color: #EDF4F5;
    border-radius: 30px;
    color: #006277;
}

/* .mp-date-select button:not(:first-child) {
    margin-left: 0.5rem;
} */

.mp-date-select button:focus {
    background-color: #006277;
    color: #fff;
}

.mp-search-box {
    flex: 1 1 auto;
    height: 4.5rem;
    padding: 0 0.2rem 0 1.3rem;
    border: 1px solid #006277;
    border-radius: 0.8rem;
}

.mp-search-box input {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
}

.mp-search-box .mp_search_btn {
    position: relative;
    width: 3.9rem;
    height: 3.9rem;
    border-radius: 0.8rem;
    background-color: #006277;
    background-size: cover;
    background-position: center;
}

.mp-search-box .mp_search_btn::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.5rem;
    height: 2.5rem;
    background: url(/resources/images/mypage/search.svg);
    background-size: cover;
    background-position: center;
}

.card_none_line {
    content: '';
    width: 100%;
    border-bottom: 1px solid #949494;
}

.card_none_tit {
    margin: 8rem 0;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    color: #373C42;
}

.card-wrap {
    width: 49%;
    height: 100%;
    padding: 4rem;
    border-radius: 3rem;
    background-image: url(/resources/images/common/main_rsv-logo.png);
    background-position: center;
    background-size: 19rem;
    background-repeat: no-repeat;
    background-color: #EDF4F5;
}

.card-wrap:nth-child(2n) {
    margin-left: 2%;
}

.card-wrap:nth-child(n+3) {
    margin-top: 2%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card_tit_area .card_number {
    font-size: 2rem;
    font-weight: 600;
    color: #00627780;
}

.card_tit_area .card_tit {
    margin-top: 0.5rem;
    font-size: 3rem;
    font-weight: 600;
}

.card_tit_area .card_more {
    margin-bottom: 0.4rem;
    text-decoration: underline;
    font-weight: 600;
    color: #00627780;
}

.card-icon {
    width: 8rem;
    height: 8rem;
}

.card-icon.tennis-in {
    background: url(/resources/images/mypage/tennis-in.png);
    background-size: cover;
    background-position: center;
}

.card-icon.badminton {
    background: url(/resources/images/mypage/badminton.png);
    background-size: cover;
    background-position: center;
}

.card-icon.gym {
    background: url(/resources/images/mypage/gym.png);
    background-size: cover;
    background-position: center;
}

.card-icon.playground {
    background: url(/resources/images/mypage/playground.png);
    background-size: cover;
    background-position: center;
}

.card-icon.squash {
    background: url(/resources/images/mypage/squash.png);
    background-size: cover;
    background-position: center;
}

.card-icon.futsal {
    background: url(/resources/images/mypage/futsal.png);
    background-size: cover;
    background-position: center;
}

.card-icon.golf {
    background: url(/resources/images/mypage/golf.png);
    background-size: cover;
    background-position: center;
}

.card-icon.basketball {
    background: url(/resources/images/mypage/basketball.png);
    background-size: cover;
    background-position: center;
}

.card_line {
    content: '';
    width: 100%;
    margin: 2rem 0;
    border-bottom: 1px solid #949494;
}

.card_inner_wrap {
    width: 50%;
    justify-content: left;
}

.card_inner {
    width: 100%;
}

.card_inner .btn_div {
    margin-left: 0.5rem;
}

.card_inner button:last-child {
    margin-left: 0.5rem;
}

.card_inner:not(:first-child) {
    margin-top: 1rem;
}

.card_inner button {
    font-weight: 600;
    text-decoration: underline;
}

.card_desc_area p {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 600;
    color: #006277;
    white-space: nowrap;
}

.card_desc_area span {
    display: inline-block;
    margin-left: 1rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: #373C42;
}

.card_inner button {
    margin-left: 1rem;
    color: #373C42;
}

.card_desc.attachment {
    text-decoration: underline;
    color: #777;
    cursor: pointer;
}

.card_desc.attachment {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

button.rsv_cancel {
    margin-left: 0.3rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: #ff0000;
    text-decoration: underline;
}

.card_inner button.cancel-disabled {
    color: #999;
    text-decoration: none;
    cursor: inherit;
}

.card_inner button.cancel-disabled:hover {
    opacity: 1;
}

button.rsv_refound {
    margin-left: 0.3rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: #F5493D;
    text-decoration: underline;
}

.mp-notice-cont {
    padding: 4rem;
    border-radius: 3rem;
    width: 100%;
    height: 100%;
    background-image: url(/resources/images/mypage/notice_bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #EDF4F5;
}

.mp-notice-cont.bor_ra_0 {
    border-radius: 0;
}

.mp_notice_tit {
    display: block;
    margin-bottom: 2rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: #424242;
}

.mp_notice_desc {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2.5rem;
    color: #424242;
}

.mp-notice-cont .download_btn {
    display: flex;
    width: 20rem;
    height: 4.5rem;
    padding: 0 1.3rem;
    border-radius: 0.8rem;
    justify-content: space-between;
    align-items: center;
    background-color: #006277;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: underline;
    color: #fff;
}

/* 환불신청 현황 */

.refound-wrap .mypage-nav li:nth-child(2) {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0 2rem 0.5rem 2rem;
    font-size: 2.6rem;
    font-weight: 700;
    color: #006277;
    border-bottom: 3px solid #006277;
}


/* 회원 정보 변경 */

.edit-wrap .mypage-nav li:last-child {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0 2rem 0.5rem 2rem;
    font-size: 2.6rem;
    font-weight: 700;
    color: #006277;
    border-bottom: 3px solid #006277;
}

.edit-tit-wrap {
    display: flex;
    margin-bottom: 2rem;
    align-items: flex-end;
}

.edit_tit {
    margin-right: 1rem;
    font-size: 2rem;
    font-weight: 700;
}

.edit_sub_tit {
    font-size: 1.4rem;
    font-weight: 700;
    color: #FA7A32;
}

.edit-table-wrap {
    border-top: 1.5px solid #272727;
    background-color: #EDF4F5;
}

.edit-cont {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dedede;
    min-height: 7rem;
    width: 100%;
}

.reserve .edit-cont {
    border-right: 1px solid #dedede;
    border-bottom: 0;
}

.reserve .edit-cont:last-child,
.__line:last-child {
    border: 0;
}

.edit-cont .edit_desc {
    width: 16rem;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 600;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.__line {
    border-bottom: 1px solid #dedede;
}

.edit_column {
    content: '';
    height: calc(100% - 2rem);
    margin: 1rem 0;
    border-left: 1px solid #dedede;
}

.edit-cont .edit_sub_desc {
    font-size: 1.6rem;
    font-weight: 400;
    width: calc(100% - 16rem);
    padding: 2rem;
    height: 100%;
    display: flex;
    align-items: center;
    word-break: break-word;
    overflow-wrap: break-word;
}

.edit_sub_desc b {
    display: inline-block;
    padding-left: 0.5rem;
    font-size: 2.3rem;
    font-weight: 600;
    color: var(--main-color);
}

.edit-cont.w-calc-2 {
    width: calc(100% / 2);
}

.edit-cont input {
    width: 34rem;
    height: 4.5rem;
    border: 1px solid #006277;
    border-radius: 0.8rem;
}

.edit-cont textarea {
    border: 1px solid #006277;
    border-radius: 0.8rem;
    min-height: 10rem;
    padding: 1rem;
}

.edit-cont .edit_inner {
    padding: 2rem;
}

.gym-wrap b {
    font-size: 1.5rem;
    font-weight: 600;
    color: #006277;
}

.gym-table th {
    border: 1px solid #dedede;
    padding: 1.5rem;
    background: #eeeeee;
    font-size: 1.8rem;
    font-weight: 600;
}

.gym-table td {
    background-color: #fff;
    border: 1px solid #dedede;
    padding: 1.5rem;
    text-align: center;
    font-size: 1.6rem;
    vertical-align: middle;
}

.cancel_btn {
    border-radius: 5rem;
    background: rgb(0 98 119);
    height: 2.7rem;
    border: 1px solid var(--main-color);
    font-size: 1.4rem;
    color: var(--white-color);
    width: 15rem;
}

.edit_btn {
    width: 15rem;
    height: 4.5rem;
    margin-top: 2rem;
    margin-left: auto;
    margin-bottom: 5rem;
    border-radius: 0.8rem;
    background-color: #006277;
    font-size: 1.8rem;
    font-weight: 500;
    color: #fff;
}

.withdraw-wrap {
    padding: 3rem;
    width: 100%;
    height: 100%;
    background-color: #EDF4F5;
    /* background-image: url(/resources/images/mypage/notice_bg.png);
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat; */
}

.withdraw_tit {
    display: block;
    margin-bottom: 2rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: #424242;
}

.withdraw_desc {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2.5rem;
    color: #424242;
}

.withdraw_btn {
    margin-top: 2rem;
    margin-left: auto;
    font-size: 2rem;
    font-weight: 600;
    text-decoration: underline;
    color: #00627750;
}

/* 회원 탈퇴 모달 */

/* id/pw 찾기 모달 팝업 */

.edit-wrap .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #27272790;
    z-index: 100;
}

.edit-wrap .withdraw-modal-wrap {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100rem;
    padding: 3rem;
    border: 1px solid #333;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 101;
}

.modal-overlay.modal-on {
    display: block;
}

.withdraw-modal-wrap.modal-on {
    display: block;
    display: flex;
    flex-direction: column;
}

.modal-input-wrap {
    display: flex;
    align-items: center;
}

.edit-wrap .modal-head-wrap i {
    margin-bottom: 1rem;
    font-size: 3rem;
    color: #707070;
}

.edit-wrap .modal-tit-wrap {
    display: flex;
    margin-bottom: 2rem;
    align-items: flex-end;
}

.withdraw_modal_tit {
    width: 10rem;
    margin-left: 1rem;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
}

.withdraw_column {
    content: '';
    height: 6rem;
    margin: 0 2rem;
    border-left: 1px solid #dedede;
}

.modal-desc-wrap {
    padding: 2rem;
    background-color: #EDF4F5;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}

.withdraw_modal_desc {
    margin-left: 0.5rem;
    margin-bottom: 2rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: #424242;
}

.withdraw_modal_sub_desc {
    margin-left: 0.5rem;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2.5rem;
    color: #424242;
}

.withdraw_cfm_btn {
    margin-top: 2rem;
    margin-left: auto;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: underline;
    color: #00627750;
}

/* 회원 탈퇴 모달 */

/* id/pw 찾기 모달 팝업 */

.edit-wrap .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #27272790;
    z-index: 100;
}

.edit-wrap .withdraw-modal-wrap {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100rem;
    padding: 3rem;
    border: 1px solid #333;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 101;
}

.modal-overlay.modal-on {
    display: block;
}

.withdraw-modal-wrap.modal-on {
    display: block;
    display: flex;
    flex-direction: column;
}

.modal-input-wrap {
    display: flex;
    align-items: center;
}

.edit-wrap .modal-head-wrap i {
    margin-bottom: 1rem;
    font-size: 3rem;
    color: #707070;
}

.edit-wrap .modal-tit-wrap {
    display: flex;
    margin-bottom: 2rem;
    align-items: flex-end;
}

.withdraw_modal_tit {
    width: 10rem;
    margin-left: 1rem;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
}

.withdraw_column {
    content: '';
    height: 6rem;
    margin: 0 2rem;
    border-left: 1px solid #dedede;
}

.modal-desc-wrap {
    padding: 2rem;
    background-color: #EDF4F5;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}

.withdraw_modal_desc {
    margin-left: 0.5rem;
    margin-bottom: 2rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: #424242;
}

.withdraw_modal_sub_desc {
    margin-left: 0.5rem;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2.5rem;
    color: #424242;
}

.withdraw_cfm_btn {
    margin-top: 2rem;
    margin-left: auto;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: underline;
    color: #00627750;
}

/* reserve complete */

.reserve-cont {
    display: flex;
    padding: 8rem;
    width: 100%;
    height: 65rem;
    border-radius: 3rem;
    justify-content: left;
    align-items: flex-end;
    background: url(/resources/images/common/main_rsv-logo.png);
    background-color: #F4F7F8;
    background-position: center;
    background-size: 35rem;
    background-repeat: no-repeat;
}

.reserve-cont {
    justify-content: space-between;
    align-items: center;
}

.reserve-cont .comp_tit {
    margin-top: 6rem;
    text-align: center;
    font-size: 4rem;
    font-weight: 600;
    color: #272727;
}

.reserve-cont .comp_tit b {
    color: #006277;
}

.reserve-inner {
    width: 100%;
}

.reserve_tit_area {
    align-items: flex-end;
}

.reserve_tit_area .comp_tit {
    text-align: left;
    font-size: 3.3rem;
    font-weight: 600;
    color: #272727;
}

.reserve-cont span {
    margin-left: 2rem;
    margin-bottom: 0.3rem;
    font-size: 2.2rem;
    font-weight: 600;
    color: #00627780;
}

.reserve_btn {
    width: auto;
    height: 4.5rem;
    padding: 0 2rem;
    border-radius: 3rem;
    border: 1px solid #006277;
    font-size: 1.8rem;
    font-weight: 600;
    color: #006277;
}

.rental_btn {
    width: auto;
    height: 4.5rem;
    padding: 0 2rem;
    border-radius: 3rem;
    background-color: #006277;
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
}

.reserve_desc_area {
    gap: 15rem;
}

.reserve_inner_wrap {
    width: auto;
    justify-content: left;
}

.reserve_inner {
    width: 100%;
}

.reserve_inner:not(:first-child) {
    margin-top: 1rem;
}

.reserve_inner button {
    font-weight: 600;
    text-decoration: underline;
}

.reserve_desc_area p {
    display: inline-block;
    width: 10rem;
    font-size: 2rem;
    font-weight: 600;
    color: #006277;
    white-space: nowrap;
}

.reserve_desc_area span {
    display: inline-block;
    text-align: left;
    font-size: 2rem;
    font-weight: 600;
    color: #373C42;
}

/* basic-board */

/* notice */

/* 기존 screen-ui start */

.page .not-cont {
    height: 6.5rem;
    border-bottom: 1px solid #ddd;
    padding: 0 2rem;
    background-color: var(--white-color);
    cursor: pointer;
}

.page .not-cont a {
    width: calc(100% - 2rem);
}

.page .not-cont h3 {
    margin-right: 2rem;
    font-size: 1.8rem;
    font-weight: 500;
    width: calc(100% - 9.5rem);
}

.page .not-cont span {
    font-size: 1.5rem;
    color: #787878;
    width: 9.5rem;
}

.page .not-cont span:not(:first-child) {
    text-align: center;
}

.page .not-cont button {
    width: 2rem;
}

.page .not-cont i {
    color: #787878;
}

.page .not-cont span:nth-child(3) {
    width: 15rem;
}

.page .not-list {
    border-top: 2px solid #000000;
    width: 100%;
}

.page .notice .link-btn {
    width: 13rem;
}

/* 기존 screen-ui end */

.not-search-wrap select {
    width: 12rem;
    height: 4.5rem;
    padding: 0 0 0 16px;
    border-radius: 0.8rem;
    background-color: #006277;
    font-size: 1.7rem;
    font-weight: 600;
    color: #fff;
}

.not-search-wrap select:focus {
    outline: none;
}

.not-search-wrap option {
    background-color: #fff;
    color: #006277;
}

.not-search-box {
    width: 50rem;
    height: 4.5rem;
    padding: 0 0.2rem 0 1.3rem;
    border: 1px solid #006277;
    border-radius: 0.8rem;
}

.not-search-box input {
    width: auto;
    height: 100%;
    padding: 0;
    border-radius: 0;
}

.not-search-box .not_search_btn {
    position: relative;
    width: 3.9rem;
    height: 3.9rem;
    border-radius: 0.8rem;
    background-color: #006277;
    background-size: cover;
    background-position: center;
}

.not-search-box .not_search_btn::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.5rem;
    height: 2.5rem;
    background: url(/resources/images/mypage/search.svg);
    background-size: cover;
    background-position: center;
}

.num-btn-wrap button {
    color: #787878;
}

.num-btn-wrap button.active {
    font-weight: 700;
    color: #006277;
}

.basic-board-view-sec .mn-header .mn_txt {
    font-size: 2.8rem;
    font-weight: 600;
    color: #111;
    word-break: break-word;
    overflow-wrap: break-word;
}

.view_date {
    min-width: 10rem;
    margin-left: 2rem;
}

.list-num-box {
    text-align: left;
}

.list-num-box span {
    font-size: 2rem;
    font-weight: 600;
}

.not-view-wrap {
    border-top: 2px solid #000;
    border-bottom: 1px solid #ddd;
}

.not-view-cont {
    padding: 10rem 0;
}

.customer .not-view-cont p {
    word-break: break-word;
    overflow-wrap: break-word;
}

.not-view-cont img {
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1rem;
}

.list_btn_box {
    display: flex;
    justify-content: center;
}

.list_btn_box button {
    width: 15rem;
    height: 4.5rem;
    border-radius: 3rem;
    background-color: #006277;
    color: #fff;
}

/* 운동부 갤러리 */

.gallery-list {
    width: 100%;
    gap: 5rem 1rem;
    text-align: left;
}

.gtb a {
    border-radius: 3rem;
    padding: 1rem 2rem;
    background-color: #eee;
    font-size: 1.8rem;
    font-weight: 500;
    color: #006277;
}

.gtb a:active {
    background-color: #006277;
    color: #fff;
}

.gallery-cont {
    width: calc(25% - (3rem / 4));
}

.gallery-cont .gallery-cont-img {
    height: 25rem;
    margin-bottom: 1rem;
}

.gallery-cont .gallery-cont-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2rem 0 2rem 0;
}

.gallery-cont b {
    background: var(--main-color);
    height: 3rem;
    padding: 0 1rem;
    color: var(--white-color);
    width: fit-content;
}

.gallery-cont h3 {
    font-size: 1.8rem;
    font-weight: 600;
}

.gallery-cont p {
    color: #3B3B3B;
    font-size: 1.5rem;
    line-height: 1.4;
}

.gallery-cont span {
    color: #A7A7A7;
    font-size: 1.5rem;
    font-weight: 500;
}

/* .gallery-view-img {
    width: 60%;
    margin-bottom: 6rem;
} */

/* 운동부 - 축구부 */

.sports_banner_wrap {
    position: relative;
}

.sports_banner_wrap .sports_banner_tit {
    position: absolute;
    top: -6rem;
    left: 6rem;
    font-size: 12rem;
    font-weight: 800;
    line-height: 12rem;
    color: #272727;
    z-index: 0;
    animation: moveDown 1.6s ease forwards;
}

@keyframes moveDown {
    from {
        top: -140px;
        opacity: 1;
    }

    to {
        top: -60px;
        opacity: 1;
    }
}

.sports_banner_img {
    position: relative;
    height: 55rem;
    overflow: hidden;
}

.sports-area .sports_banner_inner {
    position: absolute;
    top: -6rem;
    left: 6rem;
    font-size: 12rem;
    font-weight: 800;
    line-height: 12rem;
    color: #fff;
    z-index: 1;
    animation: moveDown 1.6s ease forwards;
}

@keyframes moveDown {
    from {
        top: -140px;
        opacity: 1;
    }

    to {
        top: -60px;
        opacity: 1;
    }
}

.sports .sub-head {
    height: 5rem;
    background: none;
}

.sports .sub-tab {
    background: #004755;
    text-align: center;
}

.sports .mn-header i {
    margin-left: 1rem;
    color: #505050;
}

.sports_banner_img img {
    width: 100%;
    height: 55rem;
    object-fit: cover;
    object-position: bottom;
}

.intro-sec-box {
    align-items: flex-start;
}

.intro-tit-wrap {
    font-size: 2.6rem;
    font-weight: 600;
}

.sports .intro-cont {
    width: 100%;
    margin-top: 1rem;
    padding: 1.5rem 2.5rem;
    background-color: #eeeeee90;
    border-radius: 1.5rem;
    font-size: 1.6rem;
    font-weight: 500;
}

.sports .cont-tit {
    width: 26rem;
    color: #006277;
}

.sports .intro-cont .cont-desc {
    width: 100%;
    line-height: 2.6rem;
    color: #777777;
}

/* pc */

@media screen and (max-width: 1400px) {
    /* .mp-date-select button:nth-child(2n) {
        outline: 1px solid red;
        display: none;
    } */

    /* rental */

}

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

    /* login */

    .login-txt-cont {
        width: 45rem;
    }

    .login_img_box {
        width: 30rem;
    }

    /* rental */

    .mp-cal-box {
        flex: 0 0 28rem;
    }

    .mp-date-select {
        flex: 0 0 35rem;
    }

    .card_inner p,
    .card_inner span,
    .card_inner button {
        font-size: 1.5rem;
    }

}

/* 태블릿 */

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

    html {
        font: 400 9px/1.2 'paperlogy', sans-serif;
    }

    /* login */

    .login-box-cont {
        padding: 7rem;
    }

    /* mypage - modal */

    /* .res-form.modal-on {
        width: calc(100% - 5rem)
    } */

    .withdraw-modal-wrap.modal-on {
        width: calc(100% - 5rem)
    }
}

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

    /* gallery */

    .gallery-cont {
        width: calc(50% - (3rem / 2));
    }

    /* login */

    .login-box-cont {
        align-items: bottom;
    }

    .login-txt-cont {
        width: 40rem;
    }

    .login_img_box {
        width: 25rem;
    }

    .login_checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    .req_area {
        font-size: 1.6rem;
    }

    /* signup - 1 */

    .signup-area::before {
        background-size: 35rem;
        background-position: center 80%;
    }

    /* signup - 2 */

    .radio-box input[type="radio"] {
        width: 18px;
        height: 18px;
    }

    /* signup2 */

    .left-cont-box {
        width: 37%;
    }

    .right-cont-box {
        width: 62%;
    }

    .right-cont-box .signup2_tit {
        font-size: 2.8rem;
    }

    /* rental */

    .mp-date-select {
        flex: 0 0 25rem;
        justify-content: space-between;
    }

    .mp-date-select button {
        width: 6rem;
    }

    .mp-date-select button:nth-child(n+5) {
        display: none;
    }

    .card-wrap {
        padding: 3rem;
    }

    .card_desc_area p,
    .card_desc_area span,
    .card_desc_area button {
        font-size: 1.4rem;
    }

    /* sports */

    .sports_banner_wrap {
        margin-top: 5rem;
    }

    .sports_banner_tit,
    .sports_banner_inner {
        display: none;
    }
}

/* 추가 break point */
@media screen and (max-width: 870px) {

    /* rental */
    .fillter-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .mp-date-select {
        margin-left: auto;
        justify-content: center;
    }

    .mp-date-select button {
        width: 6rem;
    }

    .mp-date-select button:nth-child(n+5) {
        display: block;
    }

    .card_desc_area {
        display: block;
    }

    .card_inner_wrap {
        width: 100%;
    }

    .card_inner_wrap:not(:last-child) {
        margin-bottom: 1rem;
    }

    /* reserve complete */

    .reserve_desc_area {
        justify-content: space-between;
    }

    .reserve_inner_wrap {
        width: auto;
    }

    .reserve_desc_area {
        gap: 0rem;
    }
}

/* 추가 break point */
@media screen and (max-width: 800px) {

    /* login */

    .login_img_box {
        width: 23rem;
    }

    /* rental */

    .mp-date-select button:nth-child(n+5) {
        display: none;
    }

    .fillter-wrap select {
        flex: 0 0 13rem;
        font-size: 1.5rem;
    }

    .mp-cal-box {
        flex: 0 0 26rem;
    }

    .mp-cal-box input {
        font-size: 1.5rem;
    }

    .card_info {
        display: block;
    }

    .card_info button {
        margin-top: 1rem;
    }

}


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

    html {
        font: 400 9px/1.2 'paperlogy', sans-serif;
    }

    .gym-price {
        overflow-x: auto;
    }

    .gym-table {
        width: 750px;
    }

    /* sports */
    
    .sports {
        margin-top: 6rem;
    }

    .sports-intro-sec {
        width: 100%;
    }

    /* notice */

    .page .mn-header {
        display: flex;
        gap: 2rem;
        flex-direction: column;
        align-items: center;
    }

    .page .mn-header span {
        width: auto;
    }

    .customer .mn-header {
        margin-bottom: 2rem;
    }

    .not-view-cont {
        padding: 5rem 0;
    }

    /* gallery */

    .gtb {
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        margin: 0 auto;
        gap: 3rem 1rem;
    }

    .gallery-tab-menu {
        margin-top: 3rem;
    }

    .view_date {
        margin-left: 0rem;
    }

    .gallery-list {
        margin-bottom: 3rem;
    }

    /* login */

    .login-wrap .find-modal-wrap {
        width: calc(100% - 5rem)
    }

    .login-area {
        padding: 4rem 0 5rem;
        background: url(/resources/images/member/login_bg.png) right / cover;
    }

    .login-box-cont {
        display: block;
        padding: 8rem;
    }

    .login-txt-cont {
        width: 100%;
    }

    .login_img_box {
        display: none;
    }

    .req_area {
        justify-content: right;
    }

    .login_checkbox {
        margin-right: auto;
    }

    .req_area a {
        margin-left: 4rem;
    }

    /* signup - 2 */

    .input-cont-box {
        display: block;
    }

    .input-cont,
    .addition_wrap {
        width: 100%;
    }

    .input-box input {
        width: 100%;
    }

    .input-cont:first-child,
    .input-cont-box:not(:last-child) {
        margin-bottom: 1rem;
    }

    .input-cont-box .btn-wrap {
        justify-content: right;
    }

    .input-area::before {
        background-position: center 65%;
        background-size: 40rem;
    }

    /* signup2 */

    .signup2-cont-wrap {
        display: block;
    }

    .left-cont-box {
        width: 100%;
        margin-bottom: 3rem;
    }

    .right-cont-box {
        width: 100%;
    }

    .right-cont-box .signup2_desc {
        margin-bottom: 1rem;
    }

    .right-cont-box .signup2_tit {
        font-size: 3.6rem;
    }

    /* reserve complete */

    .reserve_tit_area {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }

    .reserve_tit_area .comp_tit {
        display: none;
    }

    .reserve_inner_wrap .reserve_desc {
        font-size: 1.8rem;
    }

    .reserve_desc_area p {
        width: 8rem;
    }

    /* mypage - modal */

    .edit-cont .edit_desc {
        width: 10rem;
    }

    .edit-cont .edit_sub_desc {
        width: calc(100% - 10rem);
    }
    
    .res-form.modal-on p {
        font-size: 1.5rem;
    }

    .res-form.modal-on b {
        font-size: 1.8rem;
    }

}

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

    /* sports */

    .sports_banner_wrap {
        display: none;
    }

    .sports .mn-header {
        margin-top: 7rem;
    }

    /* login */

    .req_area {
        justify-content: space-between;
    }

    .req_area a {
        margin-left: 1.5rem;
    }

    /* signup - 1 */

    .signup-process .process_tit {
        font-size: 2rem;
    }

    .signup-cont-wrap .cont-wrap:first-child .step-box {
        display: block;
        width: 100%;
    }

    .signup-cont-wrap .cont-wrap .step_txt {
        margin-top: 1rem;
        margin-left: 3.6rem;
    }

    /* signup - 2 */

    .input-wrap .comp-bar .process_tit {
        font-size: 2rem;
    }

    .right-cont-box .signup2_tit {
        font-size: 3rem;
    }

    /* signup2 */

    .signup2-wrap .comp-bar .process_tit {
        font-size: 2rem;
    }

    /* rental */

    .fillter-wrap select {
        flex: 0 0 14rem;
        font-size: 1.6rem;
    }

    .mp-cal-box {
        flex: 1 1 auto;
    }

    .mp-cal-box input {
        font-size: 1.6rem;
    }

    .mp-date-select {
        display: none;
    }

    .mp-card-area {
        display: block;
    }

    .card-wrap {
        width: 100%;
    }

    .card-wrap:not(:last-child) {
        margin-bottom: 2rem;
    }

    .card-wrap:nth-child(2n) {
        margin-left: 0%;
    }

    .card-wrap:nth-child(n+3) {
        margin-top: 0%;
    }

    .card_inner_wrap:not(:last-child) {
        margin-bottom: 0rem;
    }

    .card_desc_area {
        display: flex;
        margin-bottom: 0rem;
    }

    .card_inner:not(:last-child) {
        margin-bottom: 0.5rem;
    }

    .card_desc_area p,
    .card_desc_area span,
    .card_desc_area button {
        font-size: 1.6rem;
    }

    /* reserve complete */

    .reserve-cont {
        height: 80rem;
    }

    .reserve-cont .comp_tit {
        margin-top: 6rem;
        font-size: 3.2rem;
    }

    .reserve_tit_area h2 {
        display: none;
    }

    .reserve_desc_area {
        display: block;
    }

    .reserve_inner_wrap:first-child {
        margin-bottom: 1rem;
    }

    /* mypage - modal */

    .edit_cont_wrap {
        display: block;
    }

    .reserve .edit-cont {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #dedede;
    }

    .edit_column {
        content: '';
        height: calc(100% - 2rem);
        margin: 1rem 0;
        border-left: 1px solid #dedede;
    }

    .edit_cont_wrap .edit_desc {
        height: 50px;
        border-right: 1px solid #dedede;
    }

}

/* 추가 break point */
@media screen and (max-width: 570px) {

    .req_area {
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */
        text-align: left;
    }

    .req_area .login_checkbox {
        width: 100%;
    }

    .req_area a {
        display: block;
        margin-top: 2rem;
        margin-left: 0;
    }

    .req_area a:last-child {
        margin-left: auto;
    }

    .req_btn {
        width: 100%;
    }

    /* 회원탈퇴 모달 */

    .withdraw-modal-wrap.modal-on p {
        font-size: 1.4rem;
    }

    .withdraw_modal_tit {
        width: 15rem;
    }

    .withdraw-modal-wrap input {
        width: 100%;
        font-size: 1.4rem;
    }

}

/* 추가 break point */
@media screen and (max-width: 520px) {

    /* sports */

    .sports .mn-header {
        margin-top: 4rem;
    }

    .sports .mn-header span {
        display: none ; 
    }

    .sports .cate:before {
        display: none;
    }

    /* 공지사항 */

    .basic-board-sec b {
        display: none;
    }

    .page .not-cont span:nth-child(3) {
        width: 15rem;
        text-align: right;
    }
    
    .page .not-view {
        display: none;
    }

    .page .not-cont button {
        display: none;
    }
    
    .page .not-cont i {
        display: none;
    }

    .page .not-cont a {
        width: 100%;
    }

    /* gallery */
    
    .gallery-board-sec b {
        display: none;
    }
    
    .gallery-cont {
        width: 100%;
    }

    /* id/pw 찾기 모달 팝업 */

    .login-wrap .modal-tit-wrap p {
        font-size: 1.6rem;
    }

    /* .login-wrap .find-modal-wrap {
        width: calc(100% - 5rem)
    } */

    /* signup - 1 */

    .signup-process .process_tit {
        font-size: 1.8rem;
    }

    /* signup - 2 */

    .input-wrap .comp-bar .process_tit {
        font-size: 1.8rem;
    }

    /* signup2 */

    .signup2-wrap .comp-bar .process_tit {
        font-size: 1.8rem;
    }

    .right-cont-box .signup2_tit {
        font-size: 2.7rem;
    }

    /* reserve complete */

    .reserve-cont {
        padding: 5rem;
    }

    .reserve-cont .comp_tit {
        font-size: 3rem;
    }

    .reserve_btn_box {
        display: block;
    }

    .reserve_btn_box button {
        width: 100%;
    }

    .reserve_btn_box button:first-child {
        margin-bottom: 1rem;
    }

    /* 회원탈퇴 모달 */

    .modal-input-wrap {
        display: block;
        padding: 2rem;
    }

    .withdraw_modal_tit {
        margin-left: 0;
        margin-bottom: 1rem;
        text-align: left;
    }

    .withdraw_column {
        display: none;
    }
}

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

    /* gallery */

    .gtb {
        width: 100%;
    }

    /* login */

    .login-box-cont {
        display: block;
        padding: 5rem 3rem;
    }

    .login_tit h2 {
        font-size: 4rem;
    }

    .login_input input {
        height: 5rem;
    }

    .login_btn {
        height: 5rem;
    }

    /* signup - 1 */

    .signup-cont-wrap .cont-wrap label {
        margin-right: 1rem;
        font-size: 1.7rem;
        font-weight: 600;
    }

    .step-box input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

    .signup-cont-wrap .cont-wrap .step_txt {
        margin-left: 3rem;
    }

    .signup-process {
        display: none;
    }

    .tac-desc-box {
        max-height: 30rem;
        margin-bottom: 3rem;
        opacity: 1;
        padding: 2.5rem;
    }

    .info-desc-box {
        max-height: 30rem;
        margin-bottom: 3rem;
        opacity: 1;
        padding: 2.5rem;
    }

    .cont-wrap .icon_box {
        display: none;
    }

    .radio-box input[type="radio"] {
        width: 16px;
        height: 16px;
    }

    .radio-box label {
        margin-right: 1.5rem;
    }

    /* signup2 */

    .right-cont-box {
        height: 40rem;
        background-size: 25rem;
    }

    .right-cont-box .signup2_desc {
        font-size: 2.3rem;
    }

    .right-cont-box .signup2_tit {
        font-size: 2.3rem;
    }

    /* rental */

    .card_desc_area p,
    .card_desc_area span,
    .card_desc_area button {
        font-size: 1.4rem;
    }

    .rental-area .res-form {
        padding: 3rem 2rem;
    }

    /* edit_info */

    .edit-cont input {
        width: 100%;
    }

    .edit-cont input::placeholder {
        color: transparent;
    }

}

/* 모바일 */

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

    /* id/pw 찾기 모달 팝업 디자인 브레이크 포인트 */

    .login-wrap .modal-tit-wrap .modal_sub_tit {
        display: none;
    }

    .find-modal-wrap .modal-input-wrap {
        font-size: 1.4rem;
    }

    /* login */

    .login-box-cont {
        overflow: hidden;
    }

    .login_tit h2 {
        font-size: 3rem;
    }

    .login_input label {
        font-size: 1.8rem;
    }

    .radio-box {
        display: block;
    }

    .radio-cont:not(:first-child) {
        margin-top: 1rem;
    }

    .radio-box label {
        width: 100%;
    }

    /* signup2 */

    .right-cont-box .signup2_desc {
        font-size: 1.8rem;
    }

    .right-cont-box .signup2_tit {
        font-size: 1.8rem;
    }

    /* rental */

    .fillter-wrap {
        display: block;
    }

    .fillter-wrap select {
        flex: 0 0 auto;
        margin-bottom: 1rem;
    }

    .mp-cal-box {
        margin-bottom: 1rem;
    }

    .card_desc_area {
        display: block;
    }

    .card_inner_wrap:first-child {
        margin-bottom: 1rem;
    }

    .card_inner:not(:last-child) {
        margin-bottom: 0.5rem;
    }
}

@media screen and (max-width: 360px) {
    html {
        font: 400 8px/1.2 'paperlogy', sans-serif;
    }

    /* rental */

    .card_desc_area p,
    .card_desc_area span,
    .card_desc_area button {
        font-size: 1.6rem;
    }
}