/* ========================================
   Main Page Style (Visual & Core Services)
   ======================================== */

/* Responsive Helper Utilities */
@media (min-width: 768px) {
    .d-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-none { display: none !important; }
}
@media (max-width: 767px) {
    .d-block { display: block !important; }
    .d-md-block { display: none !important; }
    .d-md-none { display: block !important; }
}

.main_wrapper {
    width: 100%;
    overflow: hidden;
}

/* ========================================
   1. 메인 비주얼 슬라이더 영역 (Section 1)
   ======================================== */
.main_visual {
    position: relative;
    width: 100%;
    height: 860px; /* 천화 투자자문 테마처럼 일정한 고정 높이 적용 */
    background-color: #000;
}

@media (max-width: 1199px) {
    .main_visual {
        height: 700px;
    }
}

@media (max-width: 767px) {
    .main_visual {
        height: 500px; /* 모바일 환경에서는 500px 고정 */
    }
}

.main_slider {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 슬라이드 텍스트 콘텐츠 */
.slide_content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    max-width: 900px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 타이틀 디자인 */
.title {
    font-family: 'Noto Sans KR', sans-serif;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sub_title {
    display: block;
    font-size: 50px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.main_title {
    display: block;
    font-size: 50px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* 설명문 디자인 */
.desc {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    letter-spacing: -0.02em;
    margin: 0;
}

/* 반응형 폰트 조절 */
@media (max-width: 991px) {
    .sub_title {
        font-size: 42px;
    }
    
    .main_title {
        font-size: 42px;
    }
    
    .desc {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .title {
        margin-bottom: 25px;
        gap: 10px;
    }

    .sub_title {
        font-size: 32px;
    }
    
    .main_title {
        font-size: 32px;
    }
    
    .desc {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* 가로 실선 형태의 스와이퍼 인디케이터 (Pagination) */
.main_slider .swiper-pagination {
    bottom: 50px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    z-index: 10;
}

@media (max-width: 767px) {
    .main_slider .swiper-pagination {
        bottom: 40px !important;
    }
}

.main_slider .swiper-pagination-bullet {
    width: 35px;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    opacity: 1;
    border-radius: 0;
    margin: 0 !important;
    transition: all 0.4s ease;
}

.main_slider .swiper-pagination-bullet-active {
    width: 60px;
    background: #ffffff;
}


/* ========================================
   2. 핵심 서비스 슬라이더 영역 (Section 2)
   ======================================== */
.main_services {
    background-color: #ffffff;
    padding: 100px 0;
    width: 100%;
}

.services_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* 섹션 헤더 타이틀 */
.section_title {
    text-align: center;
    margin-bottom: 60px;
}

.section_title h2 {
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

.section_title .title_sub {
    display: inline-block;
    font-size: 36px;
    font-weight: 800;
    color: #111111;
    letter-spacing: -0.03em;
    margin-right: 8px; /* 한글 한 칸 크기의 깔끔한 자간 간격 */
    margin-bottom: 0;
}

.section_title .title_main {
    display: inline-block;
    font-size: 36px;
    font-weight: 800;
    color: #2F3389; /* 한강그룹 아이덴티티 시그니처 블루 */
    letter-spacing: -0.02em;
}

.section_title .section_desc {
    font-size: 15px;
    color: #666666;
    margin-top: 15px;
    margin-bottom: 0;
    letter-spacing: -0.01em;
}

/* 슬라이더 전체 래퍼 */
.services_slider_wrap {
    position: relative;
    width: 100%;
    padding: 0 50px; /* PC 영역에서 좌우 버튼 공간 마련 */
}

/* 스와이퍼 컨테이너 커스텀 오버플로우 관리 */
.service_slider {
    width: 100%;
    overflow: hidden;
}

/* 내비게이션 화살표 */
.services_slider_wrap .slider_btn {
    position: absolute;
    top: calc(50% - 40px); /* 카드 이미지 중앙 지점에 수평 정렬 */
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    padding: 0;
}

.services_slider_wrap .btn_prev {
    left: -10px;
}

.services_slider_wrap .btn_next {
    right: -10px;
}

.services_slider_wrap .slider_btn:hover {
    background-color: #2F3389;
    color: #ffffff;
    border-color: #2F3389;
}

/* 개별 서비스 카드 아이템 */
.service_slide_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.service_slide_item .img_box {
    position: relative;
    width: 100%;
    padding-bottom: 125%; /* 약 4:5 비율 적용 */
    overflow: hidden;
    border-radius: 24px; /* 시안에 최적화된 미려한 라운드 */
    background: #f7fafc;
}

.service_slide_item .img_box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 카드 이미지 마우스 호버 스케일 업 */
.service_slide_item:hover .img_box img {
    transform: scale(1.06);
}



/* 설명부 영역 */
.service_slide_item .info_box {
    padding-top: 20px;
    text-align: left;
}

.service_slide_item .info_box h3 {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
    font-family: 'Noto Sans KR', sans-serif;
}

.service_slide_item .info_box p {
    font-size: 13.5px;
    color: #888888;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.5;
    font-family: 'Noto Sans KR', sans-serif;
}


/* ========================================
   핵심 서비스 섹션 반응형 대응 (Responsive)
   ======================================== */

/* 태블릿 및 모바일 환경 (1023px 이하) */
@media (max-width: 1023px) {
    .main_services {
        padding: 70px 0;
    }
    
    .section_title {
        margin-bottom: 40px;
    }
    
    .section_title .title_sub {
        display: block;
        font-size: 30px;
        margin-right: 0;
        margin-bottom: 6px;
    }
    
    .section_title .title_main {
        display: block;
        font-size: 30px;
    }
    
    .section_title .section_desc {
        font-size: 14px;
        margin-top: 10px;
        padding: 0 20px;
    }
    
    .services_slider_wrap {
        padding: 0; /* 모바일 영역에서 슬라이드 공간 극대화 */
    }
    
    /* 좌우 슬라이드 일부분 노출을 위해 오버플로우 visible 처리 */
    .service_slider {
        overflow: visible;
    }
    
    /* 모바일에서는 손쉬운 스와이프를 장려하기 위해 좌우 내비 화살표 제거 */
    .services_slider_wrap .slider_btn {
        display: none;
    }
    
    .service_slide_item .img_box {
        border-radius: 20px; /* 모바일에 최적화된 약간 좁은 곡률 */
    }
    
    .service_slide_item .info_box h3 {
        font-size: 18px;
    }
    
    .service_slide_item .info_box p {
        font-size: 13px;
    }
}

/* 소형 모바일 대응 */
@media (max-width: 480px) {
    .main_services {
        padding: 60px 0;
    }
    
    .section_title .title_sub {
        font-size: 26px;
    }
    
    .section_title .title_main {
        font-size: 26px;
    }
}

/* ========================================
   3. 공정 약속 섹션 (Section 3)
   ======================================== */
.main_benefits {
    background-color: #f4f6f9; /* 시안 정합성: 은은하고 품격 있는 라이트 블루 그레이 */
    padding: 100px 0;
    width: 100%;
}

.benefits_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 제목 강제 개행 및 블록 처리 (Section 3 전용) */
.main_benefits .section_title .title_sub {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 8px;
    font-size: 36px;
    font-weight: 800;
    color: #111111;
}

.main_benefits .section_title .title_main {
    display: block !important;
    font-size: 36px;
    font-weight: 800;
    color: #2F3389;
    line-height: 1.3;
}

/* 3열 레이아웃 그리드 */
.benefits_grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 50px;
}

/* 개별 카드 */
.benefit_card {
    flex: 1;
    background-color: #ffffff;
    border-radius: 24px;
    padding: 45px 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.015), 0 1px 3px rgba(0, 0, 0, 0.01);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 호버 시 플로팅 및 브랜드 섀도우 글레이즈 */
.benefit_card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(47, 51, 137, 0.06);
}

/* 아이콘 박스 */
.benefit_card .icon_box {
    margin-bottom: 30px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.benefit_card .icon_box img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* 카드 텍스트 */
.benefit_card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 14px 0;
    letter-spacing: -0.02em;
    font-family: 'Noto Sans KR', sans-serif;
}

.benefit_card p {
    font-size: 14.5px;
    color: #666666;
    line-height: 1.65;
    margin: 0;
    letter-spacing: -0.01em;
    word-break: keep-all;
    font-family: 'Noto Sans KR', sans-serif;
}

/* ========================================
   공정 약속 섹션 반응형 대응 (Responsive)
   ======================================== */
@media (max-width: 1023px) {
    .main_benefits {
        padding: 70px 0;
    }
    
    .main_benefits .section_title .title_sub {
        font-size: 30px;
    }
    
    .main_benefits .section_title .title_main {
        font-size: 30px;
    }
    
    .benefits_grid {
        flex-direction: column;
        gap: 20px;
        margin-top: 35px;
    }
    
    .benefit_card {
        padding: 35px 25px;
        border-radius: 20px;
    }
    
    .benefit_card .icon_box {
        margin-bottom: 20px;
        height: 65px;
    }
    
    .benefit_card h3 {
        font-size: 19px;
        margin-bottom: 10px;
    }
    
    .benefit_card p {
        font-size: 13.5px;
        line-height: 1.55;
    }
}

@media (max-width: 480px) {
    .main_benefits {
        padding: 60px 0;
    }
    
    .main_benefits .section_title .title_sub {
        font-size: 26px;
    }
    
    .main_benefits .section_title .title_main {
        font-size: 26px;
    }
}

/* ========================================
   4. 현장 확인 포트폴리오 섹션 (Section 4)
   ======================================== */
.main_portfolio {
    background-color: #ffffff; /* 교차 배경 선언: 깔끔한 화이트 백그라운드 */
    padding: 100px 0;
    width: 100%;
}

.portfolio_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 제목 블록 처리 (Section 4 전용) */
.main_portfolio .section_title .title_sub {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 8px;
    font-size: 36px;
    font-weight: 800;
    color: #111111;
}

.main_portfolio .section_title .title_main {
    display: block !important;
    font-size: 36px;
    font-weight: 800;
    color: #2F3389;
    line-height: 1.3;
}

/* 카테고리 그룹 */
.portfolio_group {
    margin-bottom: 90px;
}

.portfolio_group:last-child {
    margin-bottom: 0;
}

/* 카테고리 그룹 타이틀 */
.portfolio_group_title {
    text-align: center;
    margin-bottom: 40px;
}

.portfolio_group_title .group_sub {
    display: inline-block;
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.02em;
    margin-right: 10px;
    vertical-align: baseline;
}

.portfolio_group_title .group_main {
    display: inline-block;
    font-size: 32px;
    font-weight: 700;
    color: #2F3389;
    letter-spacing: -0.02em;
    vertical-align: baseline;
}

/* 포트폴리오 내비게이션 래퍼 */
.portfolio_slider_wrap {
    position: relative;
    padding: 0 50px; /* Section 2와 완벽 매칭되도록 50px 적용 */
}

/* 개별 슬라이더 */
.portfolio_slider {
    width: 100%;
    overflow: hidden;
}

/* 내비게이션 화살표 */
.portfolio_slider_wrap .slider_btn {
    position: absolute;
    top: calc(50% - 23px); /* 46px 버튼 높이 기준 정밀 수직 센터링 */
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    padding: 0;
}

.portfolio_slider_wrap .btn_prev {
    left: -10px; /* Section 2와 완벽 대칭 구조 */
}

.portfolio_slider_wrap .btn_next {
    right: -10px; /* Section 2와 완벽 대칭 구조 */
}

.portfolio_slider_wrap .slider_btn:hover {
    background-color: #2F3389;
    color: #ffffff;
    border-color: #2F3389;
}

/* 개별 슬라이드 카드 */
.portfolio_slide_item {
    width: 100%;
}

.portfolio_slide_item .img_box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* 스크린샷과 시안에 맞춘 정사각형 비율 */
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.015);
    background-color: #f7f7f7;
}

.portfolio_slide_item .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 호버 줌인 효과 */
.portfolio_slide_item:hover .img_box img {
    transform: scale(1.08);
}

/* 더 많은 사례 보기 버튼 */
.portfolio_more_wrap {
    text-align: center;
    margin-top: 40px;
}

.portfolio_more_btn {
    display: inline-block;
    background-color: #2F3389;
    color: #ffffff;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(47, 51, 137, 0.15);
}

.portfolio_more_btn:hover {
    background-color: #1c2069;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(47, 51, 137, 0.25);
}

/* ========================================
   현장 확인 포트폴리오 반응형 대응 (Responsive)
   ======================================== */
@media (max-width: 1023px) {
    .main_portfolio {
        padding: 70px 0;
    }
    
    .main_portfolio .section_title .title_sub {
        font-size: 30px;
    }
    
    .main_portfolio .section_title .title_main {
        font-size: 30px;
    }
    
    .portfolio_group {
        margin-bottom: 60px;
    }
    
    .portfolio_group_title {
        margin-bottom: 25px;
    }
    
    .portfolio_group_title .group_sub {
        display: block;
        margin-right: 0;
        margin-bottom: 5px;
        font-size: 24px;
        font-weight: 700;
        color: #333333;
    }
    
    .portfolio_group_title .group_main {
        display: block;
        font-size: 24px;
        font-weight: 700;
    }
    
    /* 모바일 좌우 잘림 없는 오버플로우 처리 */
    .portfolio_slider_wrap {
        padding: 0;
    }
    
    .portfolio_slider {
        overflow: visible;
    }
    
    /* 모바일용 둥글기 최적화 */
    .portfolio_slide_item .img_box {
        border-radius: 20px;
    }
    
    /* 모바일 화살표 제거 */
    .portfolio_slider_wrap .slider_btn {
        display: none;
    }
    
    .portfolio_more_wrap {
        margin-top: 30px;
    }
}

@media (max-width: 480px) {
    .main_portfolio {
        padding: 60px 0;
    }
    
    .main_portfolio .section_title .title_sub {
        font-size: 26px;
    }
    
    .main_portfolio .section_title .title_main {
        font-size: 26px;
    }
}

/* ========================================
   5. 연락처 및 소개 배너 섹션 (Section 6)
   ======================================== */
.main_contact_info {
    background-color: #ffffff;
    padding: 100px 0;
    width: 100%;
}

.contact_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Upper Row: Info Cards */
.info_card_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.info_card {
    background-color: #f4f6f8;
    border-radius: 24px;
    height: 260px;
    padding: 30px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

/* 전화 걸기 호버 링크 */
a.info_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    background-color: #eff2f6;
}

.info_card .card_header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.info_card .card_header img {
    height: 22px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}

.info_card .card_title {
    font-size: 19px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.02em;
}

.info_card .card_value {
    font-size: 38px;
    font-weight: 800;
    color: #111111;
    line-height: 1.2;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.info_card .card_desc {
    font-size: 14.5px;
    font-weight: 500;
    color: #666666;
    letter-spacing: -0.01em;
}

/* Lower Row: Image Cards */
.image_card_row {
    border-top: 1px solid #e2e8f0;
    padding-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.image_card {
    position: relative;
    width: 100%;
    height: 260px;
    border-radius: 24px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s ease;
}

/* 이미지 카드 호버 효과: 확대 및 입체감 부여 */
.image_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.image_card .card_content {
    z-index: 2;
    padding: 0 30px;
}

.image_card .img_card_title {
    font-size: 34px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.image_card .img_card_desc {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.55;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ========================================
   연락처 및 소개 배너 섹션 반응형 대응 (Responsive)
   ======================================== */
@media (max-width: 1023px) {
    .main_contact_info {
        padding: 80px 0;
    }
    
    .info_card_row {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .image_card_row {
        border-top: 1px solid #e2e8f0;
        padding-top: 20px;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .info_card {
        height: 200px;
        padding: 20px;
        border-radius: 20px;
    }
    
    .info_card .card_title {
        font-size: 16px;
    }
    
    .info_card .card_value {
        font-size: 30px;
    }
    
    .info_card .card_desc {
        font-size: 13px;
    }
    
    .image_card {
        height: 200px;
        border-radius: 20px;
    }
    
    .image_card .img_card_title {
        font-size: 26px;
        margin-bottom: 8px;
    }
    
    .image_card .img_card_desc {
        font-size: 13.5px;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .main_contact_info {
        padding: 70px 0;
    }
    
    .info_card .card_value {
        font-size: 26px;
    }
}