@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");

html {
    font-size: 62.5%;
    /* 1rem = 10px */
}

:root {
    --primary-color: #0066cc;
    /* Action Blue */
    --secondary-color: #1d1d1f;
    /* Ink */
    --bg-dark: #272729;
    /* Surface Tile 1 */
    --text-dark: #1d1d1f;
    --text-light: #ffffff;
    --canvas: #ffffff;
    --canvas-parchment: #f5f5f7;
}

body {
    font-family: 'SF Pro Text', 'Pretendard Variable', Pretendard, system-ui, -apple-system, sans-serif;
    font-size: 1.7rem;
    /* 17px default */
    letter-spacing: -0.022em;
    line-height: 1.47;
    color: var(--text-dark);
}

h1,
h2,
h3,
h4,
h5,
h6,
.sec-title,
.m-tit .tit-line,
.sub-visual h2 {
    font-family: 'SF Pro Display', 'Pretendard Variable', Pretendard, system-ui, -apple-system, sans-serif !important;
    letter-spacing: -0.015em;
}

/* Header */
#gnb {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#gnb.is-scrolled,
#gnb:hover {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

#gnb .contain {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.gnb-logo a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

.gnb-logo img {
    height: 38px;
}

.gnb-logo .logo-color {
    display: none;
}

.gnb-logo .gnb-logo-sub {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 3px;
    line-height: 1;
    font-family: 'Outfit', -apple-system, sans-serif;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

#gnb.is-scrolled .logo-white,
#gnb:hover .logo-white {
    display: none;
}

#gnb.is-scrolled .logo-color,
#gnb:hover .logo-color {
    display: block;
}

#gnb.is-scrolled .gnb-logo .gnb-logo-sub,
#gnb:hover .gnb-logo .gnb-logo-sub {
    color: #005792;
}

.gnb-btn-menu {
    width: 30px;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
}

.gnb-btn-menu span {
    display: block;
    background: #fff;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

#gnb.is-scrolled .gnb-btn-menu span,
#gnb:hover .gnb-btn-menu span {
    background: #333;
}

/* All Menu Overlay */
#all-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.95);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

#all-menu.is-open {
    opacity: 1;
    visibility: visible;
}

.am-header {
    height: 80px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.am-close {
    width: 40px;
    height: 40px;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
}

.am-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 2px;
    background: #fff;
    transform-origin: center;
}

.am-close .cl1 {
    transform: translate(-50%, -50%) rotate(45deg);
}

.am-close .cl2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.am-body {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    padding: 40px;
    flex-wrap: wrap;
}

.am-col {
    color: #fff;
    text-align: center;
}

.am-1depth {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 20px;
    display: block;
    color: #fff;
    text-decoration: none;
}

.am-1depth:hover {
    color: var(--primary-color);
}

.am-2depth a {
    display: block;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 0;
    text-decoration: none;
    transition: 0.3s;
}

.am-2depth a:hover {
    color: #fff;
}

/* FullPage Layout Elements */
.fp-section {
    position: relative;
}

.m-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.m-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.m-bg video,
.m-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m-bg-dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.m-txt {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 3;
    color: #fff;
}

.m-tit .tit-line {
    font-size: 60px;
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
}

.m-desc {
    font-size: 20px;
    font-weight: 400;
    margin-top: 30px;
    opacity: 0.9;
    line-height: 1.6;
}

/* Scroll Down Indicator */
.m-scroll {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    color: #fff;
}

.scroll-txt {
    font-size: 12px;
    letter-spacing: 2px;
}

.scroll-icon {
    width: 30px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 15px;
    margin: 10px auto 0;
    position: relative;
}

.scroll-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollDown 1.5s infinite;
}

@keyframes scrollDown {
    0% {
        top: 10px;
        opacity: 1;
    }

    100% {
        top: 30px;
        opacity: 0;
    }
}

/* Subpage Header */
.sub-visual {
    height: 350px;
    background: #1e293b;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
}

.sub-visual-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.sub-visual-txt {
    position: relative;
    z-index: 2;
    text-align: center;
}

.sub-visual h2 {
    font-size: 46px;
    font-weight: 900;
    margin-bottom: 10px;
}

.sub-visual p {
    font-size: 18px;
    opacity: 0.8;
}

.sub-nav {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: center;
}

.sub-nav a {
    padding: 20px 30px;
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    border-bottom: 3px solid transparent;
}

.sub-nav a.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Footer */
#footer {
    background: #111;
    color: #888;
    padding: 60px 0 40px;
    font-size: 15px;
    margin-top: auto;
}

.ft-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 40px;
    border-bottom: 1px solid #333;
}

.ft-logo img {
    height: 35px;
    opacity: 0.6;
}

.ft-nav {
    display: flex;
    gap: 40px;
}

.ft-nav a {
    color: #ccc;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.ft-nav a:hover {
    color: #fff;
}

.ft-tel {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ft-tel-label {
    color: #aaa;
}

.ft-tel-num {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
}

.ft-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 0;
}

.ft-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ft-privacy {
    color: #ddd;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 20px;
}

.ft-info {
    line-height: 1.8;
}

.ft-sep {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #444;
    margin: 0 10px;
    vertical-align: middle;
}

.ft-break {
    display: block;
    height: 4px;
}

.ft-copy {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

@media (max-width: 1024px) {
    .ft-top {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .ft-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .ft-bottom-inner {
        flex-direction: column;
        gap: 30px;
    }

    .ft-sep {
        display: none;
    }

    .ft-info span {
        display: block;
        margin-bottom: 5px;
    }
}

/* Subpage Common Components */
.sub-section {
    padding: 100px 0;
    border-bottom: 1px solid #f1f5f9;
}

.sub-section-soft {
    padding: 100px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #f1f5f9;
}

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

.sec-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sec-title {
    font-size: 44px;
    font-weight: 900;
    color: #1e293b;
    line-height: 1.35;
    letter-spacing: -1px;
}

.sec-divider {
    width: 60px;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    margin: 24px 0;
    border-radius: 3px;
}

.sec-desc {
    font-size: 19px;
    color: #64748b;
    line-height: 1.8;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.feat-card {
    background: #fff;
    padding: 50px 40px;
    border-radius: 28px;
    box-shadow: 0 15px 45px -10px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.01);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
}

.feat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -15px rgba(16, 185, 129, 0.12), 0 0 0 1px rgba(16, 185, 129, 0.1);
}

.feat-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    border-radius: 20px;
    margin-bottom: 28px;
    background: #f1f5f9;
}

.feat-card-title {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 16px;
}

.feat-card-body {
    font-size: 16px;
    color: #64748b;
    line-height: 1.7;
}

.badge-green {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.badge-cyan {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(6, 182, 212, 0.08);
    color: #0891b2;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.btn-green {
    display: inline-block;
    padding: 18px 40px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.btn-green:hover {
    background: #059669;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.highlight-box {
    background: #1e293b;
    padding: 60px;
    border-radius: 28px;
    position: relative;
    overflow: hidden;
}

/* Reveal Animations */
.reveal,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal {
    transform: translateY(50px);
}

.reveal-left {
    transform: translateX(-50px);
}

.reveal-right {
    transform: translateX(50px);
}

/* 활성화(화면 감지 / fullpage 섹션 활성화) 시 애니메이션 작동 */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.section.active .reveal,
.section.active .reveal-left,
.section.active .reveal-right {
    opacity: 1;
    transform: translate(0, 0);
}

.delay-1 {
    transition-delay: 0.15s;
}

.delay-2 {
    transition-delay: 0.3s;
}

.delay-3 {
    transition-delay: 0.45s;
}

.delay-4 {
    transition-delay: 0.6s;
}

@media (max-width: 1024px) {

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Board Skin Overrides */
#bo_list .tbl_head01 th {
    background: #f8fafc;
    border-bottom: 2px solid #1e293b;
    color: #1e293b;
    font-weight: 800;
    padding: 15px 0;
    font-size: 15px;
}

#bo_list .tbl_head01 td {
    padding: 15px 0;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 15px;
}

#bo_list .tbl_head01 td.td_subject a {
    color: #1e293b;
    font-weight: 600;
    text-decoration: none;
}

