.hd {
    height: 8.0rem;
    background-color: #fff;
    text-align: center;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 101;
}

.m_hd {
    display: none;
}

.hd img {
    width: 20.6rem;
}

.sub_top {
    background-color: #FFF4EE;
    width: 100%;
    margin-top: 8rem;
    position: fixed;
    z-index: 5;
    box-shadow: 0 4px 17px #fff1e9;
}

.hd_2 {
    padding-top: 28rem;
}

.hd_1 {
    padding-top: 6.5rem;
}

.bt_con {
    width: 100%;
    /* background: var(--gray-10); */
}

/* 박스 전체 감싸는 영역 */
.custom_box_wrap {
    position: relative;
    /* 원하는 너비로 조정 */
    margin: 8rem auto 3rem;
}

/* 상단 탭 박스 */
.custom_tab {
    position: absolute;
    top: -4.0rem;
    left: 0;
    width: 38rem;
    height: 6rem;
    background-color: #f4a261;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    z-index: 2;
    padding: 1.4rem 1.6rem;
    color: #fff;
    font-weight: 500;
}

.custom_tab img {
    height: 1.6rem;
    margin-bottom: 0.6rem;
}

/* 메인 박스 */
.custom_main_box {
    padding: 2.2rem 2.0rem;
    background-color: #f9f9f9;
    border-radius: 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 3;
    /* 탭과 겹치도록 여백 */
}

.custom_main_box .form-row {
    align-content: space-around;
}

.custom_main_box .custom-select,
.custom-select2 {
    min-width: 7rem;
}

.custom_main_box .col-6 {
    max-width: 100%;
}

.custom_main_box .form-control {
    font-size: 1.4rem;
    color: var(--height_md);
    padding: 1.0rem;
    color: var(--input-placeholder);
}

.custom_main_box .form-control::placeholder {
    color: var(--input-placeholder);
}

.btn img {
    width: 2.7rem;
    margin-right: 0.5rem;
}

