/* =======================
   1) Pretendard 폰트 세팅
======================= */

@font-face {
    font-family: "Pretendard";
    src: url("/css/fonts/Pretendard-Thin.woff2") format("woff2");
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/css/fonts/Pretendard-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/css/fonts/Pretendard-Light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/css/fonts/Pretendard-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/css/fonts/Pretendard-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/css/fonts/Pretendard-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/css/fonts/Pretendard-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/css/fonts/Pretendard-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/css/fonts/Pretendard-Black.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
}

/* =======================
   2) Global 기본값 / 유틸
======================= */
body {
    margin: 0;
}
html,
body,
a {
    font-family: "Pretendard" !important;
}

.max-2000 {
    max-width: 2000px;
    margin: 0 auto;
    width: 100%;
}
.uk-section-small .max-2000 {
    margin: 120px auto 0;
}
.max-1400 {
    max-width: 1440px;
    margin: 120px auto 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* =======================
   3) 비주얼 영역 (Hero + Swiper)
======================= */
.visual-area {
    background: #006837;
    color: #ffffff;
    text-align: center;
    height: 40vw;
    max-height: 800px;
    min-height: 260px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

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

.visual-slide,
.banner-slide {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.banner-slide img {
    border-radius: 10px;
}

.visual-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    transform: scale(1);
    transition: transform 6s ease-out;
}

.visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.15));
}

.visual-content {
    position: relative;
    z-index: 2;
    width: 80%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.visual-title {
    font-size: 60px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    color: #fff !important;
}

.visual-desc {
    font-size: 26px;
    font-weight: 300;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    transition-delay: 0.12s;
    text-align: center;
    color: #fff !important;
}

/* 활성 슬라이드 텍스트 페이드업 */
.swiper-slide-active .visual-title,
.swiper-slide-active .visual-desc {
    opacity: 1;
    transform: translateY(0);
}

/* Swiper 기본 컨트롤 */
.visual-area .swiper-pagination,
.banner-section .swiper-pagination {
    bottom: 50px !important;
}
.visual-area .swiper-pagination-bullet,
.banner-section .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    opacity: 0.3;
    background: #ffffff;
}
.visual-area .swiper-pagination-bullet-active,
.banner-section .swiper-pagination-bullet-active {
    opacity: 0.9;
    width: 25px;
    border-radius: 30px;
}
/* === 비주얼 Swiper 네비: 슬라이드 hover 시에만 표시 === */
.visual-area .swiper-button-next,
.visual-area .swiper-button-prev {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
    color: #fff;
}

.visual-swiper:hover .swiper-button-next,
.visual-swiper:hover .swiper-button-prev {
    opacity: 1;
    visibility: visible;
}

/* =======================
   4) 헤더 / GNB
======================= */
header.gnb-header {
    position: relative;
    /* border-bottom: 1px solid #eee; */
    z-index: 100;
    padding: 0 20px;
}

.uk-logo {
    height: 120px;
}
.uk-logo img {
    width: 258px;
    transition: width 0.28s ease;
}

.uk-navbar {
    background: none !important;
}

/* GNB 네비 */
.gnb-nav {
    flex: 1;
}
.uk-navbar-right a {
    width: 40px;
}
.uk-navbar-right img {
    width: 24px;
    height: 24px;
}

/* 대메뉴 */
.main-nav {
    display: flex;
    justify-content: center;
    gap: 0;
    width: 100%;
}
.main-nav > li {
    position: relative;
    text-align: center;
    padding: 0 35px;
}
.main-nav > li > a {
    display: inline-flex;
    align-items: center;
    padding: 0;
    color: #111;
    transition: color 0.15s ease;
    font-size: 20px;
    font-weight: 700;
}
.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a[aria-expanded="true"] {
    color: #006837 !important;
}

/* 활성 대메뉴 (스크립트에서 .is-active-main 추가) */
.main-nav > li.is-active-main > a {
    color: #006837;
}

/* =======================
   5) 메가메뉴
======================= */
.mega-wrap {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background: #ffffff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.22s ease;
    z-index: 99;
    padding: 0 0 30px;
    margin-top: -1px;
}
.mega-wrap.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-inner {
    max-width: 2000px;
    margin: 0 auto;
    box-sizing: border-box;
}

.mega-grid {
    position: relative; /* 자식 .mega-col absolute 기준 */
    width: 100%;
    margin-top: -30px;
}

.mega-col {
    position: absolute; /* JS로 left/width 지정 */
    top: 0;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.5px;
}
.mega-col:hover {
    background: #f5f5f5;
    border-radius: 10px;
}
.mega-col:not(:last-child) {
    border-right: 1px solid #f5f5f5;
}

.mega-col ul {
    padding: 0;
    margin: 10px 0;
    list-style: none;
}
.mega-col a {
    display: block;
    color: #666;
    padding: 7px 0;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    margin: 0 8px;
    border-radius: 50px;
}
.mega-col a:hover {
    background: #006837;
    color: #ffffff;
}

/* =======================
   6) 공통 콘텐츠 영역
======================= */
.content-area,
.bottom-area {
    background: #b36828;
    color: #ffffff;
    text-align: center;
    padding: 80px 20px;
    box-sizing: border-box;
}
.bottom-area {
    margin-top: 120px;
}
/* =======================
   7) 인기 제품 섹션
======================= */
.product-section {
    color: #111;
    box-sizing: border-box;
}

/* 섹션 타이틀 */
.section-title-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.section-title-main {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0;
}
.section-title-main a {
    border: 1px solid #006837;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-left: 10px;
}
.section-title-main a img {
    width: 30px;
    height: 30px;
}
.section-title-sub {
    margin: 6px 0 0;
    font-size: 24px;
    color: #555;
}

/* 전체보기 버튼 */
.product-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid #06833f;
    color: #06833f;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, transform 0.1s ease;
}
.product-more-btn:hover {
    background: #06833f;
    color: #fff;
    transform: translateY(-1px);
}

/* 모바일용 아이콘 버튼 */
.product-more-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
    font-size: 22px;
}

/* 상품 카드 */
.product-card {
    position: relative;
    box-sizing: border-box;
}

/* 상단 카테고리 배지 */
.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #06833f;
    border-radius: 999px;
    border: 2px solid #06833f;
    letter-spacing: -0.5px;
}
.product-flags {
    text-align: center;
}

/* 상품 이미지 영역 */
.product-thumb {
    background: #f5f5f5;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    margin-bottom: 18px;
    border-radius: 10px;
}
/* 썸네일 기본 설정 */
.product-thumb {
    position: relative;
    overflow: hidden; /* 반짝 라인이 밖으로 튀어나가지 않게 */
}
.product-thumb a,
.product-thumb img {
    width: 100%;
    mix-blend-mode: darken;
    padding: 10px;
}

/* 상품명 / 설명 */
.product-name {
    font-size: 20px;
    color: #111;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.4px;
    text-align: center;
}
.product-desc {
    font-size: 16px;
    margin: 0;
    color: #168747;
    text-align: center;
}

/* =======================
   8) 인기 제품 Swiper
======================= */
.product-swiper {
    margin-top: 32px;
    padding-bottom: 40px; /* 페이지네이션/버튼 공간 */
}
.product-swiper .swiper-slide {
    height: auto;
}

/* 좌우 네비게이션 버튼 */
.swiper-nav {
    display: flex;
}