#bo_list .tbl_head01 td.td_subject a:hover {
    color: var(--primary-color);
}

#bo_list .bo_tit .bo_tit_a {
    color: #1e293b;
    font-size: 16px;
}

#bo_list .btn_bo_user li {
    list-style: none;
    display: inline-block;
}

#bo_list .btn_bo_user .btn_b02 {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
}

#bo_list .btn_bo_user .btn_b02:hover {
    background: #059669;
}

#bo_v {
    border-top: 2px solid #1e293b;
}

#bo_v_title {
    padding: 20px 0;
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
}

#bo_v_info {
    padding: 15px 0;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
}

#bo_v_con {
    padding: 40px 0;
    font-size: 16px;
    color: #334155;
    line-height: 1.8;
}

#bo_v .btn_b01,
#bo_v .btn_b02 {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
}

#bo_v .btn_b01:hover,
#bo_v .btn_b02:hover {
    background: #f1f5f9;
}

#bo_v .btn_submit {
    background: var(--primary-color);
    color: #fff;
    border: none;
}

#bo_v .btn_submit:hover {
    background: #059669;
}

#bo_w .frm_input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 15px;
}

#bo_w .btn_submit {
    background: var(--primary-color);
    color: #fff;
    padding: 15px 40px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

#bo_w .btn_submit:hover {
    background: #059669;
}

/* 글로벌 서브페이지 폰트 규정 (ksise_greetings.php 기준) */
:root {
    --ksise-primary: #0066cc;
    --ksise-bg: #f5f5f7;
    --ksise-line: #e0e0e0;
    --ksise-text: #1d1d1f;
    --ksise-gray: #1d1d1f;
}

.sub-content-wrap,
.sub-page-content,
.ksise-font-style {
    font-family: 'SF Pro Text', 'Pretendard Variable', Pretendard, system-ui, -apple-system, sans-serif !important;
}

.sub-content-wrap p,
.sub-page-content p {
    font-size: 1.7rem !important;
    line-height: 1.47 !important;
    color: var(--ksise-gray) !important;
    letter-spacing: -0.022em;
    word-break: keep-all;
    padding: 0;
}

/* 특수 컴포넌트 내 p 태그 크기 보정 */
.feat-card-body,
.feat-card p.feat-card-body {
    font-size: 1.5rem !important;
    /* 카드 설명글 가독성을 위해 15px 수준 유지 */
    line-height: 1.6 !important;
    color: #64748b !important;
}

.sec-desc {
    font-size: 1.6rem !important;
    /* 섹션 한 줄 소개 */
    line-height: 1.7 !important;
}

@media (max-width: 768px) {

    .sub-content-wrap p,
    .sub-page-content p {
        font-size: 1.5rem !important;
        line-height: 1.55 !important;
    }

    .feat-card-body,
    .feat-card p.feat-card-body {
        font-size: 1.4rem !important;
    }

    .sec-desc {
        font-size: 1.5rem !important;
    }

    .am-body {
        flex: 1;
        min-height: 0;
        flex-direction: column;
        flex-wrap: nowrap !important;
        gap: 30px;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-y: auto;
        padding: 30px 40px;
    }

    .am-col {
        text-align: left;
        width: 100%;
    }

    .am-1depth {
        font-size: 2.4rem;
        margin-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 10px;
    }

    .am-2depth {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 15px;
    }

    .am-2depth a {
        font-size: 1.5rem;
        padding: 5px 0;
    }

    /* Mobile Table Block Layout Fix */
    .standard_table,
    .ksise_table,
    .ref_table,
    .personnel_table,
    .info-table {
        min-width: 0 !important;
    }

    .standard_table,
    .standard_table tbody,
    .standard_table tr,
    .standard_table th,
    .standard_table td,
    .ksise_table,
    .ksise_table tbody,
    .ksise_table tr,
    .ksise_table th,
    .ksise_table td,
    .ref_table,
    .ref_table tbody,
    .ref_table tr,
    .ref_table th,
    .ref_table td,
    .personnel_table,
    .personnel_table tbody,
    .personnel_table tr,
    .personnel_table th,
    .personnel_table td,
    .info-table,
    .info-table tbody,
    .info-table tr,
    .info-table th,
    .info-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .standard_table tr,
    .ksise_table tr,
    .ref_table tr,
    .personnel_table tr,
    .info-table tr {
        border-bottom: 2px solid #e2e8f0;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .standard_table tr:last-child,
    .ksise_table tr:last-child,
    .ref_table tr:last-child,
    .personnel_table tr:last-child,
    .info-table tr:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .standard_table th,
    .ksise_table th,
    .ref_table th,
    .personnel_table th,
    .info-table th {
        background-color: #f8fafc !important;
        padding: 10px 15px !important;
        text-align: left !important;
        border: 1px solid #e2e8f0 !important;
        border-bottom: none !important;
        font-size: 1.5rem !important;
        width: 100% !important;
    }

    .standard_table td,
    .ksise_table td,
    .ref_table td,
    .personnel_table td,
    .info-table td {
        padding: 12px 15px !important;
        border: 1px solid #e2e8f0 !important;
        text-align: left !important;
        font-size: 1.5rem !important;
        word-break: break-all !important;
    }
}

/* Breadcrumb */
.breadcrumb {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: #fff;
}

.breadcrumb .separator {
    font-size: 10px;
    opacity: 0.5;
}

.breadcrumb span.active {
    color: var(--primary-color);
    font-weight: 700;
}

/* Info Table (기업 개요 테이블 등) */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 1.6rem;
}

.info-table th,
.info-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}

.info-table th {
    width: 25%;
    font-weight: 700;
    color: #1e293b;
    background-color: #f8fafc;
    border-radius: 8px 0 0 8px;
}

.info-table td {
    color: #475569;
    line-height: 1.6;
}

.info-table tr:hover th {
    background-color: #f1f5f9;
}

@media (max-width: 768px) {

    .info-table th,
    .info-table td {
        padding: 12px 14px;
        font-size: 1.5rem;
    }

    .info-table th {
        width: 30%;
    }
}