.card_box {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pet_hotel_card {
    border-radius: 2.5rem;
    overflow: hidden;
    width: 32.5%;
    margin-top: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.hotel_img {
    position: relative;
    /*height: 22rem;*/
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.location_tag {
    position: absolute;
    top: 2rem;
    left: 2rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.5rem 0.8rem;
    font-size: 1.4rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 400;

}

.location_tag img {
    width: 14px;
    height: 14px;
}

.hotel_content {
    /* padding: 22px;/ */
    background-color: #fff;
    padding-bottom: 2.2rem;
}

.ht_inner {
    padding: 2.2rem 2.2rem 0 2.2rem;
}

.hotel_name {
    font-size: 2.2rem;
    margin-bottom: 1.6rem;
    font-weight: bold;
    display: block;
    /* 또는 inline-block */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hotel_info {
    list-style: none;
    padding: 0;
    margin: 0 0 1.6rem 0;
}

.hotel_info li {
    font-size: 1.5rem;
    color: var(--gray-40);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 6px;
    display: block;
    /* 또는 inline-block */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hotel_info li img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.hotel_info li strong {
    color: var(--gray-50);
    font-weight: 600;
}

.hotel_info li:last-child {
    margin-bottom: 2.2rem;
}

.hotel_price {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    color: var(--gray-50);
    justify-content: flex-end;
}

.hotel_price strong {
    font-size: 2.2rem;
    font-weight: bold;
    color: #000;
    margin-left: 0.8rem;
}


.gray_line {
    height: 0.1rem;
    width: 100%;
    padding: 0 !important;
    background-color: var(--gray-10);
}

.ft {
    background-color: #313131;
    color: #A8A8A8;
    padding: 4rem 0;
    line-height: 1.4;
}

.ft img {
    width: 20rem;

}

.tel_num {
    color: #fff;
}

.pagination img {
    width: 1.0rem;
    color: #ccc;
}

.tit_con {
    margin-bottom: 0.5rem;
}

.tit_left .tit_txt p {
    font-size: 1.4rem;
    color: #707070;
    font-weight: 300;
    word-break: keep-all;
    line-height: 140%;
}

.tit_left img {
    width: 1.6rem;
    margin-right: 0.8rem;
    height: 1.7rem;
    margin-top: 1px;
}

.tit_right {
    align-items: center;
}

.index .pagination {
    margin-top: 4.7rem;
}

.more_btn {
    display: none;
}

.hotel_info_wrap {
    position: relative;
}

.hotel_left {
    padding: 2.0rem;
}

.hotel_info_wrap swiper-slide img {
    border-radius: 2.0rem;
    /* 원하는 수치로 조절 가능 */
    overflow: hidden;
}

.hotel_info_wrap .swiper-container {
    width: 100%;
    height: 100%;
}

.hotel_info_wrap .swiper-slide {
    text-align: center;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
}

.hotel_info_wrap .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hotel_info_wrap .swiper-container {
    margin-left: auto;
    margin-right: auto;
}

/* 페이지네이션 점 */

swiper-container::part(slide) img {
    border-radius: 36rem;
}

swiper-container::part(pagination) {
    bottom: 1.2rem;
    text-align: center;
}

swiper-container::part(bullet) {
    width: 0.8rem;
    height: 0.8rem;
    background: rgba(0, 0, 0, 0.6);
    margin: 0 0.4rem;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.3s;
}

swiper-container::part(bullet-active) {
    width: 0.8rem;
    height: 0.8rem;
    background: #ffffff;
    border-radius: 0.8rem;
}


/* 사용자 커스텀 화살표 버튼 */
.custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    line-height: 2.8rem;
    text-align: center;
    cursor: pointer;
}

.custom-arrow.prev {
    left: 2rem;
}

.custom-arrow.next {
    right: 2rem;
}

.custom-arrow img {
    width: 0.7rem;
    height: 1.0rem;
}

/* info section 전체 */
.info-section {
    box-sizing: border-box;
    margin-top: 2.2rem;
}

/* 각 박스 */
.info-box {
    background: #fff;
    border-radius: 2rem;
    padding: 2.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.05);
    box-sizing: border-box;
}

/* 헤더: 아이콘 + 제목 */
.info-header {
    display: flex;
    align-items: center;
    margin-bottom: 2.2rem;
}

/* 아이콘 공간 */
.icon-wrap {
    margin-right: 0.6rem;
}

.icon-wrap img {
    /* object-fit: contain; */
    width: 2.5rem;
}

/* 제목 */
.info-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #222;
    margin: 0;
}

/* 각 항목 리스트 */
.price-list,
.business-list,
.location-list {
    margin: 0;
    padding: 0;
}

/* 항목 하나 */
.price-item,
.business-item,
.location-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* dt (왼쪽) */
.price-item dt,
.business-item dt,
.location-item dt,
.map-item dt {
    color: #888;
    font-weight: 500;
    min-width: 25%;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 1.6rem;
}

/* dd (오른쪽) */
.price-item dd,
.business-item dd,
.location-item dd {
    color: #222;
    font-weight: 600;
    font-size: 1.6rem;
    word-break: break-word;
    flex-grow: 1;
    padding-left: 1rem;
}

/* 지도 박스 */
.map-box {
    width: 100%;
    height: 20rem;
    background: #eee;
    border-radius: 0;
    margin-top: 1rem;
    overflow: hidden;
}

/* .de_right_box {
    position: fixed;
} */

.de_right_box h2 {
    font-size: 2.8rem;
}

.de_right_box img {
    width: 1.3rem;
    height: 1.3rem;
    margin-right: 0.5rem;
}

.de_right_box .info-header {
    margin-bottom: 1.5rem;
}

.de_right_box p {
    font-size: 1.3rem;
    color: #4f4f4f;
}

.de_right_box .tit_txt {
    margin-bottom: 1.6rem;
}

.right_sec {
    position: sticky;
    height: fit-content;
    top: 13rem;
}

.right_sec .price-item dd,
.right_sec .price-item dt {
    font-size: 1.4rem;
    font-weight: 400;
}


.inquiry_wrap {
    font-size: 2.4rem;
    line-height: 1.6;
}

/* 셀렉트 래퍼 (화살표 아이콘 위치 제어) */
.select_wrap {
    position: relative;
    display: inline;
    word-break: keep-all;
}

/* 기본 셀렉트 스타일 제거 및 커스텀 */
.auto_select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 2.4rem;
    line-height: 1.1;
    padding-right: 20px;
    color: var(--gray-60);
    min-width: 5ch;
    outline: none;
    vertical-align: baseline;
    cursor: pointer;
}


/* 선택된 값일 때 스타일 */
.auto_select.filled {
    color: var(--primary);
    border-color: var(--primary);
}

/* 커스텀 삼각형 or 이미지 아이콘 */
.select_wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    pointer-events: none;

    /* 아래 둘 중 하나 사용 */

    /* 1) 꽉 찬 삼각형 */
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid var(--primary);

    /* 2) 이미지로 교체할 경우
  background: url('/img/ico_arrow_down.svg') no-repeat center center;
  background-size: contain;
  */
}

