@charset "utf-8";

/*-------------------------------------------------------
** 
** Custom : 기본 CSS 수정 및 추가
** 
--------------------------------------------------------*/
.e6 {color:#e6e6e6 !important}
.title-container {
    text-align: center;
    padding: 4rem 1rem; /* 상하 여백 넉넉하게 */
    position: relative;
    max-width: 800px;margin: 0 auto; }

/* 메인 제목 */
.title-container h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 1rem;
    letter-spacing: -0.05em; /* 자간을 살짝 좁혀 고급스럽게 */
    word-break: keep-all; /* 단어 단위로 줄바꿈 */
}

/* 중앙 장식 선 (포인트 컬러) */
.title-container .title-line {
    width: 40px;
    height: 3px;
    background-color: #d1bfae; /* 차분하고 고급스러운 베이지/골드 톤 */
    margin: 0 auto 1.5rem auto;
}

/* 서브 제목 */
.title-container h4 {
    font-size: 1.25rem;
    font-weight: 500;
    color: #444;
    margin-bottom: 1rem;
    word-break: keep-all;
}

/* 본문 설명 */
.title-container span {
    display: inline-block;
    font-size: 1rem;
    color: #777;
    line-height: 1.6;
    word-break: keep-all;
}
        .info-container {
            margin: 80px auto;
            display: flex;
            gap: 40px; /* 좌우 레이어 간격 */
        }

        .info-layer {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        /* 행 단위 래퍼 */
        .info-layer .info-row {
            display: flex;
			align-items: center;
            padding: 24px 15px;
            margin: 0;
            border-bottom: 1px solid #eaeaea; /* 항목 간 연한 가로선 */
            flex-grow: 1;
        }

        /* 마지막 항목은 하단 선 제거 */
        .info-layer .info-row:last-child {
            border-bottom: none;
        }

        /* 항목 제목 (오른쪽 요금표용) */
        .info-layer .info-title {
            flex: 0 0 140px; /* 제목 너비 고정 */
            font-size: 1rem; 
            font-weight: 700;
            color: #333;
            display: flex;
            align-items: center;
            margin-top: 2px;
            letter-spacing: -0.5px; 
        }

        /* 항목 내용 */
        .info-layer .info-desc {
            flex: 1;
            margin: 0;
            font-size: 1rem;
            color: #555;
            line-height: 1.6;
            word-break: keep-all;
        }

        /* 금액 강조 텍스트 */
        .info-layer .info-desc span.price {
            font-weight: 700;
            color: #222;
            font-size: 1rem;
            display: block; /* 줄바꿈을 위해 block 처리 */
        }

        /* 가격/주소 그래프 애니메이션 박스 */
        .price-graph-container {
            position: relative;
            display: block;
            width: 100%;
            padding: 12px 16px;
            background-color: #f8f9fa; /* 기본 옅은 회색 배경 */
            border-radius: 6px;
            z-index: 1;
        }

        /* 채워지는 그래프 바 (기본 상태) */
        .graph-bar {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background-color: #e1eed2; /* 청렴홈페이지 포인트 연녹색 */
            border-radius: 6px;
            z-index: -1;
            width: 0; /* 시작 크기를 0으로 고정 */
            
            /* CSS transition을 통해 부드러운 애니메이션 적용 */
            transition: width 1.2s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* ★ 화면에 보일 때(.is-visible) 그래프 채워짐 */
        .info-container.is-visible .graph-bar {
            width: var(--target-width);
        }

        /* 그래프 위 텍스트가 가려지지 않게 z-index 조정 */
        .price-graph-container span.price {
            position: relative;
            z-index: 2;
        }

        
        /* 왼쪽 독립 레이어 박스 */
        .left-independent-box {
            padding: 24px 15px; /* 우측 요금표와 상단 여백을 맞추기 위함 */
            width: 100%;
        }

        /* 교통 안내 (차량, 버스) 텍스트 */
        .transport-text {
            margin:12px 0 0 5px !important;
            font-size: 1rem;
            color: #555;
            display: flex;
            align-items: center;
        }

        .transport-text::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 4px;
            background-color: #adb5bd;
            border-radius: 50%;
            margin-right: 8px;
        }


        .charnel-house-icon {
            margin-top: 20px; 
        }

        .charnel-house-icon ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: repeat(6, 1fr); 
            gap: 6px; /* 항목 간격 설정 */
        }

        /* 개별 아이콘 박스 디자인 */
        .charnel-house-icon li {
            background-color: #fcfcfc;
            border: 1px solid #f0f0f0;
            border-radius: 8px;
            padding:25px 5px; /* 여백 축소 */
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .charnel-house-icon li i {
            font-size: 1.1rem; /* 아이콘 크기 약간 축소 */
            color: var(--nb-main, #70a233); /* 포인트 녹색 (레이아웃 메인 색) */
            margin-bottom: 5px; 
        }

        /* ★ 부대시설 텍스트 수정 (볼드 해제, 크기 축소) */
        .charnel-house-icon li h3 {
            font-size: 0.7rem; /* 폰트 크기를 더 작게 축소 */
            font-weight: 400; /* 볼드(600)를 해제하고 일반 굵기로 변경 */
            color: #555;
            margin: 0;
            line-height: 1.2;
            word-break: keep-all; /* 단어 단위로 줄바꿈 */
        }

    .premium-section {
        background-color: #1e1e1e; /* 와이드 다크 배경 */
        width: 100%;
        box-sizing: border-box;
    }
    
    .premium-section * {
        box-sizing: border-box;
    }
    
    .premium-split-section {
        max-width: 1400px;
        margin: 0 auto;
        position: relative;
        background-color: #1e1e1e; 
        box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        overflow: hidden;
    }

    .split-swiper {
        width: 100%;
        height: 100%;
    }

    .premium-section .slide-inner {
        display: flex;
        height: 500px; /* PC 기본 높이 */
        width: 100%;
    }

    /* 좌측 텍스트 영역 */
    .premium-section .text-col {
        width: 40%;
        padding: 80px 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        background-color: #1c1c1c; /* 살짝 더 어두운 톤 */
        color: #ffffff;
    }

    .premium-section .text-col h2 {
        font-size: 1.8rem;
        font-weight: 700;
        margin: 0 0 20px 0;
        line-height: 1.3;
        letter-spacing: -0.5px;
        color: #ffffff;
    }

    .premium-section .text-col p {
        font-size: 0.95rem;
        font-weight: 300;
        color: #d0d0d0;
        text-align: left;
        line-height: 1.7;
        margin: 0;
        word-break: keep-all;
    }

    /* 상담전화 버튼 */
    .premium-section .btn-more {
        display: inline-block;
        margin-top: 35px;
        padding: 12px 28px;
        background-color: #ffffff;
        color: #111111;
        font-size: 0.95rem;
        font-weight: 500;
        text-decoration: none;
        border-radius: 50px;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* 반응형 버튼 텍스트 처리 */
    .premium-section .text-mobile {
        display: none; /* PC에서는 모바일 텍스트 숨김 */
    }

    /* 우측 이미지 영역 */
    .premium-section .img-col {
        width: 60%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .premium-section .img-col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.5s ease; /* 부드러운 확대 효과 */
    }

    /* 활성화된 슬라이드 이미지에 줌인 효과 부여 */
    .split-swiper .swiper-slide-active .img-col img {
        transform: scale(1.05);
    }

    .premium-section .slider-controls-ui {
        position: absolute;
        bottom: 40px;
        left: 0;
        width: 40%; /* 좌측 텍스트 영역 너비와 동일하게 */
        padding: 0 60px;
        z-index: 10;
    }

    /* 컨트롤 첫번째 줄 (화살표 + 바) */
    .premium-section .ctrl-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
    }

    /* 화살표 버튼 */
    .premium-section .btn-prev, 
    .premium-section .btn-next {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #ffffff;
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }

    .premium-section .btn-prev:hover, 
    .premium-section .btn-next:hover {
        opacity: 1;
    }

    .premium-section .btn-prev i, 
    .premium-section .btn-next i {
        font-size: 1.2rem;
        color: currentColor;
    }

    .premium-section .custom-scrollbar {
        position: relative;
        width: 100%; /* 바 길이 */
        height: 2px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
    }

    .premium-section .swiper-scrollbar-drag {
        background: #ffffff;
        border-radius: 2px;
    }

    /* 페이지네이션 숫자 (01 / 04) */
    .premium-section .custom-fraction {
        margin-top: 15px;
        font-size: 0.85rem;
        color: #ffffff;
        letter-spacing: 2px;
        font-weight: 300;
        padding-left: 5px;
        text-align: center; 
    }

	#section05 {margin: 80px auto 100px;}
        
        .inner05 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 80px; /* 텍스트와 그리드 사이의 여백 */
        }

        /* 좌측 텍스트 영역 */
        .text-area { 
            flex: 0 0 32%;
        }
        
        .fc01 { 
            font-size: 38px; 
            color: #333; 
            line-height: 1.4; 
            margin-bottom: 25px; 
            font-weight: 300; 
            letter-spacing: -1px;
        }
        
        .fc01 b { 
            font-weight: 700; 
        }
        
        .fc02 { 
            font-size: 17px; 
            color: #555; 
            font-weight: 400;
            word-break: keep-all;
        }
        
        /* 우측 카드 그리드 영역 */
        .menu05 { 
            flex: 1;
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 15px; /* 첨부 이미지처럼 카드 사이의 일정한 간격 */
        }
        
        .tap { 
            background: #f4f4f4; /* 박스 배경을 이전 바탕색(옅은 회색)으로 변경 */
            padding: 50px 25px; 
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }
        
        .tap_menu { 
            margin-bottom: 20px; 
        }
        
        .tap_num { 
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            background-color: #000; /* 첨부 이미지 스타일의 검은색 원 */
            color: #ffffff;
            border-radius: 50%;
            font-size: 15px; 
            font-weight: bold; 
        }
        
        .tap_txt { 
            font-size: 15px; 
            font-weight: 400; 
            color: #333; 
            word-break: keep-all; 
            line-height: 1.6;
        }

.chumo-consulting-wrap .title-main {
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.4;
}

/* ── Swiper 컨테이너: ID로 범위 한정 ── */
#chumoIntegritySwiper {
    width: 100%;
    overflow: hidden;
}

