@charset "UTF-8";

.route {position:absolute;z-index:10;top:60px;left:50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);width: calc(100% - 40px);max-width:1280px;display: flex;}
.route_home {display:inline-block;margin-right:5px;}
.route_txt {font-size: 15px;font-weight: 400;color: #fff;}
.route_txt li {display: inline-block;}
.route_txt li:before {content:"|";font-size:0.9em;color:#FFFFFF;margin:0 7px;}

/* 배너 스타일 */
.sub-banner {overflow:hidden; width: 100%; height: 625px;}
.sub-banner-list {list-style:none;padding:0;margin:0;}
.sub-banner-item {width:100%;overflow:hidden;}
.sub-banner-image {width:100%;height:100%;object-fit:cover;}
.sub-banner-image.mobile {display:none;}
.sub-banner.facility {height: 300px;}

.sub-banner .sub-banner-plaintext {position: relative;top: -50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width: calc(100% - 40px); max-width:1280px;margin:0 auto;z-index:1;word-break: keep-all;}
.sub-banner .sub-banner-plaintext .sub-banner-text {text-align: center;}
.sub-banner .sub-banner-plaintext .sub-banner-text .text-top {font-family: "Pretendard";color: #FFFFFF;font-size: 40px;font-weight: 700;}
.sub-banner .sub-banner-plaintext .sub-banner-text .text-mid {font-family: "Pretendard";color: #FFFFFF;font-size: 1.5rem;margin-top: 30px;line-height: 1.75;font-weight:400;}
.sub-banner .sub-banner-plaintext .sub-banner-text .text-bot {font-family: "Pretendard";color: #FFFFFF;font-size: 1.5rem;margin-top: 20px;line-height: 1.75;font-weight:400;}
.sub-banner .sub-banner-link:hover {cursor:pointer;}
.sub-banner.facility .sub-banner-plaintext .sub-banner-text .text-top {font-family: "Pretendard";color: #FFFFFF;font-size: 28px;font-weight: 500;}

@media screen and (max-width:768px) {
    .route {display:none;}
    .sub-banner { height: 400px;}
    .sub-banner-plaintext {width: calc(100% - 30px);}
    .sub-banner-plaintext .sub-banner-text .text-top {font-size: 2.25rem;}
    .sub-banner-plaintext .sub-banner-text .text-mid {font-size: 1.25rem;margin-top: 10px;}
    .sub-banner-plaintext .sub-banner-text .text-bot {font-size: 1.25rem;margin-top: 5px;}
}

@media screen and (max-width:480px) {
    .sub-banner-image.mobile {display:block;}
    .sub-banner-image.pc {display:none;}
    .sub-banner-plaintext .sub-banner-text .text-top {font-size: 2rem;}
    .sub-banner-plaintext .sub-banner-text .text-mid {font-size: 1.1rem;margin-top: 8px;}
    .sub-banner-plaintext .sub-banner-text .text-bot {font-size: 1.1rem;margin-top: 4px;}
}

/* 승마예약 탭 */
.tab {position: relative;margin-top:50px;height:55px;overflow-y:hidden;overflow-x:auto;white-space:nowrap;scrollbar-width: none;}
.tab-list {height: 51px; border-bottom: 1px solid #cccccc;font-size: 22px;line-height: 36px;width:fit-content;min-width:calc(100% - 20px);}
.tab-list .tab-item {display: inline-block;color: #888;padding: 0 10px 13px;margin-right: 60px;cursor: pointer;}
.tab-list .tab-item:last-child {margin-right:0;}
.tab-list .tab-item.on {color:#111111;font-weight:700;border-bottom: 5px solid #111111;}
.tab-list .tab-item:hover {color:#222222;font-weight:700;cursor: pointer;}

@media screen and (max-width:768px) {
    .tab-list {margin-right:15px;min-width:calc(100% - 15px)}
}


/* 예약 프로그램 */
.program-info {display:none;position: relative;margin-top:80px;margin-bottom:150px;}
.program-info.on {display:block;}
.program-image-list {display: grid; grid-template-columns: repeat(3, 31%); grid-column-gap: 3.5%;grid-row-gap:50px;padding-bottom:50px;}
.program-image-list .program-item {width: 100%;}
.program-image-list .empty {height:150px;}
.program-image-list .product_name {font-size:18px;color:#222222;font-weight:400;margin:22px 0 11px;}
.program-image-list .product_price {font-size:20px;color:#965841;font-weight:600;margin:0;}
.program-image-list .image-cover {aspect-ratio: 40/27;overflow:hidden;}
.program-image {width: 100%;height:100%; object-fit: cover;}
.program-item:hover {cursor:pointer;}
.program-item:hover .product_name {font-weight:500;}
.program-item:hover .program-image {transform:scale(1.05);transition: 1s;}

.pager {display: flex;list-style:none;padding:50px 0;justify-content:center;align-items: center;}
.pager-icon {cursor: pointer;height:40px;width:25px;}
.pager-icon.prev {background:url("/images/jhorse/icon/pager_prev.svg") center no-repeat;}
.pager-icon.prev:hover {background-image:url("/images/jhorse/icon/pager_prev_on.svg");}
.pager-icon.next {background:url("/images/jhorse/icon/pager_next.svg") center no-repeat;}
.pager-icon.next:hover {background-image:url("/images/jhorse/icon/pager_next_on.svg");}
.pager_number {margin: 0 20px;color: #888;font-size: 16px;font-weight: 400;line-height: 40px;}
.pager_number .current-page {color: #222;font-weight: 600;}

@media screen and (max-width:768px) {
    .program-image-list {grid-template-columns: repeat(2, 48%); grid-column-gap: 4%;grid-row-gap:40px;}
}

@media screen and (max-width:480px) {
    .program-image-list {grid-template-columns: 100%; grid-column-gap: 0;grid-row-gap:30px;}
}

/* 예약 프로그램 상세 */
.program-contents {position: relative; display: flex; justify-content: space-between}
.view_img_ex {width: calc(100% - 480px); border-right:1px solid #ccc;}
.swiper-container {aspect-ratio: 4/3;}
.view_img_box {position: relative;aspect-ratio:4/3;}
.view_img img {width: 100%; aspect-ratio:4/3; object-fit: cover;}
.detail-img-navigation{position: relative;top:calc(-50% - 32px);}
.detail-img-prev {z-index:10;position:absolute;top:0;left:10px;width:63px;height:63px;background: unset;}
.detail-img-next {z-index:10;position:absolute;top:0;right:10px;width:63px;height:63px;background: unset}
.view_img_ex:hover .detail-img-prev  {background:url('/images/jhorse/icon/arrow_left.svg') 0px 0px no-repeat;}
.view_img_ex:hover .detail-img-next  {background:url('/images/jhorse/icon/arrow_right.svg') 0px 0px no-repeat;}
.view_img_ex:hover .detail-img-prev:hover  {background:url('/images/jhorse/icon/arrow_left_on.svg') 0px 0px no-repeat;}
.view_img_ex:hover .detail-img-next:hover  {background:url('/images/jhorse/icon/arrow_right_on.svg') 0px 0px no-repeat;}


#program_chk, #caution_chk {display: none;}
#program_chk:checked ~ .tab_contents .program_contents {display: block;}
#caution_chk:checked ~ .tab_contents .caution_contents {display: block;}
#program_chk:checked ~ .info-tab .program_btn {color: #111;font-weight: 700;border-bottom: 5px solid #111;}
#caution_chk:checked ~ .info-tab .caution_btn {color: #111;font-weight: 700;border-bottom: 5px solid #111;}

.info-tab {position: relative;margin-top:50px;height:55px;overflow-y:hidden;overflow-x:auto;white-space:nowrap;scrollbar-width: none;}
.info-tab-list {height: 51px; border-bottom: 1px solid #cccccc;font-size: 22px;line-height: 36px;width:fit-content;min-width:calc(100% - 20px);}
.info-tab-list .tab-item {display: inline-block;color: #888;padding: 0 10px 13px;margin-right: 60px;cursor: pointer;}
.info-tab-list .tab-item:last-child {margin-right:0;}
.info-tab-list .tab-item.on {color:#111111;font-weight:700;border-bottom: 5px solid #111111;}
.info-tab-list .tab-item:hover {color:#222222;font-weight:700;cursor: pointer;}

.tab_detail, .tab_contents {max-width: calc(100% - 60px);}
.tab_detail .info-tab-list {min-width: 100%;}
.tab_contents {margin-top: 38px;}
.program_contents {display: none;min-height:400px;}
.caution_contents {display: none;min-height:400px;}

.detail_info_box {width: 420px;/*position: absolute;*/top:0;right:0;}
.sticky_box {margin-top:40px;}

.program-detail {}
.detail_icon_share {width:40px;height:40px; border:1px solid #C6C6C6;border-radius:4px;background:url("/images/jhorse/icon/share.svg") center /24px no-repeat;}
.detail_icon_share:hover {cursor:pointer;background:url("/images/jhorse/icon/share_on.svg") center /24px no-repeat #C6C6C6;}

.detail_title_box {}
.detail_title {font-size:30px;color:#222222;font-weight:600;margin:20px 0;}
.detail_desc {font-size: 16px;color:#444444;font-weight:400;margin:10px 0 25px;}

.detail_desc_box {border-top:1px solid #CCCCCC;border-bottom: 1px solid #CCCCCC;padding:20px 0;margin:10px 0;}
.inline-option {line-height:36px;}
.inline-title {display:inline-block;width: 100px;font-weight:600;font-size:18px;vertical-align:top;}

.detail_form_box {}
.detail-price {color:#222222;font-weight:600;font-size: 24px;text-align: right;}
.cancel-caution {height:90px;border-radius:10px;border:1px dashed #AAAAAA;margin:40px 0; font-size:15px;font-weight:400;line-height:22px;text-align:center;padding:23px 0;box-sizing:border-box;}
.cancel-caution .alert {color:#EC0000;}

.detail-button {margin-bottom:50px;}
.btn-reservation {background-color: #23241F;border:1px solid #23241F;width:100%;height:60px;color:#FFFFFF;font-size:20px;font-weight:600;}
.btn-reservation:hover {background-color: transparent;color:#222222;text-decoration: underline;cursor:pointer;}

.way-btn{ width: 100%; min-height:45px;display: flex; justify-content: center;align-items: center; cursor:pointer;font-weight: 600;font-size: 16px;font-weight: 600;}

.way-btn.green{background-color: #fff; border:1px solid #47691F;color:#47691F;}
.way-btn.fgreen{background-color: #47691F; border:1px solid #47691F;color:#fff;}
.way-btn.red{background-color: #D4445C; border:1px solid #D4445C;color:#fff;}
.way-btn.black{background-color: #23241F; border:1px solid #23241F;color:#fff;}
.way-btn.while{background-color: #fff; border:1px solid #444;color:#333;}



.reservation-detail {padding-top:40px;display:none;}
.detail_reservation_box {}
.detail_reservation_box .inline-option {padding:20px 0;border-bottom:1px solid #CCCCCC;}
.detail_reservation_box .inline-option:last-child {border-bottom:none;}
.detail_reservation_box .inline-option.people{display:flex;}

.inline-calendar {display:inline-block;width: calc(100% - 125px);margin-left:20px;}
.inline-options {display:inline-flex;width: calc(100% - 124px);margin-left:20px;}
.inline-options.time{overflow-x:auto;overflow-y: hidden;  padding-bottom: 10px; }/* 아래의 모든 코드는 영역::코드로 사용 */
.inline-options.time::-webkit-scrollbar {width: 5px;height: 5px;  }/* 스크롤바의 너비 */
.inline-options.time::-webkit-scrollbar-thumb {width:2px;height: 2px; background: #AAAAAA; border-radius: 10px;}
.inline-options.time::-webkit-scrollbar-track {background: #F1F1F1;}

.inline-options .option{ width: 81px;height:37px;border-radius: 4px;color: #222;font-size: 16px; background-color: #EFEFEF;border-color: #EFEFEF;margin-right: 5px; display: flex;justify-content: center;align-items: center;padding:0 19px;cursor: pointer;}
.inline-options .option.selected{ color: #fff; background-color: #965841;border-color: #965841;}
.inline-options.people{display: flex;flex-direction: column;}

.inline-options.people .remembers {min-height:36px;}
.inline-options.people .remembers .member{cursor:pointer;}
.inline-options.people .remembers .member:hover,
.inline-options.people .remembers .member.selected{background-color: #e4e4e4}
.inline-options.people .area{background-color: #F4F4F4;padding:20px;}
.inline-options.people .newmember .area{margin-top:10px;}

.area .row{display: flex;margin-bottom:10px;}
.area .row.col{flex-direction: column;}
.area .row.jcse{justify-content: space-evenly;}
.area .row .ipt{height: 35px;padding:0 10px;}
.area .row .full{ width:100%;}
.area .row .half{ width: calc(50% - 5%);}
.area .row .quad{ width:25%;}
.area .row .quad.remain{ width:75%;}
.area .row label{font-weight: 600;}

.checkbox-wrapper-2 .ikxBAC {appearance: none;background-color: #dfe1e4;border-radius: 72px;border-style: none;flex-shrink: 0;height: 11px;margin: 0;position: relative;width: 30px;}
.checkbox-wrapper-2 .ikxBAC::before {bottom: -6px;content: "";left: -6px;position: absolute;right: -6px;top: -6px;}
.checkbox-wrapper-2 .ikxBAC,
.checkbox-wrapper-2 .ikxBAC::after {transition: all 100ms ease-out;}
.checkbox-wrapper-2 .ikxBAC::after {background-color: #737373;border-radius: 50%;content: "";height: 13px;left: 13px;position: absolute;top: -1px;width: 13px;}
.checkbox-wrapper-2 input[type=checkbox] {cursor: default;}
.checkbox-wrapper-2 .ikxBAC:hover {background-color: #c9cbcd;transition-duration: 0s;}
.checkbox-wrapper-2 .ikxBAC:checked {background-color: #E1EAD7;}
.checkbox-wrapper-2 .ikxBAC:checked::after {background-color: #47691F;left: 3px;}
.checkbox-wrapper-2 :focus:not(.focus-visible) {outline: 0;}
.checkbox-wrapper-2 .ikxBAC:checked:hover {background-color: #E1EAD7;}

.toggle-radio.half label{border-radius: 2px}

.form-control {display: block;width: 100%;height: calc(2.25rem + 2px);padding: 0.375rem 0.75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: 0.25rem;box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}
.text-form {width: 100%;height:120px;padding:15px;box-sizing:border-box;border:1px solid #CCC;}


@media screen and (max-width:1024px) {
    .view_img_ex {width:100%;}
    .detail_info_box {position: relative;width:100%;}
    .detail-button {position: fixed;bottom:0;left:0;width:100%;z-index:10;margin:0;background-color:#FFFFFF;padding:10px 20px;box-sizing:border-box;border-top: 1px solid #CCCCCC;}
    .reservation-detail {position:fixed;bottom:80px;left:0;width:100%;padding:20px;background-color:#FFFFFF;z-index: 1001;box-sizing:border-box;overflow-y:auto;max-height: calc(100vh - 80px);border-top:1px solid #CCCCCC;}
    .footer {min-height: 300px;}
}

@media screen and (max-width:768px) {
    .footer {min-height: 320px;}
    .tab_detail, .tab_contents {max-width: unset;}
    .daterangepicker {max-width: 100%;}
    .daterangepicker .calendar-table th, .daterangepicker .calendar-table td {min-width:unset;}
}

@media screen and (max-width:480px) {
    .footer {min-height: 350px;}
    .inline-calendar, .inline-options {margin-left:0;width:100%;}
    .inline-title {display: block;}
}

@media screen and (max-width:360px) {
    .daterangepicker .calendar-table th, .daterangepicker .calendar-table td {height:30px;line-height:30px;}
}