/* ==========================================================================
상단 이미지
========================================================================== */
.sub-common-top.sub5 {
    background: url("/static/kor/images/finance/finance-visual.jpg") no-repeat center/cover;
}

/* ==========================================
상단 타이틀 영역
========================================== */
.sec-notice-board {
    padding: 11.4rem 0 var(--mg-200);
}

/* highcharts */
.common-wrap:has(.highcharts) {
    margin-top: 12rem;
}

.highcharts {
    width: 100%;
    display: flex;
    gap: 4rem;
}

.highcharts li {
    flex: 1;
    padding: 3.2rem 2.8rem 2rem;
    background: #fff;
    border: 1px solid #CBCCCA;
    border-radius: 16px;
}

/* highcharts */

/* ==========================================
게시판 테이블 영역
========================================== */
.sec-notice-board .title-box-sub {
    margin-bottom: 4.8rem;
}

.board-table-wrap {
    margin-bottom: 8rem;
}

.board-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    table-layout: fixed;
}

.board-table thead th {
    padding: unset;
    height: 6.4rem;
    font-size: var(--font-16);
    font-weight: 700;
    border-top: 2px solid #2F3133;
    border-bottom: 1px solid #E5E5E3;
    color: #2F3133;
}

.board-table tbody td {
    height: 9.6rem;
    font-size: var(--font-16);
    border-bottom: 1px solid #E5E5E3;
    vertical-align: middle;
    transition: color 0.2s ease;
}

.board-table tbody td.text-left {
    text-align: left;
    padding-left: 8rem;
    font-size: var(--font-24);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .2s;
}

.board-table tbody td.num {
    font-weight: 800;
    font-family: var(--paybooc);
    color: #8F9294;
}

.board-table tbody td.date {
    font-size: var(--font-18);
    font-weight: 300;
    color: #5F6266;
}

.board-table tbody td.file .icon-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: url(/static/kor/images/business/samjocelltech/download.png) no-repeat center;
    transition: all .2s;
}

/* ==========================================
테이블 줄 Hover 및 Active 인터랙션
========================================== */

.board-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.board-table tbody tr:hover .title,
.board-table tbody tr.active .title {
    font-weight: 700;
    color: #0065BD;
}

.board-table tbody tr:hover td.num,
.board-table tbody tr.active td.num {
    color: #0065BD;
}

.board-table tbody tr:hover .icon-download,
.board-table tbody tr.active .icon-download {
    background: url(/static/kor/images/icon/download-B.png) no-repeat center;
}

.board-table tbody tr:hover {
    background-color: #fafafa;
}

.board-table tbody tr.active:hover {
    background-color: #f1f3f5;
}

/* ==========================================
고객지원자주하는 질문
========================================== */
/* 상단 이미지 */
.sub-common-top.question {
    background: url("/static/kor/images/finance/question-visual.jpg") no-repeat center/cover;
}

.sub-common-top.inquiry {
    background: url("/static/kor/images/finance/inquiry-visual.jpg") no-repeat center/cover;
}

.sec-faq {
    padding: var(--mg-200) 0 var(--mg-200);
}

.faq-header {
    padding-bottom: 4rem;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #2F3133;
}

.faq-tabs {
    display: flex;
    gap: 4.8rem;
}

.faq-tabs li a {
    font-size: var(--font-24);
    font-weight: 500;
    color: #8F9294;
    text-decoration: none;
    transition: color 0.3s, font-weight 0.3s;
}

/* 탭 활성화 상태 */
.faq-tabs li a.active {
    font-weight: 700;
    color: #17181A;
}

/* ==========================================
2. FAQ 아코디언 리스트
========================================== */
.faq-list {
    margin-bottom: 8rem;
}

.faq-item {
    border-bottom: 1px solid #E5E5E3;
}

