@charset "utf-8";

/* 서브 비주얼 영역 */
#shSub {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 425px;
    margin: 0 auto;
    /* 배경 이미지는 유지하되, 보라색 톤의 오버레이를 살짝 섞어주면 더 고급스럽습니다 */
    background: linear-gradient(rgba(108, 92, 231, 0.1), rgba(108, 92, 231, 0.1)), url(./sub_bg.jpg) center no-repeat;
    background-size: cover;
    background-color: #f9f9f9; /* 이미지 로딩 전 기본 배경 */
}

#shSub .txt_area {
    padding-top: 40px;
    color: #333; /* 텍스트를 기본 다크 그레이로 변경 (배경이 밝을 경우) */
    text-align: center;
    font-family: var(--ko-font);
}

/* 서브 타이틀: 보라색 포인트 */
#shSub .txt_area p {
    margin-bottom: 20px;
    font-size: 46px;
    font-weight: 700;
    color: var(--primary); /* GNB에서 설정한 보라색 적용 */
    font-family: var(--eng-font), var(--ko-font);
    letter-spacing: -1px;
}

/* 경로(Breadcrumb) 영역 */
#shSub .txt_area div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #666; /* 경로 텍스트는 약간 연하게 */
}

#shSub .txt_area div a {
    padding-top: 3px;
    color: #666;
    transition: color 0.2s;
}

#shSub .txt_area div a:hover {
    color: var(--primary); /* 호버 시 보라색 */
}

/* 아이콘 및 구분선 */
#shSub .txt_area div svg {
    fill: var(--primary); /* 홈 아이콘 등을 보라색으로 포인트 */
}

#shSub .txt_area div i {
    margin: 0 20px;
    font-size: 14px;
    color: #ccc; /* 구분선 화살표 등 */
}

/* 반응형 [s] */
@media (max-width: 1024px) {
    #shSub { height: 340px; }
    #shSub .txt_area p { margin-bottom: 8px; font-size: 36px; }
    #shSub .txt_area div { font-size: 15px; }
}

@media (max-width: 480px) {
    #shSub { 
        height: 60px; /* 50px에서 약간 여유있게 수정 */
        border-bottom: 1px solid #eee; 
        background: #fff; /* 완전 화이트 배경 */
    }
    #shSub .txt_area { padding: 0px; }
    #shSub .txt_area p { 
        margin-bottom: 0px; 
        color: var(--primary); /* 모바일에서도 타이틀은 보라색 유지 */
        font-size: 18px; 
        font-weight: 600;
    }
    #shSub .txt_area div { display: none; }
}
/* 반응형 [e] */