/* Main Slider Swiper */
.main-slider {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.main-slider .swiper-slide {
    width: 100%;
    height: 100vh;
    position: relative;
}

.main-slider .m-tit .tit-line,
.main-slider .m-desc p {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-slider .swiper-slide-active .m-tit .tit-line {
    opacity: 1;
    transform: translateY(0);
}

.main-slider .swiper-slide-active .m-tit p:nth-child(2) {
    transition-delay: 0.15s;
}

.main-slider .swiper-slide-active .m-desc p {
    opacity: 0.9;
    transform: translateY(0);
}

.main-slider .swiper-slide-active .m-desc p:nth-child(1) {
    transition-delay: 0.35s;
}

.main-slider .swiper-slide-active .m-desc p:nth-child(2) {
    transition-delay: 0.45s;
}

/* Swiper Control Wrap (KTS 스타일 통합 컨트롤러) */
.swiper-control-wrap {
    position: absolute;
    bottom: 80px;
    left: 10%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 24px;
    background: rgba(15, 23, 42, 0.45);
    padding: 14px 28px;
    border-radius: 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
}

.swiper-counter {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Pretendard Variable', sans-serif;
    letter-spacing: 0.5px;
}

.swiper-counter .current-num {
    color: var(--primary-color);
}

.swiper-counter .divider {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

.swiper-counter .total-num {
    color: #fff;
}

.swiper-progress-bar-wrap {
    width: 140px;
    height: 3px;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.swiper-progress-bar-wrap .swiper-pagination {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    background: transparent !important;
}

.swiper-progress-bar-wrap .swiper-pagination-progressbar-fill {
    background: var(--primary-color) !important;
    border-radius: 2px;
}

.swiper-nav-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.swiper-control-wrap .swiper-button-prev,
.swiper-control-wrap .swiper-button-next {
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.swiper-control-wrap .swiper-button-prev::after,
.swiper-control-wrap .swiper-button-next::after {
    font-size: 11px !important;
    font-weight: 900;
}

.swiper-control-wrap .swiper-button-prev:hover,
.swiper-control-wrap .swiper-button-next:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

/* Slide Text Motion Enhancement */
.main-slider .m-tit .tit-line,
.main-slider .m-desc p {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-slider .swiper-slide-active .m-tit .tit-line {
    opacity: 1;
    transform: translateY(0);
}

.main-slider .swiper-slide-active .m-tit p:nth-child(2) {
    transition-delay: 0.15s;
}

.main-slider .swiper-slide-active .m-desc p {
    opacity: 0.9;
    transform: translateY(0);
}

.main-slider .swiper-slide-active .m-desc p:nth-child(1) {
    transition-delay: 0.35s;
}

.main-slider .swiper-slide-active .m-desc p:nth-child(2) {
    transition-delay: 0.45s;
}

/* Sub Hero (JDS Style) */
.sub_hero {
    min-height: 350px;
    height: auto;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 0;
    box-sizing: border-box;
}

.sub_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.7) 100%) !important;
    z-index: 1;
}

.sub_hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.25) 50%,
            transparent 50%);
    background-size: 4px 100%;
    opacity: 0.35;
    z-index: 1;
}

.sub_hero .container {
    position: relative;
    z-index: 2;
    margin-top: 80px;
    top: 80px;
}

.sub_hero h2 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    animation: slideUpFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sub_hero p {
    font-size: 17px;
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 500;
    animation: slideUpFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.15s;
}

/* Sub Navigation (Breadcrumb - JDS Style) */
.sub_nav {
    background: rgba(245, 245, 247, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    height: 52px;
    display: block;
    margin-bottom: 80px !important;
}

.sub_nav .sub-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sub_nav .breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    margin: 0 !important;
}

.sub_nav .breadcrumb a {
    color: #64748b;
    transition: color 0.3s ease;
}

.sub_nav .breadcrumb a:hover {
    color: #1d1d1f;
}

.sub_nav .breadcrumb .separator {
    font-size: 10px;
    opacity: 0.5;
}

.sub_nav .breadcrumb .active {
    color: #1d1d1f;
    font-weight: 700;
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Breadcrumbs */
@media (max-width: 768px) {
    .sub_hero {
        min-height: 320px !important;
        height: auto !important;
        padding-top: 60px !important;
        padding-bottom: 0 !important;
    }

    .sub_hero .container {
        margin-top: 0 !important;
        top: 0 !important;
    }

    .sub_hero h2 {
        font-size: 32px !important;
    }

    .sub_hero p {
        font-size: 15px !important;
    }

    .breadcrumb {
        font-size: 12px !important;
        margin-top: 12px !important;
        gap: 6px !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    .breadcrumb .separator {
        font-size: 8px !important;
    }

    .swiper-control-wrap {
        bottom: 120px;
        left: 5%;
        width: 90%;
        box-sizing: border-box;
        justify-content: space-between;
        padding: 12px 20px;
    }

    .swiper-progress-bar-wrap {
        flex: 1;
        width: auto;
        margin: 0 10px;
    }
}

/* --- New Subpage Custom Components --- */

/* Stat Block (통계 카운터) */
.stat-block {
    flex: 1;
    padding: 40px 24px;
    text-align: center;
    background: #ffffff;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-num {
    font-size: 44px;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 8px;
    font-family: 'Pretendard Variable', sans-serif;
    letter-spacing: -1px;
}

.stat-label {
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: -0.5px;
}

/* Step List (핵심 단계 리스트) */
.step-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 30px;
}

.step-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.step-num-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.08);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
}

.step-content-title {
    font-size: 19px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.step-content-body {
    font-size: 15px !important;
    color: #64748b !important;
    line-height: 1.65 !important;
}

/* Partner Card (파트너 정보 카드) */
.partner-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 44px 36px;
    box-shadow: 0 15px 45px -10px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.01);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.partner-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.03);
}

.partner-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.partner-role-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 12px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    margin: 12px 0 20px;
    letter-spacing: -0.3px;
}

/* Timeline (기술 개발 로드맵) */
.vtl-wrap {
    position: relative;
    padding-left: 32px;
    margin-top: 30px;
}

.vtl-wrap::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 7px;
    bottom: 8px;
    width: 2px;
    background: #e2e8f0;
}

.vtl-item {
    position: relative;
    margin-bottom: 40px;
}

.vtl-item:last-child {
    margin-bottom: 0;
}

.vtl-item::before {
    content: '';
    position: absolute;
    top: 6px;
    left: -32px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid var(--primary-color);
    z-index: 2;
    transition: all 0.3s ease;
}

.vtl-item:hover::before {
    background: var(--primary-color);
    transform: scale(1.2);
}