/* 질문 (Q) 영역 */
.faq-q {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.mark-q {
    font-size: var(--font-24);
    font-weight: 800;
    font-family: var(--paybooc);
    width: 12rem;
    text-align: center;
    flex-shrink: 0;
    color: #CBCCCA;
    transition: color 0.3s;
}

.faq-q .txt {
    padding: 5rem 0;
    font-size: var(--font-28);
    font-weight: 500;
    color: #17181A;
    flex: 1;
    /* 남은 공간 모두 차지 */
    padding-right: 4rem;
    line-height: 1.5;
    word-break: keep-all;
    transition: color 0.3s, font-weight 0.3s;
}

.icon-arrow {
    width: 9.6rem;
    height: 10px;
    background: url(/static/kor/images/icon/faq-arrow-G.png) no-repeat center;
    flex-shrink: 0;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    background-color: #F5F5F5;
    border-radius: 16px;
    transition: max-height 0.4s ease-out;
}

.answer-inner {
    display: flex;
    align-items: center;
}

.faq-item.active .faq-a {
    margin-bottom: 1.6rem;
}

.mark-a {
    width: 12rem;
    text-align: center;
    color: #0065BD;
    flex-shrink: 0;
    font-size: var(--font-24);
    font-weight: 800;
    font-family: var(--paybooc);
}

.answer-inner .txt {
    padding: 3.2rem 0;
    flex: 1;
    line-height: 1.6;
    font-size: var(--font-20);
    font-weight: 300;
    color: #2F3133;
    word-break: keep-all;
}

/* ==========================================
🔥 핵심: 활성화(Active) 상태 스타일
========================================== */
.faq-item.active .faq-q {
    background-color: #ffffff;
}

.faq-item.active .mark-q {
    color: #0065BD;
}

.faq-item.active .faq-q .txt {
    font-weight: 700;
    color: #0065BD;
}

.faq-item.active .icon-arrow {
    background: url(/static/kor/images/icon/faq-arrow-B.png) no-repeat center;
}

/* ==========================================
온라인 문의
========================================== */
.sec-sns-brands {
    padding: var(--mg-200) 0 var(--mg-200);
}

.title-box-sub.sns-brands {
    margin-bottom: 9.6rem;
    text-align: center;
}

/* .cs-list 공통 컴포넌트는 common-sub.css로 이관됨 */

/* a 태그를 플렉스 컨테이너로 만듦 */
/* cs-list a MQ styles 이관됨 */

/* 우측 편지 아이콘 (가상요소) - 절대 위치라 Flex 흐름 영향 안 받음 */
/* cs-list a::after MQ styles 이관됨 */

/* 타이틀 텍스트 */
/* cs-name MQ styles 이관됨 */
/* cs-name strong MQ styles 이관됨 */
/* cs-name sub MQ styles 이관됨 */

/* '문의하기' 텍스트 (기본 숨김) */
/* cs-list span MQ styles 이관됨 */

/* 
    .cs-list li span::after {
        content: "";
        display: inline-block;
        width: 2rem;
        height: 2rem;
        background: url(/static/kor/images/icon/arrow-deg-r-icon.png) no-repeat center/cover;
    }

    .cs-list li a:hover {
        background: var(--color-primary);
    }

    .cs-list li a:hover { color: #fff; }
    .cs-list li a:hover 
    .cs-list li a:hover 
    .cs-list li a:hover 
    .cs-list li a:hover::after { opacity: 0; }

    .cs-list li a:hover span {
        max-height: 3rem; 
        margin-top: .4rem; 
        opacity: 1;
    }
    */

@media screen and (max-width: 1023px) {
    .business-performance .num-box dl {
        height: 13.2rem;
    }

    .mob-paddingWrap {
        padding: 0 var(--space-40);
    }

    /* CS Center START */
    .cs-center {
        padding: 15rem 0;
    }

    .cs-center dl {
        flex-direction: column;
    }

    .cs-center dl dt {
        display: flex;
        justify-content: space-between;
    }

    .cs-center dl dd {
        width: 100%;
        padding-left: unset;
    }

    /* cs-list MQ styles 이관됨 */
    /* CS Center END */

    .highcharts {
        flex-direction: column;
    }

    .highcharts li {
        padding: 1.6rem;
    }

    .faq-tabs {
        gap: 2.4rem;
    }

    .faq-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.4rem;
    }

    .faq-a {
        border-radius: 0;
    }

    /* cs-list MQ styles 이관됨 */
    .board-table-wrap {
        margin-bottom: 2.4rem;
    }
}