.auto_input {
    font-size: 2.4rem;
    line-height: 1.0;
    border: none;
    border-bottom: 2px solid #ccc;
    padding: 0;
    margin: 0 2px;
    background: transparent;
    color: #999;
    outline: none;
    min-width: 2ch;
    max-width: 100%;
    /* 부모를 넘지 않게 */
    /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
}

.auto_select {
    color: #999;
}

/* 입력 시 강조 효과 */
.auto_input:focus,
.auto_input:not(:placeholder-shown),
.auto_select:focus,
.auto_select:valid {
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
}

/* select 기본값(placeholder 스타일처럼) */
.auto_select option[disabled][selected] {
    color: #ccc;
}

/* flatpickr 아이콘 제거 */
.date_input::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 1px;
    height: 1px;
    position: absolute;
    right: 0;
    pointer-events: none;
}

.de_hotel .modal-header img {
    width: 1.4rem;
}

.modal_info_txt {
    background-color: #F0F0F0;
    font-size: 1.6rem;
    margin-bottom: 3.2rem;
}

.modal_info_txt p {
    margin-top: 0.1rem;
}

.modal_info_txt {
    align-items: center;
    border-radius: 3.0rem;
    padding: 1.2rem 3.2rem;
    color: #797979;
    font-weight: 500;
}

.modal_info_txt img {
    width: 2.0rem;
    margin-right: 1.0rem;
}

.inquiry_wrap p {
    margin-bottom: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    word-break: break-word;
}

.inquiry_wrap .note {
    margin-top: 2.8rem;
}

.modal-footer {
    text-align: center;
}

.kakao_btn,
.kakao_btn:hover,
.kakao_btn:active {
    background: #FFE812;
    border: none;
}

.naver_btn,
.naver_btn:hover,
.naver_btn:active {
    background: #3FB049;
    border: none;
}

.insta_btn,
.insta_btn:hover,
.insta_btn:active {
    background: #fff;
    color: #222;
    border: 1px solid #ccc;
}

.modal_tit {
    font-size: 2.4rem;
    font-weight: 600;
}

.modal_tit .auto_input {
    font-size: 2.4rem;
    font-weight: 600;
}

.auto_input.kilo,
.auto_input.age,
.auto_input.name {
    min-width: 0ch;
}

.de_hotel .col-lg-4 {
    z-index: 999;
    padding: 0 2.0rem;
}

.modal_full.modal .modal-header button img {
    width: 1.4rem;
}

.modal-footer {
    background-color: #fff !important;
}

.price-item:last-child,
.business-item:last-child {
    margin-bottom: 0;
}

/* 반응형 */
@media (max-width: 480px) {
    .modal-footer .btn {
        width: 100%;
    }

    .modal-footer .col {
        flex-basis: auto;
    }

    .modal-footer .col .btn {
        margin-bottom: 0.8rem;
    }
}

/*-----------------반응형 사이즈----------*/
/* 태블릿, 모바일 시작 사이즈 */
/**반응형 max 1200 xl**/
@media (max-width: 1199.98px) {}

/**반응형 max 992px lg**/
@media (max-width: 991.98px) {}

/**반응형 max 767px md**/
@media (max-width: 767.98px) {}

/**반응형 max 576px sm**/
@media (max-width: 575.98px) {}