.vtl-year {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.vtl-title {
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.vtl-body {
    font-size: 15px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
}

/* 어두운 배경 내 p 태그 가독성 및 명도 대비 보정 */
.highlight-box p,
.partner-card p,
div[style*="background:#0f172a"] p,
div[style*="background: #0f172a"] p,
div[style*="background:#0f172a"] li,
div[style*="background: #0f172a"] li,
div[style*="background:#0f172a"] td,
div[style*="background: #0f172a"] td,
.stat-block[style*="background:#0f172a"] .stat-label,
.stat-block[style*="background: #0f172a"] .stat-label {
    color: #94a3b8 !important;
}

div[style*="background:#0f172a"] h3,
div[style*="background: #0f172a"] h3,
div[style*="background:#0f172a"] h4,
div[style*="background: #0f172a"] h4,
div[style*="background:#0f172a"] strong,
div[style*="background: #0f172a"] strong,
.stat-block[style*="background:#0f172a"] .stat-num,
.stat-block[style*="background: #0f172a"] .stat-num {
    color: #f8fafc !important;
}

/* ==========================================================================
   Section 02 - 핵심 가치 (KTS 스타일 전면 구현)
   ========================================================================== */
#main02 {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 60px;
}

/* -- Section Header -- */
.s2-header {
    position: relative;
    left: 10%;
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.s2-txt {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.s2-tit-wrap {
    height: 73px;
    overflow: hidden;
    position: relative;
}

.s2-tit {
    margin: 0;
    padding: 0;
    color: #1e293b;
    font-size: 52px;
    font-weight: 900;
    line-height: 73px;
    letter-spacing: -1.5px;
    position: absolute;
    left: 0;
    top: 73px;
}

/* fullpage.js 활성화 (.active) 시 헤더 애니메이션 */
.section.active .s2-tit {
    animation: s2TitIn 0.85s cubic-bezier(0.33, 1, 0.68, 1) 0.1s forwards;
}

@keyframes s2TitIn {
    from {
        top: 73px;
    }

    to {
        top: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.s2-desc {
    margin: 0;
    padding: 0;
    color: #64748b;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: -0.5px;
    opacity: 0;
    word-break: keep-all;
}

.section.active .s2-desc {
    animation: fadeIn 0.8s ease 0.4s forwards;
}

/* -- VIEW MORE -- */
.s2-more {
    width: 150px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    text-decoration: none;
    opacity: 0;
    margin-bottom: 8px;
    cursor: pointer;
}

.section.active .s2-more {
    animation: fadeIn 0.8s ease 0.5s forwards;
}

.s2-more-txt {
    color: #1e293b;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
    white-space: nowrap;
    transition: color 0.3s;
}

.s2-more-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(270deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    flex-shrink: 0;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.s2-more:hover .s2-more-txt {
    color: var(--primary-color);
}

.s2-more:hover .s2-more-dot {
    width: 36px;
    height: 36px;
    background: var(--primary-color);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.s2-more-dot::after {
    content: '→';
    font-size: 15px;
    color: #fff;
    font-weight: bold;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.s2-more:hover .s2-more-dot::after {
    opacity: 1;
    transform: scale(1);
}

/* -- Card list -- */
.s2-list {
    position: relative;
    left: 10%;
    width: 80%;
    height: 360px;
    display: flex;
    gap: 20px;
}

/* -- Card -- */
.s2-card {
    position: relative;
    flex: 1;
    height: 360px;
    opacity: 0;
}

/* 초기 상태: 모든 카드가 card 1 위치에 겹쳐 쌓여있다가 샤라락 흩어짐 */
.s2-card:nth-child(1) {
    transform: translateX(0);
    z-index: 4;
}

.s2-card:nth-child(2) {
    transform: translateX(calc(-100% - 20px));
    z-index: 3;
}

.s2-card:nth-child(3) {
    transform: translateX(calc(-200% - 40px));
    z-index: 2;
}

.s2-card:nth-child(4) {
    transform: translateX(calc(-300% - 60px));
    z-index: 1;
}

/* 활성화: 순차적 딜레이로 펼쳐짐 */
.section.active .s2-card:nth-child(1) {
    animation: s2Card1In 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

.section.active .s2-card:nth-child(2) {
    animation: s2Card2In 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

.section.active .s2-card:nth-child(3) {
    animation: s2Card3In 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

.section.active .s2-card:nth-child(4) {
    animation: s2Card4In 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

@keyframes s2Card1In {
    from {
        opacity: 0;
        transform: translateX(0);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes s2Card2In {
    from {
        opacity: 0;
        transform: translateX(calc(-100% - 20px));
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes s2Card3In {
    from {
        opacity: 0;
        transform: translateX(calc(-200% - 40px));
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes s2Card4In {
    from {
        opacity: 0;
        transform: translateX(calc(-300% - 60px));
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* -- Card frame -- */
/* -- Card frame -- */
.s2-card-frame {
    position: absolute;
    left: 0;
    top: 20px;
    width: 100%;
    height: 340px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0px 15px 35px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.7);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.s2-card:hover .s2-card-frame {
    transform: translateY(-12px);
    box-shadow: 0px 25px 50px rgba(21, 145, 220, 0.22);
    border-color: rgba(21, 145, 220, 0.5);
}

.s2-card-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: brightness(1);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.s2-card:hover .s2-card-img {
    transform: scale(1.06);
}

.s2-card-grad {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(10, 18, 30, 0.3) 25%, rgba(10, 18, 30, 0.82) 55%, rgba(8, 14, 26, 0.97) 100%);
    z-index: 1;
}

/* Glow Effect */
.s2-card-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    top: -250px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(21, 145, 220, 0.2) 0%, rgba(21, 145, 220, 0) 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.s2-card:hover .s2-card-glow {
    opacity: 1;
}

/* -- Icon -- */
.s2-icon {
    position: absolute;
    right: 28px;
    top: 36px;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    color: #ffffff;
    font-size: 20px;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.s2-card:hover .s2-icon {
    transform: translateY(-4px) scale(1.1);
    background: #1591DC;
    border-color: #1591DC;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(21, 145, 220, 0.4);
}

/* -- Card text -- */
.s2-info {
    position: absolute;
    left: 30px;
    top: 130px;
    width: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.s2-card:hover .s2-info {
    transform: translateY(-6px);
}

.s2-card-name {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.s2-card-en {
    margin: 0;
    padding: 0;
    color: #93c5fd;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.s2-card-desc {
    margin: 10px 0 0;
    padding: 0;
    color: #ffffff;
    font-size: 17.5px !important;
    font-weight: 400;
    line-height: 1.5 !important;
    letter-spacing: -0.3px;
    opacity: 0.95;
    transform: translateY(0);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
    word-break: keep-all;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.s2-card:hover .s2-card-desc {
    opacity: 1;
    color: #ffffff;
}

/* -- Section 2 Responsive -- */
@media (max-width: 1200px) {
    #main02 {
        height: auto;
        min-height: auto;
        padding: 80px 0;
    }

    .s2-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 40px;
        left: 5%;
        width: 90%;
        position: relative;
    }

    .s2-txt {
        width: 100%;
    }

    .s2-tit {
        font-size: 32px !important;
        line-height: 1.3;
        opacity: 1 !important;
        transform: none !important;
    }

    .s2-desc {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-top: 12px;
        opacity: 0.8 !important;
        transform: none !important;
        display: block !important;
    }

    .s2-more {
        opacity: 1 !important;
        transform: none !important;
        margin-top: 10px;
    }

    /* 카드 리스트 반응형 */
    .s2-list {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 24px;
        left: 5%;
        width: 90%;
        position: relative;
    }

    .s2-card {
        flex: none !important;
        width: 100% !important;
        height: 260px !important;
        opacity: 1 !important;
        transform: none !important;
        margin: 0 !important;
    }

    .s2-card-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100% !important;
        top: 0 !important;
    }

    /* 아이콘 위치 */
    .s2-icon {
        top: 30px !important;
        left: auto !important;
        right: 30px !important;
        transform: none !important;
    }

    /* 텍스트 영역 */
    .s2-info {
        top: auto !important;
        bottom: 30px !important;
        left: 30px !important;
        width: calc(100% - 60px) !important;
        transform: none !important;
        gap: 6px !important;
    }

    .s2-card-name {
        font-size: 24px !important;
        color: #ffffff !important;
    }

    .s2-card-en {
        font-size: 15px !important;
        color: #93c5fd !important;
    }

    .s2-card-desc {
        display: block !important;
        /* 모바일에서도 설명글 강제 노출 */
        opacity: 1 !important;
        transform: none !important;
        margin-top: 8px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        color: #ffffff !important;
    }

    /* 데스크톱 애니메이션 차단 */
    .s2-card:nth-child(1),
    .s2-card:nth-child(2),
    .s2-card:nth-child(3),
    .s2-card:nth-child(4) {
        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
    }

    .section.active .s2-card:nth-child(1),
    .section.active .s2-card:nth-child(2),
    .section.active .s2-card:nth-child(3),
    .section.active .s2-card:nth-child(4) {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   반응형 추가 보강 및 메인/게시판 반응형 최적화
   ========================================================================== */

/* Section 1 - 모바일 반응형 텍스트 크기 조정 */
@media (max-width: 768px) {
    .main-slider .m-txt {
        left: 5% !important;
        width: 90% !important;
        gap: 16px !important;
    }

    .main-slider .m-tit .tit-line {
        font-size: 30px !important;
        white-space: normal !important;
        word-break: keep-all;
    }

    .main-slider .m-desc {
        margin-top: 15px !important;
    }

    .main-slider .m-desc p {
        font-size: 14px !important;
        white-space: normal !important;
        word-break: keep-all;
        line-height: 1.5 !important;
    }

    .main-slider .swiper-control-wrap {
        bottom: 80px !important;
        left: 5% !important;
        width: 90% !important;
    }

    .m-scroll {
        display: none !important;
        /* 모바일에서는 스크롤 아이콘 숨김 */
    }
}

/* Section 3 - 주요 사업분야 (PC & 모바일 반응형) */
#fullpage .section[data-anchor="page03"],
.main_sec_biz {
    background: #0f172a;
}

#fullpage .section[data-anchor="page03"] .fp-tableCell,
.main_sec_biz .fp-tableCell {
    background: transparent !important;
}

.main_biz_inner {
    background: transparent !important;
    width: 100%;
    height: 100%;
    padding-top: 100px;
    color: #fff;
    display: flex;
    align-items: center;
}

@media (max-width: 1024px) {

    #fullpage .section[data-anchor="page03"],
    .main_sec_biz {
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #fullpage .section[data-anchor="page03"] .fp-tableCell,
    .main_sec_biz .fp-tableCell {
        background: transparent !important;
        height: auto !important;
        display: block !important;
        padding: 0 !important;
    }

    #fullpage .section[data-anchor="page03"]>div,
    .main_biz_inner {
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        /* 모바일 padding 완전 제거 */
        display: block !important;
        background: transparent !important;
    }

    #fullpage .section[data-anchor="page03"] .biz-container {
        padding: 40px 20px !important;
        box-sizing: border-box;
    }

    .main_sec_biz h2 {
        font-size: 32px !important;
        margin-bottom: 25px !important;
        margin-top: 0 !important;
    }

    .grid-3 {
        gap: 16px !important;
    }

    .grid-3 a {
        height: 220px !important;
        border-radius: 16px !important;
    }

    .grid-3 a>div {
        bottom: 25px !important;
        left: 25px !important;
    }

    .grid-3 a h3 {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }

    .grid-3 a p {
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    #fullpage .section[data-anchor="page03"] .biz-container {
        padding: 35px 16px !important;
    }

    .main_sec_biz h2 {
        font-size: 28px !important;
    }

    .grid-3 a {
        height: 200px !important;
    }
}

/* Section 4 - Notice 반응형 플렉스 */
.notice-flex-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.notice-left-col {
    width: 40%;
}

.notice-right-col {
    width: 55%;
}

@media (max-width: 1024px) {
    .notice-flex-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 50px;
    }

    .notice-left-col,
    .notice-right-col {
        width: 100% !important;
    }

    #fullpage .section[data-anchor="page04"] {
        height: auto !important;
        min-height: auto !important;
    }

    #fullpage .section[data-anchor="page04"]>div {
        height: auto !important;
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    .notice-flex-wrap {
        padding: 0 10px;
    }

    .notice-left-col h2 {
        font-size: 36px !important;
    }

    .notice-left-col p {
        font-size: 15px !important;
    }
}

/* 푸터(Footer) 반응형 추가 조율 */
@media (max-width: 768px) {
    #footer {
        padding: 40px 0 20px !important;
    }

    .ft-top {
        flex-direction: column;
        align-items: center;
        gap: 24px !important;
        text-align: center;
        padding-bottom: 30px !important;
    }

    .ft-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 20px !important;
    }

    .ft-tel {
        flex-direction: column;
        gap: 8px !important;
    }

    .ft-bottom-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px !important;
    }

    .ft-info {
        text-align: center;
    }

    .ft-info span {
        display: block;
        margin-bottom: 6px;
    }

    .ft-sep {
        display: none !important;
    }
}

/* 게시판 테이블 반응형 스크롤 처리 */
.tbl-responsive,
#bo_list .tbl_head01 {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tbl_head01 {
    table-layout: auto !important;
    /* 균등 폭 해제하여 각 컬럼 고유 폭 적용 */
}

.tbl-wrap {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* 게시판 체크박스 및 번호 열 폭 고정 */
#bo_list .tbl_head01 th.td_chk,
#bo_list .tbl_head01 td.td_chk {
    width: 50px !important;
}

#bo_list .tbl_head01 th.td_num,
#bo_list .tbl_head01 td.td_num {
    width: 60px !important;
}

/* 게시판 뷰페이지 우측 상단 버튼 충돌 보정 */
#bo_v .btn_bo_user .btn {
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
}

#bo_v .btn_bo_user .btn svg {
    width: 18px !important;
    height: 18px !important;
}

/* 모바일 게시판 리스트 반응형 카드 레이아웃 */
@media (max-width: 768px) {
    #bo_list .tbl_head01 thead {
        display: none !important;
    }

    #bo_list .tbl_head01,
    #bo_list .tbl_head01 tbody,
    #bo_list .tbl_head01 tr,
    #bo_list .tbl_head01 td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    #bo_list .tbl_head01 tr {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 12px;
        position: relative;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    #bo_list .tbl_head01 td {
        border: none !important;
        padding: 4px 0 !important;
        text-align: left !important;
    }

    #bo_list .tbl_head01 td.td_chk {
        position: absolute;
        top: 15px;
        left: 15px;
        width: auto !important;
        padding: 0 !important;
        z-index: 10;
    }

    #bo_list .tbl_head01 td.td_num {
        display: none !important;
    }

    #bo_list .tbl_head01 td.td_subject {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 8px;
        padding-left: 25px !important;
    }

    #bo_list .tbl_head01 td.td_name,
    #bo_list .tbl_head01 td.td_date,
    #bo_list .tbl_head01 td.td_num2 {
        display: inline-block !important;
        width: auto !important;
        font-size: 13px;
        color: #64748b;
        margin-right: 12px;
    }

    #bo_list .tbl_head01 td.td_name::after {
        content: " • ";
        margin-left: 12px;
        color: #cbd5e1;
    }

    #bo_list .tbl_head01 td.td_date::after {
        content: " • ";
        margin-left: 12px;
        color: #cbd5e1;
    }

    .tbl_head01 {
        min-width: 0 !important;
    }
}

/* ==========================================================================
   New Custom Horizontal LNB Breadcrumb Styles
   ========================================================================== */
.sub-visual {
    position: relative;
    height: 300px;
    background: #0f172a url('/imgs/nano_banana_main.png') no-repeat center/cover;
    /* 기본 백그라운드 */
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sub-visual-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 5;
}

.sub-visual-txt {
    text-align: left !important;
    color: #fff;
}

.sub-visual-txt h2 {
    font-size: 42px !important;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -1px;
}

.sub-visual-txt p {
    font-size: 16px;
    opacity: 0.85;
    margin: 0;
    line-height: 1.6;
    word-break: keep-all;
}

/* 슬림 가로형 브래드크럼 바 */
.sub-nav-bar {
    width: 100%;
    height: 56px;
    background-color: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
    position: relative;
    z-index: 99;
}

.sub-nav-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.sub-nav-path {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #64748b;
}

.path-home {
    color: #64748b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    transition: color 0.2s;
}

.path-home:hover {
    color: #0b3b82;
}

.path-sep {
    font-size: 10px;
    margin: 0 12px;
    opacity: 0.4;
}

/* 셀렉트 드롭다운 버튼 */
.path-select {
    position: relative;
    display: inline-block;
}

.path-select-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    outline: none;
    font-family: inherit;
    transition: color 0.2s;
}

.path-select-btn:hover,
.path-select.is-open .path-select-btn {
    color: #0b3b82;
}

.select-arr {
    font-size: 10px;
    transition: transform 0.25s ease;
    opacity: 0.6;
}

.path-select.is-open .select-arr {
    transform: rotate(180deg);
}

/* 셀렉트 리스트 */
.path-select-list {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    list-style: none;
    padding: 8px 0;
    margin: 0;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 100;
}

.path-select.is-open .path-select-list {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.path-select-list::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #ffffff;
}

.path-select-list::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-color: #e2e8f0;
    z-index: -1;
    margin-bottom: 1px;
}

.path-select-list li {
    padding: 0;
    margin: 0;
}

.path-select-list li a {
    display: block;
    padding: 10px 20px;
    color: #475569;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
    text-align: center;
}

.path-select-list li a:hover,
.path-select-list li.is-current a {
    color: #0b3b82;
    background-color: #f8fafc;
    font-weight: 600;
}

/* 게시판 & FAQ가 가로 100% 래퍼 안에서 찌그러지지 않도록 1200px 박스로 강제 가둠 */
.sub-content-wrap>#bo_list,
.sub-content-wrap>#bo_w,
.sub-content-wrap>#bo_v,
.sub-content-wrap>#faq_wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    box-sizing: border-box;
}

/* 모바일 반응형 LNB 조율 */
@media (max-width: 768px) {
    .sub-visual {
        height: 200px;
    }

    .sub-visual-txt h2 {
        font-size: 28px !important;
    }

    .sub-visual-txt p {
        font-size: 13.5px;
    }

    .sub-nav-bar {
        height: 48px;
    }

    .sub-nav-bar-inner {
        padding: 0 16px;
    }

    .sub-nav-path {
        font-size: 12.5px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        overflow: visible !important;
    }

    .path-select-btn {
        font-size: 12.5px;
    }

    .path-select-list {
        min-width: 130px;
    }
}

/* ==========================================================================
   Megamenu GNB Styles (PC 1024px+ header integration)
   ========================================================================== */
.gnb-nav-pc {
    display: none;
    height: 100%;
}

.gnb-depth1 {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gnb-d1-li {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.gnb-a1 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 10px 0;
    position: relative;
    letter-spacing: -0.5px;
}

#gnb.is-scrolled .gnb-a1,
#gnb:hover .gnb-a1 {
    color: #222222 !important;
}

.gnb-a1.active {
    color: #FFF8DE !important;
}

#gnb.is-scrolled .gnb-a1.active,
#gnb:hover .gnb-a1.active {
    color: var(--primary-color) !important;
}

.gnb-a1::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0;
    height: 3px;
    background: #e2ff3b;
    transition: width 0.3s ease;
}