/* ── PC에서만 overflow 해제 (화살표 노출용) ── */
@media (min-width: 992px) {
    #chumoIntegritySwiper {
        overflow: visible;
    }
}

/* ── 스텝 카드 ── */
#chumoIntegritySwiper .ejang-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 8px;
    background: #f9fbf6;
    border: 1px solid #e2eedd;
    border-radius: 12px;
    position: relative;
    box-sizing: border-box;
    width: 12rem;
    height: 12rem;
}

#chumoIntegritySwiper .ejang-step span {
    color: var(--nb-main, #70a233);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 1.5px;
}

#chumoIntegritySwiper .ejang-step i {
    font-size: 2.6rem;
    color: #555;
    margin: 4px 0;
}

#chumoIntegritySwiper .ejang-step strong {
    font-size: 0.98rem;
    color: #222;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
}

.step-secondary {display: inline-block;
    font-size: 1rem;
    color: #777;
    line-height: 1.6;
    word-break: keep-all;}
/* ── PC 화살표: 이 Swiper 슬라이드에만 적용 ── */
@media (min-width: 992px) {
    #chumoIntegritySwiper .swiper-slide {
        position: relative;
    }
    #chumoIntegritySwiper .swiper-slide:not(:last-child)::after {
        content: '\f054';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: -14px;
        top: 50%;
        transform: translateY(-50%);
        color: #b8d49a;
        font-size: 1rem;
        z-index: 10;
    }
}
/*mobile*/

