/* ---------------------- 메인 비쥬얼 css 소스 시작 ---------------------*/
.main_visual {
    position: relative;
    width: 100%;
    height: 80vh; /* 화면 높이의 80% */
    background: url('../images/visual_bg.jpg');
	background-color: rgba(255, 87, 51, 0.5); 
    background-color:#000;
    overflow: clip;
    display: flex;
    flex-direction: column; /* 수직 나열 설정 */
    align-items: center;
    justify-content: flex-start; /* 위에서부터 차례대로 */
    padding-top: 5vh; /* 상단 여유 공간 */
}

/* --- 메인 텍스트 이미지 (위쪽) --- */
.main_title_img {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 900px; /* PC 최대 크기 */
    transition: 0.5s;
	padding-top:100px;
}
.main_title_img img { width: 100%; height: auto; }

/* --- 안주 이미지 (텍스트 아래에 배치 및 반만 걸침) --- */
.main_food_slider {
    position: absolute;
    bottom: -300px; /* PC에서 아래로 400px 내려서 반만 보이게 함 */
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    z-index: 10;
}

.food_item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
}
.food_item.active {
    opacity: 1;
    visibility: visible;
}
.food_item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- 흐르는 배경 글자 (최하단 고정) --- */
.main_marquee {
    position: absolute;
    bottom: 20px;
    width: 100%;
    z-index: 1;
}
.marquee_track {
    display: flex;
    width: 200%;
    animation: marquee_flow 30s linear infinite;
}
.marquee_track img { width: 50%; height: auto; max-height: 60px;  }

@keyframes marquee_flow {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- 모바일 반응형 --- */
@media (max-width: 768px) {
    .main_visual { height: 75vh; }
    
    .main_title_img { width: 95%; margin-top: 20px; }

    .main_food_slider {
        width: 100vw;
        height: 100vw;
        bottom: 5vh; /* 모바일에서는 이미지가 전체 다 보이게 위로 올림 */
    }
}

/* ---------------------- 메인 비쥬얼 css 소스 끝 ---------------------*/


/* ---------------------- 두번째 영상세션 css 소스 시작 ---------------------*/

.video_section {
    position: relative;
    width: 100%;
    height: 80vh; /* 요청하신 80% 높이 유지 */
	min-height:800px;
    overflow: clip;
    background: #000;
}

/* --- 배경 영상 설정 --- */
/* 영상 감싸는 박스 */
.video_bg_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 유튜브 아이프레임 (폭 100% 고정 기법) */
.bg_video_iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw; /* 폭을 화면 너비에 맞춤 */
    height: 56.25vw; /* 16:9 비율 유지 (100 * 9 / 16) */
    min-height: 80vh; /* 섹션 높이보다 작아지지 않게 설정 */
    min-width: 142.22vh; /* 높이에 맞춘 최소 너비 (80 * 16 / 9) */
    transform: translate(-50%, -50%); /* 정확히 중앙 정렬 후 상하 잘라냄 */
    pointer-events: none;
}


.bg_video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 화면에 꽉 차게 */
}
/* 영상 위 어두운 막 (텍스트 가독성) */
.video_overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75); 
    z-index: 2;
}

/* --- 중앙 텍스트 애니메이션 --- */
.video_content {
    position: relative;
    z-index: 10;
    height: 100%;
    justify-content: center;
    align-items: center;
	padding: 0 25px;
}

.video_title { 
	margin-top: 120px; 
}
 

.title_up_ani {
    animation: slideUpFade 1.2s ease-out forwards;
    opacity: 0;
	
}

.title_up_ani img {
    max-width: 742px;
    width: 100%;
    height: auto;
}

.video_text{
	width:100%;
}

.video_text p{
	width:100%; 
	color:#fff;
	text-align:center; 
	padding:50px 0 100px; 
	line-height:1.8em; 
	font-size:18px;	
}

@keyframes slideUpFade {
    0% { transform: translateY(50px); opacity: 0; } /* 아래에서 위로 올라옴 */
    100% { transform: translateY(0); opacity: 1; }
}

/* --- 하단 흐르는 글자 --- */
.video_marquee_area {
    position: absolute;
    bottom: 30px; /* 영상 하단에 배치 */
    width: 100%;
    z-index: 15;
    overflow: clip;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .video_section{
		height:50vh;
		min-height:580px;
	}
	.video_title {
		margin-top:60px; 

	}
	.video_text p{
		font-size:15px;
		line-height:1.5rem;
		padding: 35px 0 30px;
	}

}

/* ---------------------- 두번째 영상세션 css 소스 끝 ---------------------*/


/* ---------------------- 세번째 매출세션 css 소스 시작 ---------------------*/
.sales_section {
    padding: 80px 0;
    color: #fff;
    text-align: center;
    overflow: clip;
	background:url('../images/t_bg.jpg');
	background-size: cover;
}

.sales_main_title img { max-width: 820px; width: 80%; margin-bottom: 20px; }

/* 큰 숫자 깜박임 애니메이션 */
.main_revenue { 
	margin-top: 30px;
	margin-bottom: 0px; 
}
.highlight_text{
	font-size: 22px; 
	color: #fff; 
	font-weight: bold;
	display: block; 
	padding: 0 25px;
}