.gnb-d1-li:hover .gnb-a1 {
    color: var(--primary-color) !important;
}

.gnb-d1-li:hover .gnb-a1::after {
    width: 100%;
}

/* Megamenu Panel */
.gnb-megamenu-panel {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    padding: 40px 0;
}

/* Active Hover State opens megamenu */
.gnb-nav-pc:hover .gnb-megamenu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.megamenu-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    gap: 0;
}

.megamenu-col {
    flex: 1;
    text-align: left;
    padding: 0 30px;
}

.megamenu-col:first-child {
    padding-left: 0;
}

.megamenu-col:last-child {
    padding-right: 0;
}

.megamenu-col:not(:last-child) {
    border-right: 1px solid #e2e8f0;
}

.megamenu-title {
    font-size: 19px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
}

.megamenu-title a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.2s;
}

.megamenu-title a:hover {
    color: var(--primary-color);
}

.gnb-depth2 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gnb-depth2 a {
    font-size: 16px;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}

.gnb-depth2 a:hover {
    color: var(--primary-color);
}

/* Dimmed background overlay */
.gnb-nav-pc::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.gnb-nav-pc:hover::before {
    height: 100vh;
    opacity: 1;
}

/* Media Query to show PC GNB Menu */
@media (min-width: 1024px) {
    .gnb-nav-pc {
        display: block;
    }
}

