/* QUICK_floating/quick_1 */

/* 플로팅 퀵메뉴 기본 스타일 */
.quick_floating .quick-area {
    display: flex;
    transform: translateX(12rem);
    pointer-events: none;
    transition: transform 0.4s
}

.quick_floating .quick-area.active {
    transform: translateX(0);
    pointer-events: auto
}

.quick_floating .btn-quick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--border-color);
    border-right: none;
    transition: background 0.3s;
    pointer-events: auto;
    margin-top: 9px;
    border-radius: 10px 0px 0px 10px
}

.quick_floating .quick-area.active .btn-quick {
    background: var(--primary);
    border-color: transparent;
    transform: rotate(180deg);
    color: var(--white);
    border-radius: 0px 10px 10px 0px
}

.quick_floating .btn-quick::before {
    font-size: 2rem;
    transition: color 0.3s, transform 0.3s
}

.quick_floating .quick-wrap {
    position: relative;
    width: 12rem
}

.quick_floating .quick-contact {
    padding: 1.6rem;
    width: 100%;
    text-align: center;
    background-color: var(--white);
    box-shadow: 0 0 4rem 0 rgba(167, 167, 167, 0.2)
}

.quick_floating .quick-contact i {
    font-size: 2.4rem
}

.quick_floating .quick-contact p {
    margin-top: 1.2rem
}

.quick_floating .quick-contact strong {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: var(--fw-bold)
}

.quick_floating .swiper {
    margin-top: 0.8rem;
    width: 100%;
    background: var(--white);
    box-shadow: 0 0 4rem 0 rgba(167, 167, 167, 0.2)
}

.quick_floating .thumb {
    margin: 0;
    width: 100%;
}

.quick_floating .thumb .wg_img_box {
    width: 100%;
    height: 13rem;
    object-fit: cover
}

.quick_floating .thumb .wg_img_box .wg_img1 {
    width: 100%;
    height: 13rem;
}

.quick_floating .thumb .wg_img_box .wg_img1 img {
    width: 100%;
    height: 13rem;
    object-fit: cover
}

.quick_floating .desc {
    padding: 0.8rem 1.6rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    font-size: calc(var(--tx-sm-size) * 0.7);
}

.quick_floating .paging {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0 1.6rem;
    height: 4.8rem
}

.quick_floating .paging [class*="btn-"] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-color1);
    font-size: 1.6rem;
    font-weight: var(--fw-bold)
}

.quick_floating .paging-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #333 !important;
    font-size: calc(var(--tx-sm-size) * 0.7);
}

.quick_floating .paging-wrap .curr {
    color: #333 !important;
    font-size: calc(var(--tx-sm-size) * 0.7);
}

.quick_floating .paging-wrap .total {
    color: #333 !important;
    font-size: calc(var(--tx-sm-size) * 0.7);
}

.quick_floating .paging-wrap span {
    color: #333 !important;
    font-size: calc(var(--tx-sm-size) * 0.7);
}

/* 모달 버튼 스타일 */
.quick_floating .slide-item {
    position: relative;
}

.quick_floating .slide-item .open-btn {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

/* body로 이동된 모달 스타일 */
body > .quick-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    opacity: 0;
    visibility: hidden;
    z-index: 99999 !important;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
}

body > .quick-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body > .quick-modal .modal-inner {
    width: 90%;
    max-width: 40rem;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.4rem;
    background: var(--white, #fff);
    border-radius: 2.4rem;
    box-shadow: 0 0 2.4rem 0 rgba(161, 161, 161, 0.25);
}

body > .quick-modal .quick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

body > .quick-modal .quick-head h4 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: var(--fw-bold, 700);
}

body > .quick-modal .quick-head .close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 2rem;
    color: var(--black, #222);
    background: transparent;
    border: none;
    cursor: pointer;
}

body > .quick-modal .quick-body {
    max-height: 50vh;
    overflow-y: auto;
    font-size: 1.4rem;
    line-height: 1.8;
    color: var(--black, #222);
    word-break: keep-all;
}

body > .quick-modal .quick-foot {
    margin-top: 2.4rem;
    text-align: center;
}

body > .quick-modal .quick-foot .btn-close-link {
    display: block;
    padding: 1.4rem 2rem;
    background: var(--black, #222);
    color: var(--white, #fff);
    border-radius: 0.8rem;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: var(--fw-medium, 500);
}

/* 모바일 반응형 */
@media (max-width: 992px) {
    .quick_floating .quick-area {
        transform: translateX(15.6rem)
    }

    .quick_floating .btn-quick {
        width: 4rem;
        height: 4rem
    }

    .quick_floating .btn-quick::before {
        font-size: 1.6rem
    }

    .quick_floating .quick-wrap {
        width: 15.6rem
    }

    .quick_floating .quick-contact {
        padding: 1.6rem
    }

    .quick_floating .quick-contact i {
        font-size: 2rem
    }

    .quick_floating .quick-contact p {
        margin-top: 0.8rem
    }

    .quick_floating .thumb .wg_img_box .wg_img1 img {
        height: 20rem
    }

    .quick_floating .desc {
        padding: 0.6rem 1.2rem
    }

    .quick_floating .paging [class*="btn-"] {
        font-size: 1.2rem
    }

    .quick_floating .paging {
        padding: 0 1.2rem;
        height: 4.2rem
    }
}