.banner-section {
    overflow: hidden;
    border-radius: 10px;
}
.banner-pagination {
    position: absolute;
    z-index: 9;
    display: flex;
    justify-content: center;
}
.uk-section-small {
    padding: 0;
}

.product-swiper-nav-prev,
.product-swiper-nav-next,
.notice-swiper-nav-prev,
.notice-swiper-nav-next,
.cate1-swiper-nav-next,
.cate1-swiper-nav-prev,
.cate2-swiper-nav-next,
.cate2-swiper-nav-prev,
.cate3-swiper-nav-next,
.cate3-swiper-nav-prev {
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid #999;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
    margin-left: 10px;
    background-color: transparent; /* 버튼 바디 색 유지 */
}

/* 아이콘을 ::after 로 별도 작업 */
.product-swiper-nav-prev::after,
.product-swiper-nav-next::after,
.notice-swiper-nav-prev::after,
.notice-swiper-nav-next::after,
.cate1-swiper-nav-next::after,
.cate1-swiper-nav-prev::after,
.cate2-swiper-nav-next::after,
.cate2-swiper-nav-prev::after,
.cate3-swiper-nav-next::after,
.cate3-swiper-nav-prev::after {
    content: "";
    width: 30px;
    height: 30px;
    background-color: #999; /* 아이콘 색 */
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    display: block;
}

/* 왼쪽 */
.product-swiper-nav-prev::after,
.notice-swiper-nav-prev::after,
.cate1-swiper-nav-prev::after,
.cate2-swiper-nav-prev::after,
.cate3-swiper-nav-prev::after {
    mask-image: url("/images/icon/chevron-left.svg");
}

/* 오른쪽 */
.product-swiper-nav-next::after,
.notice-swiper-nav-next::after,
.cate1-swiper-nav-next::after,
.cate2-swiper-nav-next::after,
.cate3-swiper-nav-next::after {
    mask-image: url("/images/icon/chevron-right.svg");
}

/* 🔥 hover 시 아이콘 + border 둘 다 변화 */
.product-swiper-nav-prev:hover,
.product-swiper-nav-next:hover,
.notice-swiper-nav-prev:hover,
.notice-swiper-nav-next:hover,
.cate1-swiper-nav-next:hover,
.cate1-swiper-nav-prev:hover,
.cate2-swiper-nav-next:hover,
.cate2-swiper-nav-prev:hover,
.cate3-swiper-nav-next:hover,
.cate3-swiper-nav-prev:hover {
    border-color: #006837; /* ← border 색 변경 */
}
/* hover 시 아이콘만 색 변경 */
.product-swiper-nav-prev:hover::after,
.product-swiper-nav-next:hover::after,
.notice-swiper-nav-prev:hover::after,
.notice-swiper-nav-next:hover::after,
.cate1-swiper-nav-next:hover::after,
.cate1-swiper-nav-prev:hover::after,
.cate2-swiper-nav-next:hover::after,
.cate2-swiper-nav-prev:hover::after,
.cate3-swiper-nav-next:hover::after,
.cate3-swiper-nav-prev:hover::after {
    background-color: #006837;
}

/* =======================
   카테고리 제품
======================= */
.cate-section {
    background-color: #f2f7f5;
    /* padding: 100px 0; */
}
.cate-section .max-1400 {
    padding: 120px 20px;
}
.cate-section .product-thumb {
    background: #ffffff;
}
.cate-title {
    font-size: 32px;
    line-height: 1.3;
    font-weight: 800;
    margin-bottom: 32px;
}

.cate-switcher-nav {
    list-style: none;
    padding: 0;
    margin: 50px 0 0;
}

.cate-switcher-nav > li {
    margin-bottom: 12px;
}

.cate-switcher-nav > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 999px;
    border: 1px solid #006837;
    padding: 0 8px 0 30px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 20px;
    height: 46px;
    width: 90%;
    color: #006837;
    text-decoration: none;
}

.cate-switcher-nav > li.uk-active > a {
    background: #006837;
    color: #fff;
    font-weight: 600;
}
.cate-switcher-nav > li.uk-active > a::after {
    content: "";
    width: 36px;
    height: 36px;
    background-color: #ffffff; /* 기본 색상 */
    mask: url("/images/icon/chevron-right.svg") no-repeat center;
    -webkit-mask: url("/images/icon/chevron-right.svg") no-repeat center;
}
.cate1-swiper,
.cate2-swiper,
.cate3-swiper {
    width: 100%;
}

/* =======================
   CS
======================= */
.notice-section {
    position: relative;
    overflow: hidden;
    padding: 0 0 120px;
}

.notice-section::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: #006837 url("/images/bg_wave.png") center top no-repeat;
    z-index: 0;
}

.notice-section > * {
    position: relative;
    z-index: 1;
}

.cs-section {
    background: #fff;
}
/* .custom-shape-divider-bottom-1764742230 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
} */
.cs-bg {
    padding: 0 0 120px;
    background-color: #006837;
}
.custom-shape-divider-bottom-1764742672 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 46px;
}

