@charset "utf-8";

/* 장례시설 — 카테고리 탭 + 대형 이미지 + 사진 리스트 (뷰페이지 없음) */
.facility-gall {width:100%;}

/* 카테고리 탭 */
.facility-cate {margin:0 0 40rem;}
.facility-cate ul {
    display:flex;align-items:stretch;gap:10rem;
}
.facility-cate li{width:calc((100% - 40rem) / 5);}
.facility-cate a {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:56rem;
    padding:14rem 10rem;
    border:1px solid var(--gray-d5, #d5d5d5);
    background:var(--wh);
    color:var(--bk-deep);
    font-size:var(--font18);
    font-weight:var(--fw-medium);
    letter-spacing:-.36rem;
    line-height:1.3;
    text-align:center;
    transition:border-color .2s, color .2s, z-index .2s;
    color:var(--gray-500);
}
.facility-cate li:first-child a {margin-left:0;}
.facility-cate a:hover {color:var(--main-light);z-index:1;}
.facility-cate a.is-on,
.facility-cate a#bo_cate_on {
    position:relative;
    z-index:2;
    border-color:var(--main-light);
    color:var(--main-light);
    font-weight:var(--fw-semibold);
    border-width:2px;
}

/* 상단 대형 이미지 */
.facility-stage {width:100%;}
.facility-stage-img {
    position:relative;
    width:100%;
    aspect-ratio:1300 / 750;
    overflow:hidden;
}
.facility-stage-img img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.facility-stage-count {
    position:absolute;
    left:24rem;
    bottom:27rem;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:51rem;
    height:34rem;
    padding:7rem 14rem;
    border-radius:var(--radius-full);
    background:var(--bk-deep);
    color:var(--wh);
    font-size:13rem;
    font-weight:var(--fw-regular);
    letter-spacing:-.26rem;
    line-height:1.5;
}

/* 사진 전체보기 스와이퍼 */
.facility-photos {margin-top:28rem;}
.facility-photos-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 0 14rem;
}
.facility-photos-head strong {
    font-size:var(--font16);
    font-weight:var(--fw-semibold);
    letter-spacing:-.32rem;
    color:var(--bk-deep);
}
.facility-photos-head span {
    font-size:var(--font14);
    font-weight:var(--fw-regular);
    letter-spacing:-.28rem;
    color:var(--gray-500);
}
.facility-photos-head em {font-style:normal;}

.facility-photos-swiper {width:100%;height:auto;overflow:hidden;}
.facility-photos-swiper .swiper-wrapper {height:auto;}

.facility-photo-btn {
    display:block;
    width:100%;
    padding:0;
    border:3px solid transparent;
    background:none;
    cursor:pointer;
    overflow:hidden;
    transition:border-color .2s;
}
.facility-photo-btn .facility-photo-img {
    display:block;
    width:100%;
    aspect-ratio:325 / 188;
    overflow:hidden;
}
.facility-photo-btn .facility-photo-img img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.facility-photo-btn.is-on {border-color:var(--main-light);}
.facility-photo-btn:hover {border-color:var(--main-light);}
.facility-photo-btn.is-on:hover {border-color:var(--main-light);}

.facility-empty {
    padding:80rem 0;
    text-align:center;
    color:var(--color-text-muted);
    font-size:var(--font18);
}

.facility-admin-write {
    display:flex;
    justify-content:flex-end;
    gap:10rem;
    margin:30rem 0 0;
}
.facility-admin-write .btn_write_qa {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:100rem;
    padding:12rem 20rem;
    border:1px solid var(--bk-deep);
    border-radius:var(--radius-full);
    background:var(--wh);
    color:var(--bk-deep);
    font-size:var(--font18);
    font-weight:var(--fw-semibold);
    letter-spacing:-.36rem;
}

@media (max-width:1024px) {
    .facility-cate {margin-bottom:30rem;}
    .facility-cate a {font-size:var(--font16);height:52rem;padding:12rem 8rem;}
}

@media (max-width:800px) {
    .facility-cate {margin-bottom:20rem;}
    .facility-stage-img {aspect-ratio:335/193;}
    .facility-stage-count {left:12rem;bottom:12rem;height:28rem;padding:5rem 10rem;font-size:12rem;}
    .facility-photos {margin-top:20rem;}
    .facility-photos-head {margin-bottom:12rem;}
    .facility-photo-btn {border-width:2px;}
}