@media screen and (max-width: 767px) {
    .sub-common-top.question {
        background: url("/static/kor/images/finance/question-visual-mob.jpg") no-repeat center/cover;
    }

    .sub-common-top.inquiry {
        background: url("/static/kor/images/finance/inquiry-visual-mob.jpg") no-repeat center/cover;
    }

    .sub-common-top.sub5 {
        background: url("/static/kor/images/finance/finance-visual-mob.jpg") no-repeat center/cover;
    }

    .business-performance .num-box dl {
        height: 12.5rem;
    }

    .highcharts-title {
        display: block !important;
        width: 100% !important;
    }

    .board-table tbody td.text-left {
        padding-left: 1rem;
    }

    .faq-q .txt {
        padding: 2.5rem 0;
        font-size: 1.5rem;
    }

    .answer-inner .txt {
        padding: 1.6rem 1.6rem 1.6rem 0;
    }

    .label-bubble {
        font-size: 1.4rem !important;
    }

    .ch-title {
        font-size: 1.8rem !important;
    }

    .ch-subtitle {
        font-size: 1.2rem !important;
    }

    .mark-q,
    .mark-a {
        width: auto;
        padding: 0 1.85rem;
    }

    .icon-arrow {
        width: 10px;
        height: 6px;
        margin-right: 1.8rem;
        background: url(/static/kor/images/icon/faq-arrow-G.png) no-repeat center/cover;
    }

    .faq-item.active .icon-arrow {
        background: url(/static/kor/images/icon/faq-arrow-B.png) no-repeat center/cover;
    }

    /* cs-list MQ styles 이관됨 */

    /* 문의하기 */
    /* cs-list li MQ styles 이관됨 */
    /* cs-list a MQ styles 이관됨 */
    /* cs-name MQ styles 이관됨 */
    /* cs-name strong MQ styles 이관됨 */
    /* cs-name sub MQ styles 이관됨 */
    /* cs-list span MQ styles 이관됨 */
    /* cs-list a::after MQ styles 이관됨 */

    .common-wrap:has(.highcharts) {
        margin-top: 4rem;
    }

    .highcharts {
        gap: 1.6rem;
    }

    .sec-notice-board .title-box-sub,
    .business-performance .sec-notice-board .title-box-sub,
    .business-performance .title-box-sub,
    .title-box-sub.sns-brands {
        margin-bottom: 4rem;
    }

    .sec-notice-board {
        padding: 0 0 var(--mg-200);
    }

    .common-wrap:has(.board-table-wrap) {
        padding: unset;
    }

    .faq-header {
        padding-bottom: 3.2rem;
        border-bottom: unset;
    }

    .common-wrap:has(.faq-wrap) {
        padding: unset;
    }

    .common-wrap .faq-wrap {
        border-top: 2px solid #2F3133;
    }

    .faq-list {
        margin-bottom: 2.4rem;
    }

    .common-wrap .faq-wrap+.pagination {
        padding: 0 2.8rem;
    }

    .mob-list1 {
        width: 14% !important;
    }

    .mob-list4 {
        width: 20% !important;
    }

    .board-table tbody td.date {
        padding: 0 1rem;
    }
}

@media screen and (max-width: 580px) {
    /* cs-list MQ styles 이관됨 */

    .board-table tbody td.file .icon-download {
        width: 1.2rem;
        height: 1.2rem;
        background: url(/static/kor/images/business/samjocelltech/download.png) no-repeat center / cover;
    }

    .board-table tbody tr:hover .icon-download,
    .board-table tbody tr.active .icon-download {
        background: url(/static/kor/images/icon/download-B.png) no-repeat center/cover;
    }

    .business-performance {
        background: url(/static/kor/images/finance/finance-earth.png) left 105% top 6.4rem no-repeat;
        background-size: 200%;
    }
}