.custom-shape-divider-bottom-1764742672 .shape-fill {
    fill: #006837;
}
.notice-card {
    border-radius: 10px;
    overflow: hidden;
}
.notice-swiper {
    border-radius: 10px;
    overflow: hidden;
    margin-top: 50px;
}
.notice-name {
    padding: 0;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 👉 두 줄까지만 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notice-date {
    padding: 0;
    margin: 0;
    font-size: 17px;
    color: #006837;
}
.notice-thumb a {
    text-decoration: none;
}

.notice-thumb .notice-title {
    height: 140px;
    padding: 20px 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
}
.notice-img {
    overflow: hidden; /* 확대되었을 때 밖으로 튀어나오지 않도록 */
}

.notice-img img {
    transition: transform 0.6s ease; /* 부드러운 확대 애니메이션 */
    width: 100%;
    /* height: 236px; */
    object-fit: contain;
    background-color: #f5f5f5;
}

.notice-card {
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

/* PC 이상에서만 hover 효과 */
@media (min-width: 1025px) {
    .notice-card a:hover .notice-img img {
        transform: scale(1.12); /* 확대 */
    }
    .sub_tab_menu li a:not(.active):hover {
        border: 2px solid;
        color: #111;
        text-decoration: none;
    }

    .notice-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .hover-shine {
        position: relative;
        overflow: hidden;
    }
    /* Shine 효과 */
    .hover-shine::before {
        position: absolute;
        top: 0;
        left: -75%;
        z-index: 2;
        display: block;
        content: "";
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
        transform: skewX(-25deg);
        pointer-events: none; /* ✅ 핵심 */
    }

    /* 카드에 마우스 올렸을 때 반짝 애니메이션 */
    .product-card:hover .hover-shine::before {
        -webkit-animation: shine 0.75s;
        animation: shine 0.75s;
    }

    /* Shine */
    .hover14 figure {
        position: relative;
    }
    .hover14 figure::before {
        position: absolute;
        top: 0;
        left: -75%;
        z-index: 2;
        display: block;
        content: "";
        width: 50%;
        height: 100%;
        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
        -webkit-transform: skewX(-25deg);
        transform: skewX(-25deg);
    }
    .hover14 figure:hover::before {
        -webkit-animation: shine 0.75s;
        animation: shine 0.75s;
    }
    @-webkit-keyframes shine {
        100% {
            left: 125%;
        }
    }
    @keyframes shine {
        100% {
            left: 125%;
        }
    }
}
.cs-section .cs-bg .max-1400 {
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cs-title {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 15px;
    color: #fff;
}
.cs-desc {
    margin: 6px 0 0;
    font-size: 24px;
    color: #fff;
}
.cs-section .cs-bg .max-1400 .link-formmail {
    width: 65%;
    display: flex;
    justify-content: space-between;
}
.link-formmail a {
    border: 2px solid;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    border-radius: 10px;
    width: calc(100% / 3 - 40px);
    height: 120px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.link-formmail a:hover {
    text-decoration: none;
}
.link-formmail img {
    filter: brightness(0) invert(1); /* 흰색 */
    width: 30px;
    margin-bottom: 10px;
}
.logo_partner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 26px 20px;
    box-sizing: border-box;
}

/* =======================
   Footer (PC + Mobile)
======================= */
.site-footer {
    border-top: 1px solid #eee;
    background: #fff;
    color: #777;
    font-size: 13px;
    line-height: 1.8;
    padding: 28px 0 40px;
}

/* 공통 max-1400 활용 */
.site-footer .max-1400 {
    margin-top: 0;
}

/* PC 레이아웃 */
.footer-desktop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}
.footer-info p span {
    color: #aaa;
    font-weight: 100;
    margin: 0 10px;
}
.footer-info p {
    margin: 0 0 10px;
    white-space: nowrap;
}
.footer-info {
    font-size: 15px;
    letter-spacing: -0.5px;
}

.footer-copy {
    margin-top: 8px;
    font-size: 13px;
    color: #aaa;
    letter-spacing: 0;
}
.footer-copy a {
    color: #aaa;
}
.footer-copy a:hover {
    text-decoration: none;
}

.footer-menu {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    font-size: 15px;
    white-space: nowrap;
}

.footer-menu a {
    text-decoration: none;
    color: #777;
}

.footer-menu a:first-child {
    font-weight: 600;
    color: #111;
}

.sub_top {
    position: relative;
    height: 380px;
    width: 100%;
    max-width: 2000px;
    display: flex;
    justify-content: center;
}
/* 검정 반투명 오버레이 */
.sub_top::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* ✅ 검정 20% */
    z-index: 1;
}
.sub_top > * {
    position: relative;
    z-index: 2;
}
.sub_title {
    position: absolute;
    width: 100%;
    max-width: 1440px;
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.sub_title h1 {
    font-size: 55px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    /* letter-spacing: -0.5px; */
}
.sub_title h3 {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}
.sub_title h3 img {
    width: 20px;
    filter: invert(1);
    margin-bottom: 4px;
}
.sub_title h3 span {
    margin-right: 10px;
}
.sub_title h3 span:not(:first-child)::before {
    content: "·";
    margin-right: 5px;
}
.sub_visual {
    height: inherit;
}
.sub_tab_menu {
    width: 100%;
    max-width: 1440px;
    padding: 0 20px;
    margin: 80px auto -50px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
}

.sub_tab_menu li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 153px;
    font-size: 19px;
    font-weight: 500;
    border-radius: 100px;
    background: #f5f5f5;
    color: #000;
    letter-spacing: -1px;
    border: 1px solid #eee;
    transition: border-color 0.25s ease;
}
.sub_tab_menu li a:not(.active):hover {
    text-decoration: none;
}
.sub_tab_menu .active {
    background-color: #111;
    color: #fff !important;
    border: 2px solid #111;
    text-decoration: none;
}
.sub-margin {
    margin-bottom: 80px;
}

/* 모바일 기본 숨김 */
.footer-mobile {
    display: none;
    margin-top: 10px;
}

/* =======================
   모바일 레이아웃
======================= */
@media (max-width: 960px) {
    .footer-desktop {
        display: none;
    }

    .footer-mobile {
        display: block;
    }

    /* footer 아코디언 전체 줄 스타일 */
    .footer-biz {
        border-bottom: 1px dotted #eee;
        padding-bottom: 10px;
        margin-bottom: 14px;
        list-style: none;
        margin-left: 0;
    }

    /* 제목 줄 */
    .footer-biz .uk-accordion-title {
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0; /* 기본 패딩 제거 (원하는 만큼 조정 가능) */
    }

    /* UIkit 기본 화살표 제거하고 커스텀 화살표 사용하고 싶을 때 */
    .footer-biz .uk-accordion-title::before {
        display: none; /* UIkit 기본 caret 제거 */
    }

    /* 본문 텍스트 */
    .footer-biz-body {
        font-size: 12px;
        color: #777;
        line-height: 1.7;
        padding-top: 8px;
    }
    .footer-biz-body {
        margin: 0;
    }

    /* 링크 행 */
    .footer-link-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #aaa;
        margin-top: 4px;
    }

    .footer-link-row a {
        text-decoration: none;
        color: #999;
    }

    .footer-link-row a.is-active {
        font-weight: 600;
        color: #111;
    }

    .footer-link-row .divider {
        color: #ddd;
    }
}

/* =======================
   9) 반응형 설정 (Media Queries)
======================= */
@media (max-width: 1440px) {
}
/* ≤1350px: 로고 축소, 비주얼 비율 변경 */
@media (max-width: 1350px) {
    .max-1400 {
        margin: 8vw auto 0;
    }
    .uk-section-small .max-2000 {
        margin: 8vw auto 0;
    }
    .cate-section .max-1400 {
        padding: 8vw 20px;
    }
    .uk-logo img {
        width: 200px;
    }
    .visual-area {
        height: 50vw;
        max-height: none;
        min-height: 0;
    }
    .uk-navbar-center:not(:only-child) {
        left: 55%;
    }
    .cs-section .cs-bg .max-1400 .link-formmail {
        width: 60%;
    }
    .link-formmail a {
        width: calc(100% / 3 - 20px);
    }
    .cs-title,
    .section-title-main {
        font-size: 40px;
    }
    .cs-desc,
    .section-title-sub {
        font-size: 20px;
    }
    .cate-switcher-nav > li > a {
        font-size: 18px;
        height: 40px;
    }
    .cate-switcher-nav {
        margin: 20px 0 0;
    }
    .notice-thumb .notice-title {
        padding: 20px;
    }

    .product_media {
        flex: 0 0 37% !important;
    }
    .product_info {
        margin: 40px 10px !important;
    }
    .product_top {
        gap: 20px !important;
    }
    .spec_value {
        font-size: 17px !important;
    }
    .product_summary {
        margin: 0 !important;
    }
}

/* ≤1024px: 비주얼 타이포 축소, 제품 네비 숨김 */