/* Stats Card Grid Section */
.stats_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.stat_card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat_card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    border-color: var(--primary-color);
}

.stat_icon {
    font-size: 28px;
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.stat_icon i {
    width: 48px;
    height: 48px;
}

.stat_number_wrap {
    font-size: 4.8rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.stat_number {
    font-size: 5.6rem;
}

.stat_number_text {
    font-size: 4.8rem;
}

.stat_suffix {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-left: 4px;
}

.stat_title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.stat_desc {
    font-size: 1.5rem;
    color: #64748b;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .stats_container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stat_card {
        padding: 30px 20px;
    }

    .stat_number_wrap {
        font-size: 3.8rem;
    }

    .stat_number {
        font-size: 4.4rem;
    }

    .stat_number_text {
        font-size: 3.8rem;
    }
}

/* --- Apple Design System Components --- */
.ap-title-hero {
    font-family: "SF Pro Display", "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.02em;
    color: #1d1d1f;
}

.ap-title-display {
    font-family: "SF Pro Display", "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

.ap-title-md {
    font-family: "SF Pro Display", "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

.ap-text-lead {
    font-family: "SF Pro Text", "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0;
    color: #1d1d1f;
}

.ap-text-body {
    font-family: "SF Pro Text", "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.47;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

.ap-text-body-strong {
    font-family: "SF Pro Text", "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.47;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

.ap-text-caption {
    font-family: "SF Pro Text", "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43;
    letter-spacing: -0.01em;
    color: #333333;
}

/* Button & Link Component */
.ap-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #0066cc;
    color: #ffffff !important;
    font-family: "SF Pro Text", "Pretendard Variable", "Pretendard", sans-serif;
    font-size: 17px;
    font-weight: 400;
    padding: 11px 22px;
    border-radius: 9999px;
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
}

.ap-button-primary:hover {
    background-color: #0071e3;
}

.ap-button-primary:active {
    transform: scale(0.95);
}

.ap-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #0066cc !important;
    font-family: "SF Pro Text", "Pretendard Variable", "Pretendard", sans-serif;
    font-size: 17px;
    font-weight: 400;
    padding: 10px 21px;
    border-radius: 9999px;
    border: 1px solid #0066cc;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.ap-button-secondary:hover {
    background-color: #0066cc;
    color: #ffffff !important;
}

.ap-button-secondary:active {
    transform: scale(0.95);
}

.ap-text-link {
    font-family: "SF Pro Text", "Pretendard Variable", "Pretendard", sans-serif;
    font-size: 17px;
    color: #0066cc;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.ap-text-link:hover {
    text-decoration: underline;
}

.ap-text-link::after {
    content: "→";
    display: inline-block;
    transition: transform 0.2s ease;
}

.ap-text-link:hover::after {
    transform: translateX(3px);
}

.ap-text-link-on-dark {
    font-family: "SF Pro Text", "Pretendard Variable", "Pretendard", sans-serif;
    font-size: 17px;
    color: #2997ff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.ap-text-link-on-dark:hover {
    text-decoration: underline;
}

.ap-text-link-on-dark::after {
    content: "→";
    display: inline-block;
    transition: transform 0.2s ease;
}

.ap-text-link-on-dark:hover::after {
    transform: translateX(3px);
}

/* Full-bleed Tiles */
.ap-tile-section {
    padding: 80px 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ap-tile-light {
    background-color: #ffffff;
    color: #1d1d1f;
}

.ap-tile-parchment {
    background-color: #f5f5f7;
    color: #1d1d1f;
}

.ap-tile-dark {
    background-color: #1d1d1f;
    color: #ffffff;
}

.ap-tile-dark .ap-title-hero,
.ap-tile-dark .ap-title-display,
.ap-tile-dark .ap-title-md,
.ap-tile-dark .ap-text-lead,
.ap-tile-dark .ap-text-body,
.ap-tile-dark .ap-text-body-strong {
    color: #ffffff;
}

.ap-tile-dark .ap-text-caption {
    color: #cccccc;
}

/* Product & Utility Cards */
.ap-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.ap-utility-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 18px;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ap-utility-card:hover {
    transform: translateY(-4px);
}

/* Product Shadow ONLY on Image */
.ap-product-shadow {
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.12));
}

/* Responsive adjust */
@media (max-width: 1068px) {
    .ap-title-hero {
        font-size: 40px;
    }

    .ap-title-display {
        font-size: 32px;
    }

    .ap-text-lead {
        font-size: 20px;
    }

    .ap-tile-section {
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    .ap-title-md {
        font-size: 31px !important;
    }
}

@media (max-width: 734px) {
    .ap-title-hero {
        font-size: 26px !important;
        line-height: 142% !important;
    }

    .ap-title-display {
        font-size: 28px;
    }

    .ap-title-md {
        font-size: 26px !important;
    }

    .ap-text-lead {
        font-size: 18px;
    }

    .ap-tile-section {
        padding: 48px 0;
    }
}

/* Section 1 헤드타이틀 영역 상하단 패딩(마진) 0px로 조정 */
.sub-content-wrap section:first-of-type.ap-tile-section {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* 인라인 스타일로 정의된 #7a7a7a 색상을 #333으로 강제 전환 */
[style*="color: #7a7a7a"] {
    color: #333333 !important;
}

[style*="color:#7a7a7a"] {
    color: #333333 !important;
}

/* -- Section 3.5: 지열 신기술 4대 강점 (#main_geothermal_tech) -- */
#main_geothermal_tech {
    position: relative;
    background: #ffffff;
    /* 흰색 배경 */
    padding: 120px 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

#main_geothermal_tech .inner_wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

#main_geothermal_tech .title {
    text-align: center;
    margin-bottom: 60px;
}

#main_geothermal_tech .title h2 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

#main_geothermal_tech .title .desc {
    font-size: 40px;
    line-height: 1.4;
    margin: 15px 0;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -1px;
}

#main_geothermal_tech .title .maintenance_desc {
    font-size: 18px;
    line-height: 1.6;
    color: #64748b;
    max-width: 800px;
    margin: 0 auto;
}

#main_geothermal_tech .con_wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Item Styling */
#main_geothermal_tech .itm {
    position: relative;
    display: block;
    background: #1e293b;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

#main_geothermal_tech .itm .bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#main_geothermal_tech .itm::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(15, 23, 42, 0.85));
    z-index: 1;
    transition: opacity 0.4s;
}