.sales_main_txt{
	line-height:1.8em; 
	font-size:18px;	
}
.blink_number {
    font-size: 80px;
    font-weight: 900;
    color: #ffcc00;
    animation: blinker 0.8s linear infinite;
}
.blink_number span {
	font-size: 40px;
}

@keyframes blinker {
    50% { opacity: 0.3; transform: scale(1.05); } /* 깜박이면서 살짝 커짐 */
}

.total_part{
	width:100%; 
	border:1px solid #fff; 
	display: flex;
	gap:0px;
	padding: 20px 0;
	margin-top: 50px; 
	
}
.total_part span{
	color:#ffcc00;
	font-weight:900; 
	
}

.total_part .number{
	font-size:35px;
}

.delivery{
	text-align:center; 
	width:50%; 
	border-right:1px solid #fff; 
	font-size:18px;
}
.store{
	text-align:center; 
	width:50%; 
	font-size:18px;		
}


/* 하단 12개월 롤링 슬라이드 */
.monthly_slider {
    width: 100%;
    margin-top:30px;
    padding: 20px 0;
   overflow: clip; /* 영역 밖은 절대 안 보임 */
}

.slider_track {
    display: flex;
    /* 중요: 250px * 15개 = 3750px (전체 길이) */
    width: 3750px; 
    animation: marquee_perfect 20s linear infinite;
}

.slide_item {
    /* 250px 고정 */
    width: 250px; 
    flex-shrink: 0;
}

.slide_item img {
    width: 100%;
    display: block;
}

/* --- 무한 루프 핵심: 5개 분량만 이동하고 0으로 순간이동 --- */
@keyframes marquee_perfect {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 중요: 10개가 아니라 '원본 5개' 분량인 -1250px만 이동 */
        /* -1250px에 도달하는 순간 0px(처음)로 돌아가는데, 
           이때 화면에는 Set 2의 시작인 11월이 떠 있으므로 리셋 시 시각적 차이가 0이 됩니다. */
        transform: translateX(-1250px);
    }
}


/* --- 모바일 반응형 --- */
@media (max-width: 768px) {
   .sales_main_txt{ padding:0 25px; font-size:15px; line-height:1.8em; }
   .blink_number { 
	 font-size:45px;
	}
   .total_part {
	 width: 100% important!;
	 min-width:380px;
	 max-width:700px;
	 margin: 20px auto 0 ;
   }
   
}
/* ---------------------- 세번째 매출세션 css 소스 끝 ---------------------*/


/* ---------------------- 네번째 브랜드소개세션 css 소스 시작 ---------------------*/
.zz_brand_intro {
    position: relative;
    padding: 150px 0 0px;
    background-color: #000;
    text-align: center;
    overflow: clip;
}
/* 중앙 콘텐츠 레이어 (글자가 이미지보다 위로 오게) */
.zz_content_inner {
    position: relative;
    z-index: 10;
}

/* --- 둥둥 떠다니는 음식 이미지 공통 스타일 --- */
.zz_food {
    position: absolute;
    z-index: 1;
    opacity: 1 !important; /* 블랙 오파시티 제거 (완전 선명하게) */
    pointer-events: none;
}

.zz_food img {
    width: 100%;
    height: auto;
    /* 선명도를 위해 필터 제거 또는 밝은 광채만 살짝 추가 */
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.1)); 
}

/* --- 각 메뉴별 사이즈 다르게 설정 (여기서 조절하세요) --- */
.zz_food_size_xl { width: 450px; } /* 아주 큰 메뉴 */
.zz_food_size_l  { width: 380px; } /* 큰 메뉴 */
.zz_food_size_m  { width: 320px; } /* 보통 메뉴 */
.zz_food_size_s  { width: 280px; } /* 작은 메뉴 */

/* --- 위치 및 개별 애니메이션 속도 --- */
.zz_food_left1 { left: -50px; top: 5%; animation: zz_float_side 4s infinite ease-in-out; }
.zz_food_left2 { left: 5%; top: 40%; animation: zz_float_side 6s infinite ease-in-out 1s; }
.zz_food_right1 { right: -60px; top: 10%; animation: zz_float_side 5s infinite ease-in-out 0.5s; }
.zz_food_right2 { right: 5%; bottom: 10%; animation: zz_float_side 7s infinite ease-in-out 1.5s; }

@keyframes zz_float_side {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(8deg); }
}

/* 1. 상호명 스타일 (정적) */
.zz_static_title {
    font-size: 60px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -2px;
}

/* 2. 슬로건 전체 애니메이션 (왼쪽에서 등장) */
.zz_moving_slogan {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    opacity: 0;
    animation: zz_slide_reveal 1.5s ease-out forwards;
}

/* [기본] 레드 네온 */
.zz_neon_red {
    color: #fff;
    text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 30px #ff0000;
}

/* [공통] 포인트 네온 기본 설정 */
.zz_neon_point {
    font-weight: 800;
    animation: zz_neon_flicker 2.5s infinite;
}

/* --- 옵션 1: 초록색 네온 (Green) --- */
.zz_neon_green {
    color: #fff;
    text-shadow: 
        0 0 5px #fff, 
        0 0 10px #33ff00, 
        0 0 20px #33ff00, 
        0 0 40px #33ff00;

}

