/* ===================================================================== */
/* --- 공통 --- */
/* ===================================================================== */

* { margin:0; padding:0; box-sizing:border-box; }
ul, li { list-style:none; }
a { text-decoration:none; color:inherit; }
img { vertical-align:middle; border:0; }
input, select, button { font-family:'Pretendard', sans-serif; border:0; outline:0; background:none; }

body { overflow-x: auto !important; min-width: 100%; background:#000; }
#wrap { width:100%; position:relative; }

#header_sensor { position: fixed; top: 0; left: 0; width: 100%; height: 50px; z-index: 999; background: transparent; }
#header_wrap { width:100%; height:100px; background:#000; position:fixed; top:0; left:0; z-index:1000; }
.nav_menu ul li a.active { color:#ff0000 !important; }

.header_inner_1700 { width:1700px; max-width:95%; height:100%; margin:0 auto; display:flex; align-items:center; }
.logo { flex-shrink:0; }
.logo img { width:240px; height:74px; cursor:pointer; }
.nav_menu { flex:1; display:flex; justify-content:center; }
.nav_menu ul { display:flex; gap:30px; }
.nav_menu ul li a { font-size:20px; color:#fff; transition:0.3s; }
.nav_menu ul li a:hover { color:#ff0000; }
.nav_menu ul li a.shop_link { color:#22ac38; font-weight:600; }
.header_call { flex-shrink:0; }
.header_call a { display:flex; align-items:center; justify-content:center; gap:15px; width:240px; height:50px; background:#ff0000; }
.header_call span { font-weight:600; font-size:24px; color:#fff; }

#container {
    background-color: #000; /* 빈 공간 배경색을 검은색으로 맞춤 */
    box-sizing: border-box;
}

.section_page { width:100%; height:100vh; min-height:900px; position:relative; overflow:hidden; min-width: 1750px; }
#section_05 { height: 900px !important; min-height: 900px !important; }
.inner_1440 { width:1440px; height:100%; margin:0 auto; position:relative; }
.section_flex { width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding-top:0; }
#section_01 {
    width: 100%;
    height: 600px; /* 헤더와 하단바 제외한 콘텐츠 영역 높이 */
    background-color: #000; /* 남는 공간을 위한 검은색 배경 */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding-top: 100px;
}

.visual_video_bg {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 영상 비율을 유지한 채 700px 안에 쏙 들어가게 함 */
    /* object-fit: cover; 였다면 이 부분을 contain으로 꼭 바꿔주세요! */
}
.sub_copy { font-family:'KoPubWorldBatang_Medium'; font-size:40px; color:#fff; text-align:center; }
.main_copy { font-family:'KoPubWorldBatang_Bold'; font-size:80px; color:#fff; line-height:1.3; text-align:center; }
.yellow_txt { color:#fff263; }

.brand_text_overlay {
    position: absolute;
    top: 2%; /* 텍스트 박스 상단 여백 (사진과 비슷하게 15% 지점) */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 5;
    pointer-events: none; /* 마우스 오버 효과를 방해하지 않도록 클릭 투과 */
}
.brand_text_overlay h3 {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: #ffffff; /* 기본 글자색 흰색 */
    letter-spacing: 2px;
}
.brand_text_overlay p {
    font-family: 'Pretendard', sans-serif;
    font-size: 25px;
    font-weight: 200;
    color: #dddddd; /* 부제목은 살짝 옅은 흰색 */
}
/* [핵심] 4번째 조연재(명인) 칸은 배경이 밝으므로 검은색 글씨 적용 */
.jo_box .brand_text_overlay h3,
.jo_box .brand_text_overlay p {
    color: #000000; 
}
/* 태블릿 및 모바일 화면(1749px 이하)에서는 브랜드 텍스트 숨김 처리 */
@media (max-width: 1749px) {
    .brand_text_overlay {
        display: none !important;
    }
}
.brand_wrap_1920 { width:1920px; height:100%; margin:0 auto; display:flex; }
.brand_item { flex:1; height:100%; position:relative; overflow:hidden; display:block; }
.brand_bg { width:100%; height:100%; background-repeat:no-repeat; background-position:center 65%; background-size:cover; transition: transform 0.6s ease; }
.brand_item:hover .brand_bg { transform: scale(1.05); }
.hover_content { position:absolute; top:50%; left:50%; transform:translate(-50%, -40%); width:300px; height:300px; opacity:0; transition: all 0.5s ease; display:flex; align-items:center; justify-content:center; }
.hover_content img { width:300px; height:300px; -o-object-fit:contain; object-fit:contain; }
.brand_item:hover .hover_content { opacity:1; transform:translate(-50%, -50%); }

.startup_page { background: #fff; }
.b_top_visual { width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; background: url('../images/bh_img_02.webp') no-repeat center / cover; }
.b_main_tit { font-family: 'JejuHallasan'; font-size: 60px; color: #fff; }
.b_content_inner { height: calc(100% - 200px); padding-bottom: 150px; display: flex; align-items: center; justify-content: center; }
.b_step_grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 60px; }
.b_step_item { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }
.b_txt_box { display: flex; align-items: flex-start; gap: 20px; }
.b_num { font-family: 'Pretendard'; font-size: 70px; font-weight: 600; color: #df0011; line-height: 0.9; width: 60px; display: inline-block; text-align: left; }
.b_step_tit { font-family: 'Pretendard'; font-size: 30px; font-weight: 600; color: #000; margin-bottom: 5px; }
.b_step_sub { font-family: 'Pretendard'; font-size: 20px; font-weight: 400; color: #000; }
.b_img_box { width: 300px; height: 100px; overflow: hidden; border-radius: 0; }
.b_img_box img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }

/* ------------------------------------------------------------------ */
/* [수정] 5페이지 Store (시안에 맞춘 1440x680 내부 패널 레이아웃 적용) */
/* ------------------------------------------------------------------ */
.store_page_bg { background: url('../images/map_bg_img.webp') no-repeat center / cover; }
.store_main_tit { font-family: 'JejuHallasan'; font-size: 50pt; color: #fff; text-align: center; padding: 30px 0 30px; }

.map_wrapper { 
    width: 1440px; height: 680px; margin: 0 auto 30px; 
    position: relative; border-radius: 10px; overflow: hidden; 
    box-shadow: 0 0 20px rgba(0,0,0,0.5); 
}
#naver_map_container { width: 100%; height: 100%; }

/* 지도 안 좌측 검색 & 결과 패널 */
.map_left_panel { 
    position: absolute; top: 0; left: 0; 
    width: 380px; height: 100%; background: #fff; 
    display: flex; flex-direction: column; z-index: 100; 
    border-right: 1px solid #ccc;
}
.map_search_area { 
    width: 100%; border-bottom: 2px solid #222; 
}
.map_sel_row { 
    display: flex; width: 100%; border-bottom: 1px solid #222; 
}
.map_sel { 
    flex: 1; height: 50px; border: 0; border-right: 1px solid #222; 
    font-family: 'Pretendard', sans-serif; font-size: 16px; padding: 0 15px; 
    outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; 
    background: #fff url('../images/map_arrow.webp') no-repeat right 15px center; 
    background-size: 12px 8px; cursor: pointer; 
}
.map_sel:last-child { border-right: 0; }

.map_input_row { 
    display: flex; width: 100%; height: 50px; align-items: center; 
}
.map_input_row input { 
    flex: 1; height: 100%; border: 0; padding: 0 15px; 
    font-family: 'Pretendard', sans-serif; font-size: 16px; outline: none; 
}
#map_search_btn { 
    width: 50px; height: 50px; border: 0; border-left: 1px solid #222; 
    background: #fff url('../images/map_s.webp') no-repeat center / 20px auto; 
    cursor: pointer; 
}

.map_result_area { 
    flex: 1; overflow-y: auto; background: #fff; 
}
.store_list_item { 
    padding: 20px 15px; border-bottom: 1px solid #eee; 
    display: flex; flex-direction: column; gap: 8px; font-family: 'Pretendard', sans-serif;
}
.st_top, .st_bot { display: flex; justify-content: space-between; align-items: center; }
.st_name { font-size: 16px; font-weight: 600; color: #000; }
.st_time { font-size: 14px; font-weight: 400; color: #333; }
.st_addr { font-size: 14px; font-weight: 400; color: #666; }
.st_tel { font-size: 14px; font-weight: 400; color: #333; }
.no_result_txt { padding: 30px; text-align: center; font-size: 15px; color: #666; }

/* 하단 문의 고정 바 & 사이드 내비게이션 */
#inquiry_fixed_bar { width:100%; height:100px; background:#000; position:fixed; bottom:0; left:0; z-index:1100; }
.inquiry_inner_1440 { width:1440px; height:100%; margin:0 auto; display:flex; align-items:center; justify-content: flex-start; }
.inquiry_left { display:flex; align-items:center; gap:20px; flex-shrink:0; margin-right: 20px; } 
.inquiry_logo img { width:220px; height:auto; }
.inquiry_tit { font-family:'Pretendard'; font-weight:600; font-size:36px; color:#fff; }
.inquiry_right { display:flex; align-items:center; gap:20px; }
.in_box { background:#fff; height:60px; display:flex; align-items:center; }
.in_box input { width:100%; height:100%; padding:0 20px; font-size:22px; color:#000; }
.name_box { width:180px; } .tel_box { width:250px; } .select_box { width:250px; background:#fff url('../images/arrow_03.webp') no-repeat right 15px center; }
.select_box select { width:100%; height:100%; padding:0 20px; font-size:22px; color:#9b9b9b; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; }
.agree_area { display:flex; align-items:center; gap:12px; }
.agree_area label { font-size:14px; color:#fff; font-weight:600; cursor:pointer; line-height:1.2; }
.agree_link { text-decoration: underline; text-underline-position: under; }
.btn_inquiry_submit { width:130px; height:60px; background:#ff0000; color:#fff; font-weight:600; font-size:20px; cursor:pointer; border:0; }
.top_btn_wrap { position:absolute; left:50%; top:-35px; transform:translateX(-50%); z-index:1200; }
.btn_top_click img { width:70px; height:35px; display:block; cursor:pointer; }

.side_nav_fixed { position:fixed; top:40%; left:50%; transform:translate(-50%, -50%); width:1750px; height:0; pointer-events:none; z-index:1500; }
.side_nav_inner { position:absolute; right:0; top:0; transform:translateY(-50%); pointer-events:auto; }
.side_nav_fixed ul { display:flex; flex-direction:column; gap: 20px; }
.side_nav_fixed li { width:15px; height:15px; border:2px solid #e4e4e4; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.side_nav_fixed li span { display:none; width:8px; height:8px; background:#df0011; border-radius:50%; }
.side_nav_fixed li.on span { display:block; }

/* ===================================================================== */
/* --- 대표메뉴 섹션 (PC 전용) --- */
/* ===================================================================== */
.menu_wrap {
    width: 100%;
    height: 900px;
    background-color: #000000;
    background-image: url('../images/menu_bg.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.menu_inner {
    width: 1920px;
    height: 100%;
    position: relative;
}

/* 메뉴 개별 래퍼 */
.menu_item {
    position: absolute;
    z-index: 10;
}

/* 회전하는 음식 이미지 */
.menu_img_box {
    width: 100%;
    height: 100%;
    filter: brightness(0.4);
    transition: filter 0.4s ease;
    position: relative;
    z-index: 2;
}

.menu_img_box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.4s ease;
}

/* --- 호버 애니메이션 --- */
.menu_item:hover {
    z-index: 50; /* 팝업과 이미지가 최상단으로 올라옴 */
}
.menu_item:hover .menu_img_box {
    filter: brightness(1);
}
.menu_item:hover .menu_img_box img {
    animation: spinDish 12s linear infinite;
}

@keyframes spinDish {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- 팝업 카드 스타일 --- */
.menu_popup {
    position: absolute;
    width: 600px;
    height: 400px;
    border-radius: 50px;
    background-color: rgba(0, 0, 0, 0.5); /* 검은색 배경 50% */
    
    /* 포토샵 스크린 외부광선 효과(흰색 80%) 구현 */
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8); 
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    z-index: 3;
}

/* 팝업 상단 이미지 클리핑 */
.popup_img_wrap {
    width: 100%;
    height: 200px;
    border-radius: 50px 50px 0 0;
    overflow: hidden;
}
.popup_img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 팝업 하단 텍스트 */
.popup_txt_wrap {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}
.popup_main_copy {
    font-family: 'JejuHallasan', sans-serif;
    font-size: 50px;
    color: #ffffff;
    margin-bottom: 12px;
}
.popup_sub_copy {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.4;
}

/* ===================================================================== */
/* --- 각 메뉴별 독립 좌표 & 팝업 방향 세팅 --- */
/* ===================================================================== */

/* 1. 간장뼈찜 (좌측 상단) */
.item_gan { top: 50px; left: 200px; width: 370px; height: 337px; }
/* 팝업: 우측 */
.item_gan .menu_popup { top: -20px; left: 450px; transform: translateX(-20px); }
.item_gan:hover .menu_popup { transform: translateX(0); opacity: 1; visibility: visible; }

/* 2. 신불뼈찜 (좌측 하단) */
.item_bul { bottom: 200px; left: 280px; width: 313px; height: 303px; }
/* 팝업: 우측 상단 */
.item_bul .menu_popup { bottom: 180px; left: 380px; transform: translate(-20px, 20px); }
.item_bul:hover .menu_popup { transform: translate(0, 0); opacity: 1; visibility: visible; }

/* 3. 우거지감자탕 (상단 중앙) */
.item_woo { top: 50px; left: 700px; width: 440px; height: 412px; }
/* 팝업: 우측 하단 */
.item_woo .menu_popup { top: 250px; left: 430px; transform: translateY(20px); }
.item_woo:hover .menu_popup { transform: translateY(0); opacity: 1; visibility: visible; }

/* 4. 우거지해장국 (하단 중앙) */
.item_guk { bottom: 200px; left: 700px; width: 240px; height: 214px; }
/* 팝업: 우측 상단 */
.item_guk .menu_popup { bottom: 120px; left: 300px; transform: translate(-20px, 20px); }
.item_guk:hover .menu_popup { transform: translate(0, 0); opacity: 1; visibility: visible; }

/* 5. 추어탕 (우측 상단) */
.item_choo { top: 50px; right: 300px; width: 246px; height: 215px; }
/* 팝업: 좌측 */
.item_choo .menu_popup { top: -20px; right: 300px; transform: translateX(20px); }
.item_choo:hover .menu_popup { transform: translateX(0); opacity: 1; visibility: visible; }

/* 6. 묵은지감자탕 (우측 하단) */
.item_muk { bottom: 200px; right: 400px; width: 451px; height: 412px; }
/* 팝업: 좌측 상단 */
.item_muk .menu_popup { bottom: 200px; right: 500px; transform: translate(20px, 20px); }
.item_muk:hover .menu_popup { transform: translate(0, 0); opacity: 1; visibility: visible; }

/* 7. 돼지국밥 (우측 최하단) */
.item_dwae { bottom: 200px; right: 160px; width: 213px; height: 216px; }
/* 팝업: 좌측 상단 */
.item_dwae .menu_popup { bottom: 150px; right: 250px; transform: translate(20px, 20px); }
.item_dwae:hover .menu_popup { transform: translate(0, 0); opacity: 1; visibility: visible; }

/* --- 메뉴 호버 안내 문구 (PC 전용) --- */
.menu_guide_box {
    position: absolute;
    top: 40%;
    left: 50%;
    /* 정중앙 배치를 위한 이동 좌표 */
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.5); /* 흰색 50% 투명도 */
    padding: 15px 40px;
    border-radius: 50px;
    z-index: 15; /* 일반 메뉴(10)보다는 높고, 호버된 메뉴(50)보다는 낮게 설정 */
    pointer-events: none; /* 마우스가 박스 위에 올라가도 간섭받지 않도록 통과시킴 */
    transition: opacity 0.4s ease, visibility 0.4s ease;
    
    /* 뻠삥 애니메이션 적용 (1.5초 간격 무한 반복) */
    animation: pumping 1.5s infinite ease-in-out;
}

.menu_guide_box p {
    font-family: 'Pretendard', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

/* 뻠삥(Pumping) 애니메이션 키프레임 */
@keyframes pumping {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* PC용 문구와 태블릿용 문구 기본 제어 */
.guide_tab { display: none; }

/* [핵심] 태블릿에서 메뉴를 터치하여 active 클래스가 붙었을 때 안내 문구 숨김 처리 */
.menu_wrap:has(.menu_item:hover) .menu_guide_box,
.menu_wrap:has(.menu_item.active) .menu_guide_box {
    opacity: 0 !important;
    visibility: hidden !important;
    animation-play-state: paused !important;
}

/* --- 안내 문구 반응형 처리 (태블릿 노출 / 모바일 숨김) --- */
/* ── 태블릿 구간 (768px ~ 1749px) ── */
@media screen and (max-width: 1749px) and (min-width: 768px) {
    .menu_guide_box { 
        display: block !important; /* 기존에 태블릿에서 숨겼던 설정 해제 */
        padding: 1.5vw 4vw;
        border-radius: 5vw;
    }
    .menu_guide_box p {
        font-size: 2vw; /* 태블릿 화면 비율에 맞춰 폰트 크기 조정 */
    }
    
    /* PC 문구를 숨기고 태블릿 문구('터치해보세요') 노출 */
    .guide_pc { display: none; }
    .guide_tab { display: block; }
}

/* ── 모바일 구간 (767px 이하) ── */
@media screen and (max-width: 767px) {
    /* 모바일은 이미 캐러셀(슬라이드) 형태이므로 안내 문구를 완전히 숨김 */
    .menu_guide_box { 
        display: none !important; 
    }
}

/* ===================================================================== */
/* --- 감자탕 섹션 --- */
/* ===================================================================== */
.gamjatang_wrap {
    width: 100%;
    height: 900px !important;
    min-height: 900px !important;
    background-color: #000;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden; 
}

/* 90% 투명도 검은색 오버레이 */
.gamjatang_dark_overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 150;
    transition: opacity 0s; 
}

.gamjatang_inner {
    width: 1920px;
    height: 100%;
    position: relative;
    padding-top: 100px; 
    box-sizing: border-box;
}

/* --- 1. 스포트라이트 (선 앞, 감자탕 뒤 레이어) --- */
.spotlight_cone {
    position: absolute;
    top: -200px;
    left: 75%; 
    width: 1200px; 
    height: 1400px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 85%);
    clip-path: polygon(35% 0, 65% 0, 100% 100%, 0% 100%);
    filter: blur(25px);
    z-index: 50 !important; 
    pointer-events: none;
    opacity: 0;
    transform-origin: top center;
    transform: translateX(-50%) scaleY(0);
    transition: opacity 0s, transform 0s;
}

/* --- 2. 텍스트 및 선 --- */
.gamjatang_txt_area {
    position: static !important; /* 부모가 레이어를 묶는 것을 원천 차단 */
    width: 100%;
    padding-left: 100px; 
    box-sizing: border-box;
}

.gamjatang_tit, .gamjatang_sub_1, .gamjatang_sub_2 {
    position: relative;
    z-index: 100 !important; /* 텍스트는 조명 위로 선명하게 올라옴 */
}

.gamjatang_tit {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px; 
    font-weight: 600; color: #ffffff; line-height: 1.4;
}

.gamjatang_sub_1, .gamjatang_sub_2 {
    font-family: 'Pretendard', sans-serif;
    font-size: 24px; 
    font-weight: 300; color: #ffffff; line-height: 1.5;
}
.gamjatang_sub_1 { margin-bottom: 30px; }

.typing_line { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 0s; }
.fade_line { display: inline-block; opacity: 0; transform: translateY(20px); transition: opacity 0s, transform 0s; }
.col_yellow { color: #fff263; }
.txt_underline { text-decoration: underline; text-underline-position: under; text-decoration-thickness: 3px; }

/* --- 흰색 선 (900px 제한) --- */
.gamjatang_line {
    position: relative;
    z-index: 10 !important; 
    width: 0; 
    height: 2px;
    background-color: #ffffff; /* 완전한 흰색으로 복구 */
    margin-top: 45px; margin-bottom: 45px;
    transition: width 0s;
}

/* --- 3. 감자탕 이미지 영역 (가장 앞 레이어) --- */
.gamjatang_img_area {
    position: absolute;
    bottom: -120px; 
    left: 75%; 
    width: 1800px; 
    z-index: 80 !important; /* 조명(50)과 선(10)을 모두 덮는 최상단 */
    display: flex; justify-content: center;
    opacity: 0;
    filter: brightness(0.1); 
    transform-origin: center bottom;
    transform: translateX(-50%) scale(0.95);
    transition: opacity 0s, filter 0s, transform 0s;
}

.gamjatang_img_area img {
    position: relative;
    z-index: 2; 
    width: 100%; height: auto; object-fit: contain;
}

/* --- 애니메이션 시퀀스 (.active 클래스 부여 시 실행) --- */
.gamjatang_wrap.active .gamjatang_dark_overlay { opacity: 0; transition: opacity 1.0s ease 0s; }

.gamjatang_wrap.active .spotlight_cone { 
    opacity: 1; 
    transform: translateX(-50%) scaleY(1); 
    transition: opacity 0.8s ease 0.3s, transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) 0.3s; 
}

.gamjatang_wrap.active .gamjatang_img_area { 
    opacity: 1; filter: brightness(1); transform: translateX(-50%) scale(1); 
    transition: opacity 1.2s ease 0.3s, filter 1.2s ease 0.3s, transform 1.2s ease 0.3s; 
}

.gamjatang_wrap.active .typing_line.line1 { clip-path: inset(0 0 0 0); transition: clip-path 0.8s steps(15, end) 1.0s; }
.gamjatang_wrap.active .typing_line.line2 { clip-path: inset(0 0 0 0); transition: clip-path 1.2s steps(20, end) 1.8s; }
.gamjatang_wrap.active .typing_line.line3 { clip-path: inset(0 0 0 0); transition: clip-path 1.2s steps(20, end) 3.0s; }

/* 선이 900px까지만 뻗어나가도록 수정 완료 */
.gamjatang_wrap.active .gamjatang_line { width: 900px; max-width: 100%; transition: width 0.8s ease 4.2s; }

.gamjatang_wrap.active .fade_line { opacity: 1; transform: translateY(0); }
.gamjatang_wrap.active .fade_line.line4 { transition: opacity 0.5s ease 5.0s, transform 0.5s ease 5.0s; }
.gamjatang_wrap.active .fade_line.line5 { transition: opacity 0.5s ease 5.3s, transform 0.5s ease 5.3s; }
.gamjatang_wrap.active .fade_line.line6 { transition: opacity 0.5s ease 5.8s, transform 0.5s ease 5.8s; }
.gamjatang_wrap.active .fade_line.line7 { transition: opacity 0.5s ease 6.1s, transform 0.5s ease 6.1s; }
.gamjatang_wrap.active .fade_line.line8 { transition: opacity 0.5s ease 6.4s, transform 0.5s ease 6.4s; }
.gamjatang_wrap.active .fade_line.line9 { transition: opacity 0.5s ease 6.7s, transform 0.5s ease 6.7s; }

/* ===================================================================== */
/* --- 테이블 단가 섹션 (PC 전용) --- */
/* ===================================================================== */
.table_price_wrap {
    width: 100%;
    height: 900px;
    background-color: #111; 
    background-image: url('../images/table_bg.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.tp_inner {
    width: 1920px;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

/* --- 1) 텍스트 영역 --- */
.tp_txt_area {
    position: absolute;
    top: 100px; /* [수정] 170px -> 120px (위로 올림) */
    left: 150px;
    z-index: 10;
}

.tp_line {
    font-family: 'Pretendard', sans-serif;
    font-size: 42px; 
    font-weight: 400;
    color: #ffffff;
    line-height: 1.4;
    letter-spacing: -1px;
    
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0s, transform 0s;
}

.tp_spacing { height: 40px; }
.col_yellow { color: #fff263; }

/* --- 2) 50% 투명 흰색 꺾인 그래프 --- */
.tp_graph_reveal {
    position: absolute;
    top: 0; left: 0; 
    height: 100%;
    z-index: 5;
    overflow: hidden; 
    width: 0%; 
    opacity: 0;
    transition: width 0s, opacity 0s;
}

.tp_graph_polygon {
    width: 1920px; 
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    clip-path: polygon(0 85%, 45% 60%, 75% 35%, 100% 0, 100% 100%, 0 100%);
}

/* --- 3) 이미지 영역 --- */
.tp_img_box {
    position: absolute;
    z-index: 15;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0s, transform 0s;
}

.tp_img_box img { width: 100%; height: 100%; object-fit: contain; }

.img_guk { width: 195px; height: 170px; left: 280px; bottom: 170px; }
.img_tang { width: 472px; height: 210px; left: 650px; bottom: 250px; } /* [수정] left 450px -> 540px (우측으로 이동) */
.img_jjim { width: 555px; height: 310px; right: 180px; top: 130px; }

/* --- 4) 우측 하단 단가 박스 --- */
.tp_price_box {
    position: absolute;
    right: 180px;
    bottom: 200px; /* [수정] 260px -> 160px (아래로 내림) */
    width: 500px;
    height: 250px;
    background-color: #000000;
    padding: 10px; 
    box-sizing: border-box;
    z-index: 20;
    
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0s, transform 0s;
}

.price_border {
    width: 100%; height: 100%;
    border: 2px solid #ffffff;
    box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 45px; gap: 15px;         
}

.price_row {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'KoPubWorldBatang_Light', 'KoPubWorldBatang', serif;
    font-weight: 300; 
    font-size: 30px; 
    color: #ffffff;
}

.price_row .p_lbl { letter-spacing: -1px; }
.price_row .p_val { text-align: right; }

/* --- 애니메이션 시퀀스 (.active 부여 시 실행 / 속도 자연스럽게 완화) --- */
/* 1. 텍스트 순차 등장 (0.2초 간격으로 여유 있게) */
.table_price_wrap.active .tp_line { opacity: 1; transform: translateY(0); }
.table_price_wrap.active .line1 { transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s; }
.table_price_wrap.active .line2 { transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s; }
.table_price_wrap.active .line3 { transition: opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s; }
.table_price_wrap.active .line4 { transition: opacity 0.6s ease 0.9s, transform 0.6s ease 0.9s; }
.table_price_wrap.active .line5 { transition: opacity 0.6s ease 1.1s, transform 0.6s ease 1.1s; }

/* 2. 꺾인 그래프 좌에서 우로 자연스럽게 뻗어나감 (1.0초부터 1.5초간 진행) */
.table_price_wrap.active .tp_graph_reveal {
    width: 100%;
    opacity: 1;
    transition: width 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) 1.0s, opacity 0.5s ease 1.0s;
}

/* 3. 음식 이미지 순차 등장 (1.5초부터) */
.table_price_wrap.active .tp_img_box { opacity: 1; transform: scale(1); }
.table_price_wrap.active .img_guk  { transition: opacity 0.8s ease 1.5s, transform 0.8s ease 1.5s; }
.table_price_wrap.active .img_tang { transition: opacity 0.8s ease 1.8s, transform 0.8s ease 1.8s; }
.table_price_wrap.active .img_jjim { transition: opacity 0.8s ease 2.1s, transform 0.8s ease 2.1s; }

/* 4. 애니메이션 완료 즈음 우측 단가 박스 여유 있게 등장 (2.4초) */
.table_price_wrap.active .tp_price_box {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.8s ease 2.4s, transform 0.8s ease 2.4s;
}

/* ===================================================================== */
/* --- 3D 인테리어 섹션 (PC) --- */
/* ===================================================================== */
.interior_wrap {
    width: 100%;
    height: 900px;
    background-color: #ffffff; 
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.in_inner {
    width: 1920px;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

/* --- 1) 텍스트 영역 --- */
.in_txt_area {
    position: absolute;
    top: 180px; /* [수정] 300px -> 200px (하단 바 간섭을 피하기 위해 100px 올림) */
    left: 200px;
    z-index: 10;
}

.in_line {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 600;
    color: #000000;
    line-height: 1.5;
    letter-spacing: -1px;
    margin-bottom: 5px;
    
    /* 애니메이션 초기 상태 (우측을 완전히 가려둠) */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0s;
}

/* 레드 박스 키워드 스타일 */
.hl_box {
    background-color: #de0010;
    color: #ffffff;
    padding: 2px 15px;
    display: inline-block;
}

/* --- 2) 갤러리 영역 공통 --- */
.in_gallery_wrap {
    position: absolute;
    top: 50px; /* [수정] 140px -> 80px (텍스트와 비율을 맞춰 60px 올림) */
    right: 200px;
    width: 800px;
    height: 620px;
    z-index: 15;
}

/* 네비게이션 화살표 */
.nav_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 60px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 20;
}
.nav_btn::before {
    content: '';
    position: absolute;
    top: 15px; left: 10px;
    width: 25px; height: 25px;
    border-top: 5px solid #000;
    border-right: 5px solid #000;
}
.prev_btn { left: -70px; }
.prev_btn::before { transform: rotate(-135deg); }
.next_btn { right: -70px; }
.next_btn::before { transform: rotate(45deg); }

.in_gallery_container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 갤러리 세트 크로스페이드 처리 */
.gallery_set {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.gallery_set.active {
    opacity: 1;
    visibility: visible;
}

/* --- 세트별 레이아웃 배치 --- */
.set1 { display: flex; flex-direction: column; justify-content: space-between; }
.set1 .comp_top, .set1 .comp_bottom { width: 100%; height: 300px; }

.set2 .comp_full { width: 100%; height: 100%; }

.set3 { display: flex; justify-content: space-between; }
.set3 .comp_left, .set3 .comp_right { width: calc(50% - 10px); height: 100%; }

/* --- 3) Before/After 슬라이더 컴포넌트 --- */
.comp_slider {
    position: relative;
    overflow: hidden;
    background-color: #eee; /* 로딩 전 배경 */
}

.comp_slider img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* After 이미지는 100% 바닥에 깔림 */
.img_after { z-index: 1; }

/* Before 이미지는 감싸는 래퍼의 너비(%)로 마스킹됨 */
.img_before_wrap {
    position: absolute;
    top: 0; left: 0;
    width: 50%; /* 초기 50% 분할 */
    height: 100%;
    overflow: hidden;
    z-index: 2;
}
/* 안쪽 Before 이미지는 잘리지 않게 슬라이더 본체 크기만큼 확보 */
.comp_top .img_before, .comp_bottom .img_before { width: 800px; }
.comp_full .img_before { width: 800px; }
.comp_left .img_before, .comp_right .img_before { width: 390px; } /* calc(50% - 10px) */

/* 컨트롤 핸들 (투명한 input range) */
.comp_handle {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    margin: 0;
    opacity: 0; 
    cursor: ew-resize;
    z-index: 4;
}

/* 시각적인 구분 선 */
.comp_line {
    position: absolute;
    top: 0; left: 50%;
    width: 2px; height: 100%;
    background-color: #fff;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 3;
}
.comp_arrow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30px; height: 30px;
    background-color: rgba(0,0,0,0.5);
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
}
.comp_arrow::before, .comp_arrow::after {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    border-style: solid;
}
.comp_arrow::before { border-width: 4px 5px 4px 0; border-color: transparent #fff transparent transparent; margin-right: 2px; }
.comp_arrow::after { border-width: 4px 0 4px 5px; border-color: transparent transparent transparent #fff; margin-left: 2px; }

/* --- 애니메이션 시퀀스 (.active 부여 시) --- */
/* 좌에서 우로 그려지는 텍스트 효과 (속도 완화) */
.interior_wrap.active .in_line { clip-path: inset(0 0 0 0); }
/* [수정] 0.8s 재생 시간을 1.2s로 늘리고, 등장 간격도 여유롭게 배치 */
.interior_wrap.active .line1 { transition: clip-path 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s; }
.interior_wrap.active .line2 { transition: clip-path 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s; }
.interior_wrap.active .line3 { transition: clip-path 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 1.4s; }
.interior_wrap.active .line4 { transition: clip-path 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 2.0s; }

/* ===================================================================== */
/* --- 창업데이타 --- */
/* ===================================================================== */

/* ── 매출 DATA 섹션 (PC) ── */
#section_data {
    width: 100%;
    height: 900px;
    background: url('../images/data_bg_img.webp') no-repeat center / cover;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

#section_data .data_inner {
    width: 1440px;
    height: 100%;
    position: relative;
    padding-top: 50px; /* 상단 50px 여백 */
    box-sizing: border-box;
}

/* 기준일 텍스트 우측 상단 절대 고정 */
.data_reference {
    position: absolute;
    top: 150px; /* inner의 패딩탑과 동일한 위치 */
    right: 0;
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #ffffff;
}

/* 상단 타이틀 영역 중앙 정렬 포장 */
.data_top_area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 내부 요소 가운데 정렬 */
    text-align: center;
}

.data_sub_copy {
    font-family: 'IncheonEducation', sans-serif;
    font-size: 30px;
    color: #dda048;
    margin-bottom: 20px;
}

/* 로고 및 메인 타이틀 */
.data_title_box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.data_logo {
    width: 240px;
    height: 74px;
    margin-right: 30px;
}

.data_main_title {
    font-family: 'Pretendard', sans-serif;
    font-size: 70px;
    font-weight: 800;
    line-height: 1;
}

.data_main_title .txt_white, .data_desc .txt_white { color: #ffffff; }
.data_main_title .txt_gold, .data_desc .txt_gold { color: #dda048; }

/* 850px 라인 */
.data_line {
    width: 850px;
    height: 2px;
    background-color: #dda048;
    margin-bottom: 20px;
}

/* 메인 설명 */
.data_desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 50px;
}

/* ── 카드 콘텐츠 영역 ── */
.data_card_area {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.data_card {
    height: 300px;
    background: linear-gradient(135deg, #f8f4f1, #e7d9ce);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 세로 중앙 정렬 */
    align-items: center;     /* ★ 가로 중앙 정렬 추가 ★ */
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 기존에 있던 한쪽 쏠림 방지용 좌측 여백(padding-left) 완전 삭제 */
.card_small { width: 300px; }
.card_large { width: 700px; }

/* 카드 내부 공통 속성 */
.card_top {
    display: flex;
    align-items: center;
    justify-content: center; /* 묶음 자체를 중앙으로 */
}

.card_icon {
    width: 80px;
    height: 80px;
    margin-right: 20px;
}

.card_title {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 400;
    color: #000000;
}

.card_bottom {
    margin-top: 40px;
    display: flex;
    align-items: baseline;
    justify-content: center; /* 묶음 자체를 중앙으로 */
}

.card_value {
    font-family: 'Pretendard', sans-serif;
    font-size: 70px;
    font-weight: 800;
    color: #b64628;
    line-height: 1;
}

.card_unit {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 400;
    color: #000000;
    margin-left: 5px;
}

/* ===================================================================== */
/* --- 마진율 --- */
/* ===================================================================== */

/* ── 마진율 & 창업비용 섹션 (PC) ── */
#section_margin_cost {
    width: 100%;
    box-sizing: border-box;
}

/* 상단 카피 구역 (1920*200) */
.mc_top_bg {
    width: 100%;
    height: 200px;
    background: url('../images/per_bg_img1.webp') no-repeat center / cover;
}

.mc_top_inner {
    width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding-top: 50px; 
    text-align: center;
    box-sizing: border-box;
}

.mc_main_copy {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 30px; 
}

.mc_main_copy .txt_white { color: #ffffff; }
.mc_main_copy .txt_gold { color: #dda048; }

.mc_sub_copy {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 200;
    color: #ffffff;
}

/* 하단 콘텐츠 구역 (1920*700) */
.mc_bottom_bg {
    width: 100%;
    height: 800px;
    background: url('../images/per_bg_img2.webp') no-repeat center / cover;
}

.mc_bottom_inner {
    width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding-top: 20px; 
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.mc_bottom_notice {
    position: absolute;
    bottom: 320px; /* 전체 배경 하단에서 40px 위로 띄움 (필요시 조절) */
    left: 50%; /* 왼쪽에서 50% 밀고 */
    transform: translateX(-50%); /* 내 크기의 절반만큼 당겨서 완벽한 정중앙 셋팅 */
    width: 100%;
    text-align: center;
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #908f8f;
}

.mc_col {
    width: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 타이틀 텍스트박스 (200*50) */
.mc_title_box {
    width: 200px;
    height: 50px;
    background-color: #000000;
    border-radius: 25px;
    font-family: 'Pretendard', sans-serif;
    font-size: 25px;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2; /* 프레임 선 위에 오도록 설정 */
}

/* 외곽 프레임박스 (700*400) */
.mc_frame_box {
    width: 700px;
    height: 400px; /* 내부 요소가 넘칠 경우를 대비해 최소 높이로 설정 */
    border: 2px solid #f0d9ba;
    margin-top: -25px; /* 타이틀 중간에 걸치게 배치 */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* 왼쪽 마진율 내부 정렬 */
.frame_left {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc_graph_img {
    width: 330px;
    height: 330px;
    display: block;
}

/* 오른쪽 창업비용 내부 정렬 */
.frame_right {
    padding-top: 35px; /* 타이틀 겹침 공간 피하기 */
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 비용 줄 영역 (600px 양끝 정렬) */
.cost_row {
    width: 600px; 
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 60px;
}

.cost_icon {
    width: 60px;
    height: 60px;
    margin-right: 30px;
}

.cost_lbl {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
}

/* 금액을 우측 끝으로 미는 속성 */
.cost_val {
    font-family: 'Pretendard', sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #b64628;
    line-height: 1;
    margin-left: auto; /* ★ 우측 끝 고정 */
}

.cost_unit {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    margin-left: 5px;
}

/* 600px 점선 */
.cost_dotted_line {
    width: 600px;
    height: 2px;
    border-bottom: 2px dotted #d5a473;
    margin: 10px 0; 
}

/* 내부 5대 핵심 항목 박스 (600*180) */
.cost_inner_box {
    width: 600px;
    height: 180px;
    background-color: #e4cfb4;
    margin-top: 20px; 
    padding: 15px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; 
    border-radius: 10px;
}

.inner_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.inner_item img {
    width: 80px;
    height: 80px;
    margin-bottom: 10px; 
    display: block;
}

.inner_item span {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    white-space: nowrap;
}

/* 창업비용 하단 안내문 (프레임 내부 1줄) */
.cost_notice {
    margin-top: 20px; 
    text-align: center;
    width: 100%;
}

.notice_txt {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 400;
    word-break: keep-all; 
}

.notice_txt .txt_black { color: #000000; }
.notice_txt .txt_red { color: #a93922; }

/* ===================================================================== */
/* --- 창업 이벤트 섹션 --- */
/* ===================================================================== */
#section_event {
    width: 100%;
    height: 900px !important;      /* ★ 추가: 900px로 높이 딱 맞춤 */
    min-height: 900px !important;  /* ★ 추가: 공통 클래스의 950px 설정을 무력화 */
    background-color: #ffffff; 
    display: flex;
    justify-content: center;
}

.event_bg {
    width: 100%;
    max-width: 1920px;
    height: 900px;
    background: url('../images/bus_event_img.webp') no-repeat center / cover;
}

.event_inner {
    width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding-top: 100px; 
    display: flex;
    justify-content: flex-start; /* 1440px 기준 제일 왼쪽부터 시작 */
    box-sizing: border-box;
}

/* ★ 880px 그룹 박스: 이 안에서 모든 텍스트가 카드 폭에 맞춰 중앙에 배치됨 ★ */
.event_content_area {
    width: 880px; /* 카드 폭(280*3=840) + 카드 간격(20*2=40) = 880px */
    display: flex;
    flex-direction: column;
    align-items: center; /* 그룹 내부 요소 중앙 정렬 */
    text-align: center;  /* 텍스트 중앙 정렬 */
}

.event_ribbon {
    width: 335px;
    height: 87px;
    margin-bottom: 10px; 
}

/* 서브 카피 1 */
.event_sub1 {
    font-family: 'IncheonEducation', sans-serif;
    font-size: 40px;
    color: #3a2819;
    margin-bottom: 20px; 
    display: flex;
    align-items: baseline;
    justify-content: center; /* 플렉스 중앙 정렬 */
}

/* '창업' 그라디언트 텍스트 및 강조점 래퍼 */
.txt_grad_wrap {
    position: relative;
    display: inline-block;
    margin: 0 5px; 
}

/* 10x10 강조점 2개 생성 */
.txt_grad_wrap::before,
.txt_grad_wrap::after {
    content: '';
    position: absolute;
    top: -10px; 
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff887c, #b6325f);
}
.txt_grad_wrap::before { left: 8px; } 
.txt_grad_wrap::after { right: 8px; } 

.txt_grad {
    font-family: 'IncheonEducation', sans-serif;
    font-size: 55px;
    background: linear-gradient(135deg, #ff887c, #b6325f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

/* 메인 카피 */
.event_main_title {
    font-family: 'Pretendard', sans-serif;
    font-size: 70px;
    font-weight: 800;
    color: #3a2819;
    line-height: 1.2;
    margin-bottom: 20px; 
}
.event_main_title .txt_red { color: #b44327; }

/* 서브 카피 2 */
.event_sub2 {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 200;
    color: #3a2819;
    margin-bottom: 20px; 
}
.event_sub2 .txt_red2 { font-weight: 400; color: #b44327; }

/* 혜택 카드 영역 */
.event_card_wrap {
    display: flex;
    gap: 20px; 
    justify-content: center;
}

/* 그라디언트 테두리 카드 (280x200) */
.e_card {
    position: relative;
    width: 280px;
    height: 200px;
    border-radius: 20px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.4); 
}

/* 그라디언트 선 굵기 2px 완벽 구현 */
.e_card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px; 
    background: linear-gradient(135deg, #ffc2a1, #ffb1bd);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.e_card_tit {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #3a2819;
    margin-bottom: 10px;
}

.e_card_bot {
    display: flex;
    align-items: baseline;
}

.e_card_val {
    font-family: 'Pretendard', sans-serif;
    font-size: 70px;
    font-weight: 800;
    color: #b44327;
    line-height: 1;
}

.e_card_unit {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #3a2819;
    margin-left: 5px;
}

/* ===================================================================== */
/* --- 25년 섹션 --- */
/* ===================================================================== */
.years_25_wrap {
    width: 100%;
    height: 900px !important;
    min-height: 900px !important;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.years_25_inner {
    width: 1920px;
    height: 100%;
    background: url('../images/25_01.webp') no-repeat center center / cover;
    position: relative;
    padding-top: 50px;
    box-sizing: border-box;
}

.years_25_txt_area {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 텍스트 1 (수많은 감자탕...) 초기 상태 */
.txt_medium {
    font-family: 'KoPubWorldBatang_Medium', serif;
    font-size: 50px;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 100px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease; /* 스크롤 벗어날 때 사라지는 속도 */
}

/* 텍스트 2 (유행에 휩쓸리지 않고...) 초기 상태 */
.txt_bold {
    font-family: 'KoPubWorldBatang_Bold', serif;
    font-size: 80px;
    color: #ffffff;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease; /* 스크롤 벗어날 때 사라지는 속도 */
}

.col_yellow {
    color: #fff263;
}

/* 뚝배기 손 이미지 초기 상태 */
.years_25_img_area {
    position: absolute;
    bottom: -300px;
    left: 50%;
    transform: translate(-50%, 100%);
    z-index: 5;
    width: 100%;
    text-align: center;
    transition: transform 0.5s ease; /* 스크롤 벗어날 때 사라지는 속도 */
}

/* ===================================================================== */
/* --- 애니메이션 등장 순서 및 속도 제어 (스크롤 감지 시) --- */
/* ===================================================================== */

/* 1. 뚝배기가 가장 먼저 천천히 올라옴 (1.5초 동안 실행, 지연시간 0초) */
.years_25_wrap.active .years_25_img_area {
    transform: translate(-50%, 0);
    transition: transform 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
}

/* 2. 첫 번째 문단 등장 (뚝배기가 올라오기 시작하고 1.2초 뒤에 1.2초 동안 실행) */
.years_25_wrap.active .txt_medium {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.2s ease 1.2s, transform 1.2s ease 1.2s;
}

/* 3. 두 번째 문단 등장 (첫 번째 문단이 나오고 난 후, 2.4초 뒤에 1.2초 동안 실행) */
.years_25_wrap.active .txt_bold {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.2s ease 2.4s, transform 1.2s ease 2.4s;
}

/* ===================================================================== */
/* --- 애니메이션 등장 순서 및 속도 제어 (스크롤 감지 시) --- */
/* ===================================================================== */

/* 1. 뚝배기가 가장 먼저 천천히 올라옴 (1.5초 동안 실행, 지연시간 0초) */
.years_25_wrap.active .years_25_img_area {
    transform: translate(-50%, 0);
    transition: transform 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
}

/* 2. 첫 번째 문단 등장 (뚝배기가 올라오기 시작하고 1.2초 뒤에 1.2초 동안 실행) */
.years_25_wrap.active .txt_medium {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.2s ease 1.2s, transform 1.2s ease 1.2s;
}

/* 3. 두 번째 문단 등장 (첫 번째 문단이 나오고 난 후, 2.4초 뒤에 1.2초 동안 실행) */
.years_25_wrap.active .txt_bold {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.2s ease 2.4s, transform 1.2s ease 2.4s;
}

/* ===================================================================== */
/* --- 6페이지, 7페이지, 푸터, 팝업 관련 추가 CSS --- */
/* ===================================================================== */

/* 6페이지 (소식) */
.news_page_bg { background: url('../images/news_bg_img.webp') no-repeat center top / cover !important; }
.news_inner_wrapper { width: 1440px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 30px; }
.news_top_row { display: flex; align-items: center; justify-content: center; gap: 50px; margin-bottom: 30px; width: 1440px; }
.news_logo_img { width: 220px; height: 63px; -o-object-fit: contain; object-fit: contain; }

.news_frame_box { width: 730px; height: 140px; background: #fff; border: 1px solid #000; border-radius: 0 0 30px 30px; padding: 15px 30px; overflow: hidden; }
.news_frame_box ul { height: 100%; display: flex; flex-direction: column; justify-content: space-around; }
.news_frame_box ul li { display: flex; align-items: center; font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 300; color: #000; }
.red_dot { width: 10px; height: 10px; background: #ff0000; border-radius: 50%; margin-right: 15px; flex-shrink: 0; }
.news_frame_box ul li a { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.news_frame_box ul li a:hover { color: #df0011; font-weight: 600; text-decoration: underline; }
.news_date_txt { width: 90px; text-align: right; color: #666; font-size: 15px; }

.news_gallery_wrap { 
    width: 1440px; 
    margin: 0 auto; 
}

.gallery_contents { 
    display: flex; 
    width: 100%; 
}

.gal_item { 
    position: relative; 
    width: 480px; 
    height: 600px; 
    overflow: hidden; 
}

.gal_item img { 
    width: 100%; 
    height: 100%; 
    -o-object-fit: cover; 
       object-fit: cover; 
    transition: transform 0.4s ease; 
}

.gal_item:hover img { 
    transform: scale(1.05); 
}

/* 타이틀 박스: 480*100 / 검은색 50% 투명도 */
.gal_title_box { 
    position: absolute; 
    top: 0; /* 상단 고정 */
    left: 0; 
    width: 480px; 
    height: 120px; /* 로고와 텍스트가 들어가도록 높이 확보 */
    background: rgba(0, 0, 0, 0.5); /* 검은색 투명도 50% */
    display: flex; 
    flex-direction: column; /* 세로 정렬: 로고가 위, 텍스트가 아래 */
    align-items: center; 
    justify-content: center; 
    gap: 5px; /* 로고와 텍스트 사이의 미세 간격 */
    z-index: 10; 
    padding: 10px 0;
}

.gal_logo_img { 
    width: 120px !important; /* 크기를 120px로 확실히 제한 (필요 시 조절) */
    height: auto !important; 
    -o-object-fit: contain; 
       object-fit: contain;
    margin-bottom: 2px;
}

/* 타이틀 텍스트: 프리텐다드 / 20px / 화이트 / 굵기 700 */
.gal_title_text { 
    font-family: 'Pretendard', sans-serif; 
    font-size: 25px; 
    color: #fff; 
    font-weight: 700; 
    text-align: center;
    line-height: 1.2;
}

/* 모달 팝업 */
.modal_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; display: none; align-items: center; justify-content: center; }
.modal_content { position: relative; width: 85vw; height: 85vh; display: flex; align-items: center; justify-content: center; }
.modal_content img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }
.modal_close { position: fixed; top: 30px; right: 50px; color: #fff; font-size: 50px; cursor: pointer; font-weight: 200; font-family: sans-serif; line-height: 1; z-index: 10000; }

/* 7페이지 (SHOP) - 정중앙 및 빈공간 해결 */
#section_07 { height: calc(100vh - 200px) !important; min-height: 700px !important; }
.shop_page_bg { background: url('../images/shop_bg_img.webp') no-repeat center center / cover !important; }

.shop_content { width: 1440px; height: 100%; margin: 0 auto; position: relative; display: flex; justify-content: center; align-items: center; }
.shop_left { width: 445px; height: 100%; position: absolute; left: 50px; top: 0; display: flex; align-items: flex-end; }
.shop_people { width: 100%; max-height: 95%; -o-object-fit: contain; object-fit: contain; -o-object-position: bottom center; object-position: bottom center; }

.shop_right { margin-left: 500px; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-bottom: 20px; }
.shop_top_imgs { display: flex; align-items: center; gap: 30px; margin-bottom: 30px; }
.jo_logo { width: 202px; height: 70px; -o-object-fit: contain; object-fit: contain; }
.pack_imgs { display: flex; gap: 15px; }
.pack_imgs img { width: 124px; height: 163px; -o-object-fit: contain; object-fit: contain; }

.shop_mid_text { margin-bottom: 30px; }
.shop_mid_text p { font-family: 'Pretendard', sans-serif; font-size: 50px; font-weight: 600; color: #fff; line-height: 1.3; }

.shop_bot_area { display: flex; align-items: center; gap: 20px; }
.shop_store_text p { font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 600; color: #fff; line-height: 1.2; text-align: left; }

.shop_btn { display: block; width: 150px; height: 50px; background: #22ac38; padding: 2px; text-decoration: none; }
.btn_border { width: 100%; height: 100%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn_border span { font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 600; color: #fff; }
.btn_border img { height: 14px; -o-object-fit: contain; object-fit: contain; }

/* 하단 푸터 (Footer) */
#footer_wrap { width: 100%; height: 200px; background: #000; display: flex; align-items: center; justify-content: center; }
.footer_inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.f_logos { display: flex; align-items: center; justify-content: center; gap: 30px; margin-bottom: 2px; }
.f_logos img { width: 120px; height: 30px; -o-object-fit: contain; object-fit: contain; }
.f_info { text-align: center; }
.f_info p, .f_policy { font-family: 'Pretendard', sans-serif; font-size: 13px; font-weight: 400; color: #fff; line-height: 1.4; text-decoration: none; margin: 0; padding: 0; }
.f_policy { display: inline-block; margin-bottom: 4px; text-decoration: underline; text-underline-position: under; cursor: pointer; }
.f_info .f_tel { font-weight: 600; margin: 4px 0; font-size: 13px; }

/* 개인정보처리방침 팝업 전용 CSS */
.privacy_content { width: 600px; background: #fff; border-radius: 10px; padding: 40px; position: relative; max-height: 80vh; overflow-y: auto; }
.privacy_close { position: absolute; top: 20px; right: 20px; font-size: 30px; color: #000; cursor: pointer; }
.privacy_content h3 { font-size: 24px; font-weight: 600; margin-bottom: 20px; text-align: center; color: #000; }
.privacy_text { font-size: 14px; line-height: 1.8; color: #333; }
.privacy_text hr { margin: 20px 0; border: 0; border-top: 1px solid #eee; }

/* 선택된 매장명의 빨간색 강조 */
.store_list_item.on .st_name {
    color: #ff0000 !important;
    font-weight: bold;
}

/* 전화번호 링크 스타일 */
.st_tel_link {
    color: inherit;
    text-decoration: underline;
}

/* 주소 터치 강조 스타일 */
.st_addr_copy:active {
    background-color: #f0f0f0;
}

/* 푸터 패밀리 사이트 PC */
#footer_wrap { 
    width: 100%; 
    height: 220px; 
    background: #000; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

/* 1920px 그리드 경계선 락 설정 */
.footer_inner { 
    width: 100%;
    max-width: 1920px; 
    position: relative; /* 패밀리 사이트 배치 기준점 */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 8px; 
    padding: 0 60px; /* 1920 규격 내의 우측 끝 여백 확보 */
}

.f_info { 
    text-align: center; 
}

/* 패밀리 사이트 PC 최종 정렬 */
.family_site_wrap {
    position: absolute;
    right: 60px; /* 1920px 가이드라인의 최우측 끝 라인에 일치 */
    bottom: 25px; 
    width: 200px;
    z-index: 1200; /* 가맹문의 바 레이어 위로 강제 노출 */
}

.family_site_btn {
    width: 100%;
    height: 45px;
    background: transparent;
    border: 1px solid #555;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
}

.family_site_btn .arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #999; 
    transition: transform 0.3s ease;
}

.family_site_wrap.open .family_site_btn .arrow {
    transform: rotate(180deg);
}

.family_site_list {
    position: absolute;
    bottom: 44px; /* 위쪽 방향으로 목록 팝업 */
    left: 0;
    width: 100%;
    background: #111; 
    border: 1px solid #555;
    border-bottom: none;
    display: none; 
    flex-direction: column;
}

.family_site_list li a {
    display: block;
    padding: 12px 15px;
    color: #ccc;
    font-size: 14px;
    transition: background 0.3s ease, color 0.3s ease;
}

.family_site_list li a:hover {
    background: #333;
    color: #fff;
}

/* ===================================================================== */
/* --- 신규 추가 페이지 (언론보도) - 슬라이더 통합본 --- */
/* ===================================================================== */
.media_page_bg { 
    background: url('../images/news_bg_img2.webp') no-repeat center top / cover !important; 
}

.media_inner_1400 {
    width: 1400px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px; 
}

.media_title_area {
    margin-bottom: 50px; 
}

.media_logo_img {
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

/* 1. 슬라이드 바깥쪽 껍데기 (정중앙 배치 및 넘침 숨김) */
.media_slider_wrap {
    position: relative;
    width: 100%; 
    max-width: 1200px; /* 사이트 콘텐츠 너비에 맞게 조절 가능 (예: 1000px, 1200px 등) */
    margin: 0 auto !important; /* 영역 자체를 화면 정중앙으로 이동 */
    overflow: hidden !important; /* 화면 밖으로 나가는 다음 슬라이드 완벽하게 잘라냄 */
}

/* 2. 기차가 굴러가는 긴 트랙 */
.media_slider_track {
    display: flex;
    width: 300%; 
    transition: transform 0.4s ease-in-out;
}

/* 3. 개별 기사 아이템 (내부 콘텐츠 정중앙 정렬) */
.media_item {
    width: calc(100% / 3); 
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* 사진과 텍스트를 박스 정중앙으로 정렬 */
    text-align: center; /* 텍스트 가운데 정렬 */
}

/* 4. 기사 이미지 */
.media_img_link img {
    display: block;
    max-width: 100%;
    margin: 0 auto; /* 이미지 자체도 중앙 정렬 */
}

/* --- [기존 유지] 개별 이미지 및 텍스트 스타일 --- */
.media_img_link {
    display: block;
    width: 1000px;
    height: 450px;
    margin-bottom: 5px; 
    overflow: hidden;
}

.media_img_link:hover img {
    transform: scale(1.03); 
}

.media_title_txt {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 400;
    color: #000;
    margin-bottom: 5px; 
    text-align: center;
}

.media_date_txt {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 300;
    color: #9b9b9b;
    text-align: center;
}

/* --- [신규 추가] 슬라이더 닷(Dot) 버튼 스타일 --- */
.media_dots {
    position: absolute;
    top: 430px; /* 이미지 하단에 걸치도록 위치 조정 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.m_dot {
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.m_dot.active {
    background: #e60012;
    width: 45px;
    border-radius: 10px;
}

/* --- 언론보도 슬라이더 속도 조절 및 사진 호버 확대(뻠삥) 제거 --- */
/* 1. 슬라이드 넘어가는(스와이프) 속도를 느리게 조절 */
.media_slider_track {
    /* 기존 0.4s에서 0.8s로 시간을 늘려 부드럽고 천천히 넘어가게 합니다. 
       더 느리게 원하시면 1s, 1.2s 등으로 숫자를 키우시면 됩니다. */
    transition: transform 0.8s ease-in-out !important;
}

/* 2. 기사 사진 마우스 오버 시 뻠삥(확대) 효과 강제 제거 */
.media_img_link:hover img,
.media_item:hover img,
.media_item:hover .media_img_link img {
    transform: none !important;
    /* 만약 애니메이션으로 구현되어 있었다면 아래 코드도 함께 작동하여 무력화합니다 */
    animation: none !important; 
}

/* ===================================================================== */
/* --- 상세 창업문의 섹션 (높이 800px 최적화) --- */
/* ===================================================================== */
#section_inquiry_page {
    width: 100%;
    height: 900px !important;      /* ★ 섹션 높이 800px 강제 고정 */
    min-height: 900px !important;  /* ★ 공통 클래스의 950px 속성 무력화 */
    background-color: #f7f7f7;
    display: flex;
    align-items: center;           /* 800px 안에서 폼을 상하 중앙에 정렬 */
    justify-content: flex-start;
    box-sizing: border-box;
    padding-top: 50px;
}

.inquiry_detail_wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    padding: 20px 60px; /* 상하 여백 대폭 축소 (기존 60px -> 40px) */
    box-sizing: border-box;
}

/* 타이틀 */
.inq_title_area {
    text-align: center;
    margin-bottom: 10px; /* 간격 축소 */
}
.inq_main_tit {
    font-family: 'JejuHallasan', sans-serif;
    font-size: 40px; /* 폰트 축소 (50->40) */
    color: #000;
    }
.inq_sub_tit {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px; /* 폰트 축소 */
    color: #666;
    font-weight: 300;
}

/* 폼 레이아웃 */
.inq_form_area {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 각 줄 사이 간격 축소 (30->15) */
}

.inq_row {
    display: flex;
    gap: 10px;
}

.inq_col {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.inq_col.w100 {
    flex: none;
    width: 100%;
}

.inq_col label {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin-bottom: 5px; /* 라벨과 인풋 간격 축소 */
}
.inq_col label .req {
    color: #df0011;
    margin-left: 3px;
}

/* 입력 필드 (인풋, 셀렉트, 텍스트에리어) */
.inq_col input[type="text"],
.inq_col select,
.inq_col textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    padding: 0 15px;
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: 0.3s;
    box-sizing: border-box;
}
.inq_col input[type="text"],
.inq_col select {
    height: 45px; /* 인풋 높이 축소 (55->45) */
}
.inq_col select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url('../images/arrow_03.webp') no-repeat right 15px center;
    background-size: 12px auto;
    cursor: pointer;
}
.inq_col textarea {
    padding: 15px;
    resize: none;
    line-height: 1.5;
    height: 80px !important; /* 텍스트 에어리어 높이 강제 축소 */
}

/* 라디오 버튼 */
.radio_group {
    display: flex;
    gap: 30px;
    height: 45px; /* 인풋 높이와 동일하게 맞춤 */
    align-items: center;
}
.radio_label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 0 !important;
}
.radio_label input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
    accent-color: #df0011;
}

/* 개인정보 동의 영역 */
.inq_privacy_wrap {
    margin-top: 5px; /* 간격 축소 */
}
.privacy_scroll_box {
    width: 100%;
    height: 80px; /* 스크롤 박스 높이 대폭 축소 (120->80) */
    overflow-y: auto;
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 15px;
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.privacy_chk_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.privacy_chk_box input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    accent-color: #df0011;
    cursor: pointer;
}
.privacy_chk_box label {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    cursor: pointer;
}

/* 제출 버튼 */
.inq_btn_wrap { text-align: center; }
#btn_detail_submit {
    width: 100%;
    max-width: 350px;
    height: 55px; /* 버튼 높이 축소 (65->55) */
    background: #df0011;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}
#btn_detail_submit:hover {
    background: #b4000e;
}

/* ─────────────────────────────────────────────────────────────
   서브페이지: 브랜드 소개 (dpinfo.html) - 비주얼 섹션 수정
   ───────────────────────────────────────────────────────────── */

/* 1. 비주얼 섹션 배경 (1920*900) */
#sub_brand_visual {
    position: relative;
    width: 100%;
    height: 900px;
    background: url('../images/sub_dp_bg_01.webp') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

/* [수정] 2. 우측 빗금 배경 - 각도 반전 및 컬러/투명도 적용 */
.visual_bg_obj {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%; /* 해상도 대응을 위해 넉넉히 설정 */
    height: 100%;
    
    /* 검은색 투명도 50% */
    background: rgba(0, 0, 0, 0.5); 
    
    /* [수정] 각도 반대: 위쪽은 0에서 시작하고 아래쪽을 300px 밀어낸 형태 (/) */
    /* 300px 수치를 조절하여 사선의 기울기를 맞출 수 있습니다 */
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 300px 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 300px 100%);
    
    z-index: 1;
}

/* 3. 1440px 가이드 내부 정렬 */
#sub_brand_visual .inner_1440 {
    position: relative;
    width: 1440px;
    height: 100%;
    margin: 0 auto;
    z-index: 2;
}

/* 4. 타이틀 이미지 (755*345) - 1440 기준 최우측 정렬 */
.visual_title {
    position: absolute;
    top: 50%;
    right: 0; /* 1440px 라인의 가장 오른쪽에 고정 */
    transform: translateY(-50%);
    width: 700px;
    height: 300px;
    background: url('../images/sub_dp_title.webp') no-repeat center center;
    background-size: contain;
}

/* 서브페이지 전용: 우측 고정 네비게이션 가림 */
.dpinfo_page .side_nav_fixed { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   서브페이지: 브랜드 스토리 (Section 02) - 위치 및 간격 수정
   ───────────────────────────────────────────────────────────── */

#sub_brand_story {
    display: flex;
    width: 100%;
    height: 900px;
    overflow: hidden;
}

/* 왼쪽 960px 영역 */
.story_left {
    width: 50%;
    height: 100%;
    background: #e7ecee;
    display: flex;
    
    /* 1. 카피 위치를 위로 올리기 위해 상단 정렬로 변경하고 여백 부여 */
    align-items: flex-start; 
    padding-top: 230px; /* 900px 높이 중 상단에서 약 1/4 지점에 배치 */
    
    /* 2. 1440px 가이드라인 좌측 끝에서 20px 안쪽으로 들여쓰기 */
    /* 수식 설명: 50vw(화면절반) - 720px(가이드절반) + 20px(여유공간) = 50vw - 700px */
    padding-left: calc(50vw - 700px); 
    
    box-sizing: border-box;
}

.story_since { margin-bottom: 50px; } /* 상단 뭉치와 본문 사이 간격 미세 조정 */
.story_since p { 
    font-family: 'KoPubWorldBatang_Light', serif; 
    font-size: 30px; 
    color: #000; 
    margin-bottom: 10px; 
}
.black_bar { 
    width: 50px; 
    height: 10px; 
    background: #000; 
}

.story_main_copy p { 
    font-family: 'KoPubWorldBatang_Light', serif; 
    font-size: 30px; 
    color: #000; 
    line-height: 1.6; 
}
.red_point { color: #ff0000; }

/* 오른쪽 960px 영역 */
.story_right {
    width: 50%;
    height: 100%;
    background: url('../images/sub_dp_bg_03.webp') no-repeat center center;
    background-size: cover;
}

/* ─────────────────────────────────────────────────────────────
   서브페이지: 대표 메뉴 (Section 03) - 카드 크기 축소 및 간격 최적화
   ───────────────────────────────────────────────────────────── */

#sub_brand_menu {
    width: 100%;
    height: 1000px; 
    background: #fff;
    display: flex;
    align-items: flex-start;
    padding-top: 50px; /* 상단 여백을 살짝 늘려 전체 콘텐츠를 위로 배치 */
    box-sizing: border-box;
}

#sub_brand_menu .inner_1440 {
    height: auto;
    margin: 0 auto;
}

/* 타이틀 정렬 */
.sub_menu_title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px; /* 타이틀과 카드 사이 여백 */
}

.sub_menu_title img {
    width: 260px; /* 로고 크기 살짝 축소 */
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.sub_menu_title span {
    font-family: 'JejuHallasan';
    font-size: 50px; /* 폰트 크기 살짝 축소 */
    color: #000;
    margin-left: 15px;
    line-height: 1;
}

/* 메뉴 그리드 레이아웃: 카드 크기 축소 반영 */
.menu_grid_wrap {
    display: grid;
    /* 카드 너비를 230px -> 200px로 축소 */
    grid-template-columns: repeat(4, 200px);
    /* 카드 높이를 330px -> 286px로 축소 */
    grid-template-rows: repeat(2, 286px);
    gap: 30px 50px; /* 상하 30px, 좌우 50px로 간격 조정 */
    justify-content: center;
}

/* 메뉴 카드: 크기 축소 및 직각 유지 */
.menu_card {
    width: 200px;
    height: 286px;
    overflow: hidden;
    background: #fff;
    border-radius: 0 !important;
    
    /* 그림자 농도 조절 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); 
    
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

/* 호버 효과: 카드 크기가 작아졌으므로 솟구치는 높이와 확대 비율도 재조정 */
.menu_card:hover {
    transform: translateY(-15px) scale(1.08); /* 위로 15px 이동, 8% 확대 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); 
    z-index: 10;
}

.menu_card img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────
   서브페이지: 등뼈가 4 POINT (Section 04) - 서클 이미지 위치 수정
   ───────────────────────────────────────────────────────────── */

#sub_brand_point {
    width: 100%;
    height: 1000px; 
    background: #e7ecee;
    display: flex;
    align-items: center; /* 전체 콘텐츠는 중앙에 유지 */
    justify-content: center;
}

#sub_brand_point .inner_1440 {
    height: auto;
    margin: 0 auto;
}

/* 1. 타이틀 영역 */
.point_title_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}
.point_title_wrap img { width: 300px; height: 80px; -o-object-fit: contain; object-fit: contain; }
.point_title_text { display: flex; align-items: baseline; }
.point_num { font-family: 'Pretendard', sans-serif; font-size: 70px; color: #de0010; font-weight: 700; margin-right: 5px; }
.point_txt { font-family: 'Pretendard', sans-serif; font-size: 60px; color: #000; font-weight: 700; }

/* 2. 포인트 콘텐츠 영역 */
.point_contents {
    display: flex;
    justify-content: center;
    width: 1440px; 
    height: 750px; 
    margin: 0 auto;
}

.point_item {
    position: relative;
    width: 360px; 
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 3. 메뉴 박스: 위치 고정 */
.point_menu_box {
    width: 300px;
    height: 400px;
    padding-top: 50px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

/* 컬러 설정 유지 */
.item01 .point_menu_box { background: rgba(106, 57, 28, 0.5); }
.item02 .point_menu_box { background: rgba(86, 98, 56, 0.5); }
.item03 .point_menu_box { background: rgba(64, 34, 15, 0.5); }
.item04 .point_menu_box { background: rgba(119, 42, 46, 0.5); }

.point_menu_box h4 { font-family: 'KoPubWorldBatang_Medium', serif; font-size: 40px; color: #efe7c5; margin-bottom: 10px; }
.point_line { width: 260px; height: 2px; background: #fff; margin-bottom: 20px; }
.point_menu_box p { font-family: 'KoPubWorldBatang_Medium', serif; font-size: 20px; color: #fff; line-height: 1.5; }

/* 4. 원형 이미지: [수정] 박스는 그대로 두고 이미지만 100px 위로 */
.point_circle_img {
    position: absolute;
    /* 바닥에서 0이 아닌 100px을 주어 서클 이미지만 위로 올립니다 */
    bottom: 100px; 
    width: 360px;
    height: 360px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.point_circle_img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

/* ─────────────────────────────────────────────────────────────
   서브페이지: 삼백돼지국밥 (sbinfo.html) PC 전용
   ───────────────────────────────────────────────────────────── */

/* [섹션 01] 비주얼 영역 (1920*900) */
#sub_sb_visual {
    position: relative;
    width: 100%;
    height: 900px;
    background: url('../images/sub_sb_bg_01.webp') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

/* 좌측 빗금 배경: 검정색 투명도 50% */
.sb_visual_bg_obj {
    position: absolute;
    top: 0;
    left: 0;
    width: 55%; /* 로고 크기에 맞춰 너비 소폭 조정 */
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    /* 등뼈가와 반대 방향의 빗금 각도 적용 (/) */
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 300px) 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, calc(100% - 300px) 100%, 0 100%);
    z-index: 1;
}

/* 1440px 중앙 가이드 */
#sub_sb_visual .inner_1440 {
    position: relative;
    width: 1440px;
    height: 100%;
    margin: 0 auto;
    z-index: 2;
}

/* 타이틀 로고: 1440px 안에서 왼쪽 정렬 */
.sb_visual_title {
    position: absolute;
    top: 50%;
    left: 0; /* 1440px 영역의 가장 왼쪽에 배치 */
    transform: translateY(-50%);
    width: 650px;
    height: 540px;
    background: url('../images/sub_sb_bg_02.webp') no-repeat center center;
    background-size: contain;
}


/* ─────────────────────────────────────────────────────────────
   서브페이지: 삼백돼지국밥 리뷰섹션 PC 전용
   ───────────────────────────────────────────────────────────── */
.review_section_wrapper {
    width: 100%;
    background: #fff; 
}

#sub_sb_review {
    width: 1920px; height: 900px;
    margin: 0 auto; /* 1920 사이즈를 화면 중앙에 정렬 */
    background: url('../images/rv_sbbg.webp') no-repeat center center / cover;
    position: relative; overflow: hidden;
}

#sub_sb_review.index_rv_bg {
    background: url('../images/rv_dpbg.webp') no-repeat center center / cover !important;
}

.rv_inner_1700 {
    width: 1700px; height: 100%; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative;
}

/* 카피 영역 */
.rv_copy_area { text-align: center; padding: 30px 0px 30px 0px;}
.rv_copy_area p { font-family: 'Pretendard', sans-serif; font-size: 40px; color: #000; font-weight: 300; line-height: 1.3; }
.rv_copy_area .bold { font-weight: 700; }
.rv_copy_area .red { color: #e60012; font-weight: 700; }

.rv_slider_container {
    width: 100%; height: 600px; position: relative;
}

/* [고정 프레임] 정중앙에 위치 고정 */
.rv_fixed_frame {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 350px; height: 600px;
    border: 5px solid #000; border-radius: 30px; box-sizing: border-box;
    z-index: 100; pointer-events: none; /* 클릭 방해 금지 */
}
.rv_fixed_frame .lens {
    position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
    width: 15px; height: 15px; background: #000; border-radius: 50%;
}

/* [이동 트랙] */
.rv_track_window { width: 100%; height: 600px; position: absolute; top: 0; left: 0; overflow: hidden; }

.rv_track {
    display: flex; align-items: center; /* 수직 중앙 정렬 */
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content; /* 겹침/찌그러짐 원천 차단 */
    position: absolute; left: 50%; top: 0; height: 100%;
    transform: translateX(-850px); /* 3번째 아이템이 정확히 중앙에 오게 하는 좌표 */
}

/* 이동 애니메이션 속도 */
.rv_track.animating { transition: transform 0.5s ease; }

/* [개별 박스] 기본 270*500 */
.rv_item {
    width: 270px; height: 500px;
    margin-right: 67.5px; /* 균등 간격 */
    background: #fff; border: 1px solid #000; border-radius: 30px;
    box-sizing: border-box; flex-shrink: 0; 
    overflow: hidden; -webkit-transform: translateZ(0); /* 라운드 렌더링 버그 방어 */
}
.rv_item.animating { transition: width 0.5s ease, height 0.5s ease, border 0.5s ease; }

/* [정중앙 도달 시 확대] 350*600 */
.rv_item.active {
    width: 350px; height: 600px; border: 0; 
}

.rv_item img, .rv_item iframe { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; border: 0; }

/* 화살표 버튼 */
.rv_arrow {
    position: absolute;
    top: -40px; /* 정중앙 박스 위쪽으로 배치 (원하는 높이에 맞춰 숫자 조절) */
    width: 50px; /* 화살표 전체 길이 */
    height: 40px; /* 마우스 클릭이 쉽도록 투명 영역 확보 */
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 110;
    padding: 0;
}

/* 화살표 가로 꼬리선 (공통) */
.rv_arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    transform: translateY(-50%);
}

/* ── 왼쪽 화살표 (prev) ── */
/* 정중앙(50%)에서 박스 절반(175px) + 간격(30px) = 205px 만큼 밀어냄 */
.rv_arrow.prev { 
    right: calc(50% + 205px); 
}

/* 왼쪽 화살표 머리 ( < 모양 ) */
.rv_arrow.prev::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 5px;
    width: 25px;
    height: 25px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: translateY(-50%) rotate(-45deg);
}

/* ── 오른쪽 화살표 (next) ── */
/* 정중앙(50%)에서 박스 절반(175px) + 간격(30px) = 205px 만큼 밀어냄 */
.rv_arrow.next { 
    left: calc(50% + 205px); 
}

/* 오른쪽 화살표 머리 ( > 모양 ) */
.rv_arrow.next::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 5px;
    width: 25px;
    height: 25px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: translateY(-50%) rotate(45deg);
}

#review_section {
    height: 900px !important;
    min-height: 900px !important;
}

/* ─────────────────────────────────────────────────────────────
   서브페이지: 삼백돼지국밥 (섹션 02 브랜드 스토리) PC 전용
   ───────────────────────────────────────────────────────────── */

#sub_sb_story {
    display: flex;
    width: 100%;
    height: 900px;
    background: #fff;
    overflow: hidden;
}

/* 왼쪽 이미지 박스 (960*900) */
.sb_story_left {
    width: 50%;
    height: 100%;
    background: url('../images/sub_sb_bg_03.webp') no-repeat center center;
    background-size: cover;
}

/* 오른쪽 텍스트 박스 (960*900 / 화이트) */
.sb_story_right {
    width: 50%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    
    /* [핵심] 1440px 컨텐츠 기준 우측 끝에 붙이기 */
    /* 계산법: 화면 절반(50vw)에서 가이드 절반(720px)을 뺀 나머지를 우측 여백으로 설정 */
    padding-right: calc(50vw - 720px); 
    justify-content: flex-end; /* 텍스트 뭉치를 오른쪽으로 밀착 */
    
    box-sizing: border-box;
}

/* 텍스트 스타일 설정 */
.sb_story_txt_wrap p {
    font-family: 'KoPubWorldBatang_Medium', serif;
    font-size: 35px;
    color: #000;
    line-height: 1.5;
    text-align: right; /* 카피 자체는 중앙 정렬 */
}

/* 강조 텍스트 컬러 (#e60012) */
.sb_red_point {
    color: #e60012;
    font-weight: inherit;
}

/* ─────────────────────────────────────────────────────────────
   서브페이지: 삼백돼지국밥 (섹션 03 대표메뉴) PC 전용
   ───────────────────────────────────────────────────────────── */

#sub_sb_menu {
    width: 100%;
    height: 900px;
    min-height: 900px !important;
    background: url('../images/sub_sb_bg_04.webp') no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

/* 1. 상단 헤더 영역 (1920*150) */
.sb_menu_header_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: rgba(0, 0, 0, 0.5); /* 블랙 투명도 50% */
    z-index: 10;
}

.header_flex {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.header_flex img {
    width: 250px;
    height: 80px;
    -o-object-fit: contain;
       object-fit: contain;
}

.sb_menu_main_tit {
    font-family: 'Jeongmeokbawi', sans-serif; /* 요청 폰트 */
    font-size: 60px;
    color: #fff;
    margin-left: 20px; /* 로고와 타이틀 간격 20px */
}

/* 2. 메뉴 카드 레이아웃 (1440 가이드라인 적용) */
.sb_menu_grid {
    display: flex;
    width: 1440px;
    height: 900px;
    margin: 0 auto;
}

.sb_card {
    width: 480px; /* 480 * 3 = 1440 */
    height: 900px;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* 카드별 배경 이미지 */
.sb_item01 { background-image: url('../images/sb_menu_01.webp'); }
.sb_item02 { background-image: url('../images/sb_menu_02.webp'); }
.sb_item03 { background-image: url('../images/sb_menu_03.webp'); }

/* 3. 호버 오버레이 (블랙 투명도 50%) */
.sb_card_hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 블랙 투명도 50% */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* 기본 상태는 숨김 */
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* 마우스 호버 시 노출 */
.sb_card:hover .sb_card_hover {
    opacity: 1;
}

/* 4. 카드 텍스트 스타일 (Jeongmeokbawi 폰트) */
.sb_card_txt .sub_txt {
    font-family: 'Jeongmeokbawi', sans-serif;
    font-size: 50px;
    color: #fff;
    margin-bottom: 15px;
}

.sb_card_txt .main_txt {
    font-family: 'Jeongmeokbawi', sans-serif;
    font-size: 70px;
    color: #fff;
    line-height: 1.2;
}


/* ─────────────────────────────────────────────────────────────
   서브페이지: 삼백돼지국밥 (섹션 04 3 POINT) PC 전용
   ───────────────────────────────────────────────────────────── */

#sub_sb_point {
    width: 100%;
    height: 900px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* 1. 상단 타이틀 영역 */
.sb_point_title_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 30px;
    margin-bottom: 30px;
}
.sb_point_title_wrap img { width: 250px; height: 80px; -o-object-fit: contain; object-fit: contain; }
.sb_point_tit_txt { display: flex; align-items: baseline; }
.num_3 { font-family: 'Pretendard', sans-serif; font-size: 70px; font-weight: 700; color: #e60012; margin-right: 5px; }
.txt_point { font-family: 'Pretendard', sans-serif; font-size: 60px; font-weight: 600; color: #000; }

/* 2. 포인트 콘텐츠 레이아웃 (3열 배치) */
.sb_point_contents {
    display: flex;
    justify-content: space-between;
    width: 1440px;
    margin: 0 auto;
}

.sb_point_item {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 3. 텍스트 박스 및 배경 숫자 설정 */
.sb_point_txt_box {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 30px; /* 설명카피와 이미지 간격 50px */
}

/* 배경에 깔리는 큰 숫자 (190px, e60012, 15%) */
.bg_num {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    font-family: 'Pretendard', sans-serif;
    font-size: 220px;
    font-weight: 700;
    color: #e60012;
    opacity: 0.15;
    z-index: 1;
}

.sb_point_txt_box p {
    position: relative;
    z-index: 2; /* 숫자보다 위에 배치 */
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    color: #000;
    line-height: 1.4;
}

.sb_red { color: #e60012; font-weight: 600; }

/* 4. 서클 이미지 박스 (400*400) */
.sb_point_img_box {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    bottom: -470px; /* 전체 섹션 바닥에서 100px 띄우기 위한 위치 조정 */
    /* 수식: 섹션높이(900) - padding(80) - 타이틀(80+50) - 텍스트(200) - 간격(50) - 이미지(400) = 40px 여유 */
}

/* 바닥에서 100px 고정을 위해 point_item의 구조적 위치 재조정 */
.sb_point_contents { height: 700px; position: relative; }
.sb_point_img_box {
    position: absolute;
    bottom: 0; /* sb_point_contents 바닥 기준 */
    margin-bottom: 50px; /* 하단 여백 조절 */
}

/* 정밀 위치 조정을 위한 아이템 스타일 수정 */
.sb_point_item { height: 100%; justify-content: flex-start; }
.sb_point_img_box {
    width: 400px;
    height: 400px;
    position: absolute;
    bottom: 20px; /* 섹션 하단 여백 100px을 맞추기 위한 수치 (900px 기준) */
}

.sb_point_img_box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────
   서브페이지: 삼백돼지국밥 (매장소개) PC 전용
   ───────────────────────────────────────────────────────────── */
#sub_sb_store {
    width: 100%;
    height: 900px; /* 높이값 확인 */
    /* 하단 회색을 조금 더 진한 #eeeeee로 변경하여 시각적 차이를 줌 */
    background-color: rgb(248, 248, 255); 
    position: relative;
    overflow: hidden;
}

/* 1920x900 고정 도화지 중앙 배치 */
.store_canvas {
    width: 1920px;
    height: 900px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* [중요] 기존에 설정된 흰색 배경을 투명으로 바꿔야 뒤쪽의 그라데이션이 보입니다 */
    background-color: transparent !important; 
}

/* 상단 타이틀 */
.store_title {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 50px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

/* 1440 가이드라인 내부 정렬 */
.store_inner_1440 {
    width: 1440px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center; /* 수직 중앙 */
}

.store_list {
    width: 100%;
    display: flex;
    justify-content: space-between; /* 카드 3개 균등 배치 */
}

/* 매장 카드 디자인 (460*600) */
.store_card {
    display: block;
    width: 460px;
    height: 600px;
    border-radius: 30px;
    border: 3px solid #000;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    
    /* [추가] 부드럽게 퍼지는 그림자로 입체감 부여 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    
    /* 호버 시 그림자도 함께 진해지도록 트랜지션 설정 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 마우스 호버 시 효과 강화 */
.store_card:hover {
    transform: scale(1.05);
    /* 호버 시 카드가 더 위로 떠오르는 느낌을 위해 그림자를 더 짙고 넓게 변경 */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

/* 배경 이미지 설정 */
.card_y { background-image: url('../images/y_sb_store.webp'); }
.card_u { background-image: url('../images/u_sb_store.webp'); }
.card_sw { background-image: url('../images/sw_store.webp'); }

/* 상단 정보 박스 (460*100) */
.card_overlay {
    width: 460px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.5); /* 블랙 투명도 50% */
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 로고 및 텍스트 스타일 */
.logo_sbsb {
    width: 85px;
    height: 70px;
    margin-right: 20px; /* 로고 옆 20 간격 */
    -o-object-fit: contain;
       object-fit: contain;
}

.logo_sumbawi {
    width: 235px;
    height: 70px;
    margin-left: 20px; /* 텍스트 옆 20 간격 */
    -o-object-fit: contain;
       object-fit: contain;
}

.store_name {
    font-size: 30px;
    font-weight: 600;
    color: #ffffff;
}


/* =============================================================
   E. 푸드윈 메인 (fwinfo.html) 전용 스타일 전체
============================================================= */
.fw_page { font-family: 'Pretendard', sans-serif; background-color: #fff; }

/* ── 1. 헤더 영역 (1920*100) ── */
.fw_header {
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    position: relative;
    z-index: 1000;
}

/* 1240px 컨텐츠 중앙 정렬 및 로고-메뉴 간격(60px) 통일 */
.fw_header_inner {
    width: 1240px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px; 
}

.fw_logo {
    width: 180px;
    height: 46px;
    flex-shrink: 0;
}
.fw_logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.fw_gnb {
    display: flex;
    align-items: center;
    gap: 60px; 
    height: 100px;
}
.fw_gnb > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.fw_main_link {
    font-size: 18px;
    color: #000;
    font-weight: 500;
}

/* ── 2. 소메뉴 영역 (1440*165 / Black 50%) ── */
.fw_sub_bg {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 1440px;
    height: 0; 
    background-color: rgba(0, 0, 0, 0.5);
    transition: height 0.3s ease;
    z-index: 998;
}

.fw_sub {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; 
    padding-top: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 999;
}
.fw_sub li a {
    font-size: 16px; /* 12pt */
    color: #fff;
    font-weight: 400;
    transition: color 0.2s ease;
}

/* 소메뉴 마우스 호버 시 빨간색 변경 */
.fw_sub li a:hover {
    color: #df0011 !important;
}

/* 헤더 호버 시 전체 소메뉴 슬라이드 다운 */
.fw_header:hover .fw_sub_bg { height: 165px; }
.fw_header:hover .fw_sub { opacity: 1; visibility: visible; }


/* ── 3. 메인 비주얼 섹션 (1920*800) ── */
.fw_visual_sec {
    width: 100%;
    min-width: 1920px;
    display: flex;
    flex-direction: column;
}

.fw_visual_img {
    width: 100%;
    height: 500px;
    background-image: url('../images/fw_bg_img.webp');
    background-size: cover;
    background-position: center;
}

.fw_visual_copy_box {
    width: 100%;
    height: 300px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fw_main_copy {
    font-size: 50px;
    font-weight: 500;
    color: #000;
    letter-spacing: -1px;
}

.fw_point_color {
    color: #007130;
    font-weight: 700;
}


/* =============================================================
   E. 푸드윈 메인 (fwinfo.html) 전용 스타일 전체 (최종 수정본)
============================================================= */
.fw_page { font-family: 'Pretendard', sans-serif; background-color: #fff; line-height: 1.2; }

/* ── 1. 헤더 영역 (1920*100) ── */
.fw_header {
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    position: relative;
    z-index: 1000;
}

.fw_header_inner {
    width: 1240px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px; /* 로고와 좌우 메뉴 묶음 간격 통일 */
}

.fw_logo {
    width: 180px;
    height: 46px;
    flex-shrink: 0;
}
.fw_logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.fw_gnb {
    display: flex;
    align-items: center;
    gap: 60px; 
    height: 100px;
}
.fw_gnb > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.fw_main_link {
    font-size: 18px;
    color: #000;
    font-weight: 500;
    text-decoration: none;
}

/* ── 2. 소메뉴 영역 (1440*165 / Black 50%) ── */
.fw_sub_bg {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 1440px;
    height: 0; 
    background-color: rgba(0, 0, 0, 0.5);
    transition: height 0.3s ease;
    z-index: 998;
}

.fw_sub {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; 
    padding-top: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 999;
}
.fw_sub li a {
    font-size: 16px; 
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 소메뉴 마우스 호버 시 빨간색 변경 */
.fw_sub li a:hover {
    color: #df0011 !important;
}

.fw_header:hover .fw_sub_bg { height: 230px; }
.fw_header:hover .fw_sub { opacity: 1; visibility: visible; }


/* ── 3. 메인 비주얼 섹션 (1920*800) ── */
.fw_visual_sec {
    width: 100%;
    min-width: 1920px;
}

.fw_visual_img {
    width: 100%;
    height: 500px;
    background-image: url('../images/fw_bg_img.webp');
    background-size: cover;
    background-position: center;
}

.fw_visual_copy_box {
    width: 100%;
    height: 300px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fw_main_copy {
    font-size: 50px;
    font-weight: 500;
    color: #000;
    letter-spacing: -1px;
}

.fw_point_color {
    color: #007130;
    font-weight: 700;
}


/* ── 4. 영상 섹션 (1440*675 영상 + 하단 여백 100px) ── */
.fw_video_sec {
    width: 100%;
    height: 775px; /* 영상(675) + 하단 여백(100) */
    background-color: #000;
    position: relative;
    z-index: 1;
}

/* 중앙 1440px 컨테이너 */
.fw_video_inner {
    width: 1440px;
    height: 675px; 
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.fw_main_video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

/* [필독] 중앙 재생 버튼 스타일 - 외곽선 강화 */
.fw_play_btn_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1100;
    transition: 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#btn_vid_play { background: none; border: none; cursor: pointer; }

.play_icon {
    width: 120px;
    height: 120px;
    /* 외곽선: 흰색 2px 실선으로 확실하게 고정 */
    border: 2px solid #ffffff !important; 
    border-radius: 50%;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    box-sizing: border-box;
    transition: all 0.3s;
    display: block;
}

.play_icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 55%;
    transform: translate(-50%, -50%);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid #fff;
}

.play_txt {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 20px;
    display: block;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#btn_vid_play:hover .play_icon {
    background: #fff;
    transform: scale(1.05);
}
#btn_vid_play:hover .play_icon::after { border-left-color: #000; }

/* 하단 컨트롤 바 (영상 하단 끝에서 30px 위로 조정) */
.fw_video_controls {
    position: absolute;
    bottom: 30px; 
    right: 40px;
    display: flex;
    gap: 15px;
    z-index: 1100;
    opacity: 0;
    transition: 0.3s;
}

.fw_video_sec.is_playing .fw_play_btn_wrap { opacity: 0; visibility: hidden; }
.fw_video_sec.is_playing .fw_video_controls { opacity: 1; }

/* 컨트롤 버튼 공통 */
.fw_video_controls button {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.fw_video_controls button:hover { background: #fff; }

/* 일시정지 아이콘 */
#btn_vid_pause::before, #btn_vid_pause::after { content: ''; width: 3px; height: 16px; background: #fff; margin: 0 3px; }
#btn_vid_pause:hover::before, #btn_vid_pause:hover::after { background: #000; }

#btn_vid_pause.paused::before { display: none; }
#btn_vid_pause.paused::after {
    border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #fff;
    background: none; width: 0; height: 0; margin-left: 4px;
}

/* 전체화면 아이콘 (정중앙 정렬) */
#btn_vid_full::before {
    content: '⛶';
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
#btn_vid_full:hover::before { color: #000; }

.fw_video_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); pointer-events: none; z-index: 10; }



/* ─────────────────────────────────────────────────────────────
   서브페이지: 회사연혁 (fw_com.html) 지그재그 레이아웃
   ───────────────────────────────────────────────────────────── */
.fw_history_section {
    width: 100%; /* 1920px 고정 대신 100%로 변경 */
    background-color: #fff;
    padding-top: 50px;
    padding-bottom: 100px;
}

/* 1. 회사연혁 타이틀 (300*80 / cbcbcb / r39) 
   [수정됨] 하단 마진(margin-bottom)을 0으로 변경하여 바(bar)와 밀착시킴 */
.history_title_box {
    width: 300px;
    height: 80px;
    background-color: #cbcbcb;
    border-radius: 39px;
    margin: 0 auto 0; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.history_title_box h2 {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: #000;
}

/* 2. 컨텐츠 중앙 영역 (1440px) 
   [수정됨] 상단 패딩(padding-top)을 0으로 변경하여 바(bar)와 밀착시킴 */
.history_inner_1440 {
    width: 100%; /* 화면이 1440보다 작아지면 화면에 꽉 참 */
    max-width: 1440px; /* 하지만 1440보다는 커지지 않음 */
    margin: 0 auto;
    position: relative;
    padding-top: 0; 
    border-top: 1px solid transparent;
    box-sizing: border-box; /* 패딩이 넓이에 영향을 주지 않도록 추가 */
}

/* 중앙 타임라인 바 (bar.webp) */
.center_bar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

/* 3. 좌우 지그재그 배치 설정 */
.history_row {
    position: relative;
    width: 100%;
    z-index: 2;
    margin-bottom: 80px;
    display: flex;
}

/* 좌측/우측 박스 정렬 */
.history_row.left { justify-content: flex-start; }
.history_row.right { justify-content: flex-end; }

/* 내부 컨텐츠 박스 (절반 크기 차지) */
.row_content {
    width: 50%;
    box-sizing: border-box;
}

/* 좌/우측 텍스트 정렬 */
.history_row.left .row_content { text-align: right; }
.history_row.right .row_content { text-align: left; }

/* 4. 로고와 연도 묶음 그룹 */
.top_group {
    display: flex;
    align-items: flex-end !important; /* 중앙(center)에서 하단(flex-end) 정렬로 변경 */
    gap: 50px; 
}
/* 2005년 특수 레이아웃 (텍스트 좌측, 이미지 우측) */
.flex_row {
    display: flex;
    align-items: flex-end !important; /* 하단(flex-end) 정렬로 변경 */
    gap: 50px;
}
.history_row.left .top_group { justify-content: flex-end; }
.history_row.right .top_group { justify-content: flex-start; }

/* 2005년 특수 레이아웃 (텍스트 좌측, 이미지 우측) */
.flex_row {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}
.history_row.right .flex_row {
    justify-content: flex-start;
    text-align: left;
}

/* 5. 폰트 설정 */
.year_num {
    font-family: 'Pretendard', sans-serif;
    font-size: 40px;
    font-weight: 400;
    color: #326649;
    line-height: 1;
}
.copy_txt {
    font-family: 'KoPubWorldBatang_Light', serif;
    font-size: 20px;
    color: #000;
    line-height: 1.5;
    margin-top: 10px; 
}

/* 정렬 보조 클래스 */
.d_block { display: block; margin-bottom: 10px; }
.text_right { text-align: right; }
.text_left { text-align: left; }

/* 6. 이미지 개별 규격 */
.logo_2002 { width: 250px; height: 78px; -o-object-fit: contain; object-fit: contain; }
.img_2005 { width: 295px; height: 200px; -o-object-fit: cover; object-fit: cover; }
.logo_2008 { width: 178px; height: 68px; -o-object-fit: contain; object-fit: contain; }
.logo_2010 { width: 476px; height: 78px; -o-object-fit: contain; object-fit: contain; }
.logo_2019 { width: 320px; height: 78px; -o-object-fit: contain; object-fit: contain; }
.logo_2020 { width: 117px; height: 88px; -o-object-fit: contain; object-fit: contain; }
.logo_2023 { width: 78px; height: 78px; -o-object-fit: contain; object-fit: contain; }

/* =============================================================
   7. 회사연혁: 개별 높낮이 및 좌우 간격 조절 코드 (사용자 설정 반영)
============================================================= */

/* 2002년 (좌측) */
.item_2002 { margin-top: 35px !important; }
.history_row.left.item_2002 .row_content { padding-right: 50px !important; }

/* 2005년 (우측) */
.item_2005 { margin-top: -50px !important; }
.history_row.right.item_2005 .row_content { padding-left: 50px !important; }

/* 2008년 (좌측) */
.item_2008 { margin-top: -60px !important; }
.history_row.left.item_2008 .row_content { padding-right: 50px !important; }

/* 2010년 (우측) */
.item_2010 { margin-top: -40px !important; }
.history_row.right.item_2010 .row_content { padding-left: 50px !important; }

/* 2018년 (좌측) */
.item_2018 { margin-top: 120px !important; }
.history_row.left.item_2018 .row_content { padding-right: 50px !important; }

/* 2019년 (우측) */
.item_2019 { margin-top: 90px !important; }
.history_row.right.item_2019 .row_content { padding-left: 50px !important; }

/* 2020년 (좌측) */
.item_2020 { margin-top: -25px !important; }
.history_row.left.item_2020 .row_content { padding-right: 50px !important; }

/* 2022년 (우측) */
.item_2022 { margin-top: 0px !important; }
.history_row.right.item_2022 .row_content { padding-left: 50px !important; }

/* 2023년 (좌측) */
.item_2023 { margin-top: -35px !important; }
.history_row.left.item_2023 .row_content { padding-right: 50px !important; }




/* ─────────────────────────────────────────────────────────────
   서브페이지: 제품소개 (fw_pro.html)
   ───────────────────────────────────────────────────────────── */

.fw_pro_section {
    width: 100%;
    min-width: 1920px;
    height: 900px;
    background-color: #fff;
    padding-top: 50px;
    position: relative;
}

/* 1. 타이틀 박스 */
.pro_title_box {
    width: 300px;
    height: 80px;
    background-color: #cbcbcb;
    border-radius: 39px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pro_title_box h2 {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: #000;
}

/* 2. 제품 컨텐츠 영역 (1440px 균등 배치) */
.pro_inner_1440 {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* 균등 배치 */
    align-items: flex-start;
    position: absolute;
    bottom: 250px; /* 바닥에서 150px 높이 */
    left: 50%;
    transform: translateX(-50%);
}

/* 3. 개별 제품 카드 */
.pro_card {
    width: 260px; /* 선 사이즈에 맞춰 조정 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 제품 이미지 */
.pro_img_box {
    width: 233px;
    height: 210px;
    margin-bottom: 20px;
}
.pro_img_box img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

/* 제품 라벨 (200*35) */
.pro_label {
    width: 200px;
    height: 35px;
    border-radius: 17px;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* 라벨 개별 컬러 */
.label_kimchi { background-color: #a62224; }
.label_ugeoji { background-color: #b95c32; }
.label_sunsal { background-color: #e8be83; }
.label_chueo  { background-color: #917044; }
.label_gukbab { background-color: #b4b0aa; }

/* 스펙 정보 */
.pro_specs {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    color: #878989;
    line-height: 1.5;
    margin-bottom: 13px;
}

/* 구분선 */
.pro_line {
    width: 260px;
    height: 1px;
    background-color: #000;
    margin-bottom: 13px;
}

/* 제품 설명 */
.pro_desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────
   서브페이지: 오시는 길 (fw_road.html) - 정렬 및 간격 완벽 교정
   ───────────────────────────────────────────────────────────── */

.fw_road_section {
    width: 100%;
    min-width: 1920px;
    height: 1800px;
    background-color: #fff;
    padding-top: 50px;
}

/* 1. 타이틀 박스 */
.road_title_box {
    width: 300px;
    height: 80px;
    background-color: #cbcbcb;
    border-radius: 39px;
    margin: 0 auto 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.road_title_box h2 {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: #000;
}

/* 2. 메인 카피 슬로건 */
.road_slogan_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}
.q_icon { width: 47px; height: 40px; -o-object-fit: contain; object-fit: contain; }
.slogan_text { text-align: center; }
.slogan_text p {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: #000;
    line-height: 1.3;
}
.bold_green { font-weight: 600; color: #376649; }

/* 3. 컨텐츠 레이아웃 (1440px 가이드) */
.road_inner_1440 {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

/* 상단 정보 행: 아래 지도와 틈새 없이 밀착 */
.road_top_row {
    display: flex;
    width: 100%;
    margin-bottom: 0 !important; 
}

/* [교정] 왼쪽 회사정보 박스: 글자 간격 완벽 배분 */
.road_info_box {
    width: 720px;
    height: 500px;
    background-color: #d5d5d5;
    padding: 60px 50px;
    align-items: center;
    box-sizing: border-box;
}
.info_grid {
    display: grid;
    /* '사업자등록번호' 7글자에 딱 맞는 공간(170px)을 부여하여 억지 여백을 차단 */
    grid-template-columns: 170px 1fr; 
    gap: 15px 30px;
}
.info_label {
    font-family: 'Pretendard', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #000;
    
    /* [핵심] 짧은 단어(회사명 등)를 170px 공간 안에서 정확히 균등하게 벌려줌 */
    text-align: justify;
    -moz-text-align-last: justify;
         text-align-last: justify; 
    position: relative;
}
/* 콜론(:)을 일괄적으로 우측에 생성하여 오차 없는 수직선을 완성 */
.info_label::after {
    content: ':';
    position: absolute;
    right: -20px;
    top: 0;
}
.info_val {
    font-family: 'Pretendard', sans-serif;
    font-size: 24px;
    font-weight: 200;
    color: #000;
    line-height: 1.3;
}

/* [교정] 오른쪽 봉계공장 박스 */
.road_fac_box {
    width: 720px;
    height: 500px;
    padding-left: 50px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.fac_img { 
    width: 720px; 
    height: 250px; 
    margin-bottom: 5px; 
    margin-left: -50px; /* 1440 가이드 우측 끝에 맞춤 */
}
.fac_img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

/* [핵심] ▲봉계 공장 문구만 오른쪽 끝 정렬 */
.fac_cap {
    width: 720px;
    margin-top: 10px;
    margin-left: -50px;
    font-family: 'Pretendard', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #000;
    text-align: right; 
    margin-bottom: 20px;
}

/* 부지, 건축 등 정보는 다시 왼쪽 정렬 */
.fac_detail {
    width: 100%;
    text-align: left;
}
.fac_detail p { margin-bottom: 5px; display: flex; align-items: flex-start; }
.fac_tit {
    font-family: 'Pretendard', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #000;
    width: 80px;
    flex-shrink: 0;
}
.fac_val {
    font-family: 'KoPubWorldBatang_Light', serif;
    font-size: 24px;
    color: #000;
    line-height: 1.2;
}
.invisible { visibility: hidden; }

/* 4. 하단 지도/로드뷰 행: 상단 정보 박스와 수직으로 딱 붙음 */
.road_bottom_row {
    display: flex;
    width: 100%;
}
.road_map_img, .road_view_img { width: 720px; height: 730px; overflow: hidden; }
.road_map_img img, .road_view_img img { 
    width: 100%; 
    height: 100%; 
    -o-object-fit: cover; 
       object-fit: cover; 
    display: block; /* 이미지 하단 미세 틈새 제거 */
}



/* ─────────────────────────────────────────────────────────────
   서브페이지: 품질관리 (fw_qua.html) - 이미지 보더 제거본
   ───────────────────────────────────────────────────────────── */

/* 1. 섹션 전체 레이아웃 */
.fw_qua_section {
    width: 100%;
    min-width: 1920px;
    height: 4000px;
    background-color: #fff;
    padding-top: 50px;
    box-sizing: border-box;
}

/* 2. 타이틀 및 인트로 영역 */
.qua_title_area {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main_title {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #000;
    margin-bottom: 50px;
    line-height: 1.2;
}
.main_title span { font-weight: 400; }

.frame_label {
    width: 150px;
    height: 50px;
    border: 2px solid #000;
    border-radius: 25px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000;
    margin-bottom: 30px;
}

.haccp_text, .process_intro {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000;
    line-height: 1.5;
    margin-bottom: 50px;
}
.bold_800 { font-weight: 800; }

/* 3. 컨텐츠 컨테이너 (1440px 가이드) */
.qua_inner_1440 {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 4. 개별 아이템 (카드) */
.qua_item {
    width: 100%;
    height: 280px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.qua_txt_box {
    width: 600px;
    height: 100%;
    position: relative; /* 숫자가 이 박스를 기준으로 배치됨 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0; /* 불필요한 패딩 제거 */
}

/* 5. 배경 거대 숫자 (투명도 20%) */
.bg_num {
    position: absolute;
    top: 50%;
    /* [수정] 왼쪽으로 살짝 밀어내어 제목(h3)과 자연스럽게 겹치게 설정 */
    left: -40px; 
    transform: translateY(-50%);
    
    font-family: 'Pretendard', sans-serif;
    font-size: 200px;
    font-weight: 800;
    opacity: 0.2; /* 가독성을 위해 투명도 20%로 조정 */
    z-index: 1;
    pointer-events: none;
    line-height: 1;
}
.item_red .bg_num { color: #af1e25; }
.item_green .bg_num { color: #007130; }

.qua_txt_box h3 {
    position: relative;
    z-index: 2; /* 숫자보다 앞으로 나옴 */
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
    /* 텍스트가 숫자와 너무 붙지 않게 왼쪽 여백 살짝 부여 */
    padding-left: 10px; 
}

.qua_txt_box p {
    position: relative;
    z-index: 2;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 200;
    color: #000;
    line-height: 1.4;
    padding-left: 10px;
}

/* 6. [교정] 공장 이미지: 보더(라운드) 완전 제거 */
.qua_img_box {
    width: 720px;
    height: 280px;
    border-radius: 0; /* 라운드 삭제 */
    overflow: hidden;
}
.qua_img_box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.gap_150 { height: 150px; }



/* ─────────────────────────────────────────────────────────────
   서브페이지: 매장찾기 (fw_map.html)
   ───────────────────────────────────────────────────────────── */

.fw_map_section {
    width: 100%;
    min-width: 1920px;
    height: 900px;
    background-color: #fff; /* 배경색 화이트 */
    padding-top: 50px;
    box-sizing: border-box;
}

/* 매장찾기 타이틀 설정 */
.fw_map_title {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;
    font-weight: 600;
    color: #000;
    text-align: center;
    margin-bottom: 40px;
}

/* 지도 래퍼 규격 및 기존 스타일 재활용 */
.fw_map_section .map_wrapper {
    width: 1440px;
    height: 600px; /* 섹션 높이에 맞춰 조정 */
    margin: 0 auto;
    border: 1px solid #ddd;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

/* 기존 style.css의 .map_left_panel, .map_search_area 등의 
   스타일이 이미 정의되어 있으므로 그대로 적용됩니다. */




/* ─────────────────────────────────────────────────────────────
   서브페이지: 사회공헌 (fw_good.html)
   ───────────────────────────────────────────────────────────── */

.fw_good_section {
    width: 100%;
    min-width: 1920px;
    height: 1700px;
    background-color: #fff; /* 배경색 화이트 */
    padding-top: 50px;      /* 탑에서 50px 간격 */
    box-sizing: border-box;
}

/* [1] 타이틀 및 라벨 영역 */
.good_title_area {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;    /* 아래 간격 50px */
}

.good_frame_label {
    width: 150px;
    height: 50px;
    border: 2px solid #000;  /* 선 굵기 2 / 선 컬러 블랙 */
    border-radius:30px;     /* 보더 라운드 17 */
    background-color: transparent; /* 내부컬러 없음 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;         /* 크기 20 */
    font-weight: 400;        /* 굵기 400 */
    color: #000;             /* 컬러 블랙 */
}

/* [2] 뉴스 이미지 영역 */
.good_news_img {
    width: 830px;
    height: 830px;
    margin: 0 auto 50px;     /* 가운데 정렬 및 아래 간격 50px */
}

.good_news_img img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;     /* 원본 비율 유지 */
}

/* [3] 후원 텍스트 프레임 (1920x200 풀사이즈 배경) */
.good_sponsor_box {
    width: 100%;
    height: 200px;
    background-color: #e0e0e0; /* 컬러 e0e0e0 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px;      /* 아래 간격 100px */
}

.good_sponsor_txt {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;         /* 크기 30 */
    font-weight: 400;        /* 굵기 400 */
    color: #000;             /* 컬러 블랙 */
    text-align: center;
    line-height: 1.5;
}

/* [4] 후원기관 로고 영역 */
.good_logo_area {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;    /* 아래 간격 100px */
}

.good_logo_img {
    width: 1280px;           /* 사이즈 1280x125 */
    height: 125px;
    -o-object-fit: contain;
       object-fit: contain;
}


/* ─────────────────────────────────────────────────────────────
   서브페이지: 공지사항 (fw_news.html) - 최종 수정본
   ───────────────────────────────────────────────────────────── */
.sub_notice_page {
    width: 100%;
    background-color: #fff;
    padding: 50px 0 200px;
}

/* 1. 공지사항 타이틀 */
.sub_notice_page .board_main_title {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;       
    font-weight: 600;      
    color: #000;           
    text-align: center;
    margin-bottom: 60px;
}

/* 2. 게시판 래퍼 및 테이블 */
.sub_notice_page .board_wrapper { 
    width: 1240px; 
    margin: 0 auto; 
}

.sub_notice_page .news_table { 
    width: 100%; 
    border-top: 2px solid #000; 
    border-collapse: collapse; 
}

.sub_notice_page .news_table th { 
    background-color: #f9f9f9; 
    padding: 20px 0; 
    border-bottom: 1px solid #ddd; 
    font-family: 'Pretendard', sans-serif;
    font-size: 18px; 
    font-weight: 500;
    text-align: center; /* 기본은 중앙 */
}

/* [수정] 제목 헤더(th)와 데이터(td)를 왼쪽으로 정렬하여 dp_news와 맞춤 */
.sub_notice_page .news_table .th_title,
.sub_notice_page .news_table .td_title { 
    text-align: left !important; 
    padding-left: 40px !important; 
}

.sub_notice_page .news_table td { 
    padding: 20px 0; 
    border-bottom: 1px solid #eee; 
    text-align: center; 
    font-family: 'Pretendard', sans-serif;
    font-size: 16px; 
    color: #333; 
}

.sub_notice_page .news_table tr:hover td { 
    background-color: #fcfcfc; 
}

/* 3. 페이지네이션 */
.sub_notice_page .pagination { 
    display: flex; 
    justify-content: center; 
    gap: 10px; 
    margin-top: 50px; 
}

.sub_notice_page .page_btn { 
    width: 40px; 
    height: 40px; 
    border: 1px solid #ddd; 
    background: #fff; 
    cursor: pointer; 
    transition: 0.3s;
    font-size: 16px; 
}

.sub_notice_page .page_btn.active { 
    background-color: #af1e25; 
    color: #fff; 
    border-color: #af1e25; 
}

/* 4. [추가] 팝업 배경 (모달 오버레이) */
.modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 어두운 배경 */
    display: none; /* 기본 숨김 */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 최상단 배치 */
}

/* 5. 모달 창 본체 */
.news_detail_content { 
    background: #fff; 
    width: 800px; 
    max-width: 90%; 
    padding: 50px 40px; 
    border-radius: 10px; 
    position: relative; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

#fw_view_title { 
    font-family: 'Pretendard', sans-serif;
    font-size: 28px; 
    font-weight: 600; 
    margin-bottom: 15px; 
    text-align: left;
}

#fw_view_date { 
    color: #666; 
    font-size: 15px; 
    display: block;
    text-align: left;
    margin-bottom: 20px;
}


/* ─────────────────────────────────────────────────────────────
   서브페이지: 사업비전 (fw_vis.html) - 최종 통합 스타일 (정렬 및 간격 완벽 교정)
   ───────────────────────────────────────────────────────────── */

/* 1. 페이지 전체 배경 및 기본 설정 */
.fw_vis_page { background-color: #fff !important; }

.vis_content_wrap {
    width: 100%;
    min-width: 1240px;
    padding: 100px 0 200px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2. 타이틀 프레임 */
.vis_title_frame {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #000;
    border-radius: 30px;
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #000;
    background-color: transparent;
    box-sizing: border-box;
}

.frame_230 { width: 230px; height: 50px; margin-bottom: 50px; }
.frame_400 { width: 400px; height: 50px; margin-bottom: 100px; }
.frame_200 { width: 200px; height: 50px; margin-bottom: 0px; } 

/* 매출현황 하단 안내 문구 */
.sales_info_text {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000;
    margin-top: 30px;
    margin-bottom: 100px;
    text-align: center;
}

/* 3. 운영시스템 이미지 박스 (1000 * 566) */
.vis_img_box { 
    width: 1000px; 
    height: 566px; 
    margin-bottom: 100px; 
    overflow: hidden; 
}
.vis_img_box img { 
    width: 100%; 
    height: 100%; 
    -o-object-fit: contain; 
       object-fit: contain; 
    display: block; 
}

/* 4. 온-오프라인 통합 비전 카피 영역 */
.vision_copy_container {
    width: 1440px;
    margin-bottom: 100px;
}

.copy_box {
    width: 100%;
    height: 200px;
    background-color: #efeded;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.copy_left {
    padding-left: 100px;
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #af1f26;
}

.copy_right {
    padding-right: 100px;
    text-align: right;
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #000;
    line-height: 1.5;
}

/* 5. 매출현황 그래프 영역 */
.sales_graph_wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.graph_inner {
    width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 그래프 상단(바) 영역 - 패딩 통일 */
.graph_bars_area {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 40px; /* 연도 영역과 동일하게 설정 */
    box-sizing: border-box;
}

/* ★ 정렬 핵심: 바 영역과 연도 영역의 너비를 80px로 완전 동일하게 고정 ★ */
.bar_unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px; 
}

/* 일반 수치 텍스트 (64억 등) */
.bar_val {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #b6c9bd; 
    margin-bottom: 20px;
    white-space: nowrap; /* 글자가 줄바꿈 되지 않도록 방어 */
}

/* 그래프 막대 (폭 30) */
.bar { width: 30px; background-color: #b6c9bd; }

/* --- 2024년 목표치 특수 스타일 --- */
.bar_unit.active .target_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ★ 100억과 그래프 탑 사이의 간격을 벌리는 부분 ★ */
    margin-bottom: 30px !important; 
}

.target_txt { font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #AF1F26;
    margin-bottom: 5px; }

.bar_unit.active .bar_val {
    font-size: 30px;
    font-weight: 800; /* 굵기 800 */
    color: #AF1F26;
    margin-bottom: 0 !important; 
}

.bar_unit.active .bar {
    width: 30px;
    height: 450px !important;
    background-color: #AF1F26;
}

/* 바닥선 (두께 10px) */
.graph_base_line {
    width: 100%; /* 1200px 안에서 100% 꽉 채움 */
    height: 10px;
    background-color: #000;
}

/* 연도 영역 (상단 그래프 영역과 패딩 완벽 일치) */
.graph_years_area {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 40px; 
    margin-top: 20px; /* 바닥선과 년도 간격 20px */
    box-sizing: border-box;
}

/* ★ 정렬 핵심: 연도 텍스트 상자 너비를 상단 bar_unit과 동일한 80px로 강제 고정 ★ */
.graph_years_area span {
    display: inline-block;
    width: 80px; 
    text-align: center;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #000;
}

/* 2024년 연도 강조 */
.active_year {
    font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────
   SEO 및 접근성을 위한 텍스트 숨김 처리 (Blind)
   ───────────────────────────────────────────────────────────── */
.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    overflow: hidden;
    margin: -1px;
    white-space: nowrap;
}

.store_addr {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* 모바일 클릭 시 하이라이트 잔상 제거 */
}

/* =========================================================
   조직도 전용 스타일 (1920x2300 기준 / 1440px 내부 배치)
========================================================= */
.fw_org_section {
    width: 100%;
    min-width: 1920px; 
    min-height: 2200px;
    background-color: #ffffff;
    padding-top: 100px;
    padding-bottom: 200px;
}
.org_inner_1440 {
    width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}
.org_title_area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}
.org_title_area img {
    width: 230px;
    height: 60px;
    object-fit: contain;
    margin-right: 50px; 
}
.org_title_area h2 {
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #000000;
    letter-spacing: 2px;
}
.org_tree_wrap {
    position: relative;
    width: 100%;
}
.org_lines_layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}
.org_line {
    position: absolute;
    background-color: #007130;
}
.line_center_v { left: 50%; margin-left: -1px; width: 2px; top: 50px; height: 1696px; }
.line_lvl3_h { top: 350px; left: 50%; width: 520px; height: 2px; }
.line_branch_h { top: 430px; left: 200px; width: 1040px; height: 2px; }
.line_left_v { left: 200px; margin-left: -1px; width: 2px; top: 430px; height: 787px; }
.line_right_v { left: 1240px; margin-left: -1px; width: 2px; top: 430px; height: 577px; }

.org_nodes_layer {
    position: relative;
    z-index: 10;
    width: 100%;
}
.node_solid {
    width: 400px;
    height: 100px;
    background-color: #007130;
    border-radius: 50px;
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.node_solid .prof_img { width: 80px; height: 80px; border-radius: 50%; margin-left: 50px; object-fit: cover; }
.node_solid .text_info { margin-left: 41px; display: flex; flex-direction: column; gap: 10px; }
.node_solid .text_info .name { font-family: 'Pretendard', sans-serif; font-size: 30px; font-weight: 400; color: #ffffff; line-height: 1; }
.node_solid .text_info .pos { font-family: 'Pretendard', sans-serif; font-size: 30px; font-weight: 200; color: #ffffff; line-height: 1; }

.ls_860 { letter-spacing: 0.86em; margin-right: -0.86em; }
.ls_500 { letter-spacing: 0.35em; margin-right: -0.86em; }

.level_1 { margin-bottom: 50px; }
.level_2 { margin-bottom: 50px; }
.level_3 { position: relative; margin-bottom: 60px; }
.level_3 .node_right { position: absolute; top: 0; right: 0; }

.level_4_cols { display: flex; justify-content: space-between; }
.org_col { width: 400px; display: flex; flex-direction: column; align-items: center; }

.dept_title { width: 120px; height: 30px; background-color: #007130; border-radius: 15px; display: flex; justify-content: center; align-items: center; font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 200; color: #ffffff; margin-bottom: 7px; z-index: 10; }

.person_group { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 70px; }
.person_group .prof_overlap { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; position: relative; z-index: 12; margin-bottom: -40px; }
.node_outline { width: 400px; height: 100px; border: 2px solid #007130; border-radius: 50px; background-color: #ffffff; display: flex; justify-content: center; align-items: center; box-sizing: border-box; z-index: 11; }
.node_outline .txt_wrap { display: flex; align-items: center; gap: 30px; margin-top: 15px; }
.node_outline .name { font-family: 'Pretendard', sans-serif; font-size: 30px; font-weight: 400; color: #000000; }
.node_outline .pos { font-family: 'Pretendard', sans-serif; font-size: 30px; font-weight: 200; color: #000000; }

.small_box_list { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.node_small { width: 400px; height: 50px; border: 2px solid #007130; border-radius: 25px; background-color: #ffffff; display: flex; justify-content: center; align-items: center; box-sizing: border-box; z-index: 11; }
.node_small span { font-family: 'Pretendard', sans-serif; font-size: 30px; font-weight: 400; color: #000000; }

/* =======================================================
   메인 비디오 전체화면 시 화면 잘림(크롭) 방지
======================================================= */
/* 전체화면 상태일 때는 원본 비율(contain)로 보여주어 잘림을 방지합니다 */
video:fullscreen {
    object-fit: contain !important;
}
video:-webkit-full-screen { /* 아이폰/사파리 대응 */
    object-fit: contain !important;
}
video:-ms-fullscreen {      /* 구형 엣지/IE 대응 */
    object-fit: contain !important;
}

/* 서브 페이지 상단 100px 여백 및 배경색 강제 초기화 */
body.fw_page, body.sbinfo_page, body:not(:has(#header_wrap)) {
    padding-top: 0 !important;
    background-color: #fff !important; 
}