@media (max-width: 1024px) {
    .company_visual h1{
        padding
    }
    .history {
        margin-top: 50px !important;
    }
    .historyWrap {
        margin: 80px auto !important;
    }
    .history .years {
        width: 100% !important;
        top: 10px !important;
        left: 60px !important;
    }
    .history_content {
        padding: 120px 0 0 0 !important;
    }
    .historyWrap > div:nth-child(1) .history_content::before,
    .history_content::before {
        left: 0 !important;
        top: 0 !important;
        height: 110% !important;
    }
    .notice-section::before {
        height: 55% !important;
    }
    .max-1400 {
        overflow: hidden;
    }
    .product_btn {
        position: relative !important;
        bottom: 0 !important;
        right: 0 !important;
    }
    .product_media {
        margin: 30px 0 30px 30px !important;
    }
    .uk-logo {
        height: auto;
    }
    .visual-area {
        height: 70vw !important; /* 모바일 1:1 비율 */
        max-height: none;
        min-height: 0;
    }
    .visual-title {
        font-size: 42px;
    }
    .pr_wrap h2 {
        text-align: left !important;
        font-size: 28px !important;
    }
    .visual-desc {
        font-size: 20px;
    }
    .product-swiper-nav-prev,
    .product-swiper-nav-next,
    .notice-swiper-nav-next,
    .notice-swiper-nav-prev,
    .swiper-button-prev,
    .swiper-button-next,
    .cate1-swiper-nav-next,
    .cate1-swiper-nav-prev,
    .cate2-swiper-nav-next,
    .cate2-swiper-nav-prev,
    .cate3-swiper-nav-next,
    .cate3-swiper-nav-prev {
        display: none !important;
    }

    .section-title-main,
    .cs-title {
        font-size: 26px;
    }
    .section-title-sub,
    .cs-desc {
        font-size: 15px;
    }
    .swiper {
        overflow: visible !important;
    }
    /* .product-swiper,
    .cate1-swiper {
        padding: 0 20px !important;
    } */
    .uk-section-small {
        overflow: hidden !important;
    }
    .banner-section {
        border-radius: 0 !important;
        padding: 0;
    }
    /* .section-title-wrap {
        padding: 0 20px;
    } */
    .cate-wrap {
        display: flex;
        flex-direction: column;
    }
    .cate-wrap .uk-width-1-4\@m,
    .cate-wrap .uk-width-3-4\@m {
        width: 100% !important;
    }
    .cate-wrap .cate-switcher-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .cate-switcher-nav > li > a {
        box-sizing: content-box;
        width: auto;
        padding: 0 10px;
    }
    .cate-switcher-nav > li.uk-active > a::after {
        display: none;
    }
    .banner-slide img {
        border-radius: 0;
    }
    .sub_top {
        height: 30vw;
    }
    .sub_body {
        margin: 100px 0 !important;
    }
    .notice-section {
        padding: 0 0 8vw;
    }
    .cs-bg {
        padding: 0 0 8vw;
    }
}

/* ≤640px: 섹션 여백/타이틀 크기, 제품 네비 버튼 사이즈 조정 */
@media (max-width: 640px) {
    .modal_company{
        padding: 20px !important;
        font-size: 15px !important;
    }
    .modal_company h2{
        font-size: 24px !important;
        margin-bottom: 20px !important;

    }
    .companyinofWrap{
        margin: 50px auto !important;
        font-size: 18px !important;
        line-height: 30px !important;
        gap: 30px !important;
    }
    .companyinofWrap b{
        font-size: 22px !important;
    }
    .companyinofWrap div:nth-child(3){
        font-size: 22px !important;
        line-height: 32px !important;
    }
    .historyWrap{
        margin: 0 !important;
    }
    .history_content ul.txt li{
        margin-left: 15px !important;
    }
    .history_content > li .year{
        font-size: 20px !important;
        margin-left: 15px !important;
        width: 120px !important;
    }
    .history_content{
        padding: 80px 0 0 0 !important;
    }
    .history_content > li{
        padding-bottom: 30px !important;
    }
    .history .years{
        font-size: 30px !important;
        left: 20px !important;
    }
    .company_visual h1{
        font-size: 30px !important;
        line-height: 42px !important;
        margin: 10px 0 50px !important;
    }
    .company_visual img{
        height: 200px !important;
    }
    .uk-slidenav {
        display: none;
    }
    .lightbox_container {
        gap: 30px !important;
    }
    .product_detail_tab {
        margin: 0 5px;
        width: auto !important;
    }
    .product_detail_tab li {
        height: 40px !important;
    }
    .product_detail_tab li a {
        font-size: 17px !important;
        height: 40px !important;
    }
    .product_detail_tab .uk-active > a {
        height: 44px !important;
        font-size: 17px !important;
    }
    .location_type h2 img {
        width: 20px !important;
        height: auto !important;
        margin-right: 8px !important;
    }
    .location_map {
        height: 300px !important;
    }
    .location_type {
        flex-direction: column;
        font-size: 17px !important;
        padding: 40px 0 !important;
    }
    .location_apsulute {
        margin-top: 350px !important;
    }
    .location_type h2 {
        font-size: 24px !important;
        margin-bottom: 20px;
    }
    .search_box input[type="text"] {
        font-size: 20px !important;
    }
    .search_result {
        font-size: 30px !important;
        margin: 0 !important;
    }
    .search_box {
        width: 100% !important;
    }
    .search_wrap {
        margin: 30px 0 0 !important;
    }
    #search-modal .uk-modal-body h5 {
        font-size: 17px !important;
        font-weight: 500 !important;
    }
    #search-modal .uk-modal-body {
        padding: 30px 20px !important;
    }
    .search_input {
        font-size: 20px !important;
    }
    .notice-section::before {
        height: 60% !important;
    }
    .sub_body .title {
        font-size: 30px !important;
        margin: 0 0 30px !important;
    }
    .btn_group {
        justify-content: center !important;
    }
    .pr_link {
        padding: 10px !important;
        font-size: 17px !important;
    }
    .pr_content {
        margin: 50px 0 20px !important;
    }
    .pr_body {
        padding: 30px 0 !important;
    }
    .pr_wrap h3,
    .pr_wrap span.date {
        position: relative !important;
        font-size: 17px !important;
    }
    .pr_wrap .pr_head {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .pr_wrap h2 {
        text-align: left !important;
        font-size: 28px !important;
        margin: 5px 0 10px !important;
        width: 100% !important;
    }
    #captcha {
        width: 50% !important;
        margin: 20px 0;
    }
    #captcha.m_captcha #captcha_img {
        width: 100% !important;
        height: auto !important;
    }
    #captcha.m_captcha #captcha_key {
        margin-left: 0 !important;
        width: 77% !important;
        padding: 0 !important;
        height: 40px !important;
    }
    #captcha.m_captcha #captcha_info {
        font-size: 15px !important;
        color: #006837;
    }
    .privacy-scroll {
        max-height: 120px !important;
    }
    .form__label {
        font-size: 17px !important;
        margin-bottom: 2px !important;
        margin-top: 10px;
    }
    .form__group {
        margin: 5px 0 !important;
    }
    .sub_tab_menu li a {
        height: 40px;
        font-size: 16px;
        width: 130px;
    }
    .sub_tab_menu {
        display: flex;
        flex-wrap: nowrap; /* 줄바꿈 금지 */
        overflow-x: auto; /* 가로 스크롤 */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
        gap: 2px;
        padding-bottom: 6px;
    }
    .sub_tab_menu li {
        flex: 0 0 auto; /* 각 li 고정폭 */
    }
    .sub_tab_menu a {
        white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    } /* 스크롤바 숨기기 (선택) */
    .sub_tab_menu::-webkit-scrollbar {
        display: none;
    }
    .sub_tab_menu {
        margin: 25px auto -70px;
    }
    .sub_title h1 {
        font-size: 30px;
        margin-bottom: 5px;
    }
    .sub_title h3 img {
        width: 15px;
    }
    .sub_title h3 {
        font-size: 15px;
    }
    .sub_body {
        margin: 100px 0 50px !important;
    }
    .sub_title h3 span {
        margin-right: 5px;
    }
    #bo_gall .gall_box {
        margin: 0 0 10px 0;
    }
    .product-name {
        font-size: 16px;
    }
    .product-desc {
        font-size: 13px;
        line-height: 15px;
    }
    .product-thumb {
        margin: 0 0 10px;
    }
    .visual-area {
        height: 100vw !important; /* 모바일 1:1 비율 */
        max-height: none;
        min-height: 0;
    }
    .visual-title {
        font-size: 22px;
    }
    .visual-desc {
        font-size: 14px;
    }
    .product-section {
        /* padding: 40px 16px 50px; */
    }
    .section-title-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
    .section-title-main,
    .cs-title {
        font-size: 24px;
    }
    .section-title-sub {
        font-size: 15px;
        margin-top: 0;
    }

    .product-swiper-nav-prev,
    .product-swiper-nav-next {
        width: 32px;
        height: 32px;
        top: 8px;
        transform: translateY(0);
    }
    .product-swiper {
        padding-bottom: 32px;
    }
    .product-badge {
        top: 5px;
        left: 5px;
        height: 20px;
        font-size: 15px;
        padding: 0 4px;
        background: #fff;
        border: 1px solid;
    }
    .cate-switcher-nav > li > a {
        font-size: 16px;
        height: 36px;
        letter-spacing: -0.5px;
    }
    .cate-switcher-nav > li {
        margin-bottom: 0;
    }
    .cate-wrap .cate-switcher-nav {
        gap: 4px;
    }
    .cate-switcher-nav {
        margin: 10px 0 0;
    }
    .notice-swiper {
        margin-top: 30px;
    }
    .cs-section .cs-bg .max-1400 {
        flex-direction: column;
    }
    .cs-section .cs-bg .max-1400 > div:first-child {
        width: 100%;
    }
    .cs-section .cs-bg .max-1400 .link-formmail {
        width: 100%;
        gap: 20px;
        margin-top: 30px;
    }
    .link-formmail a {
        width: 30vw;
        height: 25vw;
    }
    .notice-name {
        font-size: 16px;
    }
    .notice-date {
        font-size: 14px;
    }
    .notice-thumb .notice-title {
        height: 30vw;
    }
    .site-footer {
        border: none;
        padding: 0 0 4vw;
    }
    .logo_partner {
        padding: 20px;
    }
    .logo_partner img {
        width: 18vw;
    }
    .cs-title {
        margin: 0;
    }
    .custom-shape-divider-bottom-1764742672 svg {
        height: 10px;
    }
    .notice-thumb .notice-title {
        padding: 10px;
        min-height: 20vw;
        height: auto;
    }
    .link-formmail img {
        width: 6vw;
        margin-bottom: 1vw;
    }
    .link-formmail a {
        font-size: 15px;
    }
    header.gnb-header {
        padding: 0 10px;
    }
    .uk-navbar-right {
        gap: 5px;
    }
    .notice-section {
        padding: 0 0 12vw;
    }
    .cs-bg {
        padding: 0 0 12vw;
    }
    .max-1400 {
        margin: 12vw auto 0;
    }
    .cate-section .max-1400 {
        padding: 12vw 20px;
    }
}