.zz_plain_text {
    color: #ff3333; /* 네온 없는 선명한 레드 */
    font-weight: 800;
    text-shadow: none; /* 그림자 제거 */
    padding: 0 5px;
}

/* --- 애니메이션 정의 --- */
/* 모바일 대응 (화면 작아지면 음식 크기 축소) */
@media (max-width: 1024px) {
    .zz_food_size_xl { width: 180px; }
    .zz_food_size_l  { width: 150px; }
    .zz_food_size_m  { width: 120px; }
    .zz_food_size_s  { width: 100px; }
}

/* 슬로건 등장 효과 */
@keyframes zz_slide_reveal {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* 네온 미세 깜박임 (과하지 않게 설정) */
@keyframes zz_neon_simple_blink {
    0%, 100% { opacity: 1; }
    95% { opacity: 1; }
    96% { opacity: 0.8; }
    98% { opacity: 1; }
}

/* --- 하단 텍스트 --- */
.zz_text_row {
    font-size: 20px;
    color: #fff;
    margin-top: 20px;
}

.zz_final_brand {
    margin-top: 40px;
    color: #999;
    border-top: 1px solid #222;
    padding-top: 20px;
	line-height:1.8em; 
	font-size:18px;	
}

/* 모바일 대응 */
@media (max-width: 768px) {
	.zz_content_inner { width: 100%; }
	.zz_text_row {font-size:15px; line-height:1.5em; width:90%; margin:0 auto;}
    .zz_static_title img, .zz_text_row img {  width: 100%; }
    .zz_moving_slogan { font-size: 18px; line-height: 1.6; }
    .zz_neon_part { display: block; } /* 모바일에서 가독성을 위해 줄바꿈 허용 시 */
}
/* ---------------------- 네번째 브랜드소개세션 css 소스 끝 ---------------------*/

/* ---------------------- 다섯번째 브랜드 장점세션 css 소스 시작 ---------------------*/
.zz_step_section {
    padding: 100px 0;
    background-color: #000; /* 메인 배경색 */
    display: flex;
    justify-content: center;
}

/* --- 배열 문제 해결: 정교한 그리드 시스템 --- */
.zz_grid_container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 정확히 4등분 */
    gap: 20px; /* 카드 사이 간격 */
    width: 95%;
    max-width: 1300px;
}

.zz_menu_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* --- 비주얼 영역 --- */
.zz_visual_box {
    position: relative;
    width: 220px;
    height: 370px;
    margin-bottom: 30px;
}

/* --- 옅게 퍼지는 선 효과 (Ripple Effect) --- */
.zz_wave_line {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1.5px solid #fff;
    border-radius: 110px;
    z-index: 1;
    opacity: 0;
    /* 서서히 커지며 사라지는 애니메이션 */
    animation: zz_spread_out 3s linear infinite;
}

/* 두 번째 선의 시간차 공격 */
.zz_delay_1 {
    animation-delay: 1.5s;
}

@keyframes zz_spread_out {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.2); /* 1.2배까지 커짐 */
        opacity: 0; 
    }
}

.zz_img_holder {
    width: 100%;
    height: 100%;
    border-radius: 110px;
    overflow: clip;
    position: relative;
    z-index: 5; /* 이미지 레이어를 위로 */
    border: 2px solid #fff;
    background: #000;
}

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

/* --- 배지 및 텍스트 스타일 --- */
.zz_badge {
    position: absolute;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #f24e1e;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 14px;
    z-index: 10;
}

.zz_info_box h4 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
    word-break: keep-all;
}

.zz_info_box p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

/* 반응형 모바일 */
@media (max-width: 1024px) {
    .zz_grid_container { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
}
@media (max-width: 600px) {
    .zz_grid_container { grid-template-columns: 1fr; }
    .zz_visual_box { width: 180px; height: 240px; }
}
/* ---------------------- 다섯번째 브랜드 장점세션 css 소스 끝 ---------------------*/

/* ---------------------- 여섯번째 브랜드 영상 타이틀세션 css 소스 시작 ---------------------*/
.zz_youtube_session {
    width: 100%;
    background-color: #000;
    padding: 60px 0 0;
}

.zz_video_wrapper {
    position: relative;
    width: 100%;
    height: 600px; /* 요청하신 스크롤 사이즈 */
    overflow: clip;
}

/* --- 유튜브 배경 영상 최적화 --- */
.zz_video_foreground {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* 클릭 방지 */
}

.zz_video_foreground iframe {
    width: 100vw;
    height: 56.25vw; /* 16:9 비율 유지 */
    min-height: 100%;
    min-width: 177.77vh; /* 비율에 맞춘 최소 너비 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --- 검은색 오파시티 오버레이 --- */
.zz_video_overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); /* 영상 대비 글자 강조를 위한 오파시티 */
    z-index: 2;
}

/* --- 텍스트 콘텐츠 --- */
.zz_content_box {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    text-align: center;
}

* 기본 상태: 거대하고 투명하게 대기 */
.zz_impact_h2 {
    color: #fff;
    font-size: 75px;
    font-weight: 900;
    opacity: 0;
    transform: scale(8);
    filter: blur(15px);
    white-space: nowrap;
	width:100%; 
}