/**반응형 max 767px md**/
@media (max-width: 991.98px) {
    .hd {
        height: 5.0rem;
    }

    .hd_1 {
        padding-top: 5rem;
    }

    .hd img {
        width: 15.5rem;
    }

    .sub_top {
        margin-top: 5rem;
    }

    .hd_2 {
        padding-top: 23rem;
    }

    .custom_box_wrap {
        margin: 6.6rem auto 1.6rem;
    }

    .sm_selct.form-row {
        flex-direction: column;
    }

    .sm_selct.form-row {}

    .custom_tab {
        width: 28rem;
        font-size: 1.3rem;
        padding: 1.3rem;
    }

    .custom_tab img {
        height: 1.4rem;
        margin-bottom: 0.6rem;
    }

    .sm_selct .form-row:nth-child(2) {
        margin-top: 0.5rem;
    }

    .sm_selct .form-control,
    .sm_selct .btn {
        height: var(--height_md);
    }

    .sm_selct .form-row>.col,
    .form-row>[class*=col-] {
        padding-right: 3px;
        padding-left: 3px;
    }

    .custom_main_box {
        padding: 1.6rem;
    }

    .custom-select {
        background: url(../img/ic_ip_select.png) no-repeat center right 0.8rem;
        background-size: 1.2rem;
        background-color: #fff !important;
    }

    .custom_main_box .form-control {
        padding: 0rem 2.5rem 0rem 0.8rem;
    }

    .custom_main_box .btn {
        padding-right: 0;
        padding-left: 0;
    }

    .pet_hotel_card {
        border-radius: 2.5rem;
        overflow: hidden;
        margin: 1.5rem 0 0;
        width: 49%;
    }

    .tit_txt {
        margin-bottom: 1.0rem;
    }

    .more_btn {
        display: block;
        min-width: 17rem;
        margin: 5rem auto 0;
    }

    .index .pagination {
        display: none;
    }

    .info-section .de_right_box {
        position: fixed;
        bottom: 0;
        left: 0;
        border-radius: 0;
        padding: 0;
        z-index: 999;
        width: 100vw;
        padding: 1.6rem;
        margin-bottom: 0;
    }

    .hotel_left {
        padding: 0;
    }

    .de_right_box .info-header {
        margin-bottom: 0rem;
    }

    .de_right_box .info-header h2 {
        font-size: 1.8rem;
        /* display: none; */
    }

    .info-box {
        padding: 16px 16px;
        margin: 1.6rem;
    }

    .info-header h2 {
        font-size: 1.6rem;
    }

    .price-item dt,
    .business-item dt,
    .location-item dt,
    .map-item dt {
        min-width: 100px;
        font-size: 1.4rem;
    }

    .price-item dd,
    .business-item dd,
    .location-item dd {
        font-size: 1.4rem;
    }

    .map-box {
        height: 150px;
    }

    .hd_num_3 {
        display: none;
    }

    .m_hd {
        display: block;
        justify-content: flex-start;
        height: 5.0rem;
        background-color: #fff;
        text-align: center;
        display: flex;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        z-index: 101;
        padding: 0 1.6rem;

    }

    .m_hd img {
        width: 0.8rem;
        margin-right: 0.8rem;
    }

    .m_hd p {
        font-size: 1.8rem;
        font-weight: 500;
    }

    .de_hotel #top_btn {
        bottom: 17rem;
    }

    .info-section .de_right_box {
        box-shadow: 0 -3px 10px rgb(0 0 0 / 0.05);
        margin: 0;
    }

    .price-item,
    .business-item,
    .location-item {
        flex-direction: column;
    }

    .price-item dd,
    .business-item dd,
    .location-item dd {
        padding-left: 0;
        margin-top: 0.6rem;
        word-break: keep-all;
    }

    .info-header {
        margin-bottom: 1.0rem;
    }

    .right_sec .price-item {
        flex-direction: row;
    }

    .info-section {
        margin-top: 1.6rem;
    }

    .de_hotel .row {
        margin-left: 0;
        margin-right: 0;
    }

    .hotel_info_wrap swiper-slide img {
        border-radius: 0rem;
        overflow: hidden;
    }

    /* .price-item.address {
        display: none;
    } */

    .price-item.tel {
        align-items: center;
    }


    .modal_full.modal .modal-header {
        height: 5.0rem !important;
    }

    .cancel_btn {
        display: none;
    }
}

/**반응형 max 576px sm**/
@media (max-width: 600px) {
    .pet_hotel_card {
        width: 100%;
    }

    .ht_inner {
        padding: 2.0rem 2.0rem 0 2.0rem;
    }
/*
    .hotel_img {
        height: 17rem;
    }*/

    .hotel_name {
        font-size: 2.0rem;
        margin-bottom: 1.2rem;
    }

    .hotel_info li {
        margin-bottom: 1.2rem;
    }

    .hotel_info li:last-child {
        margin-bottom: 1.6rem;
    }

    .hotel_price strong {
        font-size: 2.0rem;
    }

    .hotel_content {
        padding-bottom: 2.0rem;
    }

    .inquiry_wrap {
        font-size: 1.8rem;
    }

    .auto_input,
    .auto_select {
        font-size: 1.8rem;
    }

    .modal_info_txt {
        padding: 0.8rem 1.6rem;
        font-size: 1.3rem;
        line-height: 1.3;
        margin-bottom: 1.6rem;
    }

    .modal_full.modal .modal-body {
        background: #fff;
    }


    .inquiry_wrap p {
        /* margin-bottom: 1.04rem; */
    }

    .modal_tit {
        font-size: 1.8rem;
    }

    .modal_tit .auto_input {
        font-size: 1.8rem;
    }
}