/* ✅ 갤러리 리스트: 요즘 방식 (CSS Grid) 반응형
   PC(≥1024) 3칸 / 태블릿(768~1023) 2칸 / 모바일(≤767) 1칸
*/
#pr_ul.pr_row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px; /* 카드 간격 */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 기본(PC) : 3칸 + gap 50px */
#pr_ul.pr_row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 80px; /* ✅ PC에서만 50px */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 기존 float/width 무력화 */
#pr_ul.pr_row > li {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}
#pr_ul.pr_row > li.box_clear {
    clear: none !important;
}

/* 태블릿 : 2칸 + gap 20px */
@media (max-width: 1023px) {
    #pr_ul.pr_row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 50px;
    }
}

/* 모바일 : 1칸 + gap 16px */
@media (max-width: 767px) {
    #pr_ul.pr_row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

#pr_ul .notice-title {
    background-color: #f3f3f3;
}

/* ✅ 상품 리스트: CSS Grid 반응형
   PC(≥1024) 4칸 / 태블릿(768~1023) 3칸 / 모바일(≤767) 2칸
*/
#product_ul.product_row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* PC 4칸 */
    gap: 27px; /* PC 간격 */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 기존 float / width 무력화 */
#product_ul.product_row > li {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

#product_ul.product_row > li.box_clear {
    clear: none !important;
}

/* 태블릿 : 3칸 + gap 20px */
@media (max-width: 1023px) {
    #product_ul.product_row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}

/* 모바일 : 2칸 + gap 16px */
@media (max-width: 767px) {
    #product_ul.product_row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

.board_content h1 {
    font-size: 30px;
    font-weight: 700;
}
.board_content p {
    font-size: 17px;
}

.btn_group {
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 30px 20px 0;
    position: relative;
}
.btn_group_admin {
    position: absolute;
    right: 0;
    display: flex;
    gap: 5px;
}

.sub_admin {
    margin: 0 auto 100px;
}
.uk-nav-default > li.uk-active > a {
    color: #fff !important;
    background-color: #111;
}
.uk-nav-default > li > a {
    font-size: 20px;
    color: #111;
    font-weight: 600;
    background-color: #f5f5f5;
    border-radius: 100px;
    justify-content: center;
    margin: 10px 0;
    border: 2px solid transparent;
}
.uk-nav-default > li > a:hover {
    border: 2px solid #111;
    color: #111;
}
.btn_group .btn_admin::before {
    content: "admin";
    position: absolute;
    top: -20px;
    right: 0;
    color: #d13f4a;
    font-size: 14px;
}
.btn_group .btn_admin {
    background: #d13f4a;
    box-sizing: border-box;
    height: 40px;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    position: relative;
    border-radius: 5px;
    border: none;
}
.btn_group .btn_admin:hover {
    color: #fff !important;
}

.btn_normal {
    background: none;
    border: 0;
    box-sizing: border-box;
    height: 70px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid;
    color: #006837;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    border-radius: 100px;
    transition: 0.2s;
}
.btn_normal:hover {
    text-decoration: none;
    color: #fff;
    background-color: #006837;
}
.qna_wrap {
    display: flex;
    flex-direction: column;
}
.qna_visual {
    /* background: url("/images/visual_01.jpg") no-repeat; */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* padding: 0 0 50px; */
    position: relative;
}
.qna_comment h1 {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 20px;
}
.qna_comment p {
    font-size: 20px;
    letter-spacing: -0.5px;
    margin-bottom: 5px;
}

.qna_etc {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    position: absolute;
    right: 0;
    top: -110px;
}

.qna_kakao,
.qna_tel {
    width: 50%;
    max-width: 300px;
}
.qna_kakao a b,
.qna_tel a b {
    font-weight: 400;
}
.qna_kakao a,
.qna_tel a {
    width: 100%;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #111;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -1px;
    padding: 30px 0;
    border-radius: 10px;
    line-height: 30px;
}
.qna_kakao a:hover,
.qna_tel a:hover {
    text-decoration: none;
}
.form_qna {
    padding: 40px 80px;
    background: #f5f5f5;
}
.box-input {
    border: 1px dotted;
}

.form__group {
    position: relative;
    margin: 50px 0;
    width: 100%;
}

.form__label {
    display: block;
    transition: 0.2s;
    font-size: 20px;
    color: #111;
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}
.form__label_required::after {
    content: "*";
    color: #006837;
    margin-left: 2px;
}

.form__field {
    background: #fff !important;
    width: 100%;
    border: 0;
    border: 1px solid #ddd;
    outline: 0;
    font-size: 17px;
    color: #000 !important;
    font-weight: 500;
    height: 50px;
    background: transparent;
    transition: border-color 0.2s;
    border-radius: 5px;
    line-height: 20px !important;
}
.form__field::placeholder {
    font-size: 17px;
}
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    border-color: #006837;
}

.file_del {
    font-size: 15px;
    margin: 5px 0;
    color: #006837;
}
.file_upload {
    width: 100%;
    height: 100px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 20px;
    color: #000;
}
.uk-form-custom {
    display: flex;
}
.file_upload::placeholder {
    font-size: 17px;
    color: #999;
}
.form_commnet {
    font-size: 17px;
    color: #006837;
    margin-top: 10px;
}
.checklabel {
    font-size: 17px;
    margin-right: 20px;
    color: #006837;
}

.checkradio {
    font-size: 17px;
    margin-right: 10px;
    color: #000 !important;
    font-weight: 500;
}
.uk-input,
.uk-select:not([multiple]):not([size]) {
    height: 50px;
}
.uk-select:not([multiple]):not([size]) option {
    color: #000;
}

.info_admin {
    font-size: 20px;
    color: #fff;
    font-weight: 300;
}
.info_admin b {
    font-weight: 700;
}
.btn_logout {
    color: #fff;
    border: 2px solid;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 500;
    padding: 5px 10px;
    margin-left: 5px;
}
.btn_logout:hover {
    color: #fff;
    text-decoration: none;
}

.admin_list {
}

.admin_list h1 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
}
/* admin_list 테이블 기본 */
.admin_list table,
.admin_list2 table {
    width: 100%;
    border-collapse: collapse; /* 🔥 칸 라인 겹침 제거 */
    border: 1px solid #ddd; /* 테이블 외곽 라인 */
    font-size: 14px;
}