.zz_impact_h2 img{
	width:100%; 
}
/* 스크롤 시 'is-active' 클래스가 붙으면 바운딩 애니메이션 실행 */
.is-active .zz_impact_h2 {
    animation: zz_bounce_zoom 1.2s forwards; /* 바운딩 애니메이션 호출 */
}

/* 바운딩(탄성) 애니메이션 키프레임 */
@keyframes zz_bounce_zoom {
    0% {
        opacity: 0;
        transform: scale(8);
        filter: blur(15px);
    }
    60% {
        opacity: 1;
        transform: scale(0.9); /* 원래 크기보다 살짝 더 작게 수축 (바운딩 포인트) */
        filter: blur(0);
    }
    80% {
        transform: scale(1.05); /* 다시 살짝 튕겨져 나감 */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* 최종 안착 */
        filter: blur(0);
    }
}

/* H3 서브 타이틀: H2가 튕긴 후 부드럽게 등장 */
.zz_slide_h3 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 26px;
    opacity: 0;
    transform: translateY(20px);
}

.is-active .zz_slide_h3 {
    animation: zz_fade_up_simple 0.8s ease-out 1s forwards;
}

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


/* 반응형 모바일 사이즈 조정 */
@media (max-width: 1024px) {
    .zz_video_wrapper { height: 400px; }
    .zz_impact_h2 { font-size: 45px; }
    .zz_slide_h3 { font-size: 20px; }
}

@media (max-width: 768px) {
    .zz_video_wrapper { height: 320px; }
    .zz_impact_h2 { font-size: 30px; letter-spacing: -1px; }
    .zz_slide_h3 { font-size: 16px; padding: 0 20px; word-break: keep-all; }
}
/* ---------------------- 여섯번째 브랜드 영상 타이틀세션 css 소스 끝 ---------------------*/