#main_geothermal_tech .itm:hover .bg {
    transform: scale(1.08);
}

#main_geothermal_tech .itm:hover::before {
    background: linear-gradient(to bottom, transparent 20%, rgba(15, 23, 42, 0.95));
}

#main_geothermal_tech .itm:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2);
}

#main_geothermal_tech .txt_box {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    z-index: 2;
    color: #fff;
}

#main_geothermal_tech .txt_box .tit em {
    display: block;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: #FF3429;
    /* 브랜드 포인트 레드 */
    letter-spacing: 1px;
}

#main_geothermal_tech .txt_box .tit h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #fff;
}

#main_geothermal_tech .txt_box .desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    font-weight: 400;
    word-break: keep-all;
}

@media (max-width: 1200px) {
    #main_geothermal_tech {
        height: auto !important;
        min-height: auto;
        padding: 80px 0;
    }

    #main_geothermal_tech .con_wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    #main_geothermal_tech .title .desc {
        font-size: 26px;
    }

    #main_geothermal_tech .title .maintenance_desc {
        font-size: 15px;
    }

    #main_geothermal_tech .con_wrap {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}
}

/* -- Section 3.7: SmartEarth AI (#main_smartearth_story) -- */
#main_smartearth_story {
    position: relative;
    background: #ffffff;
    padding: 120px 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

#main_smartearth_story .smartearth_bg_wrap {
    position: relative;
    background: #001a33 url('../images/smartearth_ai_bg.png') no-repeat center/cover;
    border-radius: 60px;
    margin: 0 auto;
    width: calc(100% - 80px);
    max-width: 1400px;
    overflow: hidden;
    padding: 120px 0;
}

#main_smartearth_story .smartearth_bg_wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1;
}

#main_smartearth_story .smartearth_con {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
}

#main_smartearth_story .smartearth_con .label {
    display: inline-block;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    background: #0066cc;
    padding: 8px 25px;
    border-radius: 20px;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

#main_smartearth_story .smartearth_tit {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 40px;
    color: #ffffff;
}

#main_smartearth_story .smartearth_tit span {
    color: #2997ff;
}

#main_smartearth_story .smartearth_txt {
    font-size: 20px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 80px;
    font-weight: 300;
    word-break: keep-all;
}

#main_smartearth_story .smartearth_links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

#main_smartearth_story .lnk_item {
    display: flex;
    align-items: center;
    gap: 25px;
    background: rgba(255, 255, 255, 0.08);
    padding: 40px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: 0.4s;
    text-align: left;
    text-decoration: none;
}

#main_smartearth_story .lnk_item:hover {
    background: #fff;
    transform: translateY(-10px);
}

#main_smartearth_story .lnk_item:hover .txt strong {
    color: #0066cc;
}

#main_smartearth_story .lnk_item:hover .txt p {
    color: #666;
}

#main_smartearth_story .lnk_item:hover i {
    color: #0066cc;
}

#main_smartearth_story .lnk_item:hover .num {
    color: #0066cc;
}

#main_smartearth_story .lnk_item .num {
    font-size: 24px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.3);
    transition: 0.4s;
}

#main_smartearth_story .lnk_item .txt {
    flex: 1;
}

#main_smartearth_story .lnk_item .txt strong {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
    transition: 0.4s;
}

#main_smartearth_story .lnk_item .txt p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    transition: 0.4s;
    margin: 0;
}

#main_smartearth_story .lnk_item i {
    color: rgba(255, 255, 255, 0.4);
    transition: 0.4s;
}

#main_smartearth_story .m_br {
    display: none;
}

#main_smartearth_story .pc_br {
    display: block;
}

@media (max-width: 1200px) {
    #main_smartearth_story .smartearth_bg_wrap {
        width: calc(100% - 40px);
        padding: 100px 0;
        border-radius: 40px;
    }

    #main_smartearth_story .smartearth_links {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #main_smartearth_story .smartearth_tit {
        font-size: 38px;
    }
}

@media (max-width: 768px) {
    #main_smartearth_story {
        padding: 0px;
    }

    #main_smartearth_story .smartearth_bg_wrap {
        width: 100%;
        border-radius: 0;
        padding: 60px 0;
        margin: 0;
    }

    #main_smartearth_story .smartearth_tit {
        font-size: 30px;
    }

    #main_smartearth_story .smartearth_txt {
        font-size: 17px;
        margin-bottom: 50px;
    }

    #main_smartearth_story .lnk_item {
        padding: 30px;
    }

    #main_smartearth_story .m_br {
        display: block;
    }

    #main_smartearth_story .pc_br {
        display: none;
    }
}

/* ==========================================================================
   글로벌 반응형 줄바꿈 (PC / Mobile)
   ========================================================================== */
.pc_br,
.pc-only,
.pc_only {
    display: block;
}

.m_br,
.mobile_br,
.mo-only,
.m_only {
    display: none;
}

@media (max-width: 768px) {

    .pc_br,
    .pc-only,
    .pc_only {
        display: none !important;
    }

    .m_br,
    .mobile_br,
    .mo-only,
    .m_only {
        display: block !important;
    }
}

/* ==========================================================================
   PC / 모바일 오른쪽 플로팅 TOP, DOWN 버튼
   ========================================================================== */