.admin_list2 h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px;
}
/* th, td 공통 */
.admin_list th,
.admin_list td,
.admin_list2 th,
.admin_list2 td {
    border: 1px solid #ddd; /* 🔥 각 칸 라인 */
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
}
.admin_list td {
    height: 80px;
}
.admin_list td a {
    font-size: 17px;
    color: #006837;
}
.admin_list td a:hover {
    color: #006837;
    text-decoration: underline;
}
/* th 스타일 */
.admin_list th,
.admin_list2 th {
    background: #f5f6f8;
    font-weight: 700;
    color: #111;
}

/* td 스타일 */
.admin_list td {
    background: #fff;
    color: #555;
}

/* 이미지 셀 정렬 */
.admin_list td .lt_img {
    display: inline-block;
}

/* hover 효과 (관리자 느낌) */
.admin_list tbody tr:hover {
    background: #fafafa;
}

/* 게시물 없음 */
.admin_list .empty_li {
    text-align: center;
    padding: 30px 0;
    color: #999;
}
.admin_sub_menu {
    width: 100%;
    max-width: 1800px;
    margin: 50px auto;
    display: flex;
    justify-content: space-between;
}
.admts_btn {
    display: flex;
    justify-content: flex-end;
}
.btn_cash {
    background-color: #f0506e !important;
    color: #fff !important;
    width: 140px !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    height: 50px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 100px !important;
    border: none !important;
}
.btn_cash:hover {
    text-decoration: none;
}
.status_off {
    color: red;
}
.more_btn {
    margin: 50px 0 100px !important;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* 개인정보처리방침 스크롤 영역 */
.privacy-scroll {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ddd;
    background: #f5f5f5;
    padding: 14px;
    margin: 10px 0 12px;
    border-radius: 5px;
    font-size: 15px;
    color: #333;
    font-weight: 300;
}

/* 내용 강조 */
.privacy-content strong {
    font-weight: 500;
}

.uk-radio {
    width: 20px;
    height: 20px;
}
.uk-checkbox:checked,
.uk-checkbox:indeterminate,
.uk-radio:checked,
.uk-checkbox:checked:focus,
.uk-checkbox:indeterminate:focus,
.uk-radio:checked:focus {
    background-color: #006837;
}
/* 🔒 개인정보 블러 처리 */
.blur-cell {
    filter: blur(4px);
    cursor: pointer;
    transition: filter 0.2s ease;
    user-select: none;
}

/* 클릭 후 해제 */
.blur-cell.unblur {
    filter: none;
    user-select: text;
}

/* 전체 틀 */
.product_wrap {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 상단 레이아웃: 기본은 2열 */
.product_top {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    background: #f5f5f5;
    margin-bottom: 80px;
    position: relative;
}

/* 이미지 영역(정사각형 유지) */
.product_media {
    flex: 0 0 520px; /* PC 기본 폭 */
    aspect-ratio: 1 / 1; /* 정사각형 */
    overflow: hidden;
    margin: 30px;
}

/* 실제 img 사용할 때 */
.product_media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #fff;
    border-radius: 10px;
}

/* 우측 정보 */
.product_info {
    flex: 1;
    min-width: 0;
    margin: 80px 30px;
}

.product_cate {
    margin: 0 0 5px;
    border-radius: 5px;
    font-size: 22px;
    font-weight: 500;
    color: #006837;
    letter-spacing: -0.5px;
}

.product_title {
    margin: 0 0 30px;
    font-size: 44px;
    font-weight: 800;
}

.product_summary {
    font-size: 20px;
    color: #111;
    font-weight: 600;
}

.product_specs {
    border-top: 1px solid #eee;
    padding: 30px 0;
}

.spec_row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-direction: column;
}