/* xxl */
@media (max-width:1399.98px) {

}
/* xl */
@media (max-width:1199.98px) {
			.inner05 {
                flex-direction: column;
                align-items: flex-start;
                gap: 40px;
            }
            .text-area {
                width: 100%;
                text-align: center;
            }
            .menu05 {
                width: 100%;
                grid-template-columns: repeat(2, 1fr);
            }
} 
/* lg */
@media (max-width:991.98px) {
	    .premium-section .slide-inner {
            flex-direction: column-reverse; 
            height: auto;
        }

        .premium-section .text-col {
            width: 100%;
            padding: 50px 30px 120px 30px; 
        }

        .premium-section .text-pc {
            display: none; 
        }
        .premium-section .text-mobile {
            display: inline; 
        }

        .premium-section .img-col {
            width: 100%;
            height: 300px;
        }

        .premium-section .slider-controls-ui {
            width: 100%;
            bottom: 30px;
            padding: 0 30px;
        }

        .premium-section .custom-scrollbar {
            width: calc(100% - 100px);
        }
}
/* md */
@media (max-width:767.98px) {
    .title-container { padding: 3rem 1rem; }
    .title-container h2 { font-size: 1.6rem; }
    .title-container h4 { font-size: 1.1rem; }
    .title-container span { font-size: 0.95rem; }
	.info-container {margin:50px auto;flex-direction: column;gap:0px;}
	.info-layer .info-row {flex-direction: column;padding: 20px 10px;}
	.info-layer .info-title {flex: auto;width: 100%;font-size: 1rem;margin-bottom: 10px;}
	.left-independent-box {padding: 0 10px 20px 10px;}
	.info-layer .info-desc {width: 100%;}
	.charnel-house-icon ul {grid-template-columns: repeat(3, 1fr); gap: 8px;}
	.transport-text{font-size: 0.8rem;}
}

/* sm */
@media (max-width:575.98px) {
			#section05 {margin: 40px auto 60px;}
	        .fc01 { font-size: 28px; }
            .menu05 {
                grid-template-columns: repeat(2, 1fr); /* 모바일 화면에서 1줄에 2개씩 배치 */
                gap: 10px; /* 좁은 화면을 고려하여 카드 사이 간격 축소 */
            }
            .tap {
                padding: 30px 15px; /* 박스가 작아지므로 내부 여백도 알맞게 축소 */
            }
            .tap_txt {
                font-size: 13.5px; /* 2단 배열 시 글씨가 예쁘게 담기도록 폰트 사이즈 조정 */
            }
}
@media screen and (max-width: 480px) {

}