.quick-scroll-wrap {
    position: fixed;
    right: 28px;
    bottom: 35px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto;
}

.quick-scroll-wrap .qs-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(21, 145, 220, 0.25);
    border-radius: 50%;
    color: #2c3e50;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}

.quick-scroll-wrap .qs-btn .qs-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.quick-scroll-wrap .qs-btn .qs-text {
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.5px;
    margin-top: 2px;
    font-family: 'SF Pro Display', 'Pretendard Variable', Pretendard, sans-serif;
}

.quick-scroll-wrap .qs-btn:hover {
    background: #1591DC;
    border-color: #1591DC;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(21, 145, 220, 0.4);
    transform: translateY(-2px);
    opacity: 1 !important;
}

.quick-scroll-wrap .qs-btn:active {
    transform: translateY(0) scale(0.94);
    box-shadow: 0 2px 8px rgba(21, 145, 220, 0.25);
}

.quick-scroll-wrap .qs-btn.qs-top:hover .qs-icon {
    transform: translateY(-2px);
}

.quick-scroll-wrap .qs-btn.qs-down:hover .qs-icon {
    transform: translateY(2px);
}

/* 빨간색 원형 전화걸기 버튼 (모바일 전용) */
.quick-scroll-wrap .qs-btn.qs-call {
    display: none;
    background: linear-gradient(135deg, #ff4d4f 0%, #dc2626 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
    text-decoration: none !important;
}

.quick-scroll-wrap .qs-btn.qs-call .qs-icon {
    width: 17px;
    height: 17px;
    fill: #ffffff;
    stroke: none;
}

.quick-scroll-wrap .qs-btn.qs-call .qs-text {
    font-size: 8px;
    font-weight: 800;
    color: #ffffff;
    margin-top: 1px;
}

.quick-scroll-wrap .qs-btn.qs-call:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-color: #b91c1c;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.55);
    transform: translateY(-2px);
}

.quick-scroll-wrap .qs-btn.qs-call:active {
    transform: translateY(0) scale(0.92);
}

@keyframes qs-call-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* 모바일 화면 (768px 이하) */
@media (max-width: 768px) {
    .quick-scroll-wrap {
        right: 16px;
        bottom: 22px;
        gap: 6px;
    }

    .quick-scroll-wrap .qs-btn {
        width: 42px;
        height: 42px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    }

    .quick-scroll-wrap .qs-btn .qs-icon {
        width: 16px;
        height: 16px;
    }

    .quick-scroll-wrap .qs-btn .qs-text {
        font-size: 8px;
        margin-top: 1px;
    }

    /* 모바일에서 top 버튼 위에 상시 노출 및 부드러운 펄스 효과 */
    .quick-scroll-wrap .qs-btn.qs-call {
        display: flex !important;
        animation: qs-call-pulse 2.2s infinite;
    }
}

/* ==========================================================================
   게시판 카테고리 뱃지 가로 스크롤 & 좌우 화살표 (공지사항, Q&A, 정보게시판 등)
   ========================================================================== */
#bo_cate.bo_cate_scroll_wrap {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    margin: 20px 0 25px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
}

#bo_cate.bo_cate_scroll_wrap h2 {
    position: absolute !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
}

#bo_cate .bo_cate_inner {
    flex: 1 1 auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    padding: 4px 6px 10px !important;
    margin: 0 4px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94a3b8 #f1f5f9 !important;
}

/* Chrome, Safari, Webkit 가로 스크롤바 명시적 노출 */
#bo_cate .bo_cate_inner::-webkit-scrollbar {
    height: 5px !important;
    display: block !important;
}
#bo_cate .bo_cate_inner::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 4px !important;
}
#bo_cate .bo_cate_inner::-webkit-scrollbar-thumb {
    background: #94a3b8 !important;
    border-radius: 4px !important;
}
#bo_cate .bo_cate_inner::-webkit-scrollbar-thumb:hover {
    background: #64748b !important;
}

/* 카테고리 리스트 가로 일렬 배치 (1줄 고정) */
#bo_cate #bo_cate_ul {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: max-content !important;
    border: none !important;
    background: transparent !important;
    zoom: normal !important;
}
#bo_cate #bo_cate_ul:after {
    display: none !important;
}

#bo_cate #bo_cate_ul li {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* 심플한 카테고리 뱃지 버튼 스타일 */
#bo_cate #bo_cate_ul a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

#bo_cate #bo_cate_ul a:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* 선택된 활성 카테고리 뱃지 */
#bo_cate #bo_cate_ul #bo_cate_on {
    background: #1591DC !important;
    border: 1px solid #1591DC !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(21, 145, 220, 0.3) !important;
}

/* 좌우 이동 화살표 버튼 */
#bo_cate .bo_cate_btn {
    width: 32px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    color: #475569 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    outline: none !important;
}
#bo_cate .bo_cate_btn:hover {
    background: #f1f5f9 !important;
    color: #1591DC !important;
    border-color: #1591DC !important;
}

@media (max-width: 768px) {
    #bo_cate.bo_cate_scroll_wrap {
        margin: 12px 0 18px !important;
    }
    #bo_cate .bo_cate_btn {
        width: 28px !important;
        height: 34px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
    #bo_cate #bo_cate_ul a {
        height: 33px !important;
        line-height: 33px !important;
        padding: 0 13px !important;
        font-size: 12.5px !important;
        border-radius: 17px !important;
    }
}

/* Q&A / Online Form Layout & Button Shape Alignment Fix */
#bo_w {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 15px;
    box-sizing: border-box;
}
#bo_w .bo_w_info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
}
#bo_w .bo_w_info .frm_input {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    height: 48px !important;
    border: 1px solid #d2d5dc !important;
    border-radius: 8px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    background: #ffffff !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
}
#bo_w .bo_w_info .full_input,
#bo_w #wr_1 {
    grid-column: 1 / -1 !important;
}
#bo_w .bo_w_select select {
    width: 100% !important;
    height: 48px !important;
    border: 1px solid #d2d5dc !important;
    border-radius: 8px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    background: #ffffff !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
}
#bo_w .bo_w_tit .frm_input {
    width: 100% !important;
    height: 48px !important;
    border: 1px solid #d2d5dc !important;
    border-radius: 8px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}
#bo_w .btn_confirm {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 36px !important;
    margin-bottom: 30px !important;
}
#bo_w .btn_confirm .icon_btn_cancel,
#bo_w .btn_confirm .icon_btn_write {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    min-width: 130px !important;
    padding: 0 24px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}
#bo_w .btn_confirm .icon_btn_cancel::before,
#bo_w .btn_confirm .icon_btn_cancel::after,
#bo_w .btn_confirm .icon_btn_write::before,
#bo_w .btn_confirm .icon_btn_write::after {
    display: none !important;
}
#bo_w .btn_confirm .icon_btn_cancel {
    background: #64748b !important;
    color: #ffffff !important;
    border: 1px solid #64748b !important;
}
#bo_w .btn_confirm .icon_btn_cancel:hover {
    background: #475569 !important;
}
#bo_w .btn_confirm .icon_btn_write {
    background: #1591DC !important;
    color: #ffffff !important;
    border: 1px solid #1591DC !important;
}
#bo_w .btn_confirm .icon_btn_write:hover {
    background: #0d7ec0 !important;
}
@media (max-width: 640px) {
    #bo_w .bo_w_info {
        grid-template-columns: 1fr !important;
    }
    #bo_w .btn_confirm .icon_btn_cancel,
    #bo_w .btn_confirm .icon_btn_write {
        flex: 1 !important;
        min-width: 0 !important;
    }
}