/* =========================================
   1. IMPORTS & VARIABLES
========================================= */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
    --primary-color: #009b77;
    --primary-green: #00c768;
    --primary-orange: #ff8a48;
    --text-dark: #111111;
    --text-gray: #666666;
    --text-light-gray: #999999;
    --border-color: #eee;
    --white: #ffffff;
    --transition-speed: 0.5s;
}

/* =========================================
   2. RESET & BASE
========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {font-family: 'Montserrat', "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;color: var(--text-dark);overflow-x: hidden;background-color: #fff;}
body.is-locked { overflow: hidden; height: 100vh; }
a { text-decoration: none; color: inherit; }
ul, li { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
.inner { max-width: calc(100% - 200px); margin: 0 auto; padding: 0 20px; }
.main-content { background-color: #fafafa; }
.blind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

/* =========================================
   3. HEADER & NAVIGATION
========================================= */
/* Header & Search Layer */
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 20px 100px; transition: background 0.3s ease, border-bottom 0.3s ease, color 0.3s ease, padding 0.3s ease;  }
header.scrolled { background: rgba(255, 255, 255, 0.95); padding: 0 50px; border-bottom: 1px solid var(--border-color); color: var(--text-dark); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
header:hover { background-color: #fff !important; }
header:hover .main-menu > li > a, header:hover .header-utils { color: #333 !important; }
.logo img { height: 32px; transition: all 0.3s ease; }
header.scrolled .logo img { height: 24px; }
.gnb-nav { width: 100%; display: flex; justify-content: center; }
nav .main-menu { display: flex; gap: 0; max-width: 900px; width: 100%; justify-content: center; margin: 0 40px; }
nav .main-menu li { position: relative; width: 100%; text-align: center; }
nav .main-menu li a { font-size: 18px; font-weight: 500; display: inline-block; padding: 19px 0; transition: color 0.3s; }
nav .main-menu li a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: var(--primary-orange); transition: width 0.3s ease, left 0.3s ease; transform: translateX(-50%); }
nav .main-menu li a:hover::after { width: 80%; }
header.scrolled nav .main-menu li a { color: var(--text-dark); }
.header-utils { display: flex; width: 250px; align-items: center; gap: 20px; font-size: 14px; color: var(--text-gray); justify-content: flex-end; }
.search-icon {width: 36px;height: 36px;stroke: rgb(255 255 255);cursor: pointer;border-radius: 30px;padding: 7px;background-color: rgba(0,0,0,0.2); transition: all 0.3s ease-in-out;}
.search-icon:hover { background-color: var(--primary-orange); transition: all 0.3s ease-in-out; }


.search-layer { position: absolute; top: 0; left: 0; width: 100%; background-color: #fff; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 10px rgba(0,0,0,0.03); padding: 40px 0; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; }
.search-layer.active { opacity: 1; visibility: visible; transform: translateY(0); }
.search-layer-inner { margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center; }
.search-input-wrap { position: relative; width: 100%; max-width: 700px; border-bottom: 1px solid #ccc; }
.search-input-wrap input { width: 100%; border: none; padding: 15px 50px 15px 5px; font-size: 24px; outline: none; background: transparent; color: #333; }
.search-input-wrap input::placeholder { color: #999; }
.search-input-wrap .btn-search-submit { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; color: #999; }

/* 부드러운 색상 전환을 위한 기본 속성 추가 */
.search-input-wrap { border-bottom: 1px solid #ccc; transition: border-color 0.3s ease; }
.search-input-wrap input::placeholder { color: #999; transition: color 0.3s ease; }
.search-input-wrap .btn-search-submit { color: #999; transition: color 0.3s ease; }

/* 인풋 창에 포커스가 갔을 때(선택 시) 오렌지색으로 변경 
*/
.search-input-wrap:focus-within {
    border-bottom-color: #ff6600; /* 하단 선 오렌지색 */
}

.search-input-wrap:focus-within input::placeholder {
    color: #ff6600; /* 플레이스홀더 글자 오렌지색 */
}

.search-input-wrap:focus-within .btn-search-submit {
    color: #ff6600; /* 돋보기 아이콘 오렌지색 */
}



.btn-search-close { position: absolute; right: 100px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; color: #333; }
.btn-mobile-menu {display: none;background: none;border: none;cursor: pointer;color: #737373;}

/* Mega Menu */
.mega-menu { position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; border-top: 1px solid #eaeaea; box-shadow: 0 10px 15px rgba(0,0,0,0.05); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease; z-index: 999; }
header:hover .mega-menu { max-height: 600px; opacity: 1; padding: 10px 0 30px; }
.mega-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; gap: 10px; }
.mega-col { flex: 1; }
.mega-col.col-product { flex: 2.8; }
.mega-title { background-color: #9b9b9b; color: #fff; text-align: center; padding: 4px 0; font-size: 14px; margin-bottom: 15px; border-radius: 6px; }
.sub-list { display: flex; flex-direction: column; margin: auto; }
.sub-list li a { display: block; position: relative;  color: #222; font-size: 15px; transition: color 0.2s; padding: 6px 20px; }
.sub-list li a:hover { color: var(--primary-orange, #E04E26); }


.sub-list li a:hover::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 13px;
    width: 4px;
    height: 4px;
    background: var(--primary-orange);
    border-radius: 50%;  
}

.col-product .sub-groups { display: flex; gap: 0; justify-content: space-between; margin: 0 0 0 20px; }
.col-product .group { flex: 1; }
.col-product .group h4 { font-size: 15px; font-weight: 500; color: #111; margin-bottom: 15px; text-align: left; margin-top: 5px; }
.sub-list-dot { flex-direction: column; }
.sub-list-dot li { margin-bottom: 10px; text-align: left; padding-left: 12px; position: relative; }
.sub-list-dot li::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 9px;
    width: 2px;
    height: 2px;
    background: #888;
    border-radius: 50%;    
}

.sub-list-dot li:hover::before {
    background: var(--primary-orange);
}



.sub-list-dot li a { color: #555; font-size: 14px; transition: color 0.2s; padding: 0; }
.sub-list-dot li a:hover { color: var(--primary-orange, #E04E26); }
.sub-list li a::after, .sub-list-dot li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--primary-orange); transition: width 0.3s ease, left 0.3s ease; transform: translateX(0%); }

/* =========================================
   4. MAIN PAGE SECTIONS
========================================= */
/* Main Slider (Swiper) */
.swiper { width: 100%; height: 100svh; height: 100dvh; }
.swiper-slide { position: relative; display: flex; align-items: center; background-size: cover; background-position: center; }
.video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: brightness(0.8); }
.swiper-slide .content { max-width: 100%; padding: 0 100px; z-index: 10; }
.swiper-slide .main-title { font-size: clamp(32px, 5vw, 64px); font-weight: 700; line-height: 1.2; margin-bottom: 24px; word-break: keep-all; color: var(--white); }
.swiper-slide .main-title img { width: 648px; max-width: 100%; }
.swiper-slide .main-desc { font-size: clamp(16px, 1.5vw, 20px); font-weight: 300; margin-bottom: 48px; opacity: 0.85; line-height: 1.6; word-break: keep-all; color: var(--white); }
.swiper-slide .btn-wrap { display: flex; gap: 10px; }
.swiper-slide .btn { max-width: fit-content; padding: 12px 72px; font-size: 14px; font-weight: 600; text-decoration: none; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); transition: 0.3s; display: flex; align-items: center; justify-content: center; border-radius: 30px; position: relative; }
.swiper-slide .btn-buy { background: #000; }
.swiper-slide .btn-inquiry { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); }
.swiper-slide .btn:hover { background: #fff; color: #000; }
.swiper-slide .btn-inquiry::after { content: ''; display: inline-block; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); position: absolute; right: 30px; }
.side-nav { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: 15px; }
.side-nav .num { font-size: 14px; font-weight: 600; color: #fff; }
.side-nav .total-idx { opacity: 0.5; }
.custom-pagination { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; padding-right: 17px; border-right: 3px solid rgba(255, 255, 255, 0.3); position: relative !important; width: auto !important; margin: 10px 0; transform: unset !important; }
.swiper-pagination-bullet { width: auto !important; height: auto !important; background: transparent !important; border-radius: 0 !important; margin: 0 !important; color: rgba(255, 255, 255, 0.4); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; opacity: 1 !important; transition: all 0.3s ease; text-align: right; position: relative; cursor: pointer; }
.swiper-pagination-bullet-active { color: #fff !important; font-size: 20px !important; font-weight: 600 !important; transform: translateX(-10px); }
.swiper-pagination-bullet-active::after { content: ''; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 3px; height: 30px; background: #fff; border-radius: 0; }
.scrolldown { position: absolute; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 100; text-align: center; font-size: 10px; letter-spacing: 2px; opacity: 0.8; color: #fff; transition: opacity 0.3s; }
.scrolldown i { display: block; width: 22px; height: 36px; border: 2px solid #fff; border-radius: 12px; margin: 0 auto 8px; position: relative; }
.scrolldown i::after { content: ''; position: absolute; top: 6px; left: 50%; width: 3px; height: 6px; background: #fff; border-radius: 2px; transform: translateX(-50%); animation: wheelMove 2.5s infinite; }
.swiper-slide-active ~ .scrolldown { opacity: 0.3; }
@keyframes wheelMove { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } }

/* Intro Section */
.sec-intro { padding: 160px 0; text-align: center; background: #fff; }
.intro-header .nc-logo { width: 130px; margin-bottom: 20px; }
.intro-header .title { font-size: 48px; font-weight: 700; margin-bottom: 15px; color: var(--text-dark); }
.intro-header .desc { font-size: 24px; color: var(--text-gray); margin-bottom: 60px; margin-top: 30px; }
.intro-cards { display: flex; gap: 12%; max-width: 1400px; margin: auto; }
.intro-cards .card { border-radius: 20px; overflow: hidden; opacity: 0; transition: opacity 1s ease-out, transform 1s cubic-bezier(0.23, 1, 0.32, 1); }
.intro-cards .card .img-wrap img { width: 100%; display: block; border-radius: 500px; }
.intro-cards .card .text-wrap { padding: 30px; }
.intro-cards .card h3 { font-size: 30px; font-weight: 600; }
.intro-cards .card:nth-child(1) { transform: translateX(-100px); transition-delay: 0s; }
.intro-cards .card:nth-child(2) { transform: translateX(100px); transition-delay: 0.0s; }
.intro-cards .card.visible { opacity: 1; transform: translateX(0); }

/* Services Section */
.services { padding: 120px 50px; background-color: #fff; max-width: 1600px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; }
.service-info { width: 30%; position: sticky; top: 150px; }
.service-title { font-size: clamp(36px, 4vw, 56px); font-weight: 700; margin-bottom: 30px; color: var(--text-dark); line-height: 1.1; }
.service-desc { font-size: 18px; color: var(--text-gray); line-height: 1.7; margin-bottom: 50px; word-break: keep-all; }
.deco-arrow { width: 60px; height: 60px; border-top: 1px solid var(--border-color); border-right: 1px solid var(--border-color); transform: rotate(45deg); margin-top: 20px; }
.service-cards { width: 1200px; display: flex; gap: 30px; }
.card-img-wrap { width: 100%; aspect-ratio: 4 / 4; overflow: hidden; margin-bottom: 30px; background-color: #f5f5f5; border-radius: 4px; }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); }
.card:hover .card-img-wrap img { transform: scale(1.1); }
.card-title { font-size: 22px; font-weight: 700; margin-bottom: 16px; color: var(--text-dark); }
.card-text { font-size: 15px; color: var(--text-gray); line-height: 1.6; margin-bottom: 30px; word-break: keep-all; }
.card-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-dark); position: relative; }
.card-btn::after { content: ''; width: 100%; height: 1px; background: var(--border-color); position: absolute; bottom: -5px; left: 0; transition: background 0.3s; }
.card-btn:hover::after { background: var(--primary-green); }

/* Quality Section */
.sec-quality { background: #fff; }
.quality-bg { background: url('../images/main/factory_bg.jpg') no-repeat center center / cover; height: 700px; display: flex; align-items: center; justify-content: center; text-align: left; position: relative; }
.quality-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.0) 100%); }
.quality-bg .inner { position: relative; z-index: 1; width: 100%; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25); }
.quality-bg h2 { color: #fff; font-size: 64px; font-weight: 700; line-height: 1.3; letter-spacing: -1px; }
.quality-bg h2 strong {display: block;font-weight: 700;}
.quality-bg p { color: rgba(255, 255, 255, 0.85); font-size: 20px; line-height: 1.6; margin-top: 30px; font-weight: 300; }
.quality-features { background: #fff; border-bottom: 1px solid var(--border-color); }
.quality-features .feat-list { display: flex; justify-content: space-between; padding: 20px 0 160px; gap: 50px; }
.quality-features .item { text-align: center; position: relative; flex: 1; }
.quality-features .item h4 {font-size: 30px;color: var(--text-dark);font-weight: 600;margin-bottom: 3px;}
.quality-features .item .sub { display: block; font-size: 13px; color: var(--text-gray); margin-bottom: 15px; padding-bottom: 15px; position: relative; letter-spacing: 1px; }
.quality-features .item .sub::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #e5e5e5; }
.quality-features .item:first-child .sub::after { background: var(--primary-color); height: 2px; }
.quality-features .item p { font-size: 18px; color: var(--text-gray); word-break: keep-all; }

/* Products Section (Main Page) */
.sec-products { padding: 160px 0; text-align: center; border-bottom: 1px solid var(--border-color); }
.sec-products .sec-header { margin-bottom: 50px; }
.sec-products .sec-title { font-size: 48px; font-weight: 700; margin-bottom: 30px; }
.sec-products .sec-desc { font-size: 18px; color: var(--text-gray); margin-bottom: 20px; }
.sec-products .btn-more { display: inline-block; padding: 10px 60px; background: var(--primary-color); color: #fff; border-radius: 30px; margin-top: 15px; font-size: 14px; text-decoration: none; }
.prd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prd-item { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--border-color); border-radius: 45px; transition: 0.3s; cursor: pointer; }
.prd-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.prd-item.active, .prd-item:hover { border-color: var(--primary-orange); background-color: #F3B8B3; box-shadow: 0 10px 20px rgba(0, 155, 119, 0.1); }
.hover-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.0); border-radius: 15px; opacity: 0; transition: opacity 0.3s ease; z-index: 10; text-align: center; }
.prd-item:hover .hover-content { opacity: 1; }
.hover-content .prd-title { color: #fff; font-size: 32px; font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,0.15); margin-bottom: 10px; transform: translateY(15px); transition: transform 0.4s ease; }
.hover-content .prd-hash { color: #fff; font-size: 15px; text-shadow: 0 2px 10px rgba(0,0,0,0.3); margin-bottom: 80px; transform: translateY(15px); transition: transform 0.4s ease 0.05s; }
.hover-content .btn-inquiry-black { display: inline-flex; align-items: center; justify-content: center; background: #000; color: #fff; padding: 10px 60px; border-radius: 30px; font-size: 12px; text-decoration: none; transform: translateY(15px); transition: transform 0.4s ease 0.1s, background 0.3s; font-family: 'Montserrat', sans-serif; }
.hover-content .btn-inquiry-black::after { content: ''; width: 7px; height: 7px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); right: 20px; position: absolute; }
.hover-content .btn-inquiry-black:hover { background: #333; }
.prd-item:hover .hover-content .prd-title, .prd-item:hover .hover-content .prd-hash, .prd-item:hover .hover-content .btn-inquiry-black { transform: translateY(0); }

/* Partners Section */
.sec-partners { padding: 160px 0; background: #fff; text-align: center; border-bottom: 1px solid var(--border-color); }
.sec-partners .sec-title { font-size: 48px; font-weight: 700; margin-bottom: 30px; }
.sec-partners .sec-desc { font-size: 18px; color: var(--text-gray); margin-bottom: 60px; }
.partner-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; margin-bottom: 60px; }
.pt-logo {border: 1px solid var(--border-color);border-radius: 10px;padding: 0;display: flex;align-items: center;justify-content: center;box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);}
.pt-logo img { max-width: 100%; max-height: 140px; }

/* Consulting Section */
.sec-consulting {padding: 100px 0 120px;background: #fff;border-bottom: 1px solid var(--border-color);}
.sec-consulting .flex-container { display: flex; align-items: center; justify-content: space-between; gap: 60px; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.sec-consulting .text-area { flex: 0 0 35%; padding: 0; }
.sec-consulting .text-area .label {display: inline-block;position: relative;padding-left: 24px;color: #333;font-size: 20px;font-weight: 700;margin-bottom: 20px;}
.sec-consulting .text-area .label::before {content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 5px;height: 20px;background: var(--primary-green);border-radius: 2px;}
.sec-consulting .text-area h2 { font-size: 42px; line-height: 1.3; color: #111; margin-bottom: 30px; letter-spacing: -1px; }
.sec-consulting .text-area .divider { border: 0; height: 1px; background: #111; margin-bottom: 30px; }
.sec-consulting .text-area p {color: #888;font-size: 18px;line-height: 1.6;margin-bottom: 40px;word-break: keep-all;}
.sec-consulting .img-area { flex: 0 0 60%; overflow: hidden; border-radius: 20px; aspect-ratio: 9 / 5; }
.sec-consulting .img-area img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* News Section */
.sec-news { padding: 150px 0; text-align: center; background: #fafafa; border-bottom: 1px solid var(--border-color); }
.sec-news .sec-title { font-size: 64px; font-weight: 800; margin-bottom: 40px; color: #111; letter-spacing: 1px; font-family: 'Montserrat', sans-serif; }
.news-tabs { display: flex; justify-content: center; gap: 60px; margin-bottom: 50px; }
.news-tabs a { position: relative; color: #666; text-decoration: none; font-size: 16px; padding-bottom: 12px; transition: color 0.3s; }
.news-tabs a:hover { color: #111; }
.news-tabs a.active { color: var(--primary-orange); }
.news-tabs a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--primary-orange); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 40px; text-align: left; margin-bottom: 60px; }
.news-item { display: block; text-decoration: none; cursor: pointer; letter-spacing: -0.03rem; }
.news-item .img-wrap { overflow: hidden; margin-bottom: 20px; background: #eee; aspect-ratio: 16 / 10; border-radius: 0; }
.news-item .img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.news-item:hover .img-wrap img { transform: scale(1.05); }
.news-item .info-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.news-item .category { font-size: 16px; font-weight: 600; color: #444; }
.news-item .ico-arrow { font-size: 18px; color: #999; font-weight: 300; transition: transform 0.3s, color 0.3s; }
.news-item:hover .ico-arrow { color: #111; transform: translate(3px, -3px); }
.news-item .title { font-size: 24px; font-weight: 600; color: #111; line-height: 1.4; margin-bottom: 8px; word-break: keep-all; transition: color 0.3s; }
.news-item:hover .title { text-decoration: underline; text-underline-offset: 4px; }
.news-item .desc { font-size: 16px; color: #999; line-height: 1.5; word-break: keep-all; }

/* Location Section */
.sec-location { padding: 160px 0; text-align: left; background-color: #fff; }
.sec-location .sec-title { font-size: 48px; font-weight: 700; margin-bottom: 80px; text-align: center; }
.contact_map { height: 480px; margin-bottom: 40px; border: 1px solid #eee; border-radius: 10px; overflow: hidden; }
.contact_map iframe { width: 100%; height: 100%; }
.contact_info { display: flex; justify-content: space-between; gap: 60px; align-items: flex-start; padding: 0; color: #4b5563; }
.contact_rows { flex: 1 1 auto; }
.contact_row { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 28px; }
.contact_label { display: flex; align-items: center; gap: 20px; min-width: 240px; }
.contact_label h3 { font-size: 20px; font-weight: 600; color: #4b5563; margin: 0; }
.contact_icon { width: 24px; height: 24px; display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0.6; }
.icon-way { background-image: url("../images/icon/icon_way.png"); }
.icon-subway { background-image: url("../images/icon/icon_subway.png"); }
.icon-contact { background-image: url("../images/icon/icon_contact.png"); }
.contact_content { line-height: 1.5; text-align: left; }
.addr_main { margin: 0 0 5px; color: #374151; font-size: 16px; font-weight: 500; }
.addr_sub { margin: 0; color: #9ca3af; font-size: 14px; }
.subway_content { display: flex; align-items: center; gap: 18px; }
.subway_text p { margin: 0 0 8px; color: #4b5563; font-size: 16px; }
.subway_text p:last-child { margin-bottom: 0; }
.line_badge { display: inline-block; width: 60px; padding: 4px 0; margin-right: 10px; border-radius: 4px; background: #87C700; color: #fff; font-size: 12px; font-weight: 600; text-align: center; vertical-align: middle; }
.line_badge2 { display: inline-block; width: 60px; padding: 4px 0; margin-right: 10px; border-radius: 4px; background: #09A94E; color: #fff; font-size: 12px; font-weight: 600; text-align: center; vertical-align: middle; }
.contact_content p strong { color: #111827; }

/* =========================================
   5. SUB PAGE - COMMON
========================================= */
.sub-page { background: #fff; padding-top: 100px; }
.sub-page .inner {width: 100%;max-width: 1400px;margin: 0 auto;padding: 0 20px;position: relative;}
.sub-page .flex-container { display: flex; justify-content: space-between; align-items: center;   align-items: flex-start;}
.sub-page .align-center { align-items: center; }

/* Sub KV (Key Visual) */
.sub-kv { height: 320px; display: flex; align-items: center; background-size: cover; background-position: center; position: relative; justify-content: center; margin: 0; background-color: linear-gradient(to right, #8bb8ea, #d2e4f6, #8bb8ea); }
.about-us .sub-kv { margin: 0 100px;  background-position: top center;}
.history .sub-kv {  background-position: 50% center;}
.product .sub-kv { margin: 0; }
.partnership.p-main .sub-kv { margin: 0; height: 600px; }
.partnership.p-main .sub-kv h2 { text-align: left }
.partnership .sub-kv {  }
.media .sub-kv { margin: 0; }
.sub-kv::before { content: ''; position: absolute; inset: 0; }
.sub-kv h2 { position: relative; z-index: 1; color: #fff; font-size: 26px; font-weight: 700; font-family: 'Montserrat', sans-serif; letter-spacing: 1.5rem; text-shadow: 0 2px 10px rgba(0,0,0,0.2); text-align: center; }

/* Breadcrumb */
.breadcrumb { letter-spacing: 0.06rem; text-transform: uppercase; border-bottom: 1px solid #eee; padding: 15px 0; font-size: 11px; color: #9f9f9f; margin: 0 100px; }
.breadcrumb .inner { max-width: 100%; padding: 0; }
.breadcrumb span, .breadcrumb strong { margin: 0 8px; }
.breadcrumb .home { font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--text-dark); }
.breadcrumb strong { color: #111; font-weight: 600; }
.breadcrumb .home::before { content: ""; display: inline-block; width: 4px; height: 4px; background-color: orangered; margin-right: 12px; vertical-align: middle; }

/* Buttons & Components */
.btn-read {display: inline-flex;justify-content: center;align-items: center;position: relative;padding: 10px 80px 12px;border: 1px solid #ddd;background-color: #fff;border-radius: 30px;color: #666;font-size: 14px;font-weight: 600;text-decoration: none;transition: 0.3s;}
.btn-read::after { content: ""; position: absolute; right: 30px; top: 50%; width: 8px; height: 8px; border-top: 1px solid #666; border-right: 1px solid #666; transform: translateY(-50%) rotate(45deg); transition: right 0.3s, border-color 0.3s; }
.btn-read:hover { border-color: #333; color: #333; }
.btn-read:hover::after { border-top-color: #333; border-right-color: #333; right: 25px; }
.btn-download { display: inline-flex; align-items: center; justify-content: space-between; width: 400px; padding: 10px 20px 10px 30px; border: 1px solid #ddd; border-radius: 10px; text-decoration: none; color: #111; font-weight: 600; font-size: 20px; transition: 0.3s; }
.btn-download .ico-arrow { display: inline-block; width: 50px; height: 50px; background: var(--primary-green) url('../images/common/ico_dnld_w.png') no-repeat center center / 16px; border-radius: 50%; transition: transform 0.3s; }
.btn-download:hover { border-color: var(--primary-green); box-shadow: 0 5px 15px rgba(0,199,104,0.15); }
.btn-download:hover .ico-arrow { transform: translateY(3px); }
.btn_map_area { display: flex; flex-direction: row; gap: 15px; }
.btn_map_area .btn.middle { min-width: 200px; height: 40px; font-size: 15px; border-radius: 30px; }
.btn.naver { background-color: #00c73c; color: #fff; border: 0; }
.btn.google { border: 1px solid #ccc; background-color: #fff; color: #1a1a1a; }
.btn.naver:before, .btn.google:before { display: inline-block; width: 20px; height: 20px; margin-right: 8px; background-position: center; background-repeat: no-repeat; background-size: cover; vertical-align: text-bottom; content: ''; }
.btn.naver:before { background-image: url(../images/icon/ico_naver.png); }
.btn.google:before { background-image: url(../images/icon/ico_google.png); }
@media (hover:hover) and (pointer:fine) { .btn.naver:hover { background-color: #17b75e; } .btn.google:hover { border-color: #999; background-color: #f9f9f9; } }
.btn-wrap-center { display: flex; justify-content: center; }

/* Pagination */
.pagination-dots { display: flex; justify-content: center; gap: 30px; }
.pagination-dots .dot { width: 16px; height: 16px; background: #ddd; border-radius: 50%; cursor: pointer; }
.pagination-dots .dot.active { background: var(--primary-color); }
.pagination{ margin-top:40px; display:flex; justify-content:center; gap:16px; }
.page{ width:36px; height:36px; border-radius:50%; border:1px solid #ddd; display:flex; align-items:center; justify-content:center; font-size:14px; color:#777; }
.page.is-on{ background:#307860; border-color:#307860; color:#fff; }

/* Pill Buttons */
.pill { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 18px; border-radius: 2px; background: #fff; border: 1px solid #d7d7d7; color: #333; text-decoration: none; letter-spacing: -0.01em; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.pill:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06); }
.pill--blue { border-color: #2f6cff; }
.pill--coral { border-color: #ff6a5a; }
.pill--green { border-color: #2aa36b; }
.pill--blue2 { border-color: #87B1DE; }
.pill--coral2 { border-color: #F3C0B3; }
.pill--green2 { border-color: #A1CABC; }
.pill--gray { border-color: #d9d9d9; }

/* Consent / Privacy Form */
.consent { display: flow-root; text-align: left; font-size: 12px; line-height: 1.4em; padding: 20px 0; letter-spacing: -.03rem; border-top: #ccc solid 1px; border-bottom: #ccc solid 1px; }
.consent input { margin: 0 5px 0 0; padding: 0; vertical-align: top; border: #5E5241 solid 1px; width: 14px; height: 14px; }
input[type=checkbox] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; }
.consent label,.consent span { display: inline-block; text-align: left }
.consent label { padding-bottom: 10px }
.consent span { padding: 0 0 0 5px }
.consent .cont_policy1 { float: left; padding-top: 10px; color: #5E5241 }
.consent .cont_policy2 { float: right; }
.consent .cont_policy2 a { margin-left: 6px; float: right; border: 1px solid #bfbfbf; padding: 5px 15px; border-radius: 15px; display: inline-block; letter-spacing: -1px }
.consent .cont_agree { display: inline-block; padding: 0; clear: both; width: 100%; }
.consent .cont_agree .agreelabel { padding-top: 0!important; display: inline-block; font-size: 14px }

/* Sub Pages Base (About, History etc) */
.sec-overview { padding: 160px 0; }
.sec-overview .left-area {flex: 0 0 35%;}
.sec-overview .sec-title { font-size: 48px; color: #111; margin-bottom: 30px; }
.sec-overview .desc { font-size: 22px; color: #555; line-height: 1.4; margin-bottom: 40px; word-break: keep-all; }
.sec-overview .right-area {max-width: 100%;width: 720px;}
.info-list li { display: flex; justify-content: space-between; padding: 30px 10px; border-bottom: 1px solid #ddd; font-size: 20px; align-items: center; }
.info-list li .label { color: #666; font-weight: 600; }
.info-list li .value { color: #111; text-align: right; }
.info-list li .value strong { font-size: 32px; }

.sec-greeting { padding: 160px 0; background: #f9f9f9; }
.sec-greeting .text-area { flex: 0 0 50%; padding-right: 50px; }
.sec-greeting .sec-title { font-size: 48px; color: #111; margin-bottom: 40px; }
.sec-greeting .desc-wrap p { font-size: 20px; color: #555; line-height: 1.6; margin-bottom: 15px; word-break: keep-all; }
.sec-greeting .signature { margin-top: 50px; font-size: 24px; color: #111; text-align: left; }
.sec-greeting .img-area img { width: auto; max-width: 100%; max-height: 600px; display: block; border-radius: 20px; /*box-shadow: 0 10px 30px rgba(0,0,0,0.05);*/ }

.sec-mission { height: 900px; background-size: cover; background-position: center; display: flex; align-items: center; position: relative; }
.sec-mission::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.0) 60%); }
.sec-mission .text-box { z-index: 1; color: #fff; top: -80px; }
.sec-mission h3 { font-size: 64px; font-weight: 800; font-family: 'Montserrat', sans-serif; letter-spacing: 2px; margin-bottom: 15px; }
.sec-mission p { font-size: 24px; font-weight: 300; line-height: 1.5; letter-spacing: -0.5px; opacity: 0.9; }

.sec-vision { padding: 160px 0; border-bottom: 1px solid #eee; }
.sec-vision .text-area { flex: 0 0 35%; }
.sec-vision h3 { font-size: 64px; font-weight: 800; font-family: 'Montserrat', sans-serif; color: #111; margin-bottom: 20px; letter-spacing: 1px; }
.sec-vision p { font-size: 20px; color: #555; line-height: 1.5; font-weight: 500; word-break: keep-all; }
.sec-vision .img-area { flex: 0 0 55%; text-align: center; }
.sec-vision .img-area img { max-width: 100%; display: inline-block; }

.sec-corevalue { padding: 160px 0; background: #fff; }
.sec-title-center { font-size: 64px; font-weight: 800; font-family: 'Montserrat', sans-serif; color: #111; text-align: center; margin-bottom: 60px; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.val-item .img-wrap { overflow: hidden; margin-bottom: 25px; aspect-ratio: 1/1; background: #f5f5f5; }
.val-item .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.val-item:hover .img-wrap img { transform: scale(1.05); }
.val-item h4 { font-size: 24px; font-weight: 700; color: #111; margin-bottom: 15px; }
.badge { display: inline-block; padding: 4px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; font-family: 'Montserrat', sans-serif; color: #fff; margin-bottom: 20px; }
.badge-yellow { background: #cfb16a; }
.badge-orange { background: #ff8a48; }
.badge-green { background: #009b77; }
.val-item p { font-size: 16px; color: #666; word-break: keep-all; }

/* History Section */
.sub-page.history .flex-container {display: flex;gap: 150px;align-items: flex-start;justify-content: space-between;padding: 0 20px;}
.sec-history { padding: 120px 0 160px; }
.sec-history .left-area { width: 50%; position: sticky; top: 100px; height: fit-content; }
.sec-history .left-area .sec-title { font-size: 48px; margin-bottom: 30px; color: #111; }
.sec-history .left-area .desc { font-size: 20px; color: #555; line-height: 1.4; margin-bottom: 80px; word-break: keep-all; }
.sec-history .left-area .desc p { margin-bottom: 20px; }
.sec-history .history-images { display: flex; flex-direction: column; gap: 220px; position: relative; }
.sec-history .history-images img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); position: relative; }
.sec-history .right-area { width: 50%; }
.era-block { margin-bottom: 80px; }
.era-block h3 { font-size: 48px; color: #555; margin-bottom: 5px; font-weight: 600; }
.era-block > p { font-size: 20px; color: #555; margin-bottom: 50px; }
.timeline { padding-left: 30px; margin-left: 10px; }
.timeline-item { position: relative; display: flex; padding-bottom: 50px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: -33px; top: 7px; width: 1px; height: 100%; background-color: #929292; border-radius: 50%; }
.timeline-item:last-child::before { display: none; }
.timeline-year::after { content: ''; position: absolute; left: -40px; top: 7px; width: 16px; height: 16px; background-color: #333; border-radius: 50%; }
.timeline-year { font-size: 24px; font-weight: 600; width: 100px; flex-shrink: 0; color: #333; }
.timeline-events { flex-grow: 1; }
.timeline-events li { font-size: 18px; color: #444; margin-bottom: 6px; position: relative; padding-left: 20px; line-height: 1.6; }
.timeline-events li span { display: block; font-size: 16px; max-width: 440px; color: #666; letter-spacing: 0.06rem; margin: 6px 6px 12px 6px; }
.timeline-events li::before { content: '•'; position: absolute; left: 0; color: #666; }

.sec-achievements { background: url('../images/sub/achievements_bg.jpg') no-repeat center/cover; background-color: #333; position: relative; color: #fff; text-align: center; }
.sec-achievements .overlay { background-color: rgba(0, 0, 0, 0.05); padding: 120px 0; }
.sec-achievements h3 { font-size: 48px; margin-bottom: 30px; }
.sec-achievements > .overlay > .inner > p { font-size: 18px; margin-bottom: 60px; }
.stats-container { display: flex; justify-content: center; gap: 40px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.stat-circle { width: 360px; height: 360px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.circle-green { background-color: rgba(47,195,124,0.7); }
.circle-red { background-color: rgba(235,82,84,0.7); }
.circle-blue { background-color: rgba(80,144,223,0.7); }
.stat-circle .label { font-size: 24px; font-weight: 500; margin-bottom: 10px; }
.stat-circle .number { font-size: 128px; font-weight: 800; line-height: 1; font-family: Pretendard; }

/* =========================================
   6. SUB PAGE - PRODUCTS (LIST & VIEW)
========================================= */
/* Product List Container */
.product-page-container { display: flex; margin: 0 auto; padding: 50px 100px 80px; gap: 80px; }
.product-page-container .sidebar { width: 220px; flex-shrink: 0; padding-top: 10px; }
.product-page-container .category-group { margin-bottom: 40px; }
.product-page-container .category-title a { position: relative; font-size: 18px; font-weight: 600; color: #111111; margin-bottom: 16px; display: flex; align-items: center; gap: 20px; transition: all 0.3s ease; }


/*
.product-page-container .category-title a::after { content: ''; position: absolute; bottom: -5px; left: 50%; width: 0; height: 1px; background-color: var(--primary-orange); transition: width 0.3s ease, left 0.3s ease; transform: translateX(-50%); }
.product-page-container .category-title a:hover::after { width: 100%; }
*/

.product-page-container .category-title a:hover { color: #ff6b35; transition: all 0.3s ease; }
.product-page-container .category-title a:hover .dot { border-radius:0; transition: all 0.3s ease; }
.product-page-container .category-title .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; transition: all 0.3s ease; }

.product-page-container .category-title a:hover.orange { color: #ff6b35; }
.product-page-container .category-title a:hover.green { color: #4CAF50; }
.product-page-container .category-title a:hover.blue { color: #2196F3; }

.product-page-container .dot.orange { background-color: #ff6b35; }
.product-page-container .dot.green { background-color: #4CAF50; }
.product-page-container .dot.blue { background-color: #2196F3; }
.product-page-container .category-list { list-style: none; }
.product-page-container .category-list li { margin-bottom: 0; }
.product-page-container .category-list a { display: inline-block; text-decoration: none; color: #888888; font-size: 15px; padding: 4px 18px; border-radius: 20px; border: 1px solid transparent; transition: all 0.2s ease; }
.product-page-container .category-list a::before { content: ""; display: inline-block; width: 2px; height: 2px; background-color: #9e9e9e; margin-right: 12px; vertical-align: middle; }
.product-page-container .category-list a:hover { color: #333333; }
.product-page-container .category-list a:hover { color: #ff6b35; border-color: #ff6b35;  }
.product-page-container .category-list.border-green a:hover { color: #4CAF50; border-color: #4CAF50; }
.product-page-container .category-list.border-blue a:hover { color: #2196F3; border-color: #2196F3; }
.product-page-container .category-list a.active { color: #ff6b35; border-color: #ff6b35; font-weight: 500; }
.product-page-container .category-list.border-green a.active { color: #4CAF50; border-color: #4CAF50; font-weight: 500; }
.product-page-container .category-list.border-blue a.active { color: #2196F3; border-color: #2196F3; font-weight: 500; }

.product-page-container .product-list { flex-grow: 1; }
.product-page-container .content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.product-page-container .content-header h2 { font-size: 24px; font-weight: 600; color: #111111; }
.product-page-container .view-toggles { display: flex; gap: 8px; }
.product-page-container .toggle-btn { width: 38px; height: 38px; border-radius: 50%; background-color: #ffffff; border: 1px solid #e5e5e5; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; }
.product-page-container .toggle-btn:hover { border-color: #cccccc; }

/* Toggle Icons */
.product-page-container .icon-hamburger { width: 14px; height: 10px; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; position: relative; }
.product-page-container .icon-hamburger::after { content: ''; position: absolute; top: 2px; left: 0; width: 100%; height: 2px; background: #ccc; }
.product-page-container .icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 14px; height: 14px; }
.product-page-container .icon-grid span { background: #ccc; border-radius: 2px; }
.product-page-container .icon-list { width: 14px; height: 14px; border: 2px solid #ccc; border-radius: 2px; position: relative; }
.product-page-container .icon-list::before { content: ''; position: absolute; left: 2px; top: 2px; width: 2px; height: 2px; background: #ccc; box-shadow: 0 4px 0 #ccc; }
.product-page-container .icon-list::after { content: ''; position: absolute; left: 6px; top: 2px; width: 4px; height: 2px; background: #ccc; box-shadow: 0 4px 0 #ccc; }
.view-toggles .toggle-btn { transition: all 0.3s ease; }
.view-toggles .toggle-btn.active { border-color: #4CAF50; }
.view-toggles .toggle-btn.active .icon-hamburger, .view-toggles .toggle-btn.active .icon-list { border-color: #4CAF50; }
.view-toggles .toggle-btn.active .icon-hamburger::after { background: #4CAF50; }
.view-toggles .toggle-btn.active .icon-list::before, .view-toggles .toggle-btn.active .icon-list::after { background: #4CAF50; box-shadow: 0 4px 0 #4CAF50; }
.view-toggles .toggle-btn.active .icon-grid span { background: #4CAF50; }

/* Product Item Details */
.product-page-container .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px; }
.product-page-container .product-card { text-align: center; }
.product-page-container .img-wrap { background-color: #f6f6f6; border-radius: 8px; aspect-ratio: 1 / 1; margin-bottom: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center;  transition: all 0.3s ease;

border: 1px solid #efefef;
  border-radius: 15px;       /* 둥근 모서리 */
  
  /* x축 0, y축 0, 흐림 정도 0, 확산(굵기) 2px, 색상 blue */
  box-shadow: inset 0 0 10px 1px #efefef;


}
.product-page-container .img-wrap img { width: 100%; height: 100%; /*object-fit: contain;*/     object-fit: cover; }
.product-page-container .img-wrap:hover { border-color: var(--primary-orange); /*background-color: #F3B8B3;*/ transition: all 0.3s ease; cursor: pointer;  }
.product-page-container .product-title { font-size: 18px; color: #111111; margin-bottom: 10px; font-weight: 600; }
.product-page-container .badge { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; margin-bottom: 12px; }
.product-page-container .badge.orange { background-color: #ff6b35; color: #ffffff; }
.product-page-container .badge.green { background-color: #5ab38a; color: #ffffff; }
.product-page-container .badge.blue { background-color: #4a90e2; color: #ffffff; }
.product-page-container .product-sub { font-size: 12px; color: #999999; text-transform: capitalize; }
.btn-more-wrap { text-align: center; margin-top: 60px; }
.btn-more { background-color: #ffffff; color: #555555; border: 1px solid #e5e5e5; padding: 12px 80px; border-radius: 30px; font-size: 16px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 15px; transition: all 0.2s; }
/*.btn-more:hover { background-color: #f9f9f9; border-color: #cccccc; }*/
.icon-arrow-down { width: 8px; height: 8px; border-left: 1px solid #999; border-bottom: 1px solid #999; transform: rotate(-45deg); margin-bottom: 4px; }

/* Product List - View Modes */
/* Mode 1: Grid View */
.product-grid.view-type-grid { grid-template-columns: repeat(4, 1fr); }
/* Mode 2: List View */
.product-grid.view-type-list { grid-template-columns: 1fr; gap: 8px; }
.product-grid.view-type-list .product-card { position: relative; display: grid; grid-template-columns: 100px auto 1fr; grid-template-rows: auto auto; grid-template-areas: "img badge title" "img badge sub"; align-items: center; gap: 6px 30px; padding: 8px; border: 1px solid #e5e5e5; border-radius: 20px; background-color: #fff; justify-items: start; }
.product-grid.view-type-list .img-wrap { grid-area: img; width: 100%; margin: 0; background-color: #f5f5f5; border-radius: 12px; padding: 10px; box-sizing: border-box; }
.product-grid.view-type-list .badge { grid-area: badge; align-self: center; justify-self: center; margin: 0; }
.product-grid.view-type-list .product-title { grid-area: title; margin: 0; align-self: end; }
.product-grid.view-type-list .product-sub { grid-area: sub; margin: 0; align-self: start; }
.product-grid.view-type-list .product-card::after { content: ''; grid-area: arrow; justify-self: center; width: 20px; height: 20px; border-top: 1px solid #888; border-right: 1px solid #888; transform: rotate(45deg); transition: all 0.3s ease; position: absolute; right: 40px; }
.product-grid.view-type-list .product-card:hover::after { border-color: var(--primary-green); transform: rotate(45deg) translate(5px, -5px); }
/* Mode 3: Compact View */
.product-grid.view-type-compact { grid-template-columns: 50% 50%; gap: 15px; }
.product-grid.view-type-compact .product-card { display: grid; grid-template-columns: 120px 1fr 60px; grid-template-rows: auto auto auto; grid-template-areas: "img title arrow" "img badge arrow" "img sub arrow"; align-items: center; text-align: left; padding: 5px 0; border-radius: 15px; gap: 0px 30px; transition: all 0.3s; }
.product-grid.view-type-compact .img-wrap { grid-area: img; width: 100%; height: 100%; margin: 0; border-radius: 12px; }
.product-grid.view-type-compact .product-title { grid-area: title; font-size: 20px; font-weight: 700; color: #333; margin: 0; align-self: end; }
.product-grid.view-type-compact .badge { grid-area: badge; justify-self: start; margin: 0; }
.product-grid.view-type-compact .product-sub { grid-area: sub; display: block; color: #777; margin: 0; align-self: start; }
.product-grid.view-type-compact .product-card::after { content: ''; grid-area: arrow; justify-self: center; width: 20px; height: 20px; border-top: 1px solid #888; border-right: 1px solid #888; transform: rotate(45deg); transition: all 0.3s ease; }
.product-grid.view-type-compact .product-card:hover::after { border-color: var(--primary-green); transform: rotate(45deg) translate(5px, -5px); }

/* Product View Page */
.view-page-container { line-height: 1.6; max-width: 1080px; margin: 40px auto; padding: 0 20px; }
.product-section { margin-bottom: 60px; display: grid; grid-template-columns: 584px 1fr; gap: 40px 60px; }
.image-area { flex: 1; display: flex; justify-content: center; align-items: center; background-color: #f7f7f7; margin: 0; overflow: hidden; height: 500px; }
.image-area img { max-width: 100%; height: 100%; object-fit: cover; display: block; }
.details-area { flex: 1; display: flex; flex-direction: column; }
.section-header h2 { text-align: right; color: #666666; font-size: 20px; font-weight: bold; letter-spacing: 0.5rem; margin-bottom: 5px; font-family: 'Montserrat', sans-serif; }
.divider { border-bottom: 1px solid #dddddd; width: 100%; margin-bottom: 20px; }
.tag-area .tag-pill { display: flex; background-color: #ff6f3c; color: #ffffff; padding: 0px 15px; border-radius: 6px; font-size: 14px; margin-bottom: 10px; justify-content: center; width: fit-content; }
.title-with-icons {display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;position: relative;}
.title-with-icons h1 { color: #333333; font-size: 2rem; margin-bottom: 0; line-height: 1.3; padding: 5px 0; }
.icon-group {display: flex;gap: 15px;position: absolute;right: 10px;top: -32px;}
.icon-group .icon { color: #888888; font-size: 1.3rem; cursor: pointer; }
.icon-group .icon:hover { color: #333; }
.icon-group .icon img { height: 24px;}
.subtitle { color: #888888; font-size: 0.9rem; margin-bottom: 20px; }
.description { color: #666666; margin-bottom: 25px; word-break: keep-all; }
.attribute-list { display: flex; flex-direction: column; gap: 15px; margin-top: 10px; }
.attribute-item { display: flex; gap: 20px; font-size: 14px; }
.attribute-item .label { color: #333333; font-weight: bold; width: 80px; flex-shrink: 0; }
.attribute-item .value { color: #666666; }
.volume-options { display: flex; gap: 5px; }
.volume-btn { background-color: #ffffff; color: #666666; border: 1px solid #cccccc; padding: 8px 24px; border-radius: 5px;  transition: all 0.2s; }
.volume-btn:hover { border-color: #999; }
.volume-btn.selected { background-color: #555555; color: #ffffff; border: none; }
.naver-buy-btn { background-color: #30d235; color: #ffffff; width: 100%; padding: 14px; border-radius: 5px; font-size: 1.2rem; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: auto; transition: background-color 0.3s; }
.naver-buy-btn:hover { background-color: #27ae2e; }
.naver-buy-btn .naver-n { font-family: Arial, sans-serif; font-weight: bold; font-size: 1.3rem; }
.bottom-tab-bar { background-color: #555555; color: #ffffff; padding: 10px 150px; margin: auto; text-align: center; font-size: 16px; font-weight: bold; border-radius: 0; cursor: pointer; width: fit-content;}
.bottom-tab-bar:hover { background-color: #444; }

.product-content {position: relative;width: 100%;margin: auto;text-align: center; padding-bottom: 30px;}
.product-content:before { content: ''; position: absolute; top: 0; left:0; right: 0; width: 100%; height: 1px; background-color: #e0e0e0; }
.product-content .top-label { margin:0 auto 50px; background-color: rgb(89, 89, 89); width: 400px; line-height: 36px; border-radius: 0 0 20px 20px; font-weight: 400; font-size: 18px; color: #fff;}
.product-content img { margin: 10px auto; text-align: center; /*max-width: 860px;*/ max-width:100%; width: auto!important; }
.table_system { width: 100%; max-width:860px; border: 1px solid #cccccc; border-collapse: separate; border-spacing: 0; border-radius: 0px; overflow: hidden; margin: auto}
.table_system th, .table_system td { color:#666; font-size: 13px;  transform: rotate(0.1deg); padding: 0.9em 1.6em; border-bottom: 1px solid #cccccc; text-align: left; background-color: #fff; font-weight: 400; line-height: 1.3em;   }
.table_system th { width: 150px; background-color:#f6f7fb; text-transform: uppercase; }
.table_system th + th, .table_system td { border-left: 1px solid #cccccc;}
.table_system tr:last-child th, .table_system tr:last-child td { border-bottom: none;}

/* =========================================
   7. SUB PAGE - PARTNERSHIP
========================================= */
.sub-page.partnership { font-family: 'Pretendard', sans-serif; color: #333; word-break: keep-all; }
.sub-page.partnership img {max-width: 100%;display: block;max-height: 500px;}
.sub-page.partnership .inner h3 {font-size: 42px;font-weight: 700;margin-bottom: 40px;}
.sub-page.partnership .inner h4 {font-size: 20px; margin-bottom: 10px; }
.sub-page.partnership .inner p { font-size: 18px; color: #666; line-height: 1.6; }
.sub-page.partnership .inner .dev-sec p { font-size: 22px; margin-bottom: 15px; color: #333; }
.sub-page.partnership .pt-section {padding: 120px 0; border-bottom: 1px solid var(--border-color);}
.sub-page.partnership .text-center { text-align: center; }
.pd-40 { padding: 40px 0 !important;}

/* Hero Banners */
.sub-page.partnership .hero-banner { width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
.sub-page.partnership .hero-banner h2 { font-size: 40px; color: #fff; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.sub-page.partnership .hero-banner.bg-wave { background-image: url('../img/partnership/hero_wave.jpg'); }
.sub-page.partnership .hero-banner.bg-truck { background-image: url('../img/partnership/hero_truck.jpg'); }
.sub-page.partnership .bottom-banner {display: flex;justify-content: space-between;align-items: center;padding: 20px 40px 20px 60px;border-radius: 20px;margin: 100px auto 0;color: #fff;box-shadow: 0 10px 30px rgba(0,0,0,0.1);}
.sub-page.partnership .bottom-banner h3 {font-size: 22px;font-weight: 600;margin: 0;}
.sub-page.partnership .bottom-banner .btn-inquiry {display: inline-block;padding: 15px 80px;background: #fff;border-radius: 30px;font-weight: 700;text-decoration: none;}
.sub-page.partnership .bottom-banner.theme-green { background-color: #2e8b57; }
.sub-page.partnership .bottom-banner.theme-green .btn-inquiry { color: #2e8b57; }
.sub-page.partnership .bottom-banner.theme-blue { background-color: #3b5bdb; }
.sub-page.partnership .bottom-banner.theme-blue .btn-inquiry { color: #3b5bdb; }
.sub-page.partnership .bottom-banner.theme-purple { background-color: #845ef7; }
.sub-page.partnership .bottom-banner.theme-purple .btn-inquiry { color: #845ef7; }

/* Partnership Intro */
.sub-page.partnership.p-main .intro-wrap {display: flex;align-items: center;gap: 50px;}
.sub-page.partnership .intro-wrap {display: flex;align-items: center;gap: 50px;width: 1628px;}
.sub-page.partnership .intro-wrap .text-box {width: 650px;}
.sub-page.partnership .intro-wrap .text-box .sub-title {font-size: 36px;font-weight: 700;margin-bottom: 15px;font-family: Montserrat;color: #999;}
.sub-page.partnership .intro-wrap .text-box p {margin-bottom: 30px;}
.sub-page.partnership .intro-wrap .text-box .btn-theme {display: inline-block;padding: 12px 30px;color: #fff;border-radius: 4px;font-weight: bold;text-decoration: none;width: 400px;text-align: center;font-weight: 600;}
.sub-page.partnership .intro-wrap .img-box {flex: 1;border-radius: 0;overflow: hidden;}

/* Partnership Process List */
.sub-page.partnership .process-list {display: flex;justify-content: space-between;position: relative;margin-top: 40px;margin-bottom: 120px;padding: 30px;border: 10px solid #D7F0EC;border-radius: 180px; background-color: #fff;}
.sub-page.partnership .process-list .step::before {z-index: 1;content: '';display: inline-block;width: 36px;height: 36px;border-top: 1px solid #cacaca;border-right: 1px solid #cacaca;transform: rotate(45deg);position: absolute; right: -43px;}
.sub-page.partnership .process-list .step:last-child::before { display: none;} 
.sub-page.partnership .process-list .step {position: relative;z-index: 2;width: 200px;height: 200px;background: #fff;border-radius: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;box-shadow: 0 5px 15px rgba(0,0,0,0.15);border: 2px solid #fff;}
.sub-page.partnership .process-list .step .num {color: #41B8A4;font-size: 42px;font-weight: 500;border-bottom: 1px solid #bdbdbd;padding-bottom: 5px;margin-bottom: 10px;}
.sub-page.partnership .process-list .step .desc {font-size: 21px;font-weight: 600;text-align: center;}
.sub-page.partnership .inner .process-list p { font-size: 14px; color: #666; line-height: 1.2; width: 50%; margin-top: 10px; text-align: center; }


/* 01. Partnership Main */
.sub-page.partnership.p-main .stat-wrap {display: flex;justify-content: space-between;align-items: center;padding: 0 0 100px 0;border-bottom: 1px solid #eee;}
.sub-page.partnership.p-main .stat-wrap .text { display: flex; flex-direction: column; gap: 30px; max-width: 700px;}
.sub-page.partnership.p-main .stat-wrap h2 {font-size: 48px;font-weight: 800;}
.sub-page.partnership.p-main .stat-wrap h3 {font-size: 48px;font-weight: 800;}
.sub-page.partnership.p-main .stat-wrap p { font-size: 20px; color: #666;}
.sub-page.partnership.p-main .stat-wrap p span { font-size: 16px; padding: 8px 25px; border-radius: 20px; background: #fff; border: 1px solid #d7d7d7; color: #555; text-decoration: none; letter-spacing: -0.01em;}
.sub-page.partnership.p-main .stat-wrap .number {font-size: 180px;font-weight: 800;color: #40a8a8;background: linear-gradient(180deg, #46DC87 0%, #3A9DE3 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;}
.sub-page.partnership.p-main .stat-wrap .number span {font-size: 96px;color: #333;font-weight: 700;}
.sub-page.partnership.p-main .service-grid {display: flex;justify-content: space-between;margin-top: 60px;gap: 60px;}
.sub-page.partnership.p-main .service-grid .item { flex: 1; text-align: center; }
.sub-page.partnership.p-main .service-grid .item img {margin: 0 auto 20px;height: 300px;}
.sub-page.partnership.p-main .service-grid .item h4 {font-size: 36px;font-weight: 700;margin-bottom: 20px;font-family: 'Montserrat'; color: #555;}
.sub-page.partnership.p-main .service-grid .item h4 p { color: #999; font-weight: 600; font-size: 18px; margin-top: 10px;}
.sub-page.partnership.p-main .service-grid .item ul li {font-size: 18px;color: #666; padding: 8px;margin-bottom: 8px;border-radius: 30px;}
.sub-page.partnership .bg-gray { background: #f8f9fa; }
.sub-page.partnership.p-main .target-grid {display: flex;gap: 20px;margin-top: 80px;}
.sub-page.partnership.p-main .target-grid .t-item { flex: 1; position: relative; overflow: hidden; border-radius: 10px; }
.sub-page.partnership.p-main .target-grid .t-item img { transition: transform 0.3s; }
.sub-page.partnership.p-main .target-grid .t-item:hover img { transform: scale(1.05); }
.sub-page.partnership.p-main .target-grid .t-item h4 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 48px; font-weight: 400; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.sub-page.partnership.p-main .msg-wrap {display: flex;gap: 100px;align-items: center;margin-top: 80px;}
.sub-page.partnership.p-main .msg-wrap .img-box { flex: 1; border-radius: 20px; overflow: hidden; }
.sub-page.partnership.p-main .msg-wrap .text-box { flex: 1; }
.sub-page.partnership.p-main .msg-wrap .text-box h3 {line-height: 1.4;}
.sub-page.partnership.p-main .msg-wrap .text-box p { font-size: 24px; }
.sub-page.partnership.p-main .vision-wrap { text-align: center; margin-top: 100px; }
.sub-page.partnership.p-main .vision-wrap img {max-width: 580px;width: 100%; max-height: fit-content;  margin: 0 auto 60px;border-radius: 10px;}
.sub-page.partnership.p-main .vision-wrap .symbol { width: 128px; margin-top: 60px }


/* 전체 컨테이너: 가로 100% 및 넘치는 부분 숨김 */
.target-grid-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* 애니메이션을 담고 있는 래퍼 */
.target-grid-wrapper {
    display: flex;
    width: max-content; /* 내부 콘텐츠 길이에 맞춤 */
    animation: scroll-left 30s linear infinite; /* 왼쪽으로 흐르는 애니메이션 */
    gap:15px;
}

/* 기존 target-grid 스타일 수정 */
.target-grid {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.target-grid li {
    flex: 0 0 auto;
    width: 500px; /* 요청하신 이미지 사이즈 500px */
    display: flex;
    justify-content: center;
    align-items: center;
}

.target-grid li img {
    width: 100%;
    height: auto;
    display: block;
}

/* 애니메이션 정의: 0%에서 -50%(복제본 시작점)까지 이동 */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* 마우스 호버 시 멈추게 하고 싶을 경우 */
.target-grid-container:hover .target-grid-wrapper {
    animation-play-state: paused;
}


/* --- 모바일 대응 (768px 이하) --- */
@media (max-width: 768px) {
    .target-grid li {
        /* 모바일에서는 이미지 크기를 200px~250px 정도로 줄이는 것을 추천합니다 */
        width: 250px; 
    }

    .target-grid-wrapper {
        /* 간격이 너무 넓으면 어색하므로 모바일용 간격 조정 */
        gap: 10px;
        /* 화면이 좁아지면 이동 거리가 짧게 느껴져 느려 보일 수 있으므로 속도 조절 */
        animation-duration: 20s; 
    }
}

/* --- 초소형 기기 대응 (480px 이하) --- */
@media (max-width: 480px) {
    .target-grid li {
        /* width: 180px;  더 작은 화면을 위해 크기 추가 축소 */
    }
}


/* 02. B2B */
.sub-page.partnership.p-b2b .intro-wrap .sub-title span {color: #2e8b57;}
.sub-page.partnership.p-b2b .intro-wrap .btn-theme {background: #469B7F;}
.sub-page.partnership.p-b2b .bg-light-green {background: #EAF7E7;}
.sub-page.partnership.p-b2b .prod-circles {display: flex;justify-content: center;gap: 15px;margin-top: 80px;}
.sub-page.partnership.p-b2b .prod-circles .circle {width: 330px;height: 330px;background: #fff;border-radius: 50%;display: flex;flex-direction: column;align-items: center;justify-content: center;box-shadow: 0 5px 15px rgba(0,0,0,0.05);padding-top: 30px;}
.sub-page.partnership.p-b2b .prod-circles .circle h4 {font-size: 24px;font-weight: 700;margin-bottom: 5px; letter-spacing: -0.03rem;}
.sub-page.partnership.p-b2b .prod-circles .circle p { font-size: 16px; }
.sub-page.partnership.p-b2b .prod-circles .circle img {width: auto;height: 170px;}
.sub-page.partnership.p-b2b .moq-wrap {display: flex;justify-content: space-around;gap: 80px;margin-top: 40px;align-items: flex-end;}
.sub-page.partnership.p-b2b .moq-wrap .m-item { text-align: center; }
.sub-page.partnership.p-b2b .moq-wrap .m-item strong {display: block;font-size: 120px;font-weight: 700;margin-bottom: 10px;}
.sub-page.partnership.p-b2b .moq-wrap .m-item:nth-child(1) strong {color: #0D996A;}
.sub-page.partnership.p-b2b .moq-wrap .m-item:nth-child(2) strong { color: #339af0; }
.sub-page.partnership.p-b2b .moq-wrap .m-item:nth-child(3) strong { color: #b197fc; }
.sub-page.partnership.p-b2b .cases-wrap { display: flex; justify-content: space-between; margin-top: 50px; }
.sub-page.partnership.p-b2b .cases-wrap .c-item {text-align: center;flex: 1;position: relative;}
.sub-page.partnership.p-b2b .cases-wrap .c-item:before { content: ''; position: absolute; bottom: 0; left: 0; width: 1px; height: 50px; background-color: #e0e0e0; }
.sub-page.partnership.p-b2b .cases-wrap .c-item:nth-child(1)::before { display: none }
.sub-page.partnership.p-b2b .cases-wrap .c-item img {height: 200px;margin: 0 auto 20px;}
.sub-page.partnership.p-b2b .cases-wrap .c-item .num {font-size: 100px;font-weight: 900;color: #2e8b57;margin-bottom: 20px;}
.sub-page.partnership.p-b2b .cases-wrap .c-item .num span {font-size: 40px;font-weight: 400;margin-left: 10px;}
.sub-page.partnership.p-b2b .cases-wrap .c-item p { font-size: 14px; }

/* 03. OEM */
.sub-page.partnership.p-oem .intro-wrap .sub-title span { color: #3b5bdb; }
.sub-page.partnership.p-oem .intro-wrap .btn-theme { background: #3b5bdb; }
.sub-page.partnership.p-oem .dev-sec {display: flex;gap: 100px;align-items: center;margin-bottom: 60px;}
.sub-page.partnership.p-oem .dev-sec .img-box { flex: 1; border-radius: 10px; overflow: hidden; }
.sub-page.partnership.p-oem .dev-sec .img-box img { max-height: 420px;}
.sub-page.partnership.p-oem .dev-sec .text-box { flex: 1; }
.sub-page.partnership.p-oem .dev-sec .text-box h4 {font-size: 42px;font-weight: 600;margin-bottom: 20px;}
.sub-page.partnership.p-oem .dev-sec .text-box ul { padding-left: 20px; margin-bottom: 20px; }
.sub-page.partnership.p-oem .dev-sec .text-box ul li { list-style: disc; line-height: 1.8; color: #555; }
.sub-page.partnership.p-oem .dev-sec .text-box .quote {position: relative;padding: 10px 50px;font-weight: 700;color: #333;text-align: center;display: inline-block;font-size: 20px;}
.sub-page.partnership.p-oem .dev-sec .text-box .quote::before, .sub-page.partnership.p-oem .dev-sec .text-box .quote::after { content: "“"; position: absolute; font-size: 60px; opacity: 0.15; line-height: 1; font-family: emoji; }
.sub-page.partnership.p-oem .dev-sec .text-box .quote::before { left: 0; top: 5px; }
.sub-page.partnership.p-oem .dev-sec .text-box .quote::after { content: "”"; right: 0; bottom: -35px; }
.sub-page.partnership.p-oem .process-list { border-color: #dbe4ff; }
.sub-page.partnership.p-oem .process-list::before { background: #dbe4ff; }
.sub-page.partnership.p-oem .process-list .step .num { color: #3b5bdb; }

/* 04. Channel */
.sub-page.partnership.p-channel .intro-wrap .sub-title span { color: #845ef7; }
.sub-page.partnership.p-channel .intro-wrap .btn-theme { background: #845ef7; }
.sub-page.partnership.p-channel .channel-list { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.sub-page.partnership.p-channel .channel-list .c-card { display: flex; align-items: center; padding: 30px 40px; background: #fff; border: 1px solid #eee; border-radius: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.02); transition: transform 0.2s; }
.sub-page.partnership.p-channel .channel-list .c-card:hover { transform: translateY(-5px); border-color: #e5dbff; }
.sub-page.partnership.p-channel .channel-list .c-card .num {font-size: 40px;font-weight: 500;color: #b197fc;width: 80px;font-family: 'Montserrat';}
.sub-page.partnership.p-channel .channel-list .c-card h4 {font-size: 32px; width: 50%;}
.sub-page.partnership.p-channel .channel-list .c-card h4 span { display: block; font-size: 14px; font-weight: 400; color: #999; margin-top: 10px;}
.sub-page.partnership.p-channel .channel-list .c-card ul { flex: 1; border-left: 1px solid #eee; padding-left: 30px; }
.sub-page.partnership.p-channel .channel-list .c-card ul li { position: relative; padding-left: 15px; line-height: 1.6; color: #555; font-size: 15px; }
.sub-page.partnership.p-channel .channel-list .c-card ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; background: #845ef7; border-radius: 50%; }
.sub-page.partnership.p-channel .channel-list .c-card .icon { width: 80px; text-align: right; }
.sub-page.partnership.p-channel .channel-list .c-card .icon img { width: 100%; display: inline-block; }

/* 05. R&D */
.sub-page.partnership.p-rnd .intro-wrap .sub-title span {color: #ff993e;}
.sub-page.partnership.p-rnd .intro-wrap .btn-theme {background: #ff993e;}
.sub-page.partnership.p-rnd .awards-sec { background: #ff993e; color: #fff; padding: 80px 0; }
.sub-page.partnership.p-rnd .awards-sec .inner {display: flex;gap: 80px;align-items: center;}
.sub-page.partnership.p-rnd .awards-sec .text-box {width: 500px;text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}
.sub-page.partnership.p-rnd .awards-sec .text-box h3 {font-size: 64px;margin-bottom: 20px;line-height: 1.2;}
.sub-page.partnership.p-rnd .awards-sec .text-box p { font-size: 20px; color: #fff; margin-bottom: 20px;}
.sub-page.partnership.p-rnd .awards-sec .text-box p.add_txt { font-size: 13px; color: #fff; margin-top: 80px; }
.sub-page.partnership.p-rnd .awards-sec .cert-grid {flex: 1;display: grid;grid-template-columns: repeat(4, 1fr);gap: 25px;}
.sub-page.partnership.p-rnd .awards-sec .cert-grid img {width: 100%;border-radius: 5px;box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.sub-page.partnership.p-rnd .history-sec {display: flex;gap: 50px;align-items: flex-start;}
.sub-page.partnership.p-rnd .history-sec .img-box { flex: 1; }
.sub-page.partnership.p-rnd .history-sec .list-box {display: flex;gap: 30px;}
.sub-page.partnership.p-rnd .history-sec .list-box ul { flex: 1; }
.sub-page.partnership.p-rnd .history-sec .list-box ul li { font-size: 14px; color: #444; line-height: 1.8; margin-bottom: 5px; position: relative; padding-left: 10px; }
.sub-page.partnership.p-rnd .history-sec .list-box ul li::before { content: '·'; position: absolute; left: 0; top: 0; font-weight: bold; }
.sub-page.partnership.p-rnd .logos-wrap {display: flex;justify-content: space-between;align-items: center;padding: 18px 70px;border: 8px solid #e9e9e9;border-radius: 100px;margin-top: 100px;}
.sub-page.partnership.p-rnd .logos-wrap img {height: 90px;object-fit: contain;}

/* =========================================
   8. SUB PAGE - BOARD (LIST, VIEW, WRITE)
========================================= */
/* Board Header & Title */
.sub_title { position: relative; max-width: 100%; width: 100%; padding: 50px 0 70px; margin: 0 auto; text-align: center; border-bottom: #e5e5e5 solid 1px; margin-bottom: 70px; }
.sub_title span { display: block; margin-bottom: 20px; color: #666; font-size: 16px; line-height: 1.5; letter-spacing: 0.25px; }
.sub_title span b { color: #333; }
.sub_title span i { color: #b1b1b1; font-size: 16px; padding: 0 15px; }
.sub_title h3 { color: #2c2c2c; font-size: 64px; font-family: 'Montserrat', sans-serif; letter-spacing: -0.1px; font-weight: 800; }
.sub_title h3 span { font-size: 16px; color: #666; font-weight: 400; margin: 40px 0 0 0; }
.sub_title p { margin-top: 50px; color: #4c4c4c; font-size: 16px; line-height: 1.5; letter-spacing: -0.5px; }
.board { max-width: 1400px; margin:0 auto 80px }
.board-head__title { margin-bottom: 30px; font-size: 24px; }
.board-head__row { display: flex; align-items: center; gap: 20px; margin-bottom: 10px; }
.board-head__total { display: inline-block; margin-left: 8px; font-size: 14px; color: #444; font-weight: 400; }
.board-head__total b { color: #307860; font-weight: 700; }
.tabs { display: flex; align-items: center; gap: 16px; margin-left: 20px; }
.tabs__item {font-size: 16px;font-weight: 600;color: #999;}
.tabs__item.is-on { color: #000; }
.tabs__sep { color: #D9D9D9; }
.board-line { height: 1px; background: #333; opacity: .55; margin: 16px 0 0; }

/* Buttons & Toolbar */
.btn-write { margin-left: auto; padding: 0 20px; height: 30px; border-radius: 40px; background: #469B7F; color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.btn-detail { position: relative; width: 140px; height: 30px; padding: 0 18px; border-radius: 999px; border: 1px solid #e1e1e1; display: flex; align-items: center; gap: 10px; color: #444; font-size: 14px; background: #fff; white-space: nowrap; justify-content: center; }
.btn-detail i { display: block; position: absolute; font-size: 0; width: 6px; height: 6px; right: 10px; margin-top: 7px; border: 1px solid #b2b2b2; border-top: 0; border-left: 0; content: ""; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); }
.btn-detail:hover { border-color: rgba(70,155,127,.35); background: rgba(70,155,127,.06); color: #1f5f4d; }
.qa-toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.qa-select { position: relative; display: inline-flex; align-items: center; }
.qa-select select { height: 32px; min-width: 140px; padding: 0 44px 0 16px; border: 1px solid #e4e4e4; border-radius: 999px; background: #fff; color: #666; font-size: 13px; font-weight: 700; letter-spacing: -0.02em; outline: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.qa-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #b7b7b7; border-bottom: 2px solid #b7b7b7; transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.qa-select select:hover { border-color: #d6d6d6; }
.qa-select select:focus { border-color: rgba(58,143,116,.45); box-shadow: 0 0 0 4px rgba(58,143,116,.12); }
.media-search__field { position: relative; width: 180px; }
.media-search__field input { width: 100%; height: 32px; appearance: none; padding: 0 32px 0 14px; border: 1px solid #d9d9d9; border-radius: 999px; background: #fff; color: #222; font-size: 14px; line-height: 1; cursor: pointer; outline: none; }
.media-search__field input:focus { border-color: #222; }
.media-search__btn { position: absolute; right: 21px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; font-size: 14px; }
.media-search__btn::after { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; background: url(../images/icon/search.svg) center no-repeat; background-size: 100% auto; content: ''; transform: translate(-50%, -50%); filter: invert(20%) brightness(90%) sepia(10%) saturate(200%); }

/* Board List */
.board-item {display: grid;grid-template-columns: 120px 1fr 540px;gap: 10px;padding: 20px 0;border-bottom: 1px solid #eee;align-items: center;}
.item-thumb { width: 120px; height: 120px; overflow: hidden; background: var(--off); display: block; background-image: url(../images/common/main_titie.png); background-size: 80%; background-repeat: no-repeat; background-position: 50%; }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-main { min-width: 0; }
.item-left { display: flex; justify-content: center; }
.item-pill {display: inline-flex;align-items: center;width: 100px;height: 28px;padding: 0 14px;border-radius: 999px;border: 1px solid #d9d9d9;font-size: 13px;color: #666;background: #fff;justify-content: center;}
.item-main .item-pill { margin-bottom: 10px; }
.item-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.35; }
.item-title a { display: -webkit-box; -webkit-box-orient: vertical; color: var(--title); }
.item-title p { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; }
.board-item__meta { display: flex; align-items: center; justify-content: space-between; }
.edu-who { display: flex; align-items: center; gap: 16px; }
.who-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 180px; text-align: center; }
.who-role { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #c7c7c7; white-space: nowrap; text-align: center; width: 80px; text-transform: uppercase; }
.who-date { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #c7c7c7; white-space: nowrap; text-align: center; text-transform: uppercase; text-align: right; }
.ico-file { width: 44px; display: flex; }
.ico-file__ico { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; }
.ico-file__ico img { width: 20px; }
.ico-file__ico.is-pdf { background: #ff4b4b; }
.ico-file__ico.is-mp4 { background: #2da24a; }
.ico-file__ico.is-img { background: #ff8a1f; }
.ico-file__ico.is-doc { background: #3b7cff; }
.ico-file__ico.is-none { color: #999; font-weight: 800; }

/* Board View */
.board-view, .board-write { width: 760px; }
.view-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0 22px; }
.view-badge { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 30px; border-radius: 32px; font-size: 14px; background: #fff; color: #666; border: 1px solid #ddd; }
.view-admin { display: flex; align-items: center; gap: 10px; color: #666; font-size: 14px; }
.view-admin__link { color: #666; }
.view-admin__link:hover { color: #111; }
.view-admin__sep { color: #cfcfcf; }
.view-title { margin: 0 0 20px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; }
.view-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.view-meta__left { font-size: 16px; color: #111; }
.view-meta__left b { font-weight: 800; }
.view-meta__left span { font-size: 13px; font-weight: 700; color: #b0b0b0; margin-left: 10px; }
.view-meta__date { font-size: 13px; font-weight: 700; color: #b0b0b0; }
.meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 60px; padding: 14px 0; border-top: 1px solid #ddd; font-size: 14px; color: #222; }
.meta-grid__item { display: flex; align-items: baseline; gap: 24px; margin: 0; }
.meta-grid__label { min-width: 90px; color: #666; }
.meta-grid__value { margin: 0; font-weight: 600; color: #333; }
.meta-grid__value time { font-weight: 600; letter-spacing: 0.3px; }
.view-line { height: 1px; background: #666; opacity: .55; margin: 0 0 50px; }
.view-divider { height: 1px; background: #e9e9e9; margin: 40px 0; }
.view-figure { margin: 0; display: flex; justify-content: center; }
.view-figure img { width: auto; max-width: 100%; height: auto; display: block; }
.view-body { margin-top: 32px; font-size: 17px; line-height: 1.9; color: #444; }
.view-body p { margin: 0 0 20px; }
.view-body p:last-child { margin-bottom: 0; }
.view-body p img { max-width: 100%; }
.attach { margin: 45px 0; border-bottom: #666 solid 1px; }
.attach__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #444; border-top: #E6E6E6 solid 1px; height: 60px; }
.attach__label { color: #777; }
.attach__file { font-weight: 700; color: #222; }
.attach__file:hover { text-decoration: underline; }
.attach__icon { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #fff; display: inline-flex; align-items: center; justify-content: center; color: #ff7a00; font-weight: 900; transition: all 0.3s ease; }
.attach__icon img { height: 24px; }
.attach__icon:hover { border-color: #469B7F; transition: all 0.3s ease; }
.equip-view .attach__row { height: 40px; padding-top: 20px; }
.equip-view .attach__file { width: 80%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.view-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 22px; }
.view-nav__side { display: flex; align-items: center; gap: 12px; color: #666; font-size: 16px; }
.view-nav__side--prev { justify-content: flex-start; }
.view-nav__side--next { justify-content: flex-end; }
.view-nav__arrow { font-size: 26px; line-height: 1; color: #8d8d8d; }
.view-nav__list { height: 42px; padding: 0 32px; border-radius: 6px; background: #2f2f2f; color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; min-width: 240px; }
.view-nav__list:hover { background: #1f1f1f; }

/* Board Write */
.board-write { padding: 26px 0 70px; }
.write-head__title {margin: 0 0 30px;font-size: 20px;}
.write-form { display: flex; flex-direction: column; gap: 28px; }
.field { display: block; position: relative; }
.field__label { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #333; }
.req { color: #ff3b30; margin-left: 2px; }
.field__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.counter { font-size: 13px; color: #9a9a9a; margin-bottom: 10px; }
.counter b { color: #1f6dff; }
.tf {width: 100%;height: 42px;border-radius: 6px;border: 1px solid #e3e3e3;padding: 0 16px;outline: none;background: #fff;}
.tf::placeholder { color: #b5b5b5; }
.tf:focus { border-color: rgba(48,120,96,.55); box-shadow: 0 0 0 3px rgba(48,120,96,.10); }

/* 셀렉트 박스 기본 스타일 초기화 및 커스텀 화살표 적용 */
select.tf {
    -webkit-appearance: none; /* 크롬, 사파리, 엣지 */
    -moz-appearance: none;    /* 파이어폭스 */
    appearance: none;         /* 기본 브라우저 화살표 숨김 */
    
    /* 제공해주신 화살표 이미지를 배경으로 삽입 (우측에서 15px 띄우고 세로 중앙 정렬) */
    background-color: #fff; /* 배경색 (필요에 따라 수정) */
    
    /* 화살표 이미지 크기에 맞춰 텍스트가 겹치지 않도록 우측 여백 확보 */
    background-size: 25px 8px;
    padding: 0 1rem;
    background-image: url(../images/icon/arr_select.png);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    white-space: nowrap;
}

/* IE 10, 11 기본 화살표 숨김 처리 (호환성용) */
select.tf::-ms-expand {
    display: none;
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid2--date .tf { padding-right: 42px; }
.date { position: relative; }
.date__ico { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: .55; pointer-events: none; }
.seg { display: flex; flex-wrap: wrap; gap: 12px; }
.seg--sm { gap: 10px; }
.seg__item { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 90px; height: 26px; padding: 0 20px; border-radius: 36px; border: 1px solid #d8d8d8; background: #fff; color: #666; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.seg__item input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg__item:has(input:checked) { border-color: #469B7F;
    background: #469B7F; color: #fff; }
.seg--sm .seg__item:has(input:checked) { background: #c16e6e; border-color: #c16e6e; }
.editor { border: 1px solid #e3e3e3; border-radius: 6px; overflow: hidden; background: #fff; }
.editor__bar { height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #3f3f3f; color: #fff; }
.tool { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 800; opacity: .95; }
.editor__area { width: 100%; min-height: 280px; border: 0; outline: none; padding: 16px; font-size: 16px; line-height: 1.7; resize: vertical; }
.editor__area::placeholder { color: #b5b5b5; }
.uploader { display: flex; align-items: center; gap: 12px; }
.file-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 20px; border-radius: 12px; border: 1px dashed #d8d8d8; background: #fafafa; color: #666; font-weight: 700; font-size: 14px; cursor: pointer; }
.file-btn input { display: none; }
.help { margin: 8px 0 0; font-size: 13px; color: #9a9a9a; }
.file-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.file-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 20px; border-radius: 12px; background: #f6f6f6; }
.file-item__name { font-size: 13px; color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face-img { height: 30px; background-color: #ffffff; border-radius: 0; }
.file-item__del { width: 30px; height: 30px; border-radius: 999px; border: 0; font-weight: 200; font-size: 30px; line-height: 1; cursor: pointer; }
.file-item__del:hover { color: #111; }
.form-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.btn { max-width: 240px; width: 100%;  border: 1px solid #d9d9d9; background: #fff; color: #666; height: 42px; padding: 0 32px; border-radius: 6px; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.btn img { height: 18px; margin-right: 8px; }
.btn--ghost:hover { border-color: #bdbdbd; color: #333; }
.btn--primary { border-color: #469B7F; background: #469B7F; color: #fff; }
.btn--primary:hover { background: #3b8a71; border-color: #3b8a71; }
.btn--black { border-color: #2f2f2f; background: #2f2f2f; color: #fff; }
.btn--black:hover { background: #1f1f1f; }
.btn--red { background: #FF4C4F; border-color: #FF4C4F; color: #fff; }
.btn--green { background: #469B7F; border-color: #469B7F; color: #fff; }

/* =========================================
   9. FOOTER
========================================= */
footer { background-color: #f4f4f4; padding: 60px 0 30px; font-size: 14px; color: #666; }
.footer-inner { max-width: 100%; margin: 0 auto; padding: 0 100px; }
.footer-top { display: flex; align-items: center; gap: 25px; margin-bottom: 40px; flex-direction: row; }
.footer-logo img { height: 20px; display: block; }
.download-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #fff; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; color: #333; font-weight: 500; text-decoration: none; transition: background 0.3s; }
.download-btn img { width: 14px; }
.download-btn:hover { background: #f9f9f9; }
.footer-mid { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
.info-grid { display: grid; grid-template-columns: 300px 1fr; row-gap: 18px; column-gap: 30px; }
.info-item { display: flex; align-items: center; }
.info-label { font-weight: 700; color: #555; width: 100px; flex-shrink: 0; }
.info-value { color: #777; }
.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 35px; }
.sns-icons { display: flex; column-gap: 20px; }
.sns-icons a img { width: 32px; height: 32px; filter: grayscale(100%) contrast(0) brightness(0.4); transition: opacity 0.3s, filter 0.3s; opacity: 0.7; }
.sns-icons a:hover img { filter: grayscale(100%) contrast(0) brightness(0.2); opacity: 1; }
.policy-links { display: flex; gap: 24px; }
.policy-links a { font-weight: 700; color: #555; text-decoration: none; transition: color 0.3s; }
.policy-links a:hover { color: #111; }
.btn_totop { position: fixed; right: 40px; bottom: 40px; width: 50px; height: 50px; background-color: rgba(0,0,0,0.3); border-radius: 50%; z-index: 999; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: background-color 0.3s, transform 0.3s; }
.btn_totop::after { content: ''; width: 14px; height: 14px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg); margin-top: 6px; }
.btn_totop:hover { background-color: #4f9479; transform: translateY(-5px); }
.footer-bottom { border-top: 1px solid #e5e5e5; padding-top: 20px; text-align: right; }
.copyright { font-size: 13px; color: #888; }





/* 탭 링크 기본 */

.sub_title h3 a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #DFDFDF;
    font-size: 32px;
}

.sub_title h3 a:hover {
    color: #333
}


/* 두 번째 a부터 적용 */

.sub_title h3 a + a::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 36px;
    background: #ddd;
    margin: 0 60px;
}

.sub_title h3 a.on {
    color: #333;
}


.privacy {
    display: block;
    max-width: 1000px;
    margin: auto;
    text-align: left;
    padding: 20px 40px;
}

.privacy .title {}

.privacy .title h2 {
    font-size: 24px;
    margin: 30px 0;
}

.privacy .title h2 .ver {
    font-size: 14px;
    color: #333;
    letter-spacing: 0;
    padding-left: 10px;
}

.privacy .section h3 {
    margin: 10px 0 10px;
    color: #333;
    letter-spacing: -0.03em;
    font-size: 16px;
}

.privacy .section h4 {
    margin: 20px 0 16px;
    color: #333;
    letter-spacing: -0.03em;
    font-size: 14px;
}

.privacy .title p {
    font-size: 13px;
    color: #808080;
    letter-spacing: -0.03em;
}

.privacy .title .link {
    position: absolute;
    right: 0;
    bottom: 33px;
    font-size: 12px;
}

.privacy .section {
    padding: 20px 0 30px;
    border-top: 1px solid #e5e5e5;
    line-height: 18px;
    font-size: 13px;
    color: #666;
}






/* =========================================
   10. MEDIA QUERIES (Responsive)
========================================= */
@media (max-width: 1440px) {
    header { padding: 20px 40px; }
    .sub-kv, .breadcrumb { margin: 0 !important; }
    .inner { max-width: 100%; }
    .swiper-slide .content, .sub-page .inner, .board {padding: 0 10px;}
    .breadcrumb .inner { padding: 0; }
    
}

@media (max-width: 1200px) {
    .inner { max-width: 100%; padding: 0 40px; }
    .footer-inner { max-width: 100%; padding: 0 40px; }
    .grid{grid-template-columns:repeat(3,1fr)}
    .board-item { grid-template-columns: 160px 1fr; }
    .board-item__meta { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 1024px) {
    #header { padding: 15px 20px; align-items: center; }
    .logo a { display: flex}
    .logo img { height: 26px; width: auto; }
    .main-menu, nav .main-menu { display: none; }
    .header-utils a { display: none; }
    .btn-mobile-menu {display: flex;align-items: center;background-color: rgba(255,255,255,0.9);padding: 6px;border-radius: 20px;}
    .mega-menu { position: fixed; top: 60px; left: 0; width: 100%; height: calc(100vh - 60px); height: calc(100dvh - 60px); background-color: #ffffff; box-shadow: none; border-top: 1px solid #eaeaea; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; z-index: 990; }
    header:hover .mega-menu { max-height: none; opacity: 0; visibility: hidden; transform: translateY(-20px); padding: 0; }
    header:hover .mega-menu.mobile-active, .mega-menu.mobile-active { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; padding: 10px 0 30px 0 !important; max-height: none !important; z-index: 999 !important; }
    .mega-inner { flex-direction: column; padding: 0 15px; gap: 15px; }
    .mega-col.col-product { flex: auto; }
    .mega-title { text-align: left; padding: 8px 15px; font-size: 16px; font-weight: 600; background-color: #f5f5f5; color: #333; }
    .col-product .sub-groups { flex-direction: column; margin: 5px 0 0 20px; gap: 10px; }
    .sub-list li a { padding: 10px 15px; display: block; font-size: 15px; color: #555; }
    .sub-list-dot li a { padding: 0px 5px; display: block; font-size: 14px; color: #555; }

    .sub-list li a:hover::before {
    background:none;

}
    
    
    .search-layer-inner { width: 90%; padding: 20px; }
    .search-input-wrap input { font-size: 18px; }
    .btn-search-close { right: 10px; }
    .services { flex-direction: column; padding: 80px 40px; }
    .service-info { width: 100%; position: static; text-align: center; margin-bottom: 50px; }
    .service-cards { width: 100%; gap: 20px; }
    .deco-arrow { display: none; }
    .sec-consulting .flex-container {flex-direction: column-reverse; gap: 20px; padding: 0 20px;}
    .sec-consulting .text-area, .sec-consulting .img-area { flex: 1; width: 100%;  border-radius: 0 }
    .news-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
    .contact_info { flex-direction: column; gap: 40px; }
    .btn_map_area { flex-direction: row; width: 100%; justify-content: flex-start; }
    .info-grid { grid-template-columns: 50% 50%; column-gap: 0; }
    .product-page-container { padding: 40px 30px; gap: 40px; }
    .product-page-container .product-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 20px; }
    .sec-overview .flex-container, .sec-greeting .flex-container, .sec-vision .flex-container { gap: 40px; }
    .btn-download { width: 100%; font-size: 16px; }
    .value-grid { gap: 20px; }
    .btn-download .ico-arrow { width: 36px; height: 36px; }
    .product-content { padding: 0 15px 30px}
    
    .table_system {max-width:100% !important; } 
}

@media (max-width: 900px) {
    .grid{grid-template-columns:repeat(2,1fr);column-gap: 2px;row-gap: 4px;}
    .board-head__row{flex-wrap:wrap}
    .board-head__total { margin-left:0}
    .tabs{margin-left:0}
    .board-head__title { font-size: 20px; display: none;}  
    .board-view, .board-write { width: auto; margin: auto; padding: 0 20px 80px; }
    .view-meta { flex-wrap: wrap; align-items: flex-start; }
    .view-line { margin-bottom: 32px; }
    .view-body { line-height: 1.6; letter-spacing: -0.3px; }
    .grid2 { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
    .view-page-container { max-width: 100%; margin: 0 auto; padding: 0; line-height: normal; }
    .product-section { display: flex; flex-direction: column; gap:0  }
    .image-area { padding: 0; }
    .title-with-icons h1 { font-size: 1.6rem; }
    .volume-options { flex-wrap: wrap; }
    .details-area { padding:  0 20px;}
    .product-content .top-label { margin: 0 auto 50px; background-color: rgb(89, 89, 89); width: 200px; line-height: 30px; border-radius: 0 0 20px 20px; font-weight: 400; font-size: 16px; color: #fff; }
    .attribute-list { margin: 0 0 20px 0}
    .attribute-item { gap: 10px;}
    .section-header { display: none; }
}

@media (max-width: 768px) {
    .inner, .footer-inner {padding: 0 20px;}
    header { padding: 15px 20px; }
    header.scrolled { padding: 10px 20px; }
    header nav { display: none; }
    .header-utils { gap: 12px; }
    .search-layer-inner { padding: 0 20px; }
    .search-input-wrap input { font-size: 18px; }
    .btn-search-close { right: -10px; top: -10px; }
    .swiper-slide { padding: 0 20px; align-items: flex-end; padding-bottom: 100px; }
    .swiper-slide .content { max-width: 100%; width: 100%; }
    .swiper-slide .main-title { font-size: 48px !important; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 15px; }
    .swiper-slide .main-title img { max-width: 100%; }
    .swiper-slide .main-desc { font-size: 15px !important; margin-bottom: 30px; }
    .swiper-slide .btn-wrap { flex-direction: column; gap: 10px; }
    .swiper-slide .btn { width: 100%;min-width: 240px;  justify-content: center; padding: 14px; font-size: 14px; }
    .side-nav { top: 88%; right: 10px; gap: 0px; }
    .swiper-pagination-bullet { font-size: 0px !important; }
    .swiper-pagination-bullet-active { transform: translateX(-10px); }
    .swiper-pagination-bullet-active::after { content: ''; position: absolute; right: -25px; top: 50%; transform: translateY(-50%); width: 3px; height: 10px; background: #fff; border-radius: 0; }
    .custom-pagination { gap: 15px; margin-right: 6px; padding-right: 12px; border-right: 3px solid rgba(255, 255, 255, 0.3); }
    .scroll-down { bottom: 80px; font-size: 9px; }
    .sec-intro { padding: 80px 0; }
    .intro-header .nc-logo { width: 80px; margin-bottom: 15px; }
    .intro-header .title { font-size: 24px; }
    .intro-header .desc { font-size: 15px; margin-top: 15px; margin-bottom: 40px; }
    .intro-cards { flex-direction: column; gap: 25px; }
    .intro-cards .card .text-wrap { padding: 25px 20px; }
    .intro-cards .card h3 { font-size: 18px; }
    .intro-cards .card:nth-child(1), .intro-cards .card:nth-child(2) { transform: translateY(50px); }
    .intro-cards .card.visible { transform: translateY(0); }
    .intro-cards .card .img-wrap img { width: 70%; max-width: 300px; margin: auto; }
    .services { padding: 80px 20px; }
    .service-title { font-size: 32px; margin-bottom: 15px; }
    .service-desc { font-size: 15px; margin-bottom: 30px; }
    .service-cards { flex-direction: column; gap: 40px; }
    .card-img-wrap { margin-bottom: 20px; }
    .card-title { font-size: 20px; }
    .card-text { font-size: 14px; margin-bottom: 20px; }
    .quality-bg {height: 480px;padding: 0 20px;text-align: center;}
    .quality-bg::before { background: rgba(0,0,0,0.5); }
    .quality-bg h2 {font-size: 28px;}
    .quality-bg p { font-size: 14px; margin-top: 15px; }
    .quality-features .feat-list {padding: 20px 0;gap: 0;}
    .quality-features .item h4 {font-size: 18px;}
    .quality-features .item p {font-size: 12px;word-break: keep-all;padding: 0 10px;}
    .quality-features .item p br { display:none}  
    .quality-features .item .sub::after { left: 10%; width: 80%; }
    .quality-features .item .sub { font-size: 0; }
    .sec-products { padding: 80px 0; }
    .sec-products .sec-header h2 { font-size: 28px; }
    .sec-products .sec-desc { font-size:16px; margin:0 40px}
    .prd-grid {grid-template-columns: repeat(2, 1fr);gap: 10px;padding: 0;}
    .prd-item { padding: 15px; border-radius: 10px; }
    .hover-content .prd-title { font-size: 18px; margin-bottom: 5px; }
    .hover-content .prd-hash { font-size: 11px; margin-bottom: 20px; }
    .hover-content .btn-inquiry-black { padding: 6px 0; font-size: 11px; width: calc(100% - 16px); }
    .sec-partners { padding: 80px 0; }
    .sec-partners .sec-title { font-size: 28px; margin-bottom: 15px; }
    .sec-partners .sec-desc { font-size: 15px; margin-bottom: 30px; }
    .partner-grid {grid-template-columns: repeat(2, 1fr);gap: 10px;margin-bottom: 30px;padding: 0;}
    .pt-logo { box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1); }
    .pt-logo img {max-height: 80px;}
    .pagination-dots { gap: 15px; }
    .pagination-dots .dot { width: 12px; height: 12px; }
    
    .sec-consulting { padding: 0 0 80px 0; }
    .sub-page .sec-consulting { padding: 0 0 80px 0; }
    
    
    .sec-consulting .text-area .label { font-size: 14px; margin-bottom: 15px; }
    .sec-consulting .text-area h2 { font-size: 26px; margin-bottom: 20px; }
    .sec-consulting .text-area .divider { margin-bottom: 20px; }
    .sec-consulting .text-area p { font-size: 15px; margin-bottom: 30px;    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden; }
    
    
    .btn-read {width: 100%;justify-content: center;}
    .sec-news {padding: 60px 0px;}
    .sec-news .sec-title { font-size: 32px;}
    .news-tabs {gap: 10px 20px;flex-wrap: wrap;margin-bottom: 30px;display: grid;grid-template-columns: repeat(3, 1fr);gap: 15px 10px;/* border: 1px solid #dddddd; */}
    .news-tabs a { font-size: 14px; padding-bottom: 14px; }
    .news-grid { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; }
    .news-item .title { font-size: 20px; }
    .sec-location { padding: 80px 0; }
    .sec-location .sec-title { font-size: 32px; margin-bottom: 30px; }
    .contact_map { height: 260px; margin-bottom: 30px; border-radius: 8px; }
    .contact_info {gap: 30px;padding: 0 20px;}
    .contact_row { flex-direction: column; gap: 10px; margin-bottom: 35px; }
    .contact_label { min-width: auto; gap: 10px; margin-bottom: 5px; }
    .contact_label h3 { font-size: 18px; }
    .contact_icon { width: 20px; height: 20px; }
    .addr_main { font-size: 15px; }
    .addr_sub { font-size: 13px; }
    .subway_text p, .contact_content p { font-size: 14px; }
    .subway_content { align-items: flex-start; flex-direction: column; gap: 10px; }
    .btn_map_area { flex-direction: column; gap: 10px; }
    .btn_map_area .btn.middle { width: 100%; min-width: 100%; height: 45px; }
    footer {padding: 30px 10px 0;}
    .footer-top { display: flex; margin-bottom: 30px; justify-content: space-between; }
    .footer-mid { flex-direction: column; align-items: flex-start; gap: 40px; margin-bottom: 30px; }
    .info-item { flex-direction: column; align-items: flex-start; gap: 4px; }
    .info-label { width: auto; font-size: 13px; }
    .info-value { font-size: 13px; }
    .footer-right { align-items: center; gap: 20px; width: 100%; }
    .sns-icons { justify-content: flex-start; gap: 15px; }
    .policy-links { flex-wrap: wrap; }
    .footer-bottom { padding: 15px; text-align: center; }
    .copyright { font-size: 10px; }
    .btn_totop { right: 20px; bottom: 20px; width: 45px; height: 45px; }
    .btn_totop::after { width: 12px; height: 12px; margin-top: 4px; }
    .mySwiper { height: 100dvh !important; }
    .sub-page { padding-top: 66px; }
    .sub-kv { height: 200px; margin: 0; }
    .sub-kv h2 { font-size: 21px; letter-spacing: 0.3rem; }
    .breadcrumb { margin: 0; padding: 8px 15px; font-size: 9px; }
    
    .sec-consulting .flex-container { flex-direction: column-reverse; gap: 40px; padding: 0; }
    .sub-page .flex-container { flex-direction: column-reverse; gap: 40px; padding: 0; }
    
    .sec-consulting .text-area { padding: 0 30px;}
    
    .sub-page .sec-greeting .flex-container { flex-direction: column-reverse; }
    .sec-overview { padding: 60px 0; }
    
    
    .sec-overview .sec-title, .sec-greeting .sec-title { font-size: 28px; margin-bottom: 20px; }
    .info-list li { font-size: 15px; padding: 20px 5px; }
    .info-list li .value strong { font-size: 20px; }
    .sec-overview .desc {font-size: 16px;}
    .sec-overview .desc br { display: none; }
    .sec-greeting { padding: 60px 0 90px; }
    .sec-greeting .text-area { padding-right: 0; }
    .sec-greeting .desc-wrap p { font-size: unset; }
    .sec-greeting .signature { margin-top: 30px; font-size: 20px; }
    .sec-mission { height: 300px; }
    .sec-mission h3 { font-size: 32px; }
    .sec-mission p { font-size: 16px; }
    .sec-vision { padding: 60px 0; text-align: center; }
    .sec-vision h3 { font-size: 32px; }
    .sec-vision p { font-size: 16px; }
    .sec-corevalue { padding: 60px 0; }
    .sec-title-center { font-size: 32px; margin-bottom: 40px; }
    .value-grid { grid-template-columns: 1fr; gap: 40px; }
    .val-item .img-wrap { max-width: 80%; margin: 0 auto 20px; }
    .sub-page.history .flex-container { flex-direction: column; gap: 40px; }
    .sec-history { padding: 60px 0; }
    .sec-history .left-area, .sec-history .right-area { width: 100%; }
    .sec-history .left-area { position: relative; top: 0; }
    .sec-history .left-area .sec-title { font-size: 28px; margin-bottom: 20px; }
    .sec-history .left-area .desc { font-size: 16px; margin-bottom: 40px;}
    .sec-history .history-images { gap: 20px; margin-bottom: 60px;}
    
    .era-block { margin-bottom: 80px; }
    .era-block h3 {font-size: 36px;}
    .era-block > p {font-size: 16px;margin-bottom: 40px;}
    .timeline {padding-left: 30px;ma;margin-left: 10px;}
    .timeline-item {position: relative;display: flex;padding-bottom: 30px;flex-direction: column;}
    .timeline-item:last-child { margin-bottom: 0; }
    .timeline-item::before { content: ''; position: absolute; left: -33px; top: 7px; width: 1px; height: 100%; background-color: #929292; border-radius: 50%; }
    .timeline-item:last-child::before { display: none; }
    .timeline-year::after { content: ''; position: absolute; left: -40px; top: 7px; width: 16px; height: 16px; background-color: #333; border-radius: 50%; }
    .timeline-year {font-size: 24px;margin-bottom: 20px;}
    .timeline-events { flex-grow: 1; }
    .timeline-events li {font-size: 16px;color: #444;margin-bottom: 6px;position: relative;padding-left: 20px;line-height: 1.6;}
    .timeline-events li span { display: block; font-size: 16px; max-width: 440px; color: #666; letter-spacing: 0.06rem; margin: 6px 6px 12px 6px; }
    .timeline-events li::before { content: '•'; position: absolute; left: 0; color: #666; }
    
    .stat-circle {width: 260px;height: 260px;}
    .stat-circle .label {font-size: 22px;margin-bottom: 20px;}
    .stat-circle .number {font-size: 90px;font-weight: 800;}
    
    
        .sec-overview, .sec-greeting, .sec-vision, .sec-history {padding: 30px 0;}

    
    
    .stats-container { flex-direction: column; align-items: center; }
    .logo-grid { grid-template-columns: repeat(3, 1fr); }
    .product-page-container { flex-direction: column; padding: 30px 20px; gap: 30px; }
    .product-page-container .sidebar { position: relative; width: 100%; padding-top: 0; border: #cdcdcd solid 1px; border-radius: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid #dddddd; } 
    .product-page-container .sidebar .category-group {margin-bottom: 0;/* border: #cdcdcd solid 1px; */width: 100%;display: flex; } 
    .product-page-container .sidebar .category-group:before { content: ""; position: absolute; width: 1px; height: 35%; background-color: #d9d9d9; top: 50%; transform: translateY(-50%); margin-left: -3px;} .product-page-container .sidebar .category-group:nth-child(1):before { display: none;}
    .product-page-container .category-group:hover,.product-page-container .category-group.check { border-color:orange}
    .product-page-container .category-title { font-size: 14px; margin: auto; padding: 6px 0; }
    .product-page-container .category-title a {font-size: 14px; margin: auto; padding: 6px 0; font-weight: normal; letter-spacing: -0.03rem}
    
    .product-page-container .category-list { display: none; }
    .product-page-container .category-title .dot { display: none; }
    .product-page-container .content-header { /*flex-direction: column;*/ align-items: flex-start; gap: 15px; margin-bottom: 20px; flex-direction: row; align-items: center; gap: 15px; margin-bottom: 20px; display: flex; }
    .product-page-container .content-header h2 { font-size: 18px; letter-spacing: -0.03rem}
    .product-page-container .view-toggles { align-self: flex-end; }
    .product-page-container .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 15px; }
    .product-page-container .btn-more-wrap { margin-top: 40px; }
    .product-grid.view-type-compact .product-card { grid-template-columns: 100px 1fr 30px; padding: 10px 0; gap: 3px 15px; }
    .product-grid.view-type-compact .img-wrap { height: 100px; }
    .product-grid.view-type-compact .product-title { font-size: 16px; }
    .product-grid.view-type-compact .badge { font-size: 11px; padding: 2px 10px; }
    .product-grid.view-type-compact .product-sub { font-size: 12px; }
    .product-grid.view-type-compact .product-card::after { width: 12px; height: 12px; }
    .meta-grid { gap: 4px 20px; font-size: 12px; }
    .meta-grid__item { gap: 16px; }
    .meta-grid__label { min-width: 40px; }
}


/* =========================================
   모바일 반응형 (최대 768px 기준)
========================================= */
@media (max-width: 768px) {
    /* -------------------------------------
       [Mode 2] List View 모바일 스타일
    ------------------------------------- */
.product-grid.view-type-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .product-grid.view-type-list .product-card {
        /* 이미지 영역을 100px -> 80px로 축소, 좌우 간격 30px -> 15px로 축소 */
        grid-template-columns: 80px auto 1fr;
        gap: 4px 10px;
        padding: 6px;
        border-radius: 48px 0 48px  48px;
    }

    .product-grid.view-type-list .img-wrap {
        padding: 5px;
        /* 이미지 박스 안쪽 여백 축소 */
        border-radius: 50px;
    }

    .product-grid.view-type-list .badge {
        font-size: 10px;
    }

    .product-grid.view-type-list .product-title {
        font-size: 14px;
        /* 폰트 크기 축소 */
        text-align: left;
    }

    .product-grid.view-type-list .product-sub {
        font-size: 10px;
    }

    .product-grid.view-type-list .product-card::after {
        /* 화살표 크기 및 우측 여백 축소 */
        width: 14px;
        height: 14px;
        right: 15px;
        display:none;
    }

    /* -------------------------------------
       [Mode 3] Compact View 모바일 스타일
    ------------------------------------- */
    .product-grid.view-type-compact {
        /* 모바일에서는 2단(50% 50%)을 1단(1fr) 전체 사용으로 변경 */
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .product-grid.view-type-compact .product-card {
        /* 이미지(90px)와 화살표(40px) 영역 축소 */
        grid-template-columns: 90px 1fr 40px;
        gap: 4px 15px;
        padding: 10px;
        border-radius: 12px;
    }
    .product-grid.view-type-compact .img-wrap {
        border-radius: 8px;
    }
    .product-grid.view-type-compact .product-title {
        font-size: 16px;
    }
    .product-grid.view-type-compact .badge {
        font-size: 11px;
    }
    .product-grid.view-type-compact .product-sub {
        font-size: 12px;
    }
    .product-grid.view-type-compact .product-card::after {
        /* 화살표 크기 축소 */
        width: 14px;
        height: 14px;
    }
}


@media (max-width: 720px) {
    .board-item { grid-template-columns: 120px 1fr; gap: 8px 24px; }
    .board-item-date .board-item { grid-template-columns: 1fr; }
    .board-item-date .item-left { display: none;}
    .equip .board-item { grid-template-columns: 120px 1fr; column-gap: 20px; }
    .item-thumb { width: 120px; height: 120px; }
    .board-item__meta { grid-column: 1 / -1; justify-content: flex-end; gap: 14px; }
    .edu-who { min-width: auto; flex: 1; }
    .ico-file { width: auto; }
    .item-pill { height: auto; font-size: 12px; text-align: center; }
    .who-name, .who-role { font-size: 13px; width: auto; max-width: 110px; }
    .btn-detail { font-size: 12px; }
    .equip .item-thumb { width: 120px; height: 90px; }
    .equip .who-date { line-height: 1.2; }
    .equip .model { font-size: 13px; letter-spacing: 0; }
    .equip .item-title { line-height: 1.2; }
    
    
    
    /* Board Header & Title */
    .sub_title {
        max-width: 100%;
        padding: 2.5rem 0 2.5rem;
        margin-bottom: 3rem;
    }
    .sub_title span {
        margin-bottom: 10px;
        font-size: 12px;
    }
    .sub_title span b {
        color: #333;
    }
    .sub_title span i {
        font-size: 11px;
    }
    .sub_title h3 {
        font-size: 32px;
    }
    .sub_title h3 span {
        font-size: 1.4rem;
        color: #666;
        font-weight: 400;
        margin: 2rem 0 0 0
    }
    .sub_title p {
        margin-top: 1.5rem;
        font-size: 1.2rem;
        padding: 0 3rem;
    }
    

}

@media (max-width: 560px) {
    .view-badge { height: auto; padding: 0 15px; }
    .view-title { font-size: 20px; }
    .view-meta__left, .view-meta__date { font-size: 12px; }
    .view-nav { grid-template-columns: 1fr; gap: 12px; position: relative; }
    .view-nav__side--prev, .view-nav__side--next { justify-content: center; position: absolute; }
    .view-nav__side--prev { left: 15px; top: 65px; }
    .view-nav__side--next { right: 15px; top: 65px; }
    .view-nav__side--next .view-nav__list { width: 100%; }
    .attach__file { font-size: 12px; word-break: break-all; }
    .attach__row { height: auto; padding: 10px 0; }
    .write-head__title { font-size: 30px; }
    .btn { width: 100%; }
}

@media (max-width: 480px) {
    .product-page-container .product-title { font-size: 16px; }
    .product-page-container .btn-more { width: 100%; justify-content: center; padding: 12px 0; }
    .item-title { font-size: 16px; }
    .btn-detail { max-width: 90px; }
}


/* =========================================
   7. SUB PAGE - PARTNERSHIP (Mobile Max 768px)
========================================= */
@media (max-width: 768px) {
    /* 공통 및 배너 영역 */
    .sub-page.partnership .inner h3 {font-size: 28px;margin-bottom: 20px;letter-spacing: -0.03rem;}
    .sub-page.partnership .inner h4 { font-size: 16px; }
/*    .sub-page.partnership .inner h3 br { display: none;}*/
    .sub-page.partnership .inner p { font-size: 15px; }
    .sub-page.partnership .inner .dev-sec p { font-size: 18px; line-height: normal; }
    .sub-page.partnership .pt-section { padding: 60px 0 !important; }
/*    .pd-40 { padding: 20px 0 !important; }*/
    
    .sub-page.partnership .hero-banner { height: 200px; }
    .sub-page.partnership .hero-banner h2 { font-size: 28px; }
    
    .sub-page.partnership .bottom-banner { flex-direction: column; gap: 20px; padding: 30px 20px; margin: 30px auto 0; text-align: center; border-radius: 15px; }
    .sub-page.partnership .bottom-banner h3 { font-size: 18px; word-break: keep-all; line-height: 1.4; margin-bottom: 0; }
    .sub-page.partnership .bottom-banner h3 br { display:none }
    .sub-page.partnership .bottom-banner .btn-inquiry { padding: 12px 40px; font-size: 14px; width: 100%; }

    /* Intro 영역 공통 */
    .sub-page.partnership .intro-wrap,
    .sub-page.partnership.p-main .intro-wrap { flex-direction: column; gap: 30px; width: 100%; }
    .sub-page.partnership .intro-wrap .text-box { width: 100%; text-align: center; }
    .sub-page.partnership .intro-wrap .text-box .sub-title {font-size: 18px;}
    .sub-page.partnership .intro-wrap .text-box .btn-theme { width: 100%; max-width: 100%; padding: 14px 20px; }
    .sub-page.partnership .intro-wrap .img-box { width: 100%; }

    /* 프로세스 리스트 */
    .sub-page.partnership .process-list {flex-direction: column;gap: 60px;padding: 40px 20px;border-radius: 40px;margin-bottom: 0px;border-width: 5px;align-items: center;}
    .sub-page.partnership .process-list .step { width: 160px; height: 160px; border-radius: 30px;}
    .sub-page.partnership .process-list .step::before { transform: rotate(135deg); right: auto; bottom: -36px; top: auto; } /* 아래 방향 화살표로 변경 */
    .sub-page.partnership .process-list .step .num { font-size: 32px; }
    .sub-page.partnership .process-list .step .desc { font-size: 18px; }
    .sub-page.partnership .inner .process-list p {width: 60%;font-size: 13px;}

    /* 01. P-Main */
    .sub-page.partnership.p-main .stat-wrap { flex-direction: column; gap: 30px; padding: 0 0 50px 0; text-align: center; }
    .sub-page.partnership.p-main .stat-wrap .text { max-width: 100%; gap: 30px; align-items: center; }
    .sub-page.partnership.p-main .stat-wrap h2 { font-size: 32px; }
    .sub-page.partnership.p-main .stat-wrap h3 { font-size: 32px; }
    .sub-page.partnership.p-main .stat-wrap p {font-size: 15px;display: flex;flex-direction: row;gap: 6px;flex-wrap: wrap;justify-content: center;}
    .sub-page.partnership.p-main .stat-wrap p br { display: none; }
    .sub-page.partnership.p-main .stat-wrap p span {font-size: 14px;padding: 4px 20px;background: #fff;text-decoration: none;letter-spacing: -0.01em;}
    .sub-page.partnership.p-main .stat-wrap .number { font-size: 80px; }
    .sub-page.partnership.p-main .stat-wrap .number span { font-size: 36px; }
    
    .sub-page.partnership.p-main .service-grid { flex-direction: column; gap: 40px; margin-top: 40px; }
    .sub-page.partnership.p-main .service-grid .item img { height: auto; max-height: 200px; margin-bottom: 15px; }
    .sub-page.partnership.p-main .service-grid .item h4 { font-size: 30px; margin-bottom: 15px; }
    .sub-page.partnership.p-main .service-grid .item h4 p { font-size: 18px; margin-top: 5px; }
    .sub-page.partnership.p-main .service-grid .item ul li { font-size: 15px; padding: 6px; max-width: 320px; margin: 0 auto 8px }
    
    .sub-page.partnership.p-main .target-grid { /*flex-direction: column;*/ gap: 15px; margin-top: 40px; }
    .sub-page.partnership.p-main .target-grid .t-item h4 { font-size: 20px; }
    
    .sub-page.partnership.p-main .msg-wrap { flex-direction: column; gap: 30px; margin-top: 50px; text-align: center; }
    .sub-page.partnership.p-main .msg-wrap .text-box p { font-size: 16px; }
    
    .sub-page.partnership.p-main .vision-wrap { margin-top: 60px; }
    .sub-page.partnership.p-main .vision-wrap img { margin: 0 auto 30px; }
    .sub-page.partnership.p-main .vision-wrap .symbol { width: 80px; margin-top: 70px; }
    .sub-page.partnership.p-main .vision-wrap p br { display: none;}

    /* 02. B2B */
    .sub-page.partnership.p-b2b .intro-wrap .text-box p br { display: none; }
    .sub-page.partnership.p-b2b .prod-circles { flex-direction: column; align-items: center; gap: 20px; margin-top: 40px; }
    .sub-page.partnership.p-b2b .prod-circles .circle { width: 280px; height: 240px; padding-top: 20px; border-radius:30px; }
    .sub-page.partnership.p-b2b .prod-circles .circle h4 { font-size: 20px; }
    .sub-page.partnership.p-b2b .prod-circles .circle p { font-size: 13px; letter-spacing: -0.04rem; }
    .sub-page.partnership.p-b2b .prod-circles .circle img { height: 140px; }
    
    .sub-page.partnership.p-b2b .moq-wrap { flex-direction: column; gap: 40px; align-items: center; margin-top: 40px; }
    .sub-page.partnership.p-b2b .moq-wrap .m-item strong { font-size: 70px; margin-bottom: 5px; }
    
    .sub-page.partnership.p-b2b .cases-wrap { flex-direction: column; gap: 40px; margin-top: 40px; }
    .sub-page.partnership.p-b2b .cases-wrap .c-item:before { display: none; } /* 세로줄 제거 */
    .sub-page.partnership.p-b2b .cases-wrap .c-item .num { font-size: 60px; margin-bottom: 10px; }
    .sub-page.partnership.p-b2b .cases-wrap .c-item .num span { font-size: 24px; }
    .sub-page.partnership.p-b2b .cases-wrap .c-item img { height: 140px; }
    .sub-page.partnership.p-b2b .cases-wrap h4 { font-size: 20px;margin: 5px auto; }
    
    /* 03. OEM */
    .sub-page.partnership.p-oem .dev-sec { flex-direction: column; gap: 30px; margin-bottom: 40px; }
    .sub-page.partnership.p-oem .dev-sec .text-box { text-align: center; }
    .sub-page.partnership.p-oem .dev-sec .text-box h4 {font-size: 28px;margin-bottom: 15px;}
    .sub-page.partnership.p-oem .dev-sec .text-box p { font-size: 18px; margin-bottom: 25px; color: #666; }
    .sub-page.partnership.p-oem .dev-sec .text-box ul { padding-left: 0; list-style-position: inside; text-align: left; margin: auto; width: fit-content; }
    .sub-page.partnership.p-oem .dev-sec .text-box ul li { font-size: 15px; }
    .sub-page.partnership.p-oem .dev-sec .text-box .quote {/* font-size: 16px; */padding: 10px 30px;display: block;margin-top: 30px;}
    .sub-page.partnership.p-oem .dev-sec .text-box .quote::before {/* font-size: 40px; *//* top: -10px; */}
    .sub-page.partnership.p-oem .dev-sec .text-box .quote::after {/* font-size: 40px; *//* bottom: -20px; */}

    /* 04. Channel */
    .sub-page.partnership.p-channel .channel-list { margin-top: 30px; }
    .sub-page.partnership.p-channel .channel-list .c-card { flex-direction: column; padding: 25px 20px; text-align: center; gap: 15px; }
    .sub-page.partnership.p-channel .channel-list .c-card h4 {width: 100%;font-size: 22px;}
    .sub-page.partnership.p-channel .channel-list .c-card ul {border-left: none;border-top: 1px solid #eee;/* padding-left: 0; */padding-top: 20px;text-align: left;width: 100%;}
    .sub-page.partnership.p-channel .channel-list .c-card .icon { text-align: center; margin: 0 auto; width: 60px; }

    /* 05. R&D */
    .sub-page.partnership.p-rnd .text-box p br { display: none; }
    .sub-page.partnership.p-rnd .awards-sec { padding: 50px 0; }
    .sub-page.partnership.p-rnd .awards-sec .inner { flex-direction: column; gap: 40px; text-align: center; }
    .sub-page.partnership.p-rnd .awards-sec .text-box { width: 100%; }
    .sub-page.partnership.p-rnd .awards-sec .text-box h3 { font-size: 32px; }
    .sub-page.partnership.p-rnd img.arrow_r {transform: rotate(90deg);margin: 30px auto;height: 40px;}
    .sub-page.partnership.p-rnd .awards-sec .text-box p { font-size: 15px; }
    .sub-page.partnership.p-rnd .awards-sec .text-box p.add_txt { margin-top: 30px; font-size: 12px; }
    .sub-page.partnership.p-rnd .awards-sec .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; width: 100%; }
    
    .sub-page.partnership.p-rnd .history-sec { flex-direction: column; gap: 30px; }
    .sub-page.partnership.p-rnd .history-sec .list-box { flex-direction: column; gap: 20px; }
    
    /* 05. R&D */
    .sub-page.partnership.p-rnd .awards-sec { padding: 50px 0; }
    .sub-page.partnership.p-rnd .awards-sec .inner { flex-direction: column; gap: 40px; text-align: center; }
    .sub-page.partnership.p-rnd .awards-sec .text-box { width: 100%; }
    .sub-page.partnership.p-rnd .awards-sec .text-box h3 { font-size: 32px; }
    .sub-page.partnership.p-rnd img.arrow_r {transform: rotate(90deg);margin: 30px auto;height: 40px;}
    .sub-page.partnership.p-rnd .awards-sec .text-box p { font-size: 15px; }
    .sub-page.partnership.p-rnd .awards-sec .text-box p.add_txt { margin-top: 30px; font-size: 12px; }
    .sub-page.partnership.p-rnd .awards-sec .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; width: 100%; }
    
    .sub-page.partnership.p-rnd .history-sec { flex-direction: column; gap: 30px; }
    .sub-page.partnership.p-rnd .history-sec .list-box { flex-direction: column; gap: 20px; }
    
    .sub-page.partnership.p-rnd .logos-wrap { padding: 20px; border-width: 4px; border-radius: 20px; flex-wrap: wrap; justify-content: center; margin-top: 30px; display: grid; justify-items: center; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .sub-page.partnership.p-rnd .logos-wrap img {height: auto;text-align: center;}
    
   
    
    
}





.note-modal-footer {
    box-sizing: content-box;
}


img {
  /* 3D 렌더링 환경을 만들어 GPU 가속을 유도 */
  transform: translateZ(0);
  
  /* 뒷면을 숨겨 렌더링 과정의 깜빡임/떨림 방지 */
  backface-visibility: hidden;
  
  /* Safari 등에서 테두리 픽셀이 깨지는 것을 방지 */
  -webkit-font-smoothing: antialiased;

  image-rendering: auto; /* 기본 고품질 스케일링 (권장) */
  /* image-rendering: pixelated; <- 이 속성이 들어가 있다면 이글거림의 원인이 되므로 제거해야 합니다. */
}







 /* =========================================
       CI 서브페이지 전용 스타일
    ========================================= */
    .ci-page .ci-section {
        padding: 120px 0;
        border-bottom: 1px solid #eaeaea;
        background-color: #fff;
    }
    .ci-page .ci-section:last-child {
        border-bottom: none;
    }
    
    /* 레이아웃 공통 (Sticky Left / Scrolling Right) */
    .ci-page .flex-container {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 50px;
    }
    .ci-page .left-area {
        width: 35%;
        position: sticky;
        top: 120px;
        height: fit-content;
    }
    .ci-page .right-area {
        width: 720px;
        display: flex;
        gap: 30px;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column;
    }
    
    /* 텍스트 타이포그래피 */

  
    .ci-sub-tit {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
    }
    .ci-sub-tit::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        background: #ff6b35; /* Primary Orange */
    }

    /* 01. CI 소개 - 상단 기본형 박스 */
    .ci-intro-top {
        width: 100%;
        background-color: #fff;
        background-image: 
            linear-gradient(#f5f5f5 1px, transparent 1px),
            linear-gradient(90deg, #f5f5f5 1px, transparent 1px);
        background-size: 10px 10px;
        border: 1px solid #f0f0f0;
        padding: 100px 0 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .ci-intro-top img {
        height: 70px;
        margin-bottom: 20px;
        max-width: 70%;
        max-height: fit-content;
    }




    .ci-intro-top .badge_btn {display: flex;gap: 10px;margin-top: 30px;}

.ci-intro-top .badge_btn a {
        background: #333;
        color: #fff;
        padding: 4px 20px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        margin: auto;
        width: auto;
        border: 0;
        }

.ci-intro-top .badge_btn a:hover { background-color:#ff6b35}

    /* 01. CI 소개 - 가이드라인 화이트 박스 */
    .ci-guide-box {
        border: 1px solid #eaeaea;
        padding: 80px 60px 60px 60px;
        background: #fff;
        max-width: 720px;
    }
    .ci-guide-row {
        padding-bottom: 60px;
        margin-bottom: 60px;
        border-bottom: 1px solid #eaeaea;
    }
    .ci-guide-row:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
    }
    .ci-guide-row.text-center {
        text-align: center;
    }
    .ci-guide-row.text-left {
        /* text-align: left; */
    }
    .ci-guide-row.text-center img,
    .ci-guide-row.text-left img {
        max-width: 80%;
        margin: 80px auto;
        display: block;
    }
    .ci-guide-row.text-left img {
        margin: 20px 0 0 0;
    }
    .ci-guide-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }
    .ci-guide-grid img {
        max-width: 100%;
        display: block;
    }

    /* 02. COLOR 파트 */
    .color-wrap {
        display: flex;
        flex-direction: column;
        gap: 60px;
    }
    .color-wrap img {
        width: 100%;
        display: block;
    }

    /* 03. Label Design 파트 */
    .label-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        justify-items: center;
    }
    .label-grid img {
        width: 100%;
        max-width: 200px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border-radius: 8px;
    }
    .label-grid-row-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        justify-items: center;
        margin-top: 20px;
        max-width: 66%;
        margin-left: auto;
        margin-right: auto;
    }
    .label-grid-row-2 img {
        width: 100%;
        max-width: 200px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border-radius: 8px;
    }

    /* 04. Uniform 파트 */
    .uniform-wrap {
        text-align: center;
    }
    .uniform-wrap img {
        max-width: 80%;
        display: inline-block;
    }


.ci_full { width: 40% }
.ci_full2 {padding: 10px;}
.ci_full3 {padding: 20px;}

.ci-section .desc { font-size: 18px; }


    /* 반응형 (Mobile) */
    @media (max-width: 1024px) {
        .ci-page .flex-container {
            flex-direction: column;
            gap: 40px;
        }
        .ci-page .left-area {
            width: 100%;
            position: relative;
            top: 0;
        }
        .ci-page .right-area {
            width: 100%;
        }
    }
    @media (max-width: 768px) {
        .ci-page .ci-section { padding: 60px 0; }
        .ci-page .sec-title { font-size: 28px; }
        .ci-guide-box { padding: 30px 20px; }
        .ci-guide-row {padding-bottom: 30px;margin-bottom: 30px;border: 0;}
        .ci-guide-grid {grid-template-columns: 1fr;gap: 30px;}
        .ci-guide-row.text-center img,
        .ci-guide-row.text-left img { max-width: 90%; }
        .label-grid { grid-template-columns: repeat(2, 1fr); }
        .label-grid-row-2 { max-width: 100%; }

.ci-guide-grid img { max-width:80%}
        .ci-section .desc { font-size: 16px; }
        
    }