*/
.display_none {display: none;}
/* 반응형 노출 세팅 Start */
/*
*/
/* 기본값: PC 및 태블릿 이상에서 숨김 */
.pc_only {display: block;}
.mo_only {display: none;}
/* 모바일 (화면 너비 768px 이하)에서는 보이게 */
@media screen and (max-width: 768px) {
.pc_only {display: none;}
.mo_only {display: block;}
}
/* 반응형 노출 세팅 End */
/* 공통 기본세팅 End ==================================================================================== */
/* 플로팅 배너 ================================================================================ */
/* 다른 요소와 충돌을 방지하기 위한 고유 클래스명 사용 */
.kkan-sns-floating-wrap {
position: fixed;
bottom: 120px;
right: 30px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
z-index: 999999; /* 최상단 유지 */
}
.kkan-sns-link-item {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #000000 !important; /* 배경 블랙 고정 */
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
overflow: hidden;
}
.kkan-sns-link-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}
/* 아이콘 크기 조절 */
.kkan-sns-link-item svg {
width: 24px;
height: 24px;
fill: #ffffff; /* 아이콘 색상 화이트 */
}
/* TOP 버튼 전용 스타일 */
#kkan-top-scroll-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f9681c !important; /* 요청하신 컬러 */
color: #ffffff !important;
border: none;
cursor: pointer;
font-weight: bold;
font-size: 13px;
display: none; /* 스크롤 전 숨김 */
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
transition: opacity 0.3s;
text-align: center;
line-height: 50px;
padding: 0;
}
@media only screen and (max-width: 480px) {
.kkan-sns-floating-wrap{
right: 13px;
}
}
/* TOP NAV ========================================================================= */
#inline_header_normal{display: none;}
/* 1. 기존 아임웹 헤더 요소 숨기기 (PC 버전용) */
@media (min-width: 901px) {
.inline-col-group-left, .inline-col-group-center, .inline-col-group-right {
display: none !important;
}
}
/* 스크롤 시 검은색 배경 */
#custom-nav-wrap.scrolled {
background-color: rgba(0, 0, 0, 0.95) !important;
padding: 15px 0;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.nav-menu-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 60px;
}
/* 2. 네비게이션 고정 및 레이아웃 (1400px 확장) */
#custom-nav-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
padding: 25px 0;
transition: all 0.3s ease;
background-color: transparent;
}
/* 3. 메뉴 아이템 스타일 (20px) */
.nav-item a {
text-decoration: none !important;
color: #ffffff !important;
font-size: 20px;
font-weight: 700;
transition: all 0.3s ease;
white-space: nowrap;
letter-spacing: -0.5px;
opacity: 0.7;
}
/* 4. 활성화(Active) 및 호버 시 주황색 변경 */
.nav-item a:hover,
.nav-item a.active {
color: #ff6b00 !important;
opacity: 1 !important;
}
/* 5. 중앙 로고 스타일 (170px) */
.nav-logo img {
width: 170px !important;
height: auto !important;
display: block;
transition: all 0.3s ease;
}
#custom-nav-wrap.scrolled .nav-logo img {
width: 140px !important;
}
/* 6. 반응형 및 모바일 설정 */
@media (max-width: 1450px) {
.nav-container { max-width: 95%; padding: 0 20px; }
.nav-menu-list { gap: 30px; }
.nav-item a { font-size: 18px; }
}
@media (max-width: 1100px) {
.nav-menu-list { gap: 15px; }
.nav-item a { font-size: 16px; }
.nav-logo img { width: 130px !important; }
}
/* [핵심] 900px 미만일 때: 커스텀 메뉴 숨기고 순정 메뉴 표시 */
@media (max-width: 900px) {
#custom-nav-wrap {
display: none !important;
}
}
/* 섹션 테두리 간격 설정 모음 */
/* 매출로 증명 배경*/
#s202603315780316d4f7e1 {
position: relative; /* 테두리를 고정시킬 기준점 설정 */
border-width: 0px 50px 0px 50px;
border-style: solid;
border-color: #ccc8be;
}
#s202603315780316d4f7e1 > div.section_bg_color._section_bg_color {
border: 1vw solid #ffffff00;
box-shadow: 0 0 0 1px #d1d1d147 inset;
}
/* 그래프 */
#s20260331ad577aa0d46d6{
position: relative; /* 테두리를 고정시킬 기준점 설정 */
border-width: 0px 50px 0px 50px;
border-style: solid;
border-color: #ccc8be;
}
#s20260331ad577aa0d46d6 > div.section_bg_color._section_bg_color{border: 1px solid;}
/* 메뉴 리스트 테두리 */
#s202604015066ffee8a3db.extend_section main > .inside{
background-image: linear-gradient(to right, #000 1px, transparent 1px, transparent 10px, #000 10px, #000 11px), /* 왼쪽 */ linear-gradient(to left, #000 1px, transparent 1px, transparent 10px, #000 10px, #000 11px);
background-repeat: no-repeat;
background-size: 11px 100%;
background-position: left center, right center;
padding-left: 10px;
padding-right: 10px;
}
@media only screen and (max-width: 480px) {
#s202603315780316d4f7e1 {
position: relative; /* 테두리를 고정시킬 기준점 설정 */
border-width: 0px 0px 0px 0px;
}
/* 그래프 */
#s20260331ad577aa0d46d6{
position: relative; /* 테두리를 고정시킬 기준점 설정 */
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ccc8be;
}
}
/* 메인 =================================================================================================== */
/* 메인 텍스트 */
.main-title-txt h1{
font-size: 80px;
}
/* 메인 이미지 ================================ */
.visual-layer {
position: absolute; /* 자식 요소들의 기준점 */
width: 100%;
height: 960px; /* 화면 전체 높이 설정 */
pointer-events: none; /* 클릭 방해 금지 */
z-index: 10;
}
/* 2. 좌측 이미지 세트 배치 */
.left-visual {
position: absolute;
bottom: -50px; /* 화면 하단에 걸치게 배치 */
left: -80px; /* 화면 왼쪽에 걸치게 배치 */
width: 38%; /* 화면 너비 대비 크기 */
min-width: 480px; /* 최소 크기 보장 */
z-index: 10;
animation: fadeInUp 1.2s ease-out; /* 등장 모션 */
}
.food-left {
width: 100%;
display: block;
position: relative;
z-index: 2; /* 연기 위에 배치 */
}
.hand-img {
position: absolute;
top: -360px; /* 족발 위로 위치 조정 */
left: 0px;
width: 540px; /* 크기 키움 */
z-index: 3; /* 가장 위에 배치 */
animation: handFloat 3s infinite ease-in-out; /* 둥둥 뜨는 모션 */
}
/* 3. 우측 이미지 세트 배치 */
.right-visual {
position: absolute;
bottom: -260px; /* 화면 하단에서 살짝 띄움 */
right: -60px; /* 화면 오른쪽에 걸치게 배치 */
width: 36%; /* 화면 너비 대비 크기 */
min-width: 420px; /* 최소 크기 보장 */
z-index: 10;
animation: fadeInUp 1.5s ease-out 0.3s both; /* 등장 모션 (약간 지연) */
}
.food-right {
width: 100%;
position: relative;
z-index: 2; /* 연기 위에 배치 */
}
/* 4. 연기 효과 (가시성 대폭 강화) */
.smoke {
position: absolute;
opacity: 0;
z-index: 1; /* 음식 뒤쪽에 배치 */
filter: brightness(1.8) contrast(1.2) blur(1px); /* 연기 선명도 및 밝기 강화 */
animation: smokeRise 3s infinite ease-out; /* 위로 피어오르는 모션 */
}
.smoke-l {
width: 550px; /* 크기 키움 */
bottom: 200px;
left: 0px;
animation-delay: 0s; /* 왼쪽 연기 지연 실행 */
}
.smoke-r {
width: 550px; /* 크기 키움 */
bottom: 150px;
right: 0px;
animation-delay: 0s; /* 오른쪽 연기 지연 실행 */
}
/* 5. 애니메이션 정의 */
/* 연기가 위로 피어오르며 사라지는 효과 */
@keyframes smokeRise {
0% { transform: translateY(120px) scale(0.7); opacity: 0; }
25% { opacity: 0.8; } /* 확실히 보이게 */
100% { transform: translateY(-280px) scale(1.5); opacity: 0; }
}
/* 젓가락이 위아래로 둥둥 뜨는 효과 */
@keyframes handFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
/* 요소가 아래에서 서서히 나타나는 효과 */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(80px); }
to { opacity: 1; transform: translateY(0); }
}
@media only screen and (max-width: 480px) {
.visual-layer{
height: 550px;
}
.left-visual {
bottom: -50px;
left: -40px;
width: 38%;
min-width: 270px;
}
.hand-img{
top: -150px;
left: -110px;
width: 280px;
}
.right-visual{
bottom: 10px;
right: -60px;
width: 36%;
min-width: 260px;
}
.smoke-l{
display: none;
}
.smoke-r{
display: none;
}
.height-main-mo{
height: 100px;
}
}
/* 메인 경쟁력2 =============================================================================== */
.main2_lebel{
position: absolute;
left: 50%;
transform: translate(-50%, -0%);
margin-top: 30px;
margin-left: 180px;
z-index: 2;
}
@media only screen and (max-width: 480px) {
.main2_img_wrap{
position: absolute;
top: -140px;
}
}
/* 1. 이미지 컨테이너 (여백 축소 및 정중앙 정렬) */
.main2_img-container {
position: relative;
display: inline-block;
padding: 50px; /* 효과 크기가 줄었으므로 여백도 절반으로 축소 */
margin: 0 auto;
text-align: center;
vertical-align: middle;
left: 50%;
transform: translate(-50%, -0%);
margin-top: 0px;
margin-left: 0px;
}
/* 2. 메인 이미지 (537px 대형 원형 PNG) */
.main2_img {
display: block;
width: 537px; /* 이미지 크기 고정 */
height: auto;
border-radius: 50%; /* 완전한 원형 윤곽 */
position: relative;
z-index: 2; /* 효과 위에 이미지 배치 */
}
/* 3. 파생 라인 효과 (이중 파동 전용) */
.main2_img-container::before,
.main2_img-container::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 이미지 정중앙 고정 */
/* 원형 라인 스타일 */
border: 3px solid #ed6d2a; /* 라인 두께 살짝 축소 */
border-radius: 50%; /* 완전한 원형 */
/* 초기값 설정 (가장 중요) */
width: 0;
height: 0;
opacity: 0;
/* 글로우 효과 축소 및 선명하게 */
box-shadow: 0 0 30px rgba(237, 109, 42, 0.9);
/* 애니메이션 실행: 2.2초마다 무한 반복 (약간 빠르게) */
animation: pulseDoubleCircle 2.2s infinite ease-out;
z-index: 1; /* 이미지 뒤에 배치 */
}
/* ★핵심: 두 번째 라인은 애니메이션 지연 시간을 두어 이중 겹침 효과 부여 */
.main2_img-container::after {
animation-delay: 1.1s; /* 전체 주기의 절반 지연 */
}
/* 4. 애니메이션 키프레임 (크기 절반 축소 + 이중 겹침) */
@keyframes pulseDoubleCircle {
0% {
width: 0;
height: 0;
opacity: 0;
border-width: 15px; /* 시작은 두껍게 */
}
10% {
opacity: 0.9; /* 나타남 */
}
80% {
opacity: 0.6; /* 중간까지 선명하게 유지 */
/* 중간에 커지면서 얇아짐 */
border-width: 3px;
}
100% {
/* ★핵심: 최종 크기를 이미지(537px)보다 약간 크거나 비슷하게 (650px) */
width: 650px;
height: 650px;
opacity: 0; /* 완전히 사라짐 */
border-width: 1px; /* 끝은 얇게 */
}
}
/* 콘텐츠 타이틀 */
.main2-con-title_l{
text-align: left;
}
.main2-con-title_r{
text-align: right;
}
@media only screen and (max-width: 480px) {
.main2-con-title_l{
text-align: center;
}
.main2-con-title_r{
text-align: center;
}
}
/* 경쟁력 포인트 =============================================================== */
#s202603305492b922c5b4d {
border: 40px solid #ffffff00;
box-shadow: 0 0 0 1px #000 inset;
background-color: #e4dfd6;
}
@media only screen and (max-width: 480px) {
#s202603305492b922c5b4d {
border: 10px solid #ffffff00;
}
}
/*[Accordion1] 아코디언 좌측 버튼 (js 유) =====================================================*/
/* [Accordion1] 공통 스타일 */
.accordion1-wrap {
display: flex;
width: 100%;
max-width: 1200px;
margin: 50px auto;
gap: 30px;
align-items: stretch;
flex-direction: row-reverse; /* 버튼 우측 배치 */
}
/* 우측 메뉴 영역 */
.accordion1-menu {
flex: 1;
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.accordion1-menu li {
background: #fff;
border-radius: 20px;
padding: 18px 30px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
border: 2px solid transparent;
height: calc(33.33% - 14px);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
transform: none !important; /* ★이동 효과 강제 제거 */
}
/* 텍스트 스타일 */
.accordion1-menu li h3 { font-size: 24px; font-weight: 800; margin-bottom: 8px; color: #000; line-height: 1.3; }
.accordion1-menu li h3 span { color: #f9681c; }
.accordion1-menu li p { font-size: 13px; color: #666; line-height: 1.5; word-break: keep-all; }
/* 활성화 상태 (색상만 변경) */
.accordion1-menu li.active {
background: #f9681c;
border-color: #f9681c;
/* 좌측 이동(translateX) 제거됨 */
}
.accordion1-menu li.active h3,
.accordion1-menu li.active p,
.accordion1-menu li.active h3 span { color: #fff !important; }
/* 좌측 컨텐츠 영역 */
.accordion1-content {
flex: 0 0 700px;
width: 700px;
position: relative;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.accordion1-item {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
opacity: 0;
background-size: cover;
background-position: center;
transition: opacity 0.8s ease-in-out; /* 부드러운 전환 */
}
.accordion1-item.active { opacity: 1; }
/* ===================================================
모바일 전용 스타일 (반응형: 이미지 -> 텍스트 순)
=================================================== */
@media (max-width: 1024px) {
.accordion1-wrap {
flex-direction: column; /* 세로 나열 */
padding: 0 0px;
}
.accordion1-content { display: none; } /* PC용 단일 이미지 박스 숨김 */
.accordion1-menu { width: 100%; gap: 40px; }
.accordion1-menu li {
height: auto;
padding: 0;
/* [핵심 수정 1] 부모 영역 밖으로 나가는 이미지를 자름 (곡선 유지) */
overflow: hidden !important;
/* [핵심 수정 2] 모바일 전체 박스 곡선 설정 (기존 20px 유지) */
border-radius: 20px !important;
border: 1px solid #eee;
transform: none !important; /* 모바일은 튀어나오기 제거 */
background-color: #fff;
}
.accordion1-menu li p{ margin-bottom: 29px;}
/* 이미지 영역 추가 (이미지가 텍스트보다 먼저 나옴) */
.accordion1-menu li::before {
content: "";
display: block;
width: 100%;
height: 250px;
background-size: cover;
background-position: center;
/* [핵심 수정 3] 이미지 자체의 상단 두 모서리에만 곡선 적용 (부모와 일치) */
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* 각 항목별 이미지 연결 (기존 동일) */
.accordion1-menu li:nth-child(1)::before { background-image: url('https://cdn.imweb.me/upload/S20260115980f8e8180d39/3c2df5fe0668b.jpg'); }
.accordion1-menu li:nth-child(2)::before { background-image: url('https://cdn.imweb.me/upload/S20260115980f8e8180d39/40507e4d97132.jpg'); }
.accordion1-menu li:nth-child(3)::before { background-image: url('https://cdn.imweb.me/upload/S20260115980f8e8180d39/2302c4204f103.jpg'); }
.accordion1-menu li .m-txt-wrap {
padding: 0px 25px;
}
/* 모바일 활성화 시 테두리만 강조하거나 배경 유지 (기존 동일) */
.accordion1-menu li.active {
border-color: #f9681c;
box-shadow: 0 10px 25px rgba(249, 104, 28, 0.2);
}
}
/* 스토리 ============================================================================= */
#w202603308893b1a6df412{pointer-events: none;}
.story-title-box{
text-align: center;
width: 30%;
}
.story-title-box-con{
margin: 10px;
border: 1px solid #666;
border-radius: 100px;
}
/* vs 부분 영역 */
/* 1. 컨테이너 설정 */
.case-study-wrap {
width: 100%;
max-width: 1200px;
margin: 80px auto; /* 적절한 섹션 간격 */
display: flex;
justify-content: center;
align-items: center;
position: relative;
perspective: 2000px;
height: 550px; /* PC 높이 고정 */
overflow: visible;
}
.case-item {
position: absolute;
opacity: 0;
/* 글자 자글거림 및 깨짐 방지 최적화 */
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
transform-style: preserve-3d;
will-change: transform, opacity;
}
/* --- 좌측 영역 (기존 매장) --- */
.case-left { width: 500px; z-index: 10; }
/* 좌측 워딩: 이미지 박스 외부 상단 배치 */
.case-left .wording {
position: absolute;
top: -50px;
left: 0; width: 100%;
text-align: center;
font-size: 24px; font-weight: 800;
color: #fff;
margin: 0;
}
.case-left .img-main {
width: 100%; border-radius: 15px; display: block;
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
/* --- 중앙 영역 (화살표) --- */
.case-mid {
display: flex; flex-direction: column;
align-items: center; gap: 15px; opacity: 0;
}
.case-mid img { width: 100%; height: auto; }
/* --- 우측 영역 (재창업 매장) --- */
.case-right { width: 500px; z-index: 10; }
/* 우측 워딩: 이미지 박스 내부 상단 고정 */
.case-right .wording-box {
position: absolute; top: 40px; left: 0; width: 100%;
text-align: center; z-index: 5;
}
.case-right .wording-box p {
font-size: 20px; font-weight: 800; color: #fff;
line-height: 1.4; margin: 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.case-right .img-bg { width: 100%; border-radius: 15px; display: block; }
/* 우측 라벨: 박스 정중앙 배치 */
.case-right .label-overlap {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 300px; z-index: 15;
filter: drop-shadow(0 15px 30px rgba(0,0,0,0.3));
margin-top: 120px;
}
/* 2. 모바일 대응 (반응형) */
@media (max-width: 1100px) {
.case-study-wrap { height: auto; flex-direction: column; padding: 40px 20px; gap: 80px; }
.case-item {
position: relative; width: 100%; max-width: 500px;
opacity: 1 !important; transform: none !important;
left: auto !important; top: auto !important;
}
.case-mid { flex-direction: row; width: 150px; margin: 0 auto; opacity: 1 !important; }
.case-left .wording { top: -35px; font-size: 20px; }
.case-right .label-overlap {width: 210px;}
}
/* 매출로증명 페이지 ♦️♦️♦️♦️♦️♦️♦️♦️♦️♦️====================================================================================== */
/* 매출로증명 마퀴 페이지 */
:root {
--thumb-w: 198px;
--thumb-h: 270px;
--gap: 50px;
}
.franchise_wrapper {
position: relative;
width: 100%;
height: 670px; /* 전체 높이 */
background-color: #ccc8be;
overflow: hidden;
display: flex;
justify-content: space-between; /* 양쪽 벽으로 밀착 */
align-items: center;
}
/* 좌우 벽에서 50px 여백 유지 */
.side_left { margin-left: var(--gap); }
.side_right { margin-right: var(--gap); }
.marquee_side {
display: flex;
gap: var(--gap);
height: 150%; /* 컨테이너를 여유롭게 잡아 화면 밖에서 잘림 방지 */
z-index: 1;
}
.marquee {
width: var(--thumb-w);
height: 100%;
overflow: hidden;
}
.marquee-content {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--gap);
width: 100%;
/* GPU 가속을 켜서 끊김(버벅임)을 완벽 차단 */
will-change: transform;
}
.marquee-content li {
width: var(--thumb-w);
height: var(--thumb-h);
flex-shrink: 0;
}
.marquee-content img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
/* 중앙 고정 텍스트 */
.center_content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
background: white;
width: 31vw;
padding: 70px 30px;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
margin-top: 60px;
/* 가상 요소의 기준점이 되기 위해 추가 */
position: absolute;
}
/* 안쪽 테두리 구현 */
.center_content::before {
content: "";
position: absolute;
/* 여백 20px 설정 */
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
/* 테두리 설정 */
border: 1px solid #c6c5c4;
/* 콘텐츠보다 뒤에, 배경보다는 위에 위치 */
z-index: -1;
/* 만약 박스에 border-radius가 있다면 여기도 맞춰주는 것이 좋습니다 */
pointer-events: none;
}
.count-wrap-logo {
position: absolute;
margin-top: -100px;
left: 50%;
transform: translate(-50%, -0%);
margin-top: -70px;
margin-left: -300px;
z-index: 11;
}
.count-number{
font-size: 2em; font-weight: bold;
}
.text_box h5 { color: #7c6456;}
.text_box h3 { color: #666; margin-bottom: 15px; }
.text_box h1 { margin-bottom: 25px; }
.text_box p { color: #888; line-height: 1.6; }
.highlight { color: #ff4d00; }
.trend-box {
/* 위아래에 1px 두께의 선 추가 */
border-top: 1px solid #dcdbda;
border-bottom: 1px solid #dcdbda;
/* 선과 글자 사이의 간격 */
padding: 30px 0;
/* 박스 자체의 위아래 여백 */
margin: 20px 30px;
text-align: center;
}
/* 모바일 반응형 */
@media (max-width: 1200px) {
:root { --thumb-w: 140px; --thumb-h: 190px; --gap: 20px; }
.center_content { width: 320px; }
}
@media (max-width: 768px) {
:root { --thumb-w: 80px; --thumb-h: 110px; --gap: 10px; }
.side_left { margin-left: 10px; }
.side_right { margin-right: 10px; }
.center_content { width: 85%; opacity: 0.95; }
.marquee_side { opacity: 0.4; }
.franchise_wrapper {
background-color: #000;
height: 580px;
}
}
@media only screen and (max-width: 480px) {
.count-number{font-size: 1.4em;}
}
/* 테이블 기본 설정 */
.count-table {
width: 100%;
max-width: 600px;
border-collapse: collapse;
font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
}
/* h6 스타일 설정 (사이즈 고정 없이 태그 특성 유지) */
.count-table h6 {
margin: 0;
padding: 15px 10px;
font-weight: 600;
}
/* 헤더 하단 라인 (2px로 설정) */
.count-table thead {
border-bottom: 2px solid #000;
}
/* 행 구분선 (1px 연한 회색) */
.count-table tbody tr {
border-bottom: 1px solid #e0e0e0;
}
/* 마지막 줄 스타일 (이미지 반영) */
.count-table .total-row {
background-color: #000;
color: #fff;
border-bottom: none;
}
.count-table .total-row .highlight {
color: #ff6b00;
}
/* 정렬 및 너비 설정 */
.text-left { text-align: left; }
.text-right { text-align: right; }
.col-item { width: 30%; }
.col-amount { width: 50%; }
.col-ratio { width: 20%; }
/* 브랜드 소개 ==============================================================*/
/* about_food */
.aobut_img_wrap{
position: absolute;
right: -10px;
top: -100px;
}
.about-smoke{
left: 10px;
top: -70px;
}
/* 리뷰 배민 박스 */
.review_baemin{
position: absolute;
width: 22vw;
left: 50%;
transform: translate(-50%, -0%);
margin-top: 0px;
margin-left: -341px;
display: flex;
background-color: #fff;
flex-direction: column;
align-items: center;
z-index: 2;
height: 28.65vw;
border: solid 1px;
justify-content: center;
}
.callie_txt{
position: relative;
z-index: 2;
}
@media only screen and (max-width: 480px) {
.aobut_img_wrap{
position: relative;
right: 0px;
top: -70px;
}
.aobut_img_wrap img{
width: 380px;
}
}
/* 메뉴 소개 섹션 =====================================*/
/* 메뉴 소개 리스트 */
/* 전체 컨테이너 */
.menu-list-content {
max-width: 1400px;
margin: 60px auto;
padding: 0 15px;
font-family: 'Pretendard', sans-serif;
}
/* 탭 버튼 */
.tab-wrapper { display: flex; flex-wrap: wrap; justify-content: center; }
.tab-wrapper input[type="radio"] { display: none; }
.tab-wrapper label {
flex: 1; max-width: 250px; padding: 12px 0; margin: 0 8px 50px;
background-color: #000; color: #fff; text-align: center;
font-weight: 700; border-radius: 50px; cursor: pointer; transition: 0.3s;
}
.tab-wrapper label h5 { margin: 0.3vw; color: #fff; }
#main_tab:checked ~ label[for="main_tab"],
#set_tab:checked ~ label[for="set_tab"],
#side_tab:checked ~ label[for="side_tab"] { background-color: #ff6d22; }
/* 탭 전환 */
.tab-panel { display: none; width: 100%; }
#main_tab:checked ~ #main_content, #set_tab:checked ~ #set_content, #side_tab:checked ~ #side_content { display: block; }
/* 그리드 레이아웃 (PC 기본 4열) */
.grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 0px; }
/* 세트 메뉴 2열 전용 설정 */
.set-grid { grid-template-columns: repeat(2, 1fr); gap: 60px 40px; max-width: 1100px; margin: 0 auto; }
.item { text-align: center; }
/* 이미지 공통 스타일 */
.item img.thumb {
width: 260px;
height: 260px;
object-fit: contain;
border-radius: 0;
background: transparent;
margin: 0 auto;
display: block;
}
/* 세트 메뉴 큰 이미지 */
.large-thumb { width: 450px !important; height: 371px !important; }
/* 메뉴 제목 */
.item h4 {
margin: 12px 0 10px;
font-weight: 600;
color: #000;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
/* 메뉴 설명 */
.item p {
font-size: 17px;
font-weight: 400;
color: #000;
margin: 0; line-height: 1.3;
word-break: keep-all;
}
/* 불꽃 아이콘 */
.fire-icon { width: 22px; height: auto; vertical-align: middle; }
/* 반응형: 테블릿 (2열) */
@media (max-width: 1024px) {
.grid-container, .set-grid { grid-template-columns: repeat(2, 1fr); }
.item img.thumb, .large-thumb { width: 220px !important; height: 220px !important; }
}
/* 반응형: 모바일 (2열 유지하되 크기 축소) */
@media (max-width: 480px) {
.item img.thumb, .large-thumb { width: 160px !important; height: 160px !important; }
.tab-wrapper label { margin: 0 4px 30px; padding: 10px 0; }
.tab-wrapper label h5 { font-size: 14px; }
.item h4 { font-size: 18px; margin: 15px 0 5px; }
.item p { font-size: 14px; }
.fire-icon { width: 16px; }
}
/* 매장안내 */
/* 지도 아이콘을 강제로 변경 */
img[src="//static.imweb.me/vendor/images/marker/marker_red.png"] {
content: url('https://cdn.imweb.me/upload/S20260115980f8e8180d39/4ab7250b49399.png') !important;
width: 27px !important; /* 아이콘 크기 */
height: 36px !important; /* 아이콘 크기 */
}