.spec_label {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.spec_value {
    font-size: 20px;
    color: #666;
    font-weight: 300;
}

.product_btn {
    display: flex;
    gap: 10px;
    position: absolute;
    bottom: 30px;
    right: 30px;
}
.lightbox_container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 기본: 2개 */
    gap: 100px;
}
.lightbox_caption {
    font-size: 17px;
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}
.lightbox_container a {
    text-decoration: none;
}
.lightbox_container a:hover {
    color: #111;
}
.uk-slidenav {
    color: #fff;
    opacity: 0.7;
}
.uk-slidenav svg {
    width: 30px;
    height: 30px;
}
.uk-slidenav:hover {
    color: #fff;
    opacity: 1;
}
/* 768px 이상 → 3개 */
@media (min-width: 768px) {
    .lightbox_container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 1024px 이상 → 4개 */
@media (min-width: 1024px) {
    .lightbox_container {
        grid-template-columns: repeat(4, 1fr);
    }
    .lightbox_container a:hover img {
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
        transform: translateY(-4px);
    }
}

/* 이미지 기본 스타일 */
.lightbox_container img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* 하단 상세 */
.product_detail {
    font-size: 20px;
    padding: 0 20px;
}
.product_detail h1 {
    font-size: 34px;
    font-weight: 700;
    margin: 50px 0 15px;
}
/* .product_detail p::before {
    content: "·";
    margin-right: 5px;
} */
.product_wrap table{
    border-collapse: collapse;
}
.product_wrap table th,
.product_wrap table td{
    border: 1px solid;
}


/* ===== 반응형 ===== */
/* 태블릿 */
@media (max-width: 1024px) {
    .qna_kakao,
    .qna_tel {
        max-width: 50%;
    }
    .qna_visual {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .qna_etc {
        width: 100% !important;
        margin: 120px 0 -30px;
        position: relative !important;
    }
    .product_media {
        flex-basis: 420px;
        margin: 0 !important;
    }
    .product_title {
        font-size: 36px;
        margin: 0 0 15px !important;
    }
    .product_top {
        gap: 28px;
    }
    .product_detail h1 {
        font-size: 24px !important;
        margin: 40px 0 15px !important;
    }
}

/* 모바일: 1열 스택 */
@media (max-width: 768px) {
    .company_visual h1{
        font-size: 30px !important;
        line-height: 42px !important;
        margin: 20px 0 50px !important;
    }
    .form__field {
        border: 1px solid #ddd;
    }
    .qna_visual {
        /* border-bottom: 1px solid #eee; */
        margin-bottom: 10px;
    }
    .form_qna {
        padding: 20px 0 !important;
        background: #fff !important;
    }
    .qna_etc {
        margin: 110px 0 -110px !important;
    }
    .qna_kakao a,
    .qna_tel a {
        font-size: 18px !important;
        line-height: 22px !important;
        padding: 20px 0 !important;
        background-color: #f5f5f5;
        border: none !important;
    }
    .icon-tel {
        margin: 0 0 5px !important;
    }
    .qna_comment h1 {
        font-size: 30px !important;
        margin-bottom: 10px !important;
    }
    .qna_comment p {
        font-size: 17px !important;
    }
    .product_detail,
    .product_summary {
        font-size: 17px !important;
    }
    .product_cate {
        position: absolute;
        top: 30px;
        font-size: 17px !important;
        padding: 0 0 30px !important;
    }
    .product_title {
        position: absolute;
        top: 60px;
    }
    .product_specs {
        border-top: none;
        border-bottom: 1px solid #eee;
        padding: 0 0 30px !important;
        margin-bottom: 30px !important;
    }
    .product_media {
        margin-top: 100px !important;
    }
    .product_info {
        margin: 0 !important;
        padding: 0 20px 30px;
        width: 100%;
    }
    .product_btn {
        justify-content: flex-end;
    }
    .product-mobile {
        padding: 0;
    }
    .product_top {
        flex-direction: column;
        gap: 10px !important;
        margin-bottom: 50px !important;
    }
    .product_media {
        width: 100%;
        flex: 0 0 auto;
        max-width: 100%;
        padding: 20px;
    }
    .product_title {
        font-size: 28px;
    }
    .product_wrap {
        padding: 0;
    }
}

#bo_v_file a:hover {
    color: #006837 !important;
}
#bo_v_file li:hover .bo_v_file_cnt {
    color: #006837 !important;
    opacity: 0.5;
}

.pr_wrap .pr_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.pr_content {
    margin: 80px 0;
}
.pr_wrap .pr_head {
    position: relative;
}
.pr_wrap h2 {
    font-size: 44px;
    font-weight: 700;
    width: 70%;
    text-align: center;
    margin: 0 auto;
}
.pr_wrap h3 {
    font-size: 20px;
    font-weight: 500;
    color: #666;
    position: absolute;
}
.pr_wrap span.date {
    font-size: 17px;
    font-weight: 500;
    color: #006837;
    position: absolute;
    right: 0;
}
.pr_body {
    min-height: 200px;
    border-bottom: 1px solid #eee;
    font-size: 20px;
    padding: 50px 0;
    box-sizing: border-box;
}
.pr_img {
    text-align: center;
}
.pr_link {
    border-bottom: 1px solid #eee;
    padding: 20px 10px;
    font-size: 20px;
}
.pr_link a {
}
.pr_link a:hover {
    text-decoration: none;
    color: #006837;
}

.sub_body {
    margin: 120px auto 80px;
}
.sub_body .title,
.search_wrap .title {
    font-size: 50px;
    font-weight: 800;
    letter-spacing: -1px;
    color: #111;
    margin: 0 0 50px;
}

/* 📱 모바일 오프캔버스 배경 흰색 */
#offcanvas-nav .uk-offcanvas-bar {
    background: #ffffff;
    color: #111;
    padding: 0;
}
/* 메뉴 텍스트 */
#offcanvas-nav .uk-nav-primary > li > a {
    font-size: 20px;
    font-weight: 600;
    color: #111;
    padding: 10px 0;
}
#offcanvas-nav .uk-nav-primary > li {
    padding: 0 20px;
}

/* 서브메뉴 */
#offcanvas-nav .uk-nav-sub a {
    color: #666;
    font-weight: 500;
    font-size: 17px;
    padding: 3px 0;
}
#offcanvas-nav .uk-nav-sub a::before {
    content: "·";
    margin-right: 2px;
    color: #ccc;
}

/* 구분선 느낌 */
#offcanvas-nav .uk-nav > li + li {
    border-top: 1px solid #eee;
}

/* 닫기 버튼 색 */
#offcanvas-nav .uk-offcanvas-close {
    color: #006837;
    top: 5px;
    right: 5px;
}
#offcanvas-nav .uk-logo {
    margin-top: 20px;
}
.uk-nav-primary {
    width: 100%;
}
.uk-nav-parent-icon {
    color: #aaa;
}
.uk-nav-primary .uk-nav-sub {
    padding: 10px;
    background: #f5f5f5;
    margin-bottom: 20px;
    border-radius: 10px;
}

/* 기본 버튼 */
.btn_icon {
    color: #666;
    border: 1px solid #aaa;
    background: transparent;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 120px;

    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.5px;
    border-radius: 5px;

    /* 🔑 애니메이션 */
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* 아이콘 공통 */
.icon-download,
.icon-estimate {
    margin-right: 8px;
    width: 17px;
    height: 17px;
    display: inline-block;

    background-color: #666;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    /* 🔑 아이콘 애니메이션 */
    transition: background-color 0.25s ease;
}
.icon-tel {
    margin: 0 0 20px;
    width: 24px;
    height: 24px;
    display: inline-block;

    background-color: #111;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    /* 🔑 아이콘 애니메이션 */
    transition: background-color 0.25s ease;
}

/* SVG 마스크 */

.icon-tel {
    -webkit-mask-image: url("/images/icon/telephone-fill.svg");
    mask-image: url("/images/icon/telephone-fill.svg");
}
.icon-download {
    -webkit-mask-image: url("/images/icon/download.svg");
    mask-image: url("/images/icon/download.svg");
}

.icon-estimate {
    -webkit-mask-image: url("/images/icon/clipboard-check-fill.svg");
    mask-image: url("/images/icon/clipboard-check-fill.svg");
}

/* ✅ Hover 상태 */
.btn_icon:hover {
    /* background-color: #006837; */
    color: #006837;
    border-color: #006837;
    text-decoration: none;
}

/* ✅ Hover 시 아이콘 색상 */
.btn_icon:hover .icon-download,
.btn_icon:hover .icon-estimate {
    background-color: #006837;
}

.main-nav .active {
    color: #006837;
}

.admin_info {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    background: #000;
    color: #fff;
    padding: 8px 16px;

    font-weight: 500;
    font-size: 20px;

    z-index: 9999;
    width: 100%;
    max-width: 2000px; /* 필요시 */
    text-align: center;
}
.admin_info div {
    display: inline-flex;
    gap: 5px;
    position: absolute;
    right: 10px;
}

.admin_info span {
    animation: adminBreath 3.5s ease-in-out infinite;
}
.admin_logout,
.admin_page {
    background-color: #fff;
    color: #006837;
    border-radius: 2px;
    font-size: 16px;
    padding: 0 5px;
    letter-spacing: -0.5px;
}
.admin_logout:hover,
.admin_page:hover {
    text-decoration: none;
    color: #006837;
}
.admin_top {
    height: 250px;
}

@keyframes adminBreath {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
    100% {
        opacity: 1;
    }
}

.banner_wild {
    text-align: center;
}

.search_input::placeholder {
    color: #ccc;
}
.search_input {
    font-size: 30px;
    font-weight: 600;
    border-radius: 100px;
    height: 60px;
    padding: 0 70px 0 30px;
    color: #111;
    border: 2px solid #ccc;
}
.btn_search {
    position: absolute;
    right: 0px;
    background: none;
    border: none;
    padding: 0 20px;
    height: 60px;
}
.btn_search img {
    width: 36px;
    opacity: 0.3;
}
.btn_search img:hover {
    opacity: 1;
}
.modal-count {
    color: #006837;
    font-weight: 500;
}
#search-modal .uk-modal-body {
    padding: 50px;
    border-radius: 10px;
}
#search-modal .uk-modal-body h5 {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.5px;
}
.uk-input:focus,
.uk-textarea:focus {
    color: #111;
    border-color: #111;
}

