/* COMPANY INTRO PAGE STYLES - TAB 1 */
.mb_only{display:none}
/* TAB CONTENT VISIBILITY */
.tab-content { display: none !important; }
.tab-content[style*="display: block"] { display: block !important; }
/* --- 1. 상단 비주얼 및 탭 영역 --- */
.sub_visual { position: relative; width: 100%; height: 998px; background: url('../img/company_intro/company_into_benner.png') no-repeat center/cover; display: flex; align-items: center; padding-top: 226px; }
.visual_txt_area { max-width: 1600px; width:100%; margin: 0 auto; color: #fff; font-family: 'Pretendard'; font-weight: 600; font-size: 20px; }
.visual_txt_area .text_wrapper { border-left: 1px solid rgba(255, 255, 255, 0.3); padding-left: 50px; }
.visual_txt_area .sub_tit { color: #fff; font-size: 24px; font-weight: 600; font-family: 'Pretendard'; margin: 0; }
.visual_txt_area .main_tit { font-size: 70px; font-weight: 700; line-height: 1.2; margin: 40px 0; font-family: 'Poppins'; }
.visual_txt_area .sub_desc { font-size: 20px; font-weight: 600; color: #FFFFFF; font-family: 'Pretendard'; }
/* 래퍼: PC는 콘텐츠만큼만, 모바일은 가로 스크롤(블러가 탭과 함께 이동). 스크롤 시 잘린 끝 둥글게 */
.product_tab_nav_wrap { display: inline-block; max-width: 100%; margin-top: 115px; border-radius: 100px; overflow: hidden; }
.product_tab_nav { display: inline-flex; width: max-content; background: rgba(255, 255, 255, 0.15); border-radius: 100px; margin-top: 0; }
.tab_btn { border: none; background: transparent; color: #FFFFFF; padding: 20px 30px; font-size: 22px; border-radius: 100px; cursor: pointer; transition: 0.3s; font-family: 'Poppins'; font-weight: 500; }
.tab_btn.on { background: #ff6b00; color: #fff; box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3); }
/* 모바일 전용 탭 드롭다운 (PC에서는 숨김) */
.product_tab_dropdown { display: none; }
/* TAB NAVIGATION */
.sub-banner-tabs { position: absolute; left: 80px; display: flex; gap: 30px; z-index: 10; }
.sub-tab-btn { font-family: 'Pretendard', sans-serif; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.6); background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 0; cursor: pointer; transition: color 0.3s, border-color 0.3s; letter-spacing: -0.3px; }
.sub-tab-btn:hover { color: #FFFFFF; }
.sub-tab-btn.active { color: #FF6B00; border-bottom-color: #FF6B00; }
/* SECTION 1: COMMON MAIN BANNER */
.sub-banner { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.sub-banner-container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 80px; gap: 60px; }
.sub-banner-content { flex: 1; z-index: 2; }
.sub-banner-title { font-family: 'Pretendard', sans-serif; font-size: 72px; font-weight: 700; color: #FFFFFF; margin: 0 0 30px 0; line-height: 1.2; letter-spacing: -0.5px; }
.sub-banner-desc { font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 400; color: #CCCCCC; margin: 0 0 40px 0; line-height: 1.6; letter-spacing: -0.3px; }
.sub-banner-btn { font-family: 'Pretendard', sans-serif; font-size: 16px; font-weight: 600; color: #FFFFFF; background: #FF6B00; border: none; padding: 16px 40px; border-radius: 8px; cursor: pointer; transition: background 0.3s, transform 0.3s; letter-spacing: -0.3px; }
.sub-banner-btn:hover { background: #E55A00; transform: translateY(-2px); }
.sub-banner-image { flex: 1; display: flex; align-items: center; justify-content: center; z-index: 1; }
.sub-banner-image img { width: 100%; height: auto; object-fit: contain; }
/* SECTION 2: BACKGROUND IMAGE AREA */
.sub-section-2 { position: relative; align-items: center; justify-content: center; }
.sub-bg-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.sub-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
/* Since 1995 섹션: 배경 이미지 오른쪽 끝 정렬 */
.sub-section.sub-section-2:has(.sub-section-2-content.tab1) .sub-bg-image { object-position: right center; }
.sub-section-2-content { position: relative; z-index: 2; text-align: center; color: #FFFFFF; max-width: 600px; padding: 0 40px; }
.sub-section-2-content.tab1 { max-width: 100%; padding: 300px 0; }
.sub-section-2-title { font-family: 'Pretendard', sans-serif; font-size: 30px; color: #FF6B00; font-weight: 700; line-height: 1.3; letter-spacing: -0.5px; }
.sub-section-2-title.tab1 { font-family: 'Pretendard', sans-serif; font-size: 30px; margin-bottom: 70px; }
/* --- TAB2: SECTION 2 LAYOUT --- */
.sub-section.sub-section-2.tab2 { background: #FFFFFF; position: relative; padding:160px 0; }
.sub-bg-container.tab2 { position: relative; display: flex; align-items: flex-start; justify-content: space-between; height: auto; margin: 0 auto; z-index: 10; max-width: 1600px; }
/* --- TAB3: SECTION 2 LAYOUT --- */
.sub-section.tab3 { position: relative; }
.sub-bg-container.tab3 { position: relative; margin: 0 auto; }
.sub-section-2-content.tab3 { max-width: 1600px; width:100%; margin: 0 auto; height: auto; padding: 0px; text-align: start; padding:160px 0;}
.image-wrapper.tab3 { position: relative; max-width: 1600px;width:100%; margin: 0 auto; border-radius: 12px; overflow: hidden; background:url('../img/company_intro/tab3/sec2.png') center/cover no-repeat;}
.sub-section-2-content.tab3 img { position: relative; width:100%; height: auto; display: block; border-radius: 12px; }
.image-overlay.tab3 { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 160px 100px; background: rgba(0, 0, 0, 0.2); color: #FFFFFF; border-radius: 12px; z-index: 2; }
.image-overlay.tab3 h3 { font-family: 'Pretendard', sans-serif; font-size: 40px; font-weight: 700; color: #FFFFFF; margin: 0 0 74px 0; padding: 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.image-overlay.tab3 p { font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 500; color: #FFFFFF; margin: 0; line-height: 1.6; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.sub-section-2-title.tab3 { color: #FF6B00; font-size: 70px; font-weight: 700; margin-bottom: 80px; }
/* TAB3 SECTION 3 */
.sub-section.sub-section-3.tab3 { background: #FFFFFF; max-width:1400px;width:100%; padding:0 0 200px;margin:0 auto;}
.sub-section-3-content.tab3 { max-width: 1400px; margin: 0 auto; padding: 0px; width: 100%; }
.sub-section-3-title.tab3 { font-family: 'Pretendard', sans-serif; font-size: 70px; font-weight: 700; color: #FF6B00; margin: 0 0 80px 0; padding: 0; }
.sub-section-3-desc.tab3 { font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 400; color: #666666; margin: 0 0 100px 0; line-height: 1.6; }
.sub-section-3-items.tab3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 120px 155px; width: 100%; }
.sub-section-3-item.tab3 { display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 12px; }
.sub-section-3-item.tab3.cart { background: #F5F5F5; grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; padding: 80px 80px 80px 100px; }
.sub-section-3-item.tab3.cart .item-content { flex: 1; min-width: 0; padding-right: 40px; line-height: 1.65; }
.sub-section-3-item.tab3.cart .item-icon { display: flex; align-items: center; justify-content: center; width: auto; height: auto; margin: 0; flex-shrink: 0; }
.sub-section-3-item.tab3.cart .item-icon img { max-width: 160px; width: auto; height: auto; object-fit: contain; }
.sub-section-3-item.tab3 .item-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
.sub-section-3-item.tab3 .item-icon img { width: 100%; height: 100%; object-fit: contain; }
.sub-section-3-item.tab3 h3 { font-family: 'Pretendard', sans-serif; font-size: 26px; font-weight: 700; color: #000000; margin: 0 0 20px 0; padding: 0; }
.sub-section-3-item.tab3.cart h3 { font-size: 26px; margin-bottom: 20px; }
.sub-section-3-item.tab3 p { font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 400; color: #000000; margin: 0; line-height: 1.6; }
.sub-section-3-item.tab3.cart p { font-size: 18px; color: #000000; }
/* .sub-bg-container.tab4 {
  display: block;
} */
/* TAB4 HISTORY SECTION */
.sub-section.sub-section-history-intro.tab4 { background: #FFFFFF; padding: 160px 0px 60px; /* padding-left: 160px; */
  display: flex; align-items: center; justify-content: center; }
.history-intro-content.tab4 { max-width: 1600px; width: 100%; }
.history-intro-title.tab4 { font-family: 'Pretendard', sans-serif; font-size: 70px; font-weight: 700; color: #FF6B00; margin: 0 0 80px 0; padding: 0; }
.history-intro-image.tab4 { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background:url('../img/company_intro/tab4/sec2.png') center right/cover no-repeat;}
.history-intro-image.tab4 img { width: 100%; height: auto; display: block; border-radius: 12px; }
.history-intro-overlay.tab4 {width: 100%; padding: 228px 120px; }
.history-intro-overlay.tab4 h3 { font-family: 'Pretendard', sans-serif; font-size: 36px; font-weight: 700; color: #FFFFFF; margin: 0 0 30px 0; padding: 0; }
.history-intro-overlay.tab4 p { font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 400; color: #FFFFFF; margin: 0; line-height: 1.6; }
/* TAB4 TIMELINE SECTION */
.sub-section.sub-section-history-timeline.tab4 { background: #FFFFFF; padding: 100px 0px 100px; margin: 0 auto; }
.history-timeline-content.tab4 { max-width: 1600px; width:100%; margin: 0 auto; }
.timeline-nav.tab4 { position: relative; margin-bottom: 120px; height: 70px; border-radius: 50px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.timeline-nav.tab4::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #F1F1F1; border-radius: 28px; z-index: 1; }
.timeline-nav.tab4::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; /* Orange solid until fade-start, then fade out by fade-end to blend with base */
  background: linear-gradient(90deg, #FF6B00 0%, #FF6B00 var(--fade-start, 37%), rgba(255, 107, 0, 0) var(--fade-end, 44%) ); width: 100%; clip-path: inset(0 calc(100% - var(--progress, 20%)) 0 0); z-index: 2; transition: width 0.3s ease; }
/* Progress width controlled via CSS variable --progress (set in JS) */

.timeline-btn.tab4 { position: relative; z-index: 3; padding: 0 35px; height: 50px; line-height: 50px; border: none; background: transparent; color: #000000; font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 700; border-radius: 50px; cursor: pointer; transition: all 0.2s ease; margin: 0; }
.timeline-btn.tab4:hover { color: #000000; }
.timeline-btn.tab4.active { background: #FFFFFF; color: #FF6B00 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.timeline-btn.tab4.filled { color: #FFFFFF; }
/* PC: 래퍼는 레이아웃에 관여하지 않음 */
.timeline-nav-inner.tab4 { display: contents; }
.timeline-content-wrapper.tab4 { display: flex; align-items: center; gap: 80px; margin-bottom: 100px; }
.timeline-item.tab4 { display: none; flex: 1; gap: 80px; position: relative; }
.timeline-item.tab4.active { display: flex; padding: 0 120px; }
.timeline-image.tab4 { border-radius: 12px; overflow: hidden; }
.timeline-image.tab4 img { width: 100%; height: auto; display: block; border-radius: 12px; }
.timeline-info.tab4 { flex: 1; }
.timeline-info.tab4 h3 { font-family: 'Pretendard', sans-serif; font-size: 80px; font-weight: 700; color: #000000; margin: 50px 0 60px 0; padding: 0; }
.timeline-info.tab4 p { font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 400; color: #000000; margin: 0 0 15px 0; line-height: 1.6; }
.timeline-controls.tab4 { display: flex; gap: 20px; position: absolute; top: 50%; max-width: 1600px; justify-content: space-between; pointer-events: none; left: 0; right: 0; margin: 0 auto; }
.timeline-prev.tab4, .timeline-next.tab4 { width: 80px; height: 80px; background: rgba(216, 216, 216, 0.5); border: none; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; pointer-events: auto; flex-shrink: 0; padding: 0; }
.timeline-prev.tab4 img, .timeline-next.tab4 img { object-fit: contain; }
.timeline-prev.tab4:hover, .timeline-next.tab4:hover { background: rgba(216, 216, 216, 0.8); }
/* TAB5 DIRECTION SECTION - SAME AS TAB4 */
.sub-bg-container.tab5 { display: block; }
.sub-section.sub-section-history-intro.tab5 { background: #FFFFFF; max-width:1600px; width:100%; margin:0 auto; padding:160px 0 0; display: flex; align-items: center; justify-content: center; }
.history-intro-content.tab5 {padding-bottom:20px; max-width: 1600px; margin: 0 auto; width: 100%;}
.history-intro-title.tab5 { font-family: 'Pretendard', sans-serif; font-size: 70px; font-weight: 700; color: #FF6B00; margin: 0 0 80px 0; padding: 0; }
.history-intro-image.tab5 { position: relative; width: 100%; overflow: hidden; background: #000000; }
.history-intro-image.tab5 img { width: 100%; height: auto; display: block; }
.history-intro-overlay.tab5 { position: absolute; top: 114px; left: 50%; transform: translateX(-50%); width: auto; padding: 0; display: flex; align-items: center; justify-content: center; }
.history-intro-overlay.tab5 img { width: auto; height: auto; display: block; object-fit: contain; }
.history-intro-overlay.tab5 h3 { display: none; }
.history-intro-overlay.tab5 p { display: none; }
.history-intro-box.tab5 { display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 1); border-radius: 12px; padding: 80px; margin: -200px auto 0; max-width: 1400px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); position: relative; z-index: 10; }
.history-intro-box-content.tab5 { display: flex; flex-direction: column; gap: 30px; flex: 1; }
.history-intro-box-content.tab5 h3 { font-family: 'Pretendard', sans-serif; font-size: 36px; font-weight: 700; color: #FF6B00; margin: 0; padding: 0; padding-bottom: 10px; }
.history-intro-box-item { display: flex; gap: 80px; align-items: center; }
.history-intro-box-item .label { font-family: 'Pretendard', sans-serif !important; font-size: 24px; font-weight: 700; color: #000000; width: 100px; flex-shrink: 0; }
.history-intro-box-item .value { font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 400; color: #666666; flex: 1; }
.sub-section.sub-section-history-timeline.tab5 { background: #FFFFFF; padding: 100px 160px; }
.history-timeline-content.tab5 { max-width: 1600px; margin: 0 auto; }
.timeline-nav.tab5 { position: relative; margin-bottom: 120px; height: 70px; border-radius: 50px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }
.timeline-nav.tab5::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #F1F1F1; border-radius: 28px; z-index: 1; }
.timeline-nav.tab5::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(90deg, #FF6B00 0%, #FF6B00 var(--fade-start, 37%), rgba(255, 107, 0, 0) var(--fade-end, 44%) ); width: 100%; clip-path: inset(0 calc(100% - var(--progress, 20%)) 0 0); z-index: 2; transition: width 0.3s ease; }
.timeline-btn.tab5 { position: relative; z-index: 3; padding: 0 35px; height: 50px; line-height: 50px; border: none; background: transparent; color: #000000; font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 700; border-radius: 50px; cursor: pointer; transition: all 0.2s ease; margin: 0; }
.timeline-btn.tab5:hover { color: #000000; }
.timeline-btn.tab5.active { background: #FFFFFF; color: #FF6B00 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.timeline-btn.tab5.filled { color: #FFFFFF; }
.timeline-content-wrapper.tab5 { display: flex; align-items: center; gap: 80px; margin-bottom: 100px; }
.timeline-item.tab5 { display: none; flex: 1; gap: 80px; position: relative; }
.timeline-item.tab5.active { display: flex; padding: 0 120px; }
.timeline-image.tab5 { border-radius: 12px; overflow: hidden; }
.timeline-image.tab5 img { width: 100%; height: auto; display: block; border-radius: 12px; }
.timeline-info.tab5 { flex: 1; }
.timeline-info.tab5 h3 { font-family: 'Pretendard', sans-serif; font-size: 80px; font-weight: 700; color: #000000; margin: 50px 0 60px 0; padding: 0; }
.timeline-info.tab5 p { font-family: 'Pretendard', sans-serif; font-size: 24px; font-weight: 400; color: #000000; margin: 0 0 15px 0; line-height: 1.6; }
/* TAB5 SECTION 2: MAP */
.sub-section.sub-section-map.tab5 { background: #FFFFFF; padding-top: 50px; padding-bottom: 50px; }
.map-content.tab5 { max-width: 1600px; margin: 0 auto; }
.map-container.tab5 { width: 100%; height: auto; overflow: hidden; background: #FFFFFF; }
.map-section { width: 100%; padding: 0; max-width: 1600px; margin: 0 auto; margin-bottom:200px;}
.map-wrap { width: 100%; height: 400px; position: relative; padding: 50px 0; }
.map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }

@media (max-width:1920px) {
    .visual_txt_area{padding:0 5%;}
}

@media (max-width:768px) {
  .map-wrap { height: 420px; }
}
/* TAB5 SECTION 3: ACCESS INFO */
.sub-section.sub-section-access.tab5 { background: #FFFFFF; padding: 140px 0 60px 0; }
.access-content.tab5 { max-width: 1600px; margin: 0 auto; display: flex; gap: 100px; align-items: stretch; }
.access-left.tab5 { flex: 1; display:flex;flex-wrap: wrap;}
.access-title.tab5 { font-family: 'Pretendard', sans-serif; font-size: 30px; font-weight: 700; color: #000000;  padding: 0; margin-bottom:40px;}
.access-info.tab5 { display: flex; flex-direction: column; gap: 60px; width: 800px; height: auto; padding: 60px; background: #FFFFFF; border-radius: 10px; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
.access-route.tab5 {
    display: grid;
    align-items: center;
    gap: 10px;
    grid-template-columns: 0.5fr 2fr 0.5fr;
    text-align: center;
}
.access-route-item.tab5 { display: flex; align-items: center; flex-direction: column; gap: 20px; flex: 1; }
.access-icon.tab5 { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.access-icon.tab5 img { width: 100%; height: 100%; object-fit: contain; }
.access-route-text.tab5 { display: flex; flex-direction: column; gap: 8px; }
.access-location.tab5 { font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 700; color: #000000; margin: 0; padding: 0; white-space: nowrap; }
.access-time.tab5 { font-family: 'Pretendard', sans-serif; font-size: 16px; font-weight: 400; color: #FF6B00; margin: 0; padding: 0; }
.access-arrow.tab5 { font-size: 24px; color: #FF6B00; font-weight: 700; min-width: 30px; text-align: center; margin:0 auto;}
.access-right.tab5 { flex: 1; position: relative; display: flex; border-radius: 10px; overflow: hidden;}
.access-right.tab5 img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1;  }
.timeline-controls.tab5 { display: flex; gap: 20px; position: absolute; top: 57%; width: 100%; justify-content: space-between; pointer-events: none; left: 0; right: 0; }
.timeline-prev.tab5, .timeline-next.tab5 { width: 80px; height: 80px; background: rgba(216, 216, 216, 0.5); border: none; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; pointer-events: auto; flex-shrink: 0; padding: 0; }
.timeline-prev.tab5 img, .timeline-next.tab5 img { object-fit: contain; }
.timeline-prev.tab5:hover, .timeline-next.tab5:hover { background: rgba(216, 216, 216, 0.8); }
.sub-section-2-content.tab2 { z-index: 2; color: #000000; display: flex; flex-direction: column; gap: 45px; flex: 1 1 0; min-width: 360px; padding: 0px; text-align: start; margin-top: 150px; }
/* Right-side main image - positioned to overlap wave */
.tab2-main { flex: 0 0 auto; max-height: 100%; max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); position: relative; z-index: 15; }
/* Decorative line and bottom graphic containers */
.sub-bg-container2.tab2, .sub-bg-container3.tab2 { max-width: 100%; margin: 0 auto; padding: 0px; position: relative; }
.tab2-line { display: block; width: 100%; height: auto; }
/* Static wave (Tab2) */
.tab2-line.wave { position: relative; height: 325px; overflow: hidden; margin-top: -160px; }
.tab2-line.wave::before, .tab2-line.wave::after { content: ""; position: absolute; inset: 0; background-image: url('../img/company_intro/tab2/sec2-line.svg'); background-repeat: repeat-x; background-position: 0 50%; background-size: 1920px 100%; pointer-events: none; }
.tab2-line.wave::before { opacity: 1; }
.tab2-line.wave::after { opacity: 0.5; display: none; }
.tab2-bottom-wrapper { position: relative; display: flex; justify-content: center; width: 100%; margin: 290px auto 0; }
.tab2-bottom { display: block; width: auto; height: auto; }
.tab2-bottom-labels { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.tab2-label { position: absolute; font-family: 'Pretendard', sans-serif; font-size: 40px; font-weight: 700; color: #000000; white-space: nowrap; transform: translate(-50%, -50%); }
.tab2-label-top { top: -92px; left: 50%; }
.tab2-label-left { top: 85%; left: calc(32% - 100px)}
.tab2-label-right { top: 85%; right: calc(14% - 100px); left: auto; }
.sub-section-2-title.tab2 { color: #FF6B00; font-size: 24px; font-weight: 600; }
.sub-section-2-main-title.tab2 { font-family: 'Poppins', sans-serif; font-size: 70px; font-weight: 700; line-height: 1.05; margin: 0 0 25px 0; color: #000000; }
.sub-section-2-desc.tab2 { font-size: 20px; color: #777777; margin: 0; }
.sub-bg-image.tab2-main { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); z-index: 2; position: static; }
.sub-bg-image.tab2-line { position: absolute; left: 0; right: 0; margin: 0 auto; top: 540px; width: 100%; height: auto; pointer-events: none; }
.sub-bg-image.tab2-bottom { display: block; margin: 140px auto 0; width: auto; height: auto; position: static; }
.sub-section-2-desc { font-family: 'Pretendard', sans-serif; font-size: 16px; font-weight: 400; margin: 0; line-height: 1.6; letter-spacing: -0.3px; }
.sub-section-2-desc.tab1 { font-family: 'Pretendard', sans-serif; font-size: 30px; font-weight: 700; display: inline-block; color: #FFFFFF; }
/* SECTION 3: BACKGROUND IMAGE AREA */
.sub-section-3 { position: relative; display: flex; align-items: center; justify-content: center; background: #F1F1F1; }
.sub-bg-container.tab1.section-3 { align-items: flex-end; }
.sub-section-3-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 80px; gap: 80px; }
.sub-section-3-content.tab1 { width: auto; padding: 160px 160px 170px 160px; display: flex; gap: 120px; max-width: 100%; align-items: center; }
/* TAB2 SECTION 3 */
.sub-section-3.tab2 { background: #F1F1F1; padding: 200px 160px; }
.sub-section-3-content.tab2 { display: grid; grid-template-columns: 391px 1fr; gap: 100px; align-items: center; max-width: 1600px; padding: 0; margin: 0 auto; justify-items: center; }
.sub-section-3-left { flex: 1; color: #FFFFFF; display: flex; flex-direction: column; }
.sub-section-3-left.tab1 { flex-direction: column; justify-content: flex-end; }
.sub-section-3-left.tab2 { color: #000000; align-items: center; justify-content: center; padding-left: 50px}
.sub-section-3-left.tab2 img { width: 100%; height: auto; box-sizing: border-box; }
.sub-section-3-right { flex: 1; display: flex; align-items: flex-start; align-self: flex-start; }
.sub-section-3-right.tab1 { margin-bottom: 200px; }
.sub-section-3-right.tab2 { display: flex; flex-direction: column; gap: 60px; flex: 1; justify-content: center; align-items: start; padding: 32px 0 32px 0; }
.sub-section-3-item.tab2 { display: flex; gap: 110px; align-items: flex-start; }
.sub-section-3-item-title.tab2 { font-family: 'Pretendard', sans-serif; font-size: 26px; font-weight: 700; color: #000000; margin: 0; white-space: nowrap; flex-shrink: 0; width: 235px; }
.sub-section-3-item-desc.tab2 { font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 400; color: #000000; margin: 0; line-height: 1.6; }
.sub-section-3-item-desc.tab2 span { font-family: 'Pretendard', sans-serif !important; color: #FF6B00; }
.sub-section-3-title { font-family: 'Pretendard', sans-serif; font-size: 56px; font-weight: 700; margin: 0 0 30px 0; line-height: 1.3; letter-spacing: -0.5px; color: #FFFFFF; }
.sub-section-3-title.tab1 { font-size: 70px; margin: 0 0 80px 0; white-space: nowrap; }
.sub-section-3-desc { font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 400; margin: 0; line-height: 1.6; letter-spacing: -0.3px; color: #FFFFFF; }
.sub-section-3-desc.tab1 { padding-bottom: 100px; font-size: 20px; }
.sub-section-3-right { flex: 1; display: flex; align-items: center; justify-content: center; }
.sub-section-3-right img { width: 100%; height: auto; object-fit: contain; }
/* SECTION 4: CONTENT AREA */
.sub-section-4 { background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.sub-content-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 80px; }
.sub-section-4-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sub-section-4-title { font-family: 'Pretendard', sans-serif; font-size: 48px; font-weight: 700; color: #000000; margin: 0 0 20px 0; line-height: 1.3; letter-spacing: -0.5px; }
.sub-section-4-title.tab1 { font-size: 36px; margin: 45px 0 15px 0; }
.sub-section-4-title-desc.tab1 { font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 400; color: #777777; margin-bottom: 45px; }
.sub-section-4-desc { font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 400; color: #777777; margin: 0 0 60px 0; line-height: 1.6; letter-spacing: -0.3px; }
.sub-section-4-desc.tab1 { font-size: 20px; margin: 0px; width:40%;}
.sub-section-4-items { display: flex; gap: 40px; width: 100%; justify-content: center; flex-wrap: wrap; }
/* TAB2 SECTION 4 */
.sub-section-4.tab2 { background: #FFFFFF; padding: 160px 0 200px; }
.sub-section-4.tab2 .sub-section-4-content { text-align: left; align-items: flex-start; text-align: start; }
.sub-section-4.tab2 .sub-section-4-title { font-size: 70px; color: #ff6b00; margin-bottom: 80px; }
.sub-section-4.tab2 .sub-section-4-desc { margin-bottom: 60px; text-align: left; }
.sub-section-4.tab2 .sub-section-4-items { display: flex; gap: 0px; width: 100%; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-start; }
.sub-item.tab2 { width: 400px; height: 460px; background: #FF6B00; overflow: hidden; cursor: pointer; transition: all 0.4s ease; display: flex; flex-direction: row-reverse; position: relative; align-items: normal; }
.sub-item.tab2:nth-child(2) { background: #000000; }
.sub-item.tab2:nth-child(3) { background: #939598; }
.sub-item.tab2.active { width: 800px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); }
.sub-item.tab2:hover:not(.active) { box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.sub-item-logo { display: flex; align-items: flex-end; flex-shrink: 0; padding: 0 50px 50px 0; }
.sub-item-logo img { width: 200px; height: auto; object-fit: contain; }
.sub-item-content { display: flex; flex-direction: column; align-items: flex-start; padding: 50px 0 0 50px; text-align: left; flex: 1; position: relative; }
.sub-item.tab2:not(.active) .sub-item-content { justify-content: flex-start; }
.sub-item.tab2 h3 { font-family: 'Pretendard', sans-serif; font-size: 30px; font-weight: 700; color: #FFFFFF; margin: 0 0 20px 0; padding: 0; white-space:nowrap;}
.sub-item.tab2:not(.active) h3 { font-size: 30px; margin: 0; position: absolute; left: 50px; top: 50px; }
.sub-item.tab2 p { font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 400; color: #FFFFFF; margin: 0; line-height: 1.6; }
.sub-item.tab2:not(.active) p { display: none; }
.sub-content-container.tab2 { max-width: 1600px; padding: 0px; margin: 0px; }
/* SECTION 4: TAB 1 STYLES */
.sub-content-container.tab1 { height: 700px; padding: 0px; max-width: 100%; width: 100%; }
.sub-section-4-content.tab1 { display: flex; flex-direction: row; align-items: center; justify-content: space-between; text-align: center; gap: 65px; flex: 0 1 auto; height: 100%; }
.sub-section-4-text-area.tab1 { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sub-section-4-content.tab1 > img { width: auto; height: auto; }
.sub-section-4-items.tab1 { display: flex; gap: 0; width: auto; justify-content: center; align-items: center; flex: 0 1 auto; }
.sub-section-4-items.tab1 .sub-item { flex: 0 1 auto; max-width: none; padding: 0; }
.sub-section-4-items.tab1 .sub-item img { width: auto; height: auto; max-height: 400px; }
.sub-item { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sub-item img { width: 100%; height: auto; object-fit: cover; border-radius: 12px; }
.sub-item h3 { font-family: 'Pretendard', sans-serif; font-size: 24px; font-weight: 600; color: #333333; margin: 0; letter-spacing: -0.3px; }
.sub-item p { font-family: 'Pretendard', sans-serif; font-size: 16px; font-weight: 400; color: #666666; margin: 0; line-height: 1.6; letter-spacing: -0.3px; }
/* Greeting 섹션4: 양쪽 이미지 열리며 중앙 텍스트 등장 모션 */
.greeting-split-section { overflow: hidden; }
.greeting-split-section .sub-section-4-content.tab1 { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; gap: 0; height: 100%; }
.greeting-split-section .sub-section-4-content.tab1 > * { grid-row: 1; grid-column: 1; }
.greeting-split-section .greeting-split-left { justify-self: start; align-self: stretch; width: 52%; z-index: 2; overflow: hidden; transition: width 3.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
.greeting-split-section .greeting-split-left img { width: 100%; height: 100%; object-fit: cover; object-position: right center; border-radius: 0; }
.greeting-split-section .greeting-split-right { justify-self: end; align-self: stretch; width: 52%; z-index: 2; overflow: hidden; transition: width 3.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
.greeting-split-section .greeting-split-right img { width: 100%; height: 100%; object-fit: cover; object-position: left center; border-radius: 0; }
.greeting-split-section .greeting-split-center { justify-self: center; align-self: center; z-index: 1; opacity: 0; min-width: 0; transition: opacity 0.8s ease 1s; }
/* Visible: 이미지가 벌어지며 중앙 텍스트 등장 */
.greeting-split-section.visible .greeting-split-left { width: 800px; }
.greeting-split-section.visible .greeting-split-right { width: 800px; }
.greeting-split-section.visible .greeting-split-center { opacity: 1; }
/* RESPONSIVE */




@media (max-width:1920px) {
    /* Visible: 이미지가 벌어지며 중앙 텍스트 등장 */
    .greeting-split-section.visible .greeting-split-left { width: 530px; }
    .greeting-split-section.visible .greeting-split-right { width: 530px; }
}


@media (max-width:1800px) {
    .sub-section-3-item-desc.tab2 br{display:none;}
    .greeting-split-section.visible .greeting-split-left { width: 420px; }
    .greeting-split-section.visible .greeting-split-right { width: 420px; }
}

@media (max-width:1600px) {
    .sub-bg-container.tab2{padding:0 5%;}
    .tab2-label-left{top:90%;}
    .tab2-label-right{ right: auto; left:calc(50% + 400px);white-space:normal;top:90%;}
    .sub-section-4.tab2{padding:160px 5% 200px;}
    .sub-section-2-content.tab3{padding:160px 5% 100px;}
    .sub-section.sub-section-3.tab3{padding:0 5% 200px;max-width:unset;}
    .sub-section.sub-section-history-intro.tab4{padding:160px 5% 80px;}
    .sub-section.sub-section-history-timeline.tab4{padding:0 5% 200px;}
    .history-intro-title.tab5{padding:0 5%;}
    .history-intro-box.tab5{max-width:unset;margin:-10% 5% 0;}
    .sub-section.sub-section-access.tab5{padding: 140px 5% 60px 5%;}
    .map-section{padding:0 5%;}
    .access-content.tab5{width:100%;gap:60px;}

    .greeting-split-section.visible .greeting-split-left { width: 300px; }
    .greeting-split-section.visible .greeting-split-right { width: 300px; }
}

/* 1440px 이상: PC 기본 레이아웃 */
@media (max-width:1440px) {
  /* .sub-section.sub-section-3 {
    max-height: 1200px;
  } */

  .sub-section-3-content.tab1 { width: 100%; max-width: 1600px; padding: 160px 80px 170px; margin: 0 auto; height: auto; }
  /* TAB2 SECTION 3: 1440px */
  .sub-section-3.tab2 { padding: 200px 160px; }
  .sub-section-3-content.tab2 { display: grid; grid-template-columns: 391px 1fr; gap: 100px; align-items: center; max-width: 1600px; padding: 0; margin: 0 auto; }
  .sub-section-3-left.tab2 { padding-left: 50px; }
  .sub-section-3-left.tab2 img { width: 100%; height: auto; }
  .sub-section-3-right.tab2 { gap: 60px; padding: 32px 0; }
  .sub-section-3-item.tab2 { gap: 110px; }
  .sub-section-3-item-title.tab2 { font-size: 26px; width: 235px; }
  .sub-section-3-item-desc.tab2 { font-size: 18px; }
  .sub-bg-container.tab1.section-3 { align-items: flex-end; }
  .sub-section-3-left.tab1 { flex: 0 1 auto; }
  .sub-section-3-left.tab1 .sub-section-3-title.tab1 { font-size: 60px; margin-bottom: 80px; white-space: nowrap; }
  .sub-section-3-left.tab1 .sub-section-3-desc.tab1 { padding-bottom: 100px; font-size: 20px; }
  .sub-section-3-right.tab1 { margin-bottom: 200px; flex: 0 1 auto; }
  .sub-section-3-right.tab1 img { width: auto; height: auto; }
  .image-wrapper.tab3 { height: auto; width: auto; }
  .timeline-image.tab4{flex:1;}
  .timeline-info.tab4 h3{font-size:60px;margin:20px 0 30px 0;}
}




@media (max-width:1200px) {
    .tab2-label-right{ left:calc(50% + 350px);}
    .sub-section-3-item.tab3.cart{padding:50px;}
    .sub-section-3-item.tab3.cart p br{display:none;}
    .history-intro-overlay.tab5{width:200px;top:65px;}

}


/* 1280px: 기존 구조 유지하되 패딩 조정 */
@media (min-width:1025px) and (max-width:1440px) {

  .sub-section-4-title.tab1 { font-size: 30px; }
  .sub-section-4-title-desc.tab1 { font-size: 16px; }
  .sub-section-4-desc.tab1 { font-size: 16px; }
  .sub-section.sub-section-3 { height: auto !important; }
  /* TAB2 SECTION 3: 1280px */
  .sub-section-3.tab2 { padding: 160px 5%; }
  .sub-section-2-main-title.tab2 { font-size: 45px; }
  .tab2-main { width: auto; height: auto; max-height: 600px; }
  .sub-section-3-content.tab2 { display: grid; grid-template-columns: 350px 1fr; gap: 80px; align-items: center; max-width: 1400px; padding: 0; margin: 0 auto; }
  .sub-section-3-left.tab2 { padding-left: 40px; }
  .sub-section-3-left.tab2 img { width: 100%; height: auto; }
  .sub-section-3-right.tab2 { gap: 50px; padding: 24px 0; }
  .sub-section-3-item.tab2 { gap: 30px; flex-wrap:wrap;}
  .sub-section-3-item-title.tab2 { font-size: 24px; width: 200px; }
  .sub-section-3-item-desc.tab2 { font-size: 18px; }
  .sub-section-3-content.tab1 { width: 100%; max-width: 1400px; padding: 140px 120px 150px; margin: 0 auto; gap: 60px; height: auto; }
  .sub-bg-container.tab1.section-3 { align-items: flex-end; }
  .sub-section-3-left.tab1 { flex: 0 2 auto; }
  .sub-section-3-left.tab1 .sub-section-3-title.tab1 { font-size: 50px; margin-bottom: 60px; white-space: normal; }
  .sub-section-3-left.tab1 .sub-section-3-desc.tab1 { padding-bottom: 80px; font-size: 16px; }
  .sub-section-3-left.tab1 > img { width: 100%; max-width: 100%; height: auto; }
  .sub-section-3-right.tab1 { margin-bottom: 150px; flex: 0 1 auto; }
  .sub-section-3-right.tab1 img { width: auto; height: auto; }
  .tab2-label-left { left: calc(28% - 100px); }

  .image-wrapper.tab3 { height: auto; width: auto; }
  .sub-bg-container.tab3 { margin: 0 auto; height: auto; width: auto; }
  .sub-section-2-content.tab3 { }
  /* TAB4 HISTORY INTRO: 1440px 이하 */
  .history-intro-overlay.tab4 { padding: 160px 80px; }
  .history-intro-overlay.tab4 h3 { font-size: 32px; margin-bottom: 24px; }
  .history-intro-overlay.tab4 p { font-size: 18px; }
  /* TAB3 IMAGE OVERLAY: 1440px 이하 */
  .image-overlay.tab3 { padding: 120px 60px; }
  .image-overlay.tab3 h3 { font-size: 36px; margin-bottom: 20px; }
  .image-overlay.tab3 p { font-size: 18px; }
  /* TAB5 HISTORY INTRO: 1440px 이하 */
  .sub-section.sub-section-history-intro.tab5 { }
  .history-intro-title.tab5 { font-size: 60px; margin-bottom: 60px; }
  /* TAB5 ACCESS: 1440px 이하 */
  .sub-section.sub-section-access.tab5 { }
  .access-content.tab5 { gap: 80px; box-sizing: border-box; }
  .access-title.tab5 { font-size: 28px;}
  .access-info.tab5 { width: 100%; height: auto; padding: 50px 60px; gap: 50px; }
  .access-icon.tab5 { width: 70px; height: 70px; }
  .access-location.tab5 { font-size: 16px; }
  .access-time.tab5 { font-size: 16px; }
  /* GREETING SPLIT: 1440px 이하 */
  .greeting-split-section .sub-section-4-content.tab1 { height: 100%; }
  .sub-content-container.tab1 { height: 600px; }
  .greeting-split-section .greeting-split-left, .greeting-split-section .greeting-split-right { width: 52%; }
  .greeting-split-section.visible .greeting-split-left { width: 350px; }
  .greeting-split-section.visible .greeting-split-right { width: 350px; }
}
/* 1280px: 기존 구조 유지하되 패딩 조정 */
@media (min-width:1025px) and (max-width:1280px) {
  /* GREETING SPLIT: 1280px 이하 */
  .sub-content-container.tab1 { height: 520px; }
  .greeting-split-section .greeting-split-left, .greeting-split-section .greeting-split-right { width: 52%; }
  .greeting-split-section.visible .greeting-split-left { width: 250px; }
  .greeting-split-section.visible .greeting-split-right { width: 250px; }
  .history-timeline-content.tab4 { width: 100%; padding: 0 5%; box-sizing: border-box; }
  .sub-section.sub-section-history-timeline.tab4 { padding: 60px 0; }
  .timeline-nav.tab4 { margin-bottom: 60px; height: 52px; border-radius: 26px; padding: 0 12px; }
  .timeline-btn.tab4 { padding: 0 16px; height: 40px; line-height: 40px; font-size: 16px; }
  .timeline-content-wrapper.tab4 { gap: 40px; margin-bottom: 60px; }
    .timeline-controls.tab4{padding:0 5%;}
  .timeline-image.tab4 { width: 100%; }
  .timeline-info.tab4 h3 { font-size: 32px; margin: 0 0 16px 0; }
  .timeline-info.tab4 p { font-size: 16px; margin: 0 0 8px 0; }
 
}
/* 1280px: 기존 구조 유지하되 패딩 조정 */
@media (min-width:1025px) and (max-width:1440px) {
  /* TAB5 HISTORY INTRO: 1280px */
  .sub-section.sub-section-history-intro.tab5 { }
  .history-intro-title.tab5 { font-size: 56px; margin-bottom: 56px; }
  .history-intro-box-img.tab5 img { width: auto; height: 150px; }
  /* TAB5 ACCESS: 1280px 이상 1440px 이하 */
  .sub-section.sub-section-access.tab5 { }
  .access-content.tab5 { gap: 70px; box-sizing: border-box; }
  .access-title.tab5 { font-size: 26px; }
  .access-info.tab5 { width: 100%; height: auto; padding: 45px 50px; gap: 45px; }
  .access-icon.tab5 { width: 65px; height: 65px; }
  .access-location.tab5 { font-size: 16px; }
  .access-time.tab5 { font-size: 16px; }
  
}


@media (max-width:1280px) {
    .sub_visual{height:auto;padding:140px 0;}
    .visual_txt_area .main_tit{font-size:56px;}
    .tab_btn{font-size:18px;}
    .product_tab_nav_wrap{margin-top:85px;}
    .sub-section-2-desc.tab1{font-size:24px;width:80%;}
    .sub-section-2-desc.tab1 br{display:none;}
    .sub-section-2-content.tab1{padding:200px 0;}
    .sub-section-3-left.tab1 .sub-section-3-desc.tab1 br{display:none;}
    
    .sub-item.tab2.active .sub-item-content br{display:none;}
    .sub-section.sub-section-2.tab2{padding:100px 0;}
    .tab2-bottom-wrapper{margin:200px auto 0;max-width:400px;}
    .tab2-label-top{top:-40px;}
    .tab2-label-left {left: calc(28% - 175px);}
    .tab2-label-right{left: calc(50% + 320px);}
    .tab2-label{font-size:30px;}
    .sub-section-3.tab2 {padding: 100px 5%;}
    .sub-section-3-left.tab2 img{max-width:200px;}
    .sub-section-4.tab2{padding: 100px 5% 160px;;}
    .sub-section-4.tab2 .sub-section-4-title{font-size:50px;margin-bottom:40px;}

    .sub-section-2-title.tab3{font-size:50px;margin-bottom:40px;}
    .sub-section-2-content.tab3{padding:100px 5% 60px}
    .image-overlay.tab3 p br{display:none;}
    .sub-section-3-item.tab3.cart{padding:60px;}
    .sub-section-3-items.tab3{gap:100px;}
    .sub-section-3-item.tab3 .item-icon{max-width:150px;}
    .sub-section-3-item.tab3 h3{font-size:20px;}
    .sub-section-3-item.tab3 p{font-size:16px;}
    .sub-section-3-item.tab3 p br{display:none;}
    
    .history-intro-overlay.tab4{width:60%;padding:80px;}
    
    .sub-section.sub-section-history-intro.tab4{padding:100px 5% 60px}
    .history-intro-title.tab4{font-size:50px;margin-bottom:40px;}
    .timeline-nav.tab4{margin-bottom:40px;}
    .timeline-prev.tab4, .timeline-next.tab4{width:60px;height:60px;}
  .sub-section.sub-section-history-timeline.tab4{padding:0 0 100px;}
}


@media (max-width:1024px) {
    
  /* TAB5 HISTORY INTRO: 1024px 이상 768px 이하 */
  .sub-section.sub-section-history-intro.tab5 { }
  .history-intro-title.tab5 { font-size: 48px; margin-bottom: 48px; }
  .history-intro-box-img.tab5 img { width: auto; height: 150px; }
  /* TAB5 ACCESS: 1024px 이상 768px 이하 */
  .sub-section.sub-section-access.tab5 { padding: 100px 0 120px 0; }
  .access-content.tab5 { gap: 50px; padding: 0; box-sizing: border-box; }
  .access-title.tab5 { font-size: 24px; margin-bottom: 60px; }
  .access-info.tab5 { width: 100%; height: auto; padding: 40px 40px; gap: 40px; }
  .access-icon.tab5 { width: 60px; height: 60px; }
  .access-location.tab5 { font-size: 16px; }
  .access-time.tab5 { font-size: 16px; }
  .access-right.tab5{width:100%}

/* Greeting 탭: Our Growth & Capability 섹션 - 제목 → 설명 → 이미지 순으로 세로 배치 */
  /* 상단 비주얼 (EVERY CONTACT EVERY BOND + 탭) */
  .sub_visual { height: auto; min-height: 560px; padding: 120px 48px 73px 40px; align-items: end; background-position: 35% center; }
  .visual_txt_area { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; box-sizing: border-box; }
  .visual_txt_area .text_wrapper { padding-left: 32px; }
  .visual_txt_area .main_tit { font-size: 42px; margin: 28px 0; line-height: 1.25; }
  .visual_txt_area .sub_tit { font-size: 20px; }
  .visual_txt_area .sub_desc { font-size: 17px; }
  .product_tab_nav_wrap { margin-top: 48px; margin-left: -10px; margin-right: 0; }
  .product_tab_nav { flex-wrap: nowrap; gap: 6px; }
  .tab_btn { padding: 14px 18px; font-size: 16px; white-space: nowrap; flex-shrink: 0; }
  .sub-banner-container, .sub-content-container { padding: 0 40px; }
  .sub-banner-title { font-size: 48px; }
  .sub-section-4-title { font-size: 36px; }
  /* Greeting 탭 Section 2 (Since 1995): 높이·패딩·폰트 반응형 */
  .sub-section.sub-section-2:has(.sub-section-2-content.tab1)[style] { height: auto !important; min-height: 400px; }
  .sub-section.sub-section-2:has(.sub-section-2-content.tab1) .sub-bg-container { height: auto; min-height: 400px; }
  .sub-section-2-content.tab1 { padding: 0 24px; }
  .sub-section-2-title.tab1 { font-size: 26px; margin-bottom: 36px; }
  .sub-section-2-desc.tab1 { font-size: 20px; line-height: 1.6; }
  /* Greeting 탭 Section 3만: 좌우 → 세로 배치 (제목 > 설명 > 이미지1 > 이미지2) */
  .sub-section.sub-section-3 .sub-bg-container.tab1.section-3 { align-items: center; }
  .sub-section-3-content.tab1 { align-items: stretch; gap: 30px; padding: 80px 5%; max-width: 100%; flex-wrap:wrap;}
  .sub-section-3-left.tab1 { order: 1; justify-content: flex-start; align-items: flex-start; width:100%;}
  .sub-section-3-left.tab1 .sub-section-3-title.tab1 { font-size: 42px; margin-bottom: 32px; white-space: normal; width:100%;}
  .sub-section-3-left.tab1 .sub-section-3-desc.tab1 { padding-bottom: 32px; font-size: 18px; margin-bottom: 0; width:100%;}
  .sub-section-3-left.tab1 > img { width: 100%; max-width: 100%; height: 300px; display: block; object-fit:cover;}
  .sub-section-3-right.tab1 { order: 2; margin-bottom: 0; width:100%;}
  .sub-section-3-right.tab1 img { width: 100%; max-width: 100%; height: 500px; display: block; object-fit:cover; }
  .sub-section-3-content:not(.tab1) { }
  .sub-section-3-title:not(.tab1) { font-size: 40px; }
  .sub-section-3.tab2{padding:100px 5%;}
  /* Greeting 탭 Section 4 (하단): 1024px에서 양옆 이미지 제거, 텍스트만 표시 */
  .greeting-split-section .greeting-split-left, .greeting-split-section .greeting-split-right { display: none !important; }
  .greeting-split-section .greeting-split-center { opacity: 1; width: 100%; }
  .sub-section.sub-section-4:has(.sub-section-4-content.tab1)[style] { height: auto !important; min-height: 0; }
  .greeting-split-section .sub-section-4-content.tab1 { display: flex; flex-direction: column; height: auto; gap: 0px; align-items: stretch; }
  .sub-content-container.tab1 { height: auto !important; padding: 80px 50px; }
  .sub-section-4-content.tab1 { flex-direction: column; height: auto; gap: 0px; align-items: stretch; }
  .sub-section-4-content.tab1 .sub-item:first-child { order: 1; }
  .sub-section-4-content.tab1 .sub-section-4-text-area.tab1 { order: 2; padding: 0 160px; gap: 10px; }
  .sub-section-4-content.tab1 .sub-item:last-child { order: 3; }
  .sub-section-4-content.tab1 .sub-item img { width: 100%; max-width: 100%; width: auto; height: auto; max-height: none; object-fit: cover; }
  .sub-section-4-content.tab1 .sub-section-4-text-area.tab1 .sub-section-4-title.tab1 { font-size: 26px; margin: 28px 0 12px; }
  .sub-section-4-title-desc.tab1 { font-size: 17px; margin-bottom: 28px; }
  .sub-section-4-content.tab1 .sub-section-4-desc.tab1 { font-size: 16px; line-height: 1.65; }
  .sub-section-4-content.tab1 .sub-section-4-text-area.tab1 img[alt="logo"] { max-width: 80px; height: auto; }
  .sub-section-4-desc.tab1{width:100%;}
  
  
  /* CI & Vision 탭 상단: 화면 그대로 줄이는 느낌, 이미지 비율 축소, 물결 보이게 */
  .sub-section.sub-section-2.tab2{padding:100px 5%;}
  .sub-section.sub-section-2.tab2[style] { height: auto !important; min-height: 640px; padding: 80px 0px 100px; overflow: visible; }
  .sub-bg-container.tab2 { padding: 0; gap: 28px; }
  .sub-section-2-content.tab2 { margin-top: 0; min-width: 0; flex: 1 1 52%; gap: 28px; }
  .tab2-main { flex: 0 1 44%; max-width: 44%; width: 100%; height: auto; object-fit: cover; }
  .sub-section-2-title.tab2 { font-size: 20px; }
  .sub-section-2-main-title.tab2 { font-size: 48px; margin-bottom: 18px; }
  .sub-section-2-desc.tab2 { font-size: 17px; }
  .tab2-line.wave { height: 200px; margin-top: -60px; overflow: visible; }
  .tab2-line.wave::before { background-size: 100% 100%; }
  .tab2-bottom-wrapper { margin-top: 180px; padding: 0 5%; }
  .tab2-bottom { max-width: 62%; }
  .tab2-label { font-size: clamp(18px, 2.6vw, 28px); }
  .tab2-label-top { top: -10%; }
  .tab2-label-left {left: 14%; }
  .tab2-label-right { left: calc(50% + 180px); }
  
  /* CI & Vision Section 3: 1024px - 로고 위 · 설명 아래 세로 배치 */
  .sub-section.sub-section-3.tab2[style] { height: auto !important; min-height: 0; padding: 80px 40px 100px; }
  .sub-section-3-content.tab2 { grid-template-columns: 1fr; gap: 60px; padding: 0; }
  .sub-section-3-left.tab2 { order: 1; padding-left: 0; }
  .sub-section-3-left.tab2 img { max-width: 240px; width: 100%; margin: 0 auto; display: block; }
  .sub-section-3-right.tab2 { order: 2; gap: 40px; padding: 0; }
  .sub-section-3-item.tab2 { gap: 20px; flex-direction: column; align-items: flex-start; }
  .sub-section-3-item-title.tab2 { width: auto; white-space: normal; font-size: 22px; }
  .sub-section-3-item-desc.tab2 { font-size: 16px; }
  /* TAB4 HISTORY INTRO: 1024px 이하 768px 이상 */
  .history-intro-overlay.tab4 { padding: 80px 40px; }
  .history-intro-overlay.tab4 h3 { font-size: 28px; margin-bottom: 20px; }
  .history-intro-overlay.tab4 p { font-size: 16px; }
  /* TAB4 TIMELINE: 1024px 이하 768px 이상 */
  .history-timeline-content.tab4 { width: 100%; box-sizing: border-box; position:relative;}
  .sub-section.sub-section-history-timeline.tab4 { padding: 0 5% 60px; }
  .timeline-nav.tab4 { margin-bottom: 60px; height: 52px; border-radius: 26px; padding: 0 12px; }
  .timeline-btn.tab4 { padding: 0 10px; height: 40px; line-height: 40px; font-size: 16px; }
  .timeline-content-wrapper.tab4 { gap: 40px; margin-bottom: 60px; }
  .timeline-item.tab4.active { padding: 0; gap: 20px; flex-direction: column; }
  .timeline-image.tab4 { width: 100%; }
  .timeline-info.tab4 h3 { font-size: 32px; margin: 0 0 16px 0; }
  .timeline-info.tab4 p { font-size: 16px; margin: 0 0 8px 0; }
  .timeline-controls.tab4 { top: 130px; bottom: auto; left: auto; right: 0; max-width: none; margin: 0; padding: 0 24px; transform: none; justify-content: flex-end; }
  .timeline-prev.tab4, .timeline-next.tab4 { width: 48px; height: 48px; }
  /* CI & Vision Section 4: 1024px - 768px와 동일한 스타일 */
  .sub-section-4.tab2 { padding: 100px 5%; }
  .sub-section-4.tab2 .sub-section-4-title { font-size: 36px; margin-bottom: 32px; }
  .sub-section-4.tab2 .sub-section-4-items { flex-direction: column; flex-wrap: wrap; gap: 0; }
  .sub-item.tab2 { width: 100% !important; max-width: 100%; height: auto; min-height: 160px; transition: min-height 0.4s ease, box-shadow 0.4s ease; }
  .sub-item.tab2.active { width: 100% !important; min-height: 260px; z-index: 1; }
  .sub-item-logo { padding: 24px; }
  .sub-item-logo img { width: 72px; }
  .sub-item-content { padding: 24px 16px; }
  .sub-item.tab2 h3, .sub-item.tab2:not(.active) h3 { font-size: 22px; }
  .sub-item.tab2:not(.active) h3 { position: static; left: auto; top: auto; margin-bottom: 8px; }
  .sub-item.tab2 p { font-size: 16px; }
  /* ESG 탭: 1024px (768/478과 동일하게 화면 꽉 차고, 주황 제목 이미지 안 왼쪽 위) */
  #tab-3.tab-content { width: 100%; max-width: 100%; padding: 0; box-sizing: border-box; }
  .sub-section.tab3:has(.sub-section-2-content.tab3) { padding: 0; width: 100%; max-width: 100%; height: auto !important; }
  .sub-bg-container.tab3 { padding: 0; width: 100%; max-width: 100%; height: auto; min-height: 0; box-sizing: border-box; }
  .sub-section-2-content.tab3 { padding:80px 5%; width: 100%; max-width: 100%; box-sizing: border-box; }
  .sub-section-2-title.tab3 { position: static; font-size: 48px; margin: 0 0 48px 0; padding: 0; text-align: left; color: #FF6B00; }
  .image-wrapper.tab3 { min-height: auto; width: 100%; }
  .image-overlay.tab3 { padding: 100px 48px;background: transparent; }
  .image-overlay.tab3 h3 { font-size: 28px; margin-bottom: 20px; }
  .image-overlay.tab3 p { font-size: 17px; }
  .sub-section.sub-section-3.tab3 { padding: 0 5% 120px; margin-top: 0; }
  .sub-section-3-title.tab3 { font-size: 48px; margin-bottom: 48px; }
  .sub-section-3-desc.tab3 { font-size: 16px; margin-bottom: 60px; }
  .sub-section-3-items.tab3 { gap: 60px 40px; grid-template-columns: repeat(2, 1fr);}
  .sub-section-3-item.tab3 h3 { font-size: 22px; margin-bottom: 16px; }
  .sub-section-3-item.tab3 p { font-size: 16px; }
  .sub-section-3-item.tab3.cart { padding: 48px 40px; }
  .sub-section-3-item.tab3.cart .item-content { padding-right: 32px; }
  .sub-section-3-item.tab3.cart .item-icon img { max-width: 140px; }
  .sub-section-3-item.tab3.cart h3 { font-size: 22px; }
  .sub-section-3-item.tab3.cart p { font-size: 16px; }
  /* History 탭 인트로: 1024px */
  .sub-section.sub-section-history-intro.tab4 { padding: 80px 5%; }
  .history-intro-content.tab4 { max-width: 100%; padding: 0; }
  .history-intro-title.tab4 { font-size: 48px; margin-bottom: 48px; }
  .history-intro-overlay.tab4 { padding: 120px 48px; }
  .history-intro-overlay.tab4 h3 { font-size: 28px; margin-bottom: 20px; }
  .history-intro-overlay.tab4 p { font-size: 17px; }
  /* Direction 탭 인트로: 1024px */
  .sub-section.sub-section-history-intro.tab5 {padding: 100px 0 0}
  .history-intro-content.tab5 { max-width: 100%; }
  .history-intro-title.tab5 { font-size: 48px; margin-bottom: 48px; }
  .history-intro-overlay.tab5 { top: 80px; width:150px;}
  .history-intro-box.tab5 { margin: -100px 24px 0; padding: 56px 48px; }
  .history-intro-box-content.tab5 h3 { font-size: 28px; }
  .history-intro-box-item { gap: 48px; }
  .history-intro-box-item .label { font-size: 20px; width: 80px; }
  .history-intro-box-item .value { font-size: 16px; }
  .sub-section.sub-section-map.tab5 { padding: 40px 0px; }
  .sub-section.sub-section-access.tab5 { padding: 80px 5% 40px; }
  .access-content.tab5 { flex-direction: column; gap: 48px; align-items: center; }
  .access-title.tab5 { font-size: 26px; margin-bottom: 48px; }
  .access-info.tab5 { width: 100%; max-width: 100%; height: auto; padding: 48px 40px; gap: 48px; }
  .access-route.tab5 { gap: 24px; }
  .access-route-item.tab5 { gap: 16px; }
  .access-icon.tab5 { width: 64px; height: 64px; }
  .access-location.tab5 { font-size: 16px; }
  .access-arrow.tab5 { font-size: 20px; min-width: 24px; }
  .access-arrow.tab5 img { max-width: 100%; height: auto; }
  .map-section{margin-bottom:100px;}
}
@media (max-width:768px) {
  /* 상단 비주얼: 모바일 */
  .sub_visual { position: relative; z-index: 20; min-height: 420px; padding: 80px 5% 50px; background-position: 60% center; }
  .visual_txt_area { padding-left: 0; padding-right: 0; }
  .visual_txt_area .text_wrapper { padding-left: 20px; }
  .visual_txt_area .main_tit { font-size: 28px; margin: 20px 0; line-height: 1.3; }
  .visual_txt_area .sub_tit { font-size: 16px; }
  .visual_txt_area .sub_desc { font-size: 16px; }
  .product_tab_nav_wrap { position: relative; z-index: 2; margin-top: 32px; margin-left: 0; margin-right: 0; border-radius: 100px; overflow: visible; width: 100%; max-width: 100%; }
  .product_tab_nav_wrap::-webkit-scrollbar { display: none; }
  .product_tab_nav_wrap .product_tab_nav { display: none !important; }
  .product_tab_dropdown { display: block; width: 100%; max-width: 100%; position: relative; }
  .product_tab_dropdown_trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 20px; border: none; border-radius: 100px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 16px; font-weight: 500; font-family: 'Poppins', sans-serif; cursor: pointer; text-align: left; transition: background 0.2s; }
  .product_tab_dropdown_trigger:hover { background: rgba(255, 255, 255, 0.2); }
  .product_tab_dropdown_icon { display: inline-block; width: 12px; height: 12px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; }
  .product_tab_dropdown_trigger[aria-expanded="true"] .product_tab_dropdown_icon { transform: rotate(-135deg); }
  .product_tab_dropdown_list { display: none; list-style: none; margin: 8px 0 0; padding: 8px 0; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); position: absolute; left: 0; right: 0; z-index: 10; max-height: 280px; overflow-y: auto; }
  .product_tab_dropdown_list.is-open { display: block; }
  .product_tab_dropdown_item { display: block; padding: 0; color: #222222; font-size: 16px; font-family: 'Poppins', sans-serif; cursor: pointer; transition: background 0.15s; font-weight: 500; }
  .product_tab_dropdown_item a { display: block; padding: 12px 20px; color: #222222; text-decoration: none; }
  .product_tab_dropdown_item a:hover { background: rgba(255, 107, 0, 0.08); }
  .product_tab_nav { position: relative; flex-wrap: nowrap; }
  .product_tab_nav::before { content: ''; position: absolute; inset: 0; border-radius: 100px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.12); z-index: 0; }
  .product_tab_nav .tab_btn { position: relative; z-index: 1; }
  .tab_btn { padding: 10px 12px; font-size: 16px; white-space: nowrap; flex-shrink: 0; }
  .sub-section-4-content.tab1 .sub-section-4-text-area.tab1 { order: 2; padding: 48px 10px; }
  .sub-banner-container { flex-direction: column; padding: 40px 20px; }
  .sub-banner-title { font-size: 36px; }
  .sub-banner-desc { font-size: 16px; }
  .sub-content-container { padding: 0 20px; }
  .sub-section-4-items { flex-direction: column; }
  .sub-item { flex: 1; max-width: 100%; }
  /* Greeting 탭 Section 2 (Since 1995): 모바일 */
  .sub-section.sub-section-2:has(.sub-section-2-content.tab1)[style] { min-height: 260px; }
  .sub-section-2-content.tab1 { padding: 0 16px; }
  .sub-section-2-title.tab1 { font-size: 22px; margin-bottom: 24px; }
  .sub-section-2-desc.tab1 { font-size: 16px; }
  /* Greeting 탭 Section 3: 모바일 패딩·폰트 축소 */
  .sub-section-3-right img:hover, .sub-section-3-left.tab1 img:hover { filter: brightness(1) !important; transform: scale(1) !important; }
  .sub-section-3-left.tab1 .sub-section-3-title.tab1 { font-size: 26px; margin-bottom: 20px; white-space: normal; }
  .sub-section-3-left.tab1 .sub-section-3-desc.tab1 { font-size: 16px; padding-bottom: 20px; }
  .sub-section-3-left.tab1 .sub-section-3-desc.tab1 br{display:none;}
  .sub-section-3-content:not(.tab1) { }
  .sub-section-3-title:not(.tab1) { font-size: 32px; }
  /* Greeting Section 4 (하단): 모바일 폰트·간격, 양옆 이미지 제거 */
  .greeting-split-section .greeting-split-left, .greeting-split-section .greeting-split-right { display: none !important; }
  .greeting-split-section .greeting-split-center { opacity: 1; width: 100%; }
  .sub-section.greeting-split-section[style] { height: auto !important; min-height: 0; }
  .greeting-split-section .sub-section-4-content.tab1 { display: flex; flex-direction: column; height: auto; }
  .sub-content-container.tab1 { padding: 10 5%; }
  .sub-section-4-content.tab1 { gap: 0px; }
  .sub-section-4-content.tab1 .sub-section-4-text-area.tab1 .sub-section-4-title.tab1 { font-size: 22px; margin: 22px 0 10px; }
  .sub-section-4-title-desc.tab1 { font-size: 16px; margin-bottom: 20px; }
  .sub-section-4-content.tab1 .sub-section-4-desc.tab1 { font-size: 16px; }
  .sub-section-4-content.tab1 .sub-section-4-text-area.tab1 img[alt="logo"] { max-width: 64px; }
  /* CI & Vision 탭 상단: 768px (그대로 줄인 느낌, 이미지 더 축소) */
  .sub-section.sub-section-2.tab2{padding:80px 5%;}
  .sub-section.sub-section-2.tab2[style] { padding: 56px 0px 80px; }
  .sub-bg-container.tab2 { gap: 20px; flex-wrap:wrap; }
  .sub-section-2-content.tab2 { min-width: 100%; flex: unset; gap: 18px; width:100%;}
  .tab2-main { flex: unset; max-width: unset; width: 100%; height: auto; object-fit: cover; }
  .sub-section-2-title.tab2 { font-size: 16px; }
  .sub-section-2-main-title.tab2 { font-size: 32px; margin-bottom: 0; }
  .sub-section-2-main-title.tab2 br{display:none;}
  .sub-section-2-desc.tab2 { font-size: 18px; }
  .sub-section-2-desc.tab2 br{ display:none; }
  .tab2-line.wave { height: 140px; margin-top: -40px; overflow: visible; }
  .tab2-bottom-wrapper { margin-top: 80px; }
  .tab2-bottom { max-width: 62%; }
  .tab2-label { font-size: clamp(15px, 3.2vw, 20px); }
  .tab2-label-top { top: -10%; }
  .tab2-label-left {left: 17%; }
  .tab2-label-right {left: calc(50% + 160px)}
  .sub-section-3.tab2{padding:80px 5%;}
  /* ESG 탭: 768px (화면 꽉 차고, 내용 크게) */
  #tab-3.tab-content { width: 100%; max-width: 100%; padding: 0; box-sizing: border-box; }
  .sub-section.tab3:has(.sub-section-2-content.tab3) { padding:80px 5% 40px; width: 100%; max-width: 100%; height: auto !important; min-height: 0; box-sizing: border-box; overflow-x: hidden; }
  .sub-bg-container.tab3 { padding: 0; width: 100%; max-width: 100%; height: auto; min-height: 0; box-sizing: border-box; }
  .sub-section-2-content.tab3 { position: relative; padding: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
  .sub-section-2-title.tab3 {font-size: 36px; margin-bottom:32px;}
  .image-wrapper.tab3 { min-height: auto; width: 100%; margin-left: 0; margin-top: 0; margin-bottom: 0; box-sizing: border-box; background-position:center right;}
  .sub-section-2-content.tab3 img { min-height: 400px; border-radius: 0; }
  .image-overlay.tab3 { padding: 52px 28px 56px; border-radius: 0; justify-content: center; align-items: center; text-align: center; }
  .image-overlay.tab3 h3 { font-size: 26px; margin-bottom: 24px; text-align: center; line-height: 1.35; }
  .image-overlay.tab3 p { font-size: 16px; line-height: 1.7; text-align: center; }
  .image-overlay.tab3 p br{display:none;}
  .sub-section.sub-section-3.tab3 { padding: 0 5% 80px; margin-top: 0; }
  .sub-section-3-title.tab3 { font-size: 32px; margin-bottom: 32px; }
  .sub-section-3-desc.tab3 { font-size: 16px; margin-bottom: 40px; }
  .sub-section-3-items.tab3 { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .sub-section-3-item.tab3 .item-icon { margin-bottom: 20px; }
  .sub-section-3-item.tab3 .item-icon img{width:120px;}
  .sub-section-3-item.tab3 h3 { font-size: 20px; margin-bottom: 12px; }
  .sub-section-3-item.tab3 p { font-size: 16px; }
  .sub-section-3-item.tab3 p br{display:none;}
  /* 분쟁 광물: 모바일만 이미지 오른쪽 아래 배치 */
  .sub-section-3-item.tab3.cart { position: relative; padding: 32px 24px; min-height: 240px; }
  .sub-section-3-item.tab3.cart .item-content { padding-right: 0; padding-bottom:105px; }
  .sub-section-3-item.tab3.cart .item-icon { position: absolute; right: 24px; bottom: 24px; }
  .sub-section-3-item.tab3.cart .item-icon img { max-width: 110px; }
  .sub-section-3-item.tab3.cart h3 { font-size: 20px; }
  .sub-section-3-item.tab3.cart p { font-size: 16px; }
  /* History 탭 인트로: 768px (ESG UI처럼 화면 꽉 차고, 제목 이미지 안 왼쪽 위) */
  .history-intro-overlay.tab4{width:100%;}
  #tab-4.tab-content { width: 100%; max-width: 100%; padding: 0; box-sizing: border-box; }
  .sub-section.sub-section-history-intro.tab4 { padding: 80px 5%; width: 100%; max-width: 100%; overflow-x: hidden; }
  .sub-bg-container.tab4 { padding: 0; width: 100%; max-width: 100%; }
  .history-intro-content.tab4 { position: relative; padding: 0; width: 100%; max-width: 100%; }
  .history-intro-title.tab4 { font-size: 36px; margin-bottom:32px;}
  .history-intro-overlay.tab4 { padding:80px 40px; display: flex; flex-direction: column; justify-content: center; align-items:flex-start; }
  .history-intro-overlay.tab4 h3 { font-size: 26px; margin-bottom: 10px; line-height: 1.35; }
  .history-intro-overlay.tab4 p { font-size: 16px; line-height: 1.65;  }
  .sub-section.sub-section-history-timeline.tab4 { overflow-x: visible; }
  /* History 탭 타임라인: 768px (연도바 터치 스크롤 + 좌우 버튼 하단 배치) */
  .history-timeline-content.tab4 { width: 100%;  box-sizing: border-box; overflow-x: visible; }
  .timeline-nav.tab4 { margin-bottom: 40px; height: 56px; border-radius: 28px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; /* Firefox */
    overscroll-behavior-x: contain; display: block; position: relative; padding: 0; }
  .timeline-nav.tab4::-webkit-scrollbar { display: none; /* Chrome/Safari */}
  .history-intro-title.tab5{font-size:36px;margin-bottom:32px;}
  /* 모바일: 그라데이션을 스크롤되는 inner 뒤에 두어 버튼 전체 너비만큼 배경이 보이게 */
  .timeline-nav.tab4::before, .timeline-nav.tab4::after { display: none; }
  .timeline-nav-inner.tab4 { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 36px; min-height: 56px; position: relative; width: max-content; z-index: 3; box-sizing: border-box; border-radius: 28px; overflow: hidden; }
  /* inner 전체 너비에 회색 바닥 + 주황 그라데이션 (nav에서 상속한 --progress 사용) */
  .timeline-nav-inner.tab4::before { content: ''; position: absolute; inset: 0; background: #F1F1F1; border-radius: 28px; z-index: 0; }
  .timeline-nav-inner.tab4::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(90deg, #FF6B00 0%, #FF6B00 var(--fade-start, 37%), rgba(255, 107, 0, 0) var(--fade-end, 44%) ); clip-path: inset(0 calc(100% - var(--progress, 20%)) 0 0); border-radius: 28px; z-index: 1; transition: clip-path 0.3s ease; }
  .timeline-nav.tab4 .timeline-btn.tab4 { position: relative; z-index: 2; }
  .timeline-btn.tab4 { flex: 0 0 auto; padding: 0 18px; height: 40px; line-height: 40px; font-size: 16px; color: #000000; scroll-snap-align: center; }
  /* 주황 영역 위 버튼은 흰 글자, 회색 영역 위는 검정 (PC와 동일) */
  .timeline-btn.tab4.filled { color: #FFFFFF; }
  .timeline-btn.tab4:hover { color: inherit; }
  .timeline-btn.tab4.active { background: #FFFFFF; color: #FF6B00 !important; }
  .timeline-content-wrapper.tab4 { flex-direction: column; align-items: stretch; gap: 24px; margin-bottom: 64px; }
  .timeline-item.tab4.active { padding: 0; flex-direction: column; gap: 20px; padding-bottom: 10px; }
  .timeline-image.tab4 { width: 100%; }
  .timeline-info.tab4 h3 { font-size: 40px; margin: 0 0 18px 0; }
  .timeline-info.tab4 p { font-size: 16px; margin: 0 0 10px 0; }
  /* Direction 탭 인트로: 768px (화면 꽉 차게 + Direction 제목 이미지 안 왼쪽 위) */
  #tab-5.tab-content { width: 100%; max-width: 100%; padding: 0; box-sizing: border-box; }
  .sub-section.sub-section-history-intro.tab5{padding:80px 0 0;}
  .history-intro-box.tab5 { margin:0; padding: 40px 24px; flex-direction: column; gap: 24px; border-radius: 0; box-shadow:none;}
  .history-intro-box-content.tab5 h3 { font-size: 24px; }
  .history-intro-box-content.tab5 { gap: 20px; width:100%; }
  .history-intro-box-item { gap: 24px; flex-direction: row; align-items: flex-start; }
  .history-intro-box-item .label { font-size: 16px; width: auto; }
  .history-intro-box-item .value { font-size: 16px; }
  .history-intro-box-img.tab5 { max-width: 120px; margin: 0 auto; display:none;}
  .history-intro-box-img.tab5 img { width: 100%; height: auto; }
  .history-intro-content.tab5{padding-bottom:0;}
  .sub-section.sub-section-map.tab5 { padding: 32px 0px; }
  .map-content.tab5 { padding: 0; }
  .sub-section.sub-section-access.tab5 { padding: 60px 5%; }
  .access-title.tab5 { font-size: 22px; margin-bottom: 32px; }
  .access-content.tab5 { gap: 40px; }
  .access-info.tab5 { padding: 40px 28px; gap: 40px; }
  .access-route.tab5 { gap: 16px; grid-template-columns: 1fr 1fr 1fr;}
  .history-intro-overlay.tab5{top:50%;transform: translate(-50%, -50%);}
  .access-route-item.tab5 { gap: 12px; }
  .access-icon.tab5 { width: 64px; height: 64px; }
  .access-location.tab5 { font-size: 16px; white-space: normal; }
  .access-arrow.tab5 { font-size: 18px; min-width: 24px; }
  .access-arrow.tab5 img { max-width: 100%; width: 100%; height: auto; }
  .access-right.tab5 { width: 100%; }
  .access-right.tab5 img { width: 100%; max-width: 100%; height: auto; display: block; }
  /* CI & Vision Section 3: 768px */
  .sub-section.sub-section-3.tab2[style] { padding: 56px 24px 72px; }
  .sub-section-3-content.tab2 { grid-template-columns: 1fr; gap: 36px; padding: 0; }
  .sub-section-3-left.tab2 { order: 1; padding-left: 0; }
  .sub-section-3-left.tab2 img { max-width: 200px; width: 100%; margin: 0 auto; display: block; }
  .sub-section-3-right.tab2 { order: 2; gap: 28px; padding: 0; }
  .sub-section-3-item.tab2 { gap: 12px; flex-direction: column; align-items: flex-start; }
  .sub-section-3-item-title.tab2 { font-size: 20px; width: auto; white-space: normal; }
  .sub-section-3-item-desc.tab2 { font-size: 16px; }
  /* CI & Vision Section 4 (Color Palette): 모바일에서 세로 배열 + PC처럼 넓어지는 모션 */
  .sub-section-4.tab2 { padding: 80px 5%; }
  .sub-section-4.tab2 .sub-section-4-title { font-size: 36px; margin-bottom: 32px; }
  .sub-section-4.tab2 .sub-section-4-items { flex-direction: column; flex-wrap: wrap; gap: 0; }
  .sub-item.tab2 { width: 100% !important; max-width: 100%; height: auto; min-height: 160px; transition: min-height 0.4s ease, box-shadow 0.4s ease; }
  .sub-item.tab2.active { width: 100% !important; min-height: 260px; z-index: 1; }
  .sub-item-logo { padding: 24px; }
  .sub-item-logo img { width: 72px; }
  .sub-item-content { padding: 24px 16px; }
  .sub-item.tab2 h3, .sub-item.tab2:not(.active) h3 { font-size: 22px; }
  .sub-item.tab2:not(.active) h3 { position: static; left: auto; top: auto; margin-bottom: 8px; }
  .sub-item.tab2 p { font-size: 16px; }
  .sub-item.tab2 p br{ display:none; }

  .sub-section-2-desc.tab1{width:100%;}
  .sub-content-container.tab1{padding:80px 5%;}

  .pc_only{display:none}
  .mb_only{display:block}
  
}
/* 478px 이하: 소형 기기 (지금까지 수정한 영역 모두 축소) */
@media (max-width:480px) {
    
  /* 상단 비주얼 */
  .sub_visual { min-height: 360px; padding: 60px 20px 43px 16px; background-position: 60% center; }
  .visual_txt_area .text_wrapper { padding-left: 16px; }
  .visual_txt_area .main_tit { font-size: 22px; margin: 14px 0; line-height: 1.35; }
  .visual_txt_area .sub_tit { font-size: 16px; }
  .visual_txt_area .sub_desc { font-size: 16px; }
  .product_tab_nav_wrap { margin-top: 24px; border-radius: 100px; }
  .product_tab_nav { position: relative; }
  .product_tab_nav::before { content: ''; position: absolute; inset: 0; border-radius: 100px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.12); z-index: 0; }
  .product_tab_nav .tab_btn { position: relative; z-index: 1; }
  .tab_btn { padding: 8px 10px; font-size: 16px; }
  .sub-banner-container { padding: 24px 16px; }
  .sub-banner-title { font-size: 28px; }
  .sub-section-4-content.tab1 .sub-section-4-text-area.tab1 { order: 2; padding: 0 24px; }
  .sub-banner-desc { font-size: 16px; }
  .sub-content-container { padding: 0 16px; }

  .sub-section-4.tab2 .sub-section-4-title,
  .sub-section-2-title.tab3, .history-intro-title.tab4, 
  .history-intro-title.tab5{font-size:24px;margin-bottom:24px;}
  .sub-section.sub-section-history-intro.tab5{padding-top:60px;}

  
  /* ESG 탭: 478px (화면 꽉 차고, 내용 크게) */
  #tab-3.tab-content { width: 100%; max-width: 100%; padding: 0; box-sizing: border-box; }
  .sub-section.tab3:has(.sub-section-2-content.tab3){padding:60px 5% 40px;}
  .image-overlay.tab3 {justify-content: center; align-items: center; text-align: center; }
  .image-overlay.tab3 h3 { font-size: 22px; margin-bottom: 20px;line-height: 1.35; }
  .image-overlay.tab3 p { font-size: 16px; line-height: 1.7;  }
  .sub-section.sub-section-3.tab3 { padding: 0 5% 60px; margin-top: 0; }
  .sub-section-3-title.tab3 { font-size: 24px; margin-bottom: 24px; }
  .sub-section-3-desc.tab3 { font-size: 16px; margin-bottom: 28px; }
  .sub-section-3-items.tab3 { gap: 28px; grid-template-columns: repeat(1, 1fr);}
  .sub-section-3-item.tab3 { padding: 24px 16px; }
  .sub-section-3-item.tab3 .item-icon { margin-bottom: 16px; width:100px;}
  .sub-section-3-item.tab3 h3 { font-size: 18px; margin-bottom: 10px; }
  .sub-section-3-item.tab3 p { font-size: 16px; }
  /* 분쟁 광물: 478px에서도 이미지 오른쪽 아래 */
  .sub-section-3-item.tab3.cart { position: relative; padding: 20px; min-height: 220px; }
  .sub-section-3-item.tab3.cart .item-content { padding-right: 0; padding-bottom: 85px; }
  .sub-section-3-item.tab3.cart .item-icon { position: absolute; right: 16px; bottom: 16px; }
  .sub-section-3-item.tab3.cart .item-icon img { max-width: 90px; }
  .sub-section-3-item.tab3.cart h3 { font-size: 18px; }
  .sub-section-3-item.tab3.cart p { line-height: 1.65; font-size: 16px; }
  /* History 탭 인트로: 478px */
  .history-intro-image.tab4 {position:relative;}
  .history-intro-image.tab4::before{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background:rgba(0,0,0,0.5);content:'';}
  .history-intro-overlay.tab4 { padding: 44px 20px 48px;position:relative;z-index:2;}
  .history-intro-overlay.tab4 h3 { font-size: 22px; margin-bottom: 20px; }
  .history-intro-overlay.tab4 p { font-size: 16px; line-height: 1.6; }
  .sub-section.sub-section-history-timeline.tab4 { }
  /* History 탭 타임라인: 478px (더 촘촘하게) */
  .history-timeline-content.tab4 {  }
  .sub-section.sub-section-history-intro.tab4{padding:60px 5% 40px;}
  .timeline-nav.tab4 { margin-bottom: 28px; height: 52px; border-radius: 26px; }
  .timeline-nav-inner.tab4 { padding: 0 28px; min-height: 52px; gap: 8px; border-radius: 26px; }
  .timeline-nav-inner.tab4::before, .timeline-nav-inner.tab4::after { border-radius: 26px; }
  .timeline-btn.tab4 { padding: 0 14px; height: 36px; line-height: 36px; font-size: 16px; }
  .timeline-content-wrapper.tab4 { gap: 20px; margin-bottom:0; }
  .timeline-item.tab4.active { gap: 16px; padding-bottom: 10px; }
  .timeline-info.tab4 h3 { font-size: 38px; margin: 0 0 14px 0; }
  .timeline-info.tab4 p { font-size: 16px; margin: 0 0 8px 0; }
  .timeline-controls.tab4 { padding: 0 10px; top:300px; gap:10px;}
  .timeline-prev.tab4, .timeline-next.tab4 { width: 40px; height: 40px; background:#fff;}
  .timeline-prev.tab4:hover, .timeline-next.tab4:hover{background:#fff;}
  .timeline-prev.tab4 img, .timeline-next.tab4 img{width:10px;}
  /* Direction 탭: 478px */
  
  .history-intro-box-content.tab5 h3 { font-size: 20px; }
  .history-intro-box-item .label { font-size: 16px; }
  .history-intro-box-item .value { font-size: 16px; }
  .history-intro-box-img.tab5 { max-width: 100px; }
  .sub-section.sub-section-map.tab5 { padding: 24px 0px; }
  .sub-section.sub-section-access.tab5 { padding: 40px 5%; }
  .access-title.tab5 { font-size: 20px; margin-bottom: 24px; }
  .access-content.tab5 { gap: 40px; padding: 0px }
  .access-info.tab5 { gap: 32px; }
  .access-route.tab5 { gap: 5px; }
  .access-route-item.tab5 { gap: 10px; }
  .access-icon.tab5 { width: 56px; height: 56px; }
  .access-location.tab5 { font-size: 16px; white-space: normal; }
  .access-arrow.tab5 { font-size: 16px; min-width: 20px; }
  .access-arrow.tab5 img { max-width: 140px; width: 100%; height: auto; }
  /* Greeting Section 2 (Since 1995) */
  .sub-section.sub-section-2:has(.sub-section-2-content.tab1)[style] { min-height: 220px; }
  .sub-section.sub-section-2:has(.sub-section-2-content.tab1) .sub-bg-container { min-height: 320px; padding: 36px 16px 48px; }
  .sub-section-2-content.tab1 { padding: 0 12px; }
  .sub-section-2-title.tab1 { font-size: 18px; margin-bottom: 16px; }
  .sub-section-2-desc.tab1 { font-size: 16px; }
  /* Greeting Section 3 (Our Growth & Capability) */
  
  .sub-section-3-content.tab1 { padding: 60px 5%; gap: 20px; flex-direction: column; }
  .sub-section-3-left.tab1 .sub-section-3-title.tab1 { font-size: 22px; margin-bottom: 14px; white-space: normal; }
  .sub-section-3-left.tab1 .sub-section-3-desc.tab1 { font-size: 16px; padding-bottom: 14px; }
  .sub-section-3-content:not(.tab1) { padding:0;}
  .sub-section-3-title:not(.tab1) { font-size: 26px; }
  /* Greeting Section 4 (하단): 478px 이하 */
  .sub-content-container.tab1 { padding: 60px 5%; }
  .sub-section-4-content.tab1 { gap: 20px; }
  .sub-section-4-content.tab1 .sub-section-4-text-area.tab1 .sub-section-4-title.tab1 { font-size: 18px; margin: 18px 0 8px; }
  .sub-section-4-title-desc.tab1 { font-size: 16px; margin-bottom: 16px; }
  .sub-section-4-content.tab1 .sub-section-4-desc.tab1 { font-size: 16px; }
  .sub-section-4-content.tab1 .sub-section-4-text-area.tab1 img[alt="logo"] { max-width: 52px; }
  /* CI & Vision 탭 상단: 478px (그대로 줄인 느낌, 이미지 더 축소) */
  .sub-section.sub-section-2.tab2{padding:60px 5%;}
  .sub-section-2-title.tab2 { font-size: 16px; }
  .sub-section-2-main-title.tab2 { font-size: 24px; }
  .sub-section-2-desc.tab2 { font-size: 16px; }
  .tab2-line.wave { height: 90px; margin-top: -28px; overflow: visible; }
  .tab2-bottom-wrapper { margin-top: 72px; padding: 0 16px 24px; }
  .tab2-bottom { max-width: 62%; }
  .tab2-label { font-size: clamp(16px, 3.2vw, 16px); }
  .tab2-label-top { top: -10%; }
  .tab2-label-left { left: 17%; }
  .tab2-label-right { right: -9%; left: auto; }
  /* CI & Vision Section 3: 478px */
  .sub-section-3.tab2{padding:60px 5%;}
  .sub-section.sub-section-3.tab2[style] { padding: 40px 16px 56px; }
  .sub-section-3-content.tab2 { gap: 60px; }
  .sub-section-3-left.tab2 img { max-width: 160px; }
  .sub-section-3-right.tab2 { gap: 24px; }
  .sub-section-3-item-title.tab2 { font-size: 18px; }
  .sub-section-3-item-desc.tab2 { font-size: 16px; }
  .sub-section-4.tab2{padding:60px 5%;}

  .history-intro-overlay.tab5{width:80px;}
  .history-intro-box-item{flex-wrap:wrap;gap:10px;}
  .history-intro-box-item .label{width:100%;}

  
}
/* Greeting Section 3만: 줄였을 때 섹션 높이 자동 */
@media (max-width:1024px) {
  .sub-section.sub-section-3:has(.sub-bg-container.tab1.section-3)[style] { height: auto !important; min-height: 0; }
}
/* ========== 클릭/호버 효과 ========== */

/* 바운스 애니메이션 정의 */
@keyframes bounce-click {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
/* Tab 1 - 이미지 호버 및 클릭 효과 */
.sub-section-3-right img, .sub-section-3-left.tab1 img { transition: all 0.3s ease; }
.sub-section-3-right img:hover, .sub-section-3-left.tab1 img:hover { filter: brightness(0.9); transform: scale(1.02); }
/* .sub-section-3-right img:active, .sub-section-3-left.tab1 img:active { animation: bounce-click 0.4s ease; filter: brightness(0.8); } */
/* Tab 2 - 메인 및 하단 호버 */
.tab2-main, .tab2-bottom { transition: all 0.3s ease; cursor: pointer; }
.tab2-main:hover, .tab2-bottom:hover { filter: brightness(0.9); transform: translateY(-4px); }
.tab2-main:active, .tab2-bottom:active { animation: bounce-click 0.4s ease; filter: brightness(0.8); }
/* Tab 2 - 활성 아이템 */
.sub-item.tab2.active { transition: all 0.3s ease; cursor: pointer; z-index: 1; }
.sub-item.tab2.active:hover { filter: brightness(1.1); transform: scale(1.02); }
.sub-item.tab2.active:active { animation: bounce-click 0.4s ease; filter: brightness(0.9); }
/* Tab 3 - 카트 아이콘 */
/* .sub-section-3-item.tab3.cart .item-icon img, .sub-section-3-item.tab3 .item-icon img { transition: all 0.3s ease; cursor: pointer; }
.sub-section-3-item.tab3.cart .item-icon img:hover, .sub-section-3-item.tab3 .item-icon img:hover { filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 107, 0, 0.5)); transform: scale(1.1); }
.sub-section-3-item.tab3.cart .item-icon img:active, .sub-section-3-item.tab3 .item-icon img:active { animation: bounce-click 0.4s ease; filter: brightness(0.9); } */
/* Tab 4 - 타임라인 이미지 호버 */
/* .timeline-image.tab4 img { transition: all 0.3s ease; cursor: pointer; }
.timeline-image.tab4 img:hover { filter: brightness(0.9); transform: scale(1.02); }
.timeline-image.tab4 img:active { animation: bounce-click 0.4s ease; filter: brightness(0.8); } */
/* Tab 5 - 히스토리 이미지 호버 */
/* .history-intro-image.tab5 img { transition: all 0.3s ease; cursor: pointer; }
.history-intro-image.tab5 img:hover { filter: brightness(0.9); transform: scale(1.02); }
.history-intro-image.tab5 img:active { animation: bounce-click 0.4s ease; filter: brightness(0.8); } */
/* Tab 5 - 액세스 아이콘 호버 */
.access-icon.tab5 img { transition: all 0.3s ease; cursor: pointer; }
.access-icon.tab5 img:hover { filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 107, 0, 0.5)); transform: scale(1.1); }
.access-icon.tab5 img:active { animation: bounce-click 0.4s ease; filter: brightness(0.9); }
/* === Map Responsive === */
#map-tab5 { width: 100% !important; height: 600px !important; touch-action: none; pointer-events: auto; }
.map-container { touch-action: none; pointer-events: auto; }
.map-content { touch-action: auto; pointer-events: auto; }
@media (max-width:1024px) {
  #map-tab5 { height: 450px !important; }
}
@media (max-width:768px) {
  #map-tab5 { height: 350px !important; }
  
}
@media (max-width:480px) {
  #map-tab5 { height: 280px !important; }
}