/* ---------------------- 일곱번째 운영전략 타이틀세션 css 소스 시작 ---------------------*/
.jg-s4-fixed-section {
  position: relative;
  width: 100%;
  height: 900px; /* 고정 높이 */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

/* 배경 이미지 스타일 */
.jg-s4-bg-img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.jg-s4-bg-img.active { opacity: 1; }
.jg-s4-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

/* 콘텐츠 스타일 */
.jg-s4-container { position: relative; z-index: 3; text-align: center; color: #fff; width: 100%; }
.jg-s4-title { font-size: 3rem; color: #ffcc00; margin-bottom: 20px; font-weight: 800; width:90%;  margin:0 auto; }
.jg-s4-title img, .jg-s4-part img {
	width:100%;
}
.jg-s4-content-stack { position: relative; height: 180px; width: 1000px; margin: 0 auto; }

.jg-s4-part {
  position: absolute; top: 0;  width: 100%;
  opacity: 0; transform: translateY(30px);
  transition: all 0.5s ease-out;
}
.jg-s4-part.active { opacity: 1; transform: translateY(0); }

.jg-s4-part h3 span {
  display: block; /* 타원형 형태를 잡기 위해 변경 */
  font-size: 1rem;
  width:100px; 
  color: #ffcc00; /* 글자색 노란색 */
  border: 1px solid #ffcc00; /* 노란색 테두리 */
  background: rgba(255, 204, 0, 0.1); /* 배경에 아주 옅은 노란색 투명하게 */
  padding: 5px 20px; /* 위아래, 좌우 여백 */
  border-radius: 50px; /* 완전한 타원형(캡슐형) 만들기 */
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin:0 auto 20px;
}
.jg-s4-part h3 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 auto;
}
.jg-s4-part p {
  font-size: 1.25rem;
  color: #eee;
  line-height: 1.6;
  /*max-width: 700px;*/
  word-break: keep-all;
}

/* 도트 인디케이터 */
.jg-s4-dots { margin-top: 50px; }
.jg-s4-dots .dot { 
  display: inline-block; width: 12px; height: 12px; border-radius: 50%; 
  background: rgba(255,255,255,0.2); margin: 0 6px; transition: 0.4s; 
}
.jg-s4-dots .dot.active { background: #ffcc00; width: 35px; border-radius: 6px; }


/* 반응형 모바일 사이즈 조정 */
@media (max-width: 768px) {
	.jg-s4-fixed-section { height:600px;}
	.jg-s4-part h3 span { width:80px; padding: 3px 10px; font-size: 12px;}
	.jg-s4-content-stack {width:100%; max-width:760px; height: 100px;}

}
/* ---------------------- 일곱번째 운영전략 타이틀세션 css 소스 끝 ---------------------*/

/* ---------------------- 여덞번째 포인트세션 css 소스 시작 ---------------------*/
.jg-s5-section {
  width: 100%;
  height: 900px; /* 섹션 높이 통일 */
  background: url(../images/hall_bg.jpg); /* 어두운 배경 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.jg-s5-inner {
  width: 100%;
  max-width: 1400px;
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 왼쪽 텍스트 디자인 */
.jg-s5-text-side {
  flex: 1;
  padding-right: 50px;
}

.jg-s5-badge {
  display: inline-block;
  padding: 6px 20px;
  background-color: #ff0054; /* 주황색 포인트 배경 */
  color: #fff;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 25px;
}

.jg-s5-title {
  font-size: 4rem;
  color: #fff;
  font-weight: 800;
  margin-bottom: 30px;
  letter-spacing: -1px;
}

.jg-s5-desc {
  font-size: 1.25rem;
  color: #ccc;
  line-height: 1.8;
  word-break: keep-all;
}

/* 오른쪽 이미지 카드 디자인 */
.jg-s5-image-side {
  flex: 1.2;
  display: flex;
  gap: 20px; /* 카드 사이 간격 */
}

.jg-s5-card {
  flex: 1;
  height: 500px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.4s ease;
}

.jg-s5-card:hover {
  transform: translateY(-20px); /* 호버 시 위로 슥 올라가는 효과 */
}

.jg-s5-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 꽉 차게 */
}

/* 모바일 반응형 */
@media (max-width: 1024px) {
  .jg-s5-section { height: auto; padding: 100px 0; }
  .jg-s5-inner { flex-direction: column; text-align: center; }
  .jg-s5-badge { font-size: 14px; padding: 3px 15px}
  .jg-s5-title { font-size: 3;}
  .jg-s5-desc {font-size: 15px; line-height:1.8rem;}
  .jg-s5-card { height:250px !important;}
  .jg-s5-text-side { padding-right: 0; margin-bottom: 50px; }
  .jg-s5-image-side { width: 95%; margin:0 auto;}
}
/* ---------------------- 여덞번째 포인트세션 css 소스 끝 ---------------------*/

/* ---------------------- 여덞번째 포인트세션2 css 소스 시작 ---------------------*/

.jg-s6-section {
  position: relative !important; /* 자식들이 이 안에서 움직이게 고정 */
  width: 100%;
  padding: 150px 0;
  background-color: #fff;
  overflow: hidden; /* 이미지가 삐져나가도 스크롤 안 생기게 */
  text-align: center;
}

/* 2. 이미지 박스 공통 - 세로 나열 방지 핵심 */
.s6-dish-bg {
  position: absolute !important; /* 부모를 기준으로 띄움 */
  z-index: 1;
  display: block !important;
}

/* 이미지별 위치 고정 (이미지 참고) */
.dish-top { top: -80px; left: 70%; transform: translateX(-50%) !important; }
.dish-left { bottom: -40px; left: -500px; transform: none !important; }
.dish-right { bottom: -40px; right: -600px; transform: none !important; }
.dish-top img {width:70%;}
.dish-left img{width:70%;}
.dish-right img{width:60%; }

/* 중앙 컨텐츠 영역 */
.jg-s6-container {
  position: relative;
  z-index: 5; /* 이미지(1)보다 위로 */
  max-width: 1200px;
  margin: 0 auto;
}

/* 텍스트 스타일 보정 */
.s6-badge-text { font-size: 1.3rem; font-weight: 800; color: #e30613; margin-bottom: 10px; }
.s6-main-title { font-size: 3.5rem; font-weight: 900; line-height: 1.2; color: #000; margin-bottom: 40px; }
.s6-main-title .highlight { color: #e30613; }

/* 수치 박스 스타일 */
.s6-stats-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin: 50px 0;
}
.stat-item .stat-label { font-size: 1.1rem; color: #666; margin-bottom: 10px; }
.stat-value { font-weight: 700; color: #000; font-size: 1.5rem; }
.stat-value span.long {
  font-size: 5.5rem;
  color: #e30613;
  font-weight: 900;
  line-height: 1;
}
.stat-divider { width: 1px; height: 80px; background: #eee; }

/* 하단 붉은색 박스 및 설명 */
.red-box {
  display: inline-block;
  background: #e30613;
  color: #fff;
  padding: 8px 25px;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 25px;
}
.s6-sub-desc { font-size: 1.15rem; line-height: 1.8; color: #333; }

/* 모바일 반응형: 이미지가 텍스트를 가리지 않게 조정 */
@media (max-width: 1024px) {
  .dish-top { width: 300px; top: -50px; }
  .dish-left { width: 200px; left: -100px; opacity: 0.3; }
  .dish-right { width: 200px; right: -100px; opacity: 0.3; }
  .s6-main-title { font-size: 2.2rem; }
  .stat-value span.long { font-size: 3rem; }
  .s6-sub-desc { padding:0 20px; font-size:15px;}
}

.red-font { font-family:"VITRO bold"; color:#e30613}

/* 반응형 조절 */
@media (max-width: 768px) {
	.s6-badge-text {font-size:18px;}
	.s6-main-title { font-size:2em;}
	}

/* ---------------------- 여덞번째 포인트세션2 css 소스 끝 ---------------------*/

/* ---------------------- 여덞번째 포인트세션3 좌우 css 소스 끝 ---------------------*/
.jg-s7-wrapper {
  display: flex !important; /* 강제 가로 정렬 */
  flex-direction: row; /* 가로 방향 */
  width: 100%;
  height: 900px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* 좌우 자식 요소들: 정확히 50%씩 */
.jg-s7-half {
  flex: 1; /* 1:1 비율 */
  flex-basis: 50%; /* 너비 50% 보장 */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0px 0px 0px;
  box-sizing: border-box;
  position:relative; 
}

/* 색상 대비 */
.jg-s7-left { 
	background: url(../images/fire_bg.jpg); 
	color: #fff;
	}

.jg-s7-visual-box {width:100%; position:absolute; bottom:-5px; }
.jg-s7-visual-box img{ width:100%;}

.main-cook-img {
  width: 100%;
  display: block;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* 연기 컨테이너 및 애니메이션 */
.s7-smoke-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 클릭 방해 금지 */

}

.smog {
  position: absolute;
  bottom: 20%; /* 음식 이미지 위쪽에서 시작 */
  left: 50%;
  width: 200px; /* 연기 이미지 크기 */
  opacity: 0;
  filter: blur(2px); /* 연기 느낌을 위해 살짝 뭉개기 */
}

/* 연기 상승 애니메이션 정의 */
@keyframes riseSmog {
  0% {
    transform: translate(-50%, 0) scale(0.8);
    opacity: 0;
  }
  30% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-40%, -150px) scale(1.5);
    opacity: 0;
  }
}

/* 연기 입자마다 시간차와 위치차를 줌 (자연스러움) */
.smog-1 { animation: riseSmog 6s infinite ease-in-out; }
.smog-2 { animation: riseSmog 6s infinite ease-in-out 2s; left: 40%; }
.smog-3 { animation: riseSmog 6s infinite ease-in-out 4s; left: 60%; }


.jg-s7-right { background-color: #e61e52; color: #fff; position: relative; }

/* 텍스트 스타일 */
.jg-s7-capsule {
  display: inline-block;
  padding: 6px 20px;
  border: 1.5px solid #ff0054;
  color: #ff0054;
  border-radius: 50px;
  font-weight: 700;
  margin-bottom: 25px;
}
.jg-s7-capsule.black { background: #000; border-color: #000; color: #fff; }
.jg-s7-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 25px; }
.jg-s7-text { font-size: 1.15rem; line-height: 1.6; margin-bottom: 40px; color: rgba(255,255,255,0.9); }

/* 원형 지표 레이아웃 */
.jg-s7-circle-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.jg-circle {
  width: 170px; height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}
.jg-circle img {
  width: 100%;
}
.jg-main-circle {

  font-size: 35px;
  color: #fff;
  padding:0 20px;



}
.jg-main-circle .sub { font-size: 0.9rem; margin-bottom: 5px; }
.jg-main-circle .main { font-size: 3.5rem; font-weight: 900; }

/* 하단 바 */
.jg-s7-banner-bar {
  position: absolute;
  bottom: 0; left: 0; width: 100%;
  background: rgba(0,0,0,0.2);
  padding: 18px 0;
0150  font-size: 1.1rem;
  letter-spacing: -0.5px;
}

/* 모바일 전용 (태블릿 이하에서만 세로 전환) */
@media (max-width: 992px) {
  .jg-s7-wrapper { flex-direction: column; height: auto; }
  .jg-s7-half { flex-basis: 100%; width: 100%; padding: 120px 20px; }
  .jg-s7-capsule, .jg-s7-capsule.black { font-size: 14px; padding: 3px 15px; }
  .jg-s7-title { font-size: 40px; margin-bottom:0; }
  .jg-s7-text { font-size:15px; line-height:1.8rem; padding-top:20px;}
  .jg-s7-inner-content{width:99%; margin:0 auto;}
  .jg-circle {height: 120px; font-size:15px; }
  .jg-main-circle {height:170px;}
  .jg-s7-banner-bar {font-size: 15px; }
}
/* ---------------------- 여덞번째 포인트세션3 좌우css 소스 끝 ---------------------*/

/* ---------------------- 아홉번째 인테리어세션 css 소스 시작 ---------------------*/
/* 세션 전체 배경 및 폰트 설정 */
.jg-s8-section {
  background-color: #0a0a0a; /* 시안처럼 어두운 배경 */
  padding: 120px 0;
  color: #fff;
  overflow: hidden;
  font-family: 'Pretendard', sans-serif;
}

.jg-s8-container {
  max-width: 100%;
  margin: 0 auto;
}

/* 상단 헤더 정렬 */
.jg-s8-header {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 20px;
  text-align: left;
}

.s8-sub-title { font-size: 1.4rem; font-weight: 300; margin-bottom: 10px; opacity: 0.9; }
.s8-main-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 30px; }
.s8-main-title .highlight { color: #e53935; } /* 인테리어 오렌지색 강조 */

.s8-desc p { font-size: 1.1rem; line-height: 1.6; color: #ccc; margin-bottom: 5px; padding-left:20px;}

/* 롤링 슬라이더 핵심 */
.jg-s8-slider-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.jg-s8-track {
  display: flex;
  width: calc(450px * 8); /* (이미지너비 + 간격) * 이미지개수 */
  animation: rollingGallery 30s linear infinite; /* 30초 동안 무한 반복 */
}

/* 이미지 박스 스타일 */
.s8-img-box {
  width: 450px; /* 이미지 가로 크기 */
  height: 350px; /* 이미지 세로 크기 */
  padding: 0 10px; /* 이미지 사이 간격 */
  flex-shrink: 0;
}

.s8-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.3s ease;
}

/* 마우스 올리면 살짝 확대 효과 */
.s8-img-box:hover img {
  transform: scale(1.03);
  border-color: #ff4500;
}

/* 무한 롤링 애니메이션 정의 */
@keyframes rollingGallery {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-450px * 4)); } /* 원본 세트만큼 이동 */
}

/* 반응형 조절 */
@media (max-width: 768px) {
  .jg-s8-header {  max-width: 767px; margin-left:0px; padding:0}
  .s8-main-title { font-size: 2.2rem; text-align:center;   }
  .s8-main-title span{display:block;}
  .s8-img-box { width: 300px; height: 230px; }
  .s8-desc p, .s8-sub-title{ font-size: 15px; line-height:1.8rem; padding:0 15px; }
  .s8-sub-title img{ width:100%; }
 
  @keyframes rollingGallery {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-300px * 4)); }
  }
}
/* ---------------------- 아홉번째 인테리어세션 css 소스 끝 ---------------------*/

/* ---------------------- 열번째 메뉴 세션 css 소스 시작 ---------------------*/
.jg-s9-section {
  padding: 120px 0;
  background: url(../images/t_menu_bg.jpg);  
}

.jg-s9-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 120px 20px;
  text-align: center;
}

/* 헤더 */
.s9-top-txt { font-size: 1.4rem; font-weight:300; margin-bottom: 10px; color: #fff; }
.s9-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 50px; color: #fff;  }
.s9-title .highlight { color: #e53935;; } /* 시안의 짙은 녹색 포인트 */

.jg-s9-tabs-nav { display: flex; justify-content: center; margin-bottom: 40px; }
.tab-btn { padding: 12px 35px; border: 1px solid #ccc; background: #fff; cursor: pointer; margin: 0 2px; font-weight: 600; }
.tab-btn.active { background: #e53935; color: #fff; border-color: #e53935; }

/* 슬라이더 핵심 */
.menu-slider-container {
  width: 100%;
  overflow: hidden; /* 넘치는 메뉴 숨김 */
  cursor: grab;
}

.menu-track {
  display: flex;
  transition: transform 0.5s ease-in-out; /* 부드러운 이동 */
  gap: 20px;
  padding: 10px 0;
}

.menu-card {
  flex: 0 0 300px; /* 카드 너비 300px 고정 */
  border: 1px solid #ddd;
  background: #fff;
}
.menu-card .img-box { width: 100%; aspect-ratio: 1.2/1; overflow: hidden; }
.menu-card img { width: 100%; height: 100%; object-fit: cover; }
.menu-card .name-box { padding: 15px; font-weight: 700; text-align: center; border-top: 1px solid #ddd; }

.menu-track {
  display: flex;
  width: max-content; /* 메뉴가 많아도 한 줄로 나열 */
  transition: transform 0.5s ease-in-out;
  gap: 20px;
}

.menu-card {
  flex: 0 0 300px; /* 카드 크기 절대 고정 */
}

/* 탭 버튼 클릭 시 반응 속도 향상 */
.tab-btn {
    transition: all 0.2s ease;
    outline: none;
}


/* 반응형 조절 */
@media (max-width: 768px) {
	.jg-s9-container { width:98%; margin:0 auto; padding: 0 0; }
  .s9-title { font-size: 2.2rem; text-align:center; margin-bottom:25px;  }
  .s9-title span{display:block;}
  .tab-btn{ padding: 12px 15px; color:#000;}
  .s9-top-txt{ font-size: 15px; line-height:1.8rem; text-align:center;  }
  .s9-top-txt img{width:100%;}
 
  @keyframes rollingGallery {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-300px * 4)); }
  }
}

/* ---------------------- 열번째 메뉴 세션 css 소스 끝 ---------------------*/


.jg-s10-section {
  padding: 100px 0;
  background: url('../images/review_bg.jpg') no-repeat center center / cover; /* 배경 이미지 경로 확인 */
  position: relative;
  overflow: hidden;
  color: #fff;
}

.jg-s10-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

/* 왼쪽 텍스트 영역 */
.jg-s10-info { flex: 0 0 40%; text-align: left; }
.s10-top-txt { font-size: 1.5rem; font-weight: 300; margin-bottom: 10px; }
.s10-title { font-size: 4rem; font-weight: 800; line-height: 1.2; margin-bottom: 30px; }
.s10-title .highlight { color: #ffcc00; } /* 포인트 컬러 */
.s10-desc { font-size: 1.1rem; line-height: 1.8; opacity: 0.9; word-break: keep-all; }

/* 오른쪽 슬라이더 영역 */
.jg-s10-slider-wrap { flex: 0 0 55%; overflow: hidden; position: relative; }
.s10-slider-container { width: 100%; }
.s10-slider-track {
  display: flex;
  gap: 20px;
  transition: transform 0.6s ease-in-out;
  width: max-content;
}

.review-card {
  flex: 0 0 250px; /* PC에서 리뷰 3개가 보이도록 적절한 너비 설정 */
}
.review-card img { width: 100%; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }

/* 모바일 대응 (상하 배치) */
@media (max-width: 1024px) {
  .jg-s10-container { flex-direction: column; text-align: center; 	max-width:765px; width:100%; padding: 0 5px;}
  .jg-s10-info { flex: 0 0 100%; margin-bottom: 50px; text-align: center; }
  .jg-s10-slider-wrap { flex: 0 0 100%; width: 100%; }
  .s10-desc { padding:0 10px;}
  .s10-title { font-size: 2.0rem; }
  .review-card { flex: 0 0 200px; } /* 모바일에서는 좀 더 작게 */
  .s10-top-txt {font-size:18px;}
}

@media (max-width: 768px) {
	.s10-desc { font-size:15px;}
}

/*---------------------------------메뉴 세션 끝 -------------------------------------------*/


/*--------------------- 창업내용 ------------------------------*/
.jg-s12-section {
  width: 100%;
  padding: 100px 0 150px; /* 하단 여백을 충분히 주어 시원하게 배치 */
  background: url('../images/section12_bg.jpg') no-repeat top center;
  text-align: center;
  background-size:cover;
 
}

.jg-s12-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.jg-s12-title {
  font-size: 4rem;
  font-weight: 500;
  margin-bottom: 50px;
  color: #fff;
}

.jg-s12-image-wrap {
  width: 100%;
  max-width: 800px; /* 시안 비율에 맞춘 너비 */
  margin: 0 auto;
  /* 부드러운 입체감을 위한 그림자 */
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12));
}

.jg-s12-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* 끝부분만 아주 살짝 굴림 */
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .jg-s12-section { padding: 60px 0 100px;   background: url('../images/section12_m_bg.jpg') no-repeat top center; }

  .jg-s12-title { font-size: 2.5rem; margin-bottom: 30px; }
  .jg-s12-image-wrap {max-width:700px; margin:0 auto; }
}
/*/////////////////////////////////////////////*/


/* 기본 배경 및 컨테이너 */
.jg-s13-contact {
    width: 100%;
    padding: 100px 0;
    background: url('../images/t_bg.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
}

.jg-s13-container {
    max-width: 1400px;
	width:100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 20px;
}

/* 왼쪽 타이틀 */
.jg-s13-info { flex: 0 0 35%; text-align: left; }
.jg-s13-info .sub-title { font-size: 1.5rem; color: #e30613; font-weight: 700; margin-bottom: 10px; }
.jg-s13-info .main-title { font-size: 2.5rem; font-weight: 900; letter-spacing: -2px; line-height: 1.1; }

/* 오른쪽 폼 래퍼 */
.jg-s13-form-wrap { flex: 0 0 60%; padding: 20px; color:#fff;  }

/* 모바일 대응 (768px 이하에서 폼이 안 보이던 문제 해결) */
@media (max-width: 1024px) {
    .jg-s13-container { flex-direction: column; align-items: center; gap: 40px; }
    .jg-s13-info, .jg-s13-form-wrap { flex: 0 0 100%; width: 100%; }
    .jg-s13-info .main-title { font-size: 3rem; text-align: center; }
    .jg-s13-info .sub-title { text-align: center; }
}

@media (max-width: 768px) {
    .jg-s13-contact { padding: 50px 0; }
    .jg-s13-container { width: 90%; padding: 0px 0px; margin:0 auto; }
    /* 0%로 되어있던 부분을 100%로 강제 지정 */
    .jg-s13-form-wrap { 
		padding:0px;
        flex: 1 1 100% !important; 
        width: 100% !important; 
        display: block !important; 
    }
}


/*--------------------------- 푸터 -----------------------------*/
.jg-footer {
  padding: 60px 0 40px;
  background-color: #222; /* 배경 이미지가 푸터까지 이어진다면 transparent로 변경 가능 */
  color: #aaa;
  font-size: 0.9rem;
  line-height: 1.6;
  border-top: 1px solid #333;
}

.jg-footer-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

/* 상단 메뉴 내비게이션 */
.footer-top-nav {
  margin-bottom: 35px;
  display: flex;
  gap: 25px;
}

.footer-top-nav a {
  color: #ccc;
  text-decoration: none;
  transition: 0.3s;
}

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

.footer-top-nav strong {
  color: #fff;
}

/* 메인 컨텐츠 레이아웃 */
.footer-main-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* 좌측 정보 영역 */
.footer-info-left {
  flex: 2;
}

.footer-info-left .info-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.footer-info-left .info-row span::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 10px;
  background: #444;
  margin-left: 15px;
}

.footer-info-left .info-row span:last-child::after {
  display: none;
}

.footer-info-left .address {
  margin: 5px 0;
}

.footer-info-left .copyright {
  margin-top: 25px;
  color: #666;
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* 우측 고객센터 영역 */
.footer-info-right {
  flex: 1;
  text-align: right;
}

.cs-title {
  font-size: 1.1rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 10px;
}

.cs-number {
  font-size: 2.2rem;
  color: #f44336; /* 짱구포차 포인트 컬러 */
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -1px;
}

.cs-time, .cs-off {
  font-size: 0.85rem;
  color: #888;
}

/* 모바일 반응형 */
@media (max-width: 1024px) {
  .footer-main-content {
    flex-direction: column;
    gap: 40px;
  }
  .footer-info-right {
    text-align: left;
  }
  .footer-top-nav {
    flex-wrap: wrap;
    gap: 15px;
  }
  .privacy-box {padding:0px; }
  .btn-submit{ padding:18px 0px; }
}