button,
a,
input {
    -webkit-tap-highlight-color: transparent;
}

button:focus,
button:focus-visible,
a:focus,
a:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ✅ Page Loader */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(255, 255, 255, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* 로딩 끝나면 숨김 */
.page-loader.is-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.loader-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, 0.12);
    border-top-color: #006837; /* 태성 그린 */
    animation: spin 0.8s linear infinite;
}

.loader-text {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin: 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.location_map {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 2000px;
    height: 500px;
    margin-bottom: 50px;
}

.location_apsulute {
    margin-top: 550px;
    border-bottom: 1px solid #eee;
}
.location_type {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 80px 0;
    font-size: 20px;
}
.location_type h2 {
    font-size: 30px;
    font-weight: 700;
    min-width: 300px;
    margin-right: 30px;
    display: inline-flex;
    align-items: center;
}
.location_type h2 img {
    width: 24px;
    height: 24px;
    margin-right: 20px;
}
.location_type ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}
.product_detail div {
    margin: 50px 0;
}
.product_detail_tab {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #006837;
    box-sizing: border-box;
}
.product_detail_tab li {
    width: calc(100% / 3);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    position: relative;
}
.product_detail_tab li a::before {
    content: "";
    background-color: #000;
    width: 99%;
    height: 93%;
    top: 0;
    position: absolute;
    opacity: 0.04;
    border-radius: 5px;
}
.product_detail_tab .uk-active > a::before {
    display: none;
}
.product_detail_tab li a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #111;
    transition: background-color 0.2s, color 0.2s;
    border-bottom: 1px solid #006837;
    margin-bottom: -2px;
}
.product_detail_tab li a:hover {
    color: #006837;
    text-decoration: none;
}
.product_detail_tab .uk-active > a {
    border: 1px solid #006837;
    border-bottom: 1px solid #fff;
    background-color: #fff;
    color: #006837;
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0 0;
    height: 64px;
    margin-bottom: 2px;
    font-size: 20px;
}
.uk-input:disabled,
.uk-select:disabled,
.uk-textarea:disabled {
    opacity: 0.8;
    color: #999 !important;
    background-color: #eee !important;
}
.uk-label-warning {
    background-color: indigo;
}

.history_section {
    position: relative;
}

.historyWrap {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.history {
    position: relative;
    /* margin-left: 250px; */
}

.history .years {
    font-size: 60px;
    font-weight: 900;
    font-family: "Roboto", "pretendard", sans-serif;
    letter-spacing: -1px;
    line-height: 1.1;
    width: 300px;
    position: absolute;
    top: 120px;
    left: 0;
    color: #006837;
}

.history_content {
    list-style: none;
    margin: 0;
    padding: 120px 0 0 300px;
    /* top + left */
    position: relative;
}

.historyWrap > div:nth-child(1) .history_content::before {
    content: "";
    position: absolute;
    top: 140px;
    left: 300px;
    width: 1px;
    height: calc(100% - 0px);
    background: #ddd;
}

.history_content::before {
    content: "";
    position: absolute;
    top: 140px;
    left: 300px;
    width: 1px;
    height: calc(100% - 200px);
    background: #ddd;
}
.company_visual img {
    border-radius: 20px;
    width: 100%;
    height: 380px;
    object-fit: cover;
}
.company_visual h1 {
    font-size: 60px;
    line-height: 80px;
    font-weight: 300;
    color: #111;
    letter-spacing: -1.5px;
    margin: 0 0 80px;
    text-align: center;
}
.company_visual h1 b {
    font-weight: 700;
}

.history_content > li {
    position: relative;
    padding-bottom: 40px;
    display: flex;
    align-items: center;
}
.history_content > li::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    display: inline-block;
    margin-left: -4px;
    flex: 0 0 auto;
}
.history_content > li .year {
    font-size: 24px;
    color: #333;
    margin-left: 60px;
    width: 150px;
    flex: 0 0 auto;
    font-family: "Roboto", "pretendard", sans-serif;
    font-weight: 700;
    letter-spacing: -1px;
}

.history_content ul.txt {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 18px;
    width: 100%;
}

.history_content ul.txt li {
    display: flex;
    align-items: flex-start;
    margin-left: 45px;
    gap: 20px;
}

.history_content ul.txt li > p {
    margin: 0;
    width: 40px;
    color: #333;
    line-height: 1.4;
    flex: 0 0 auto;
}

.history_content ul.txt li > p.description {
    flex: 1;
    width: auto;
}

.companyinofWrap{
    display: flex;
    flex-direction: column;
    font-size: 20px;
    line-height: 34px;
    letter-spacing: -0.5px;
    gap: 50px;
    width: 100%;
    max-width: 800px;
    margin: 100px auto;
}
.companyinofWrap div:nth-child(3){
    font-size: 28px;
    line-height: 42px;
    color: #006837;
    font-weight: 600;
}
.companyinofWrap div:nth-child(4){
    text-align: right;
    color: #111;
    font-weight: 500;
}
.companyinofWrap b{
    font-weight: 700;
    color: #111;
    font-size: 28px;
    margin-right: 2px;
}

.modal_company{
    width: 100%;
    max-width: 1000px !important;
    padding: 50px;
    font-size: 17px;
    border-radius: 10px;
}
.modal_company h2{
    letter-spacing: -1px;
    font-weight: 700;
    margin-bottom: 30px;
}
.cate-nav{
    height: 50px;
    position: absolute;
    top: -50px;
    right: 0;
    display: flex;
}


.product-order-controls{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
  margin-top:10px;
  font-size:13px;
}

.product-order-controls .btn-order{
  border:1px solid #ddd;
  background:#fff;
  padding:4px 8px;
  cursor:pointer;
  border-radius:6px;
  line-height:1;
}

.product-order-controls .order-value{
  text-align:center;
  font-weight:600;
  color:#333;
  border-radius:6px;
}