/* ============ Intro Loader ============ */
#intro-loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
#intro-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}
#intro-logo {
    width: 12vw;
    max-width: 220px;
    min-width: 100px;
    animation: intro-pulse 1.5s ease-in-out infinite;
}
@media (max-width: 599px) {
    #intro-logo {
        width: 35vw;
        max-width: none;
    }
}
@keyframes intro-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}

/* ============ Base / Reset ============ */
*,
*::before,
*::after {
    box-sizing: unset; /* 성능·안정성 */
    margin: 0;
}



button{
outline: none;
}
button{
    border: none;
}
.leftflex{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
}
.rightflex{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
}
html, body {
    padding: 0;
    margin: 0;
}

ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

html {
    scroll-behavior: smooth;
}
.fwrap{
    flex-wrap: wrap;
}

/* 접근성 유틸 (화면에서 숨기기) */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ============ Layout Helpers ============ */
section{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

.pc-mobile { display: flex; }
.mobile-pc { display: none !important; }
.pc        { display: flex; }
.pc-inline { display: inline; }
.tablet    { display: none; }
.mobile    { display: none; }

.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.flowhid { overflow: hidden; }
.hide    { display: none !important; }
.hideopa { opacity: 0 !important; }
.show    { opacity: 1 !important; }
.absol   { position: absolute; }
.rltv    { position: relative; }

.scrX{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scrX .scrX_item{
    animation: marqueeX 20s linear infinite;
    width: 100%;
}
.scrX .scrX_item_absol {
    right: -100%;
    width: 100%;
}

.scrY{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scrY .scrY_item{
    animation: marqueeY 20s linear infinite;
    height: 100%;
}
.scrY .scrY_item_absol {
    bottom: -100%;
    width: 100%;
}

.flexrow{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.flexcol{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.main1 {
    top: 0;
    opacity: 0.3;
    width: 100%;
    z-index: 5;
    margin-top: -207.5%;
    pointer-events: none;
}
/* ============ Fonts ============ */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap");

/* Pretendard – 각 굵기 분리 선언 (font-display: swap으로 FOUT 최소화) */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TTTtangsbudaejjigaeB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/TTTtangsbudaejjigaeB.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    /* fluid type 기본값 – 기존 계산식 유지 */
    font-family: 'Pretendard','Noto Sans KR',system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,'Noto Serif KR',sans-serif;
}

/* ============ Preload holder ============ */


/* ============ Animations / Keyframes ============ */
/* 기존 이름 유지 + 문법 오류 제거 */


@keyframes headlightBlink {
    0% {
        opacity: 0.2;
    }
    15% {
        opacity: 0.8;
    }
    30% {
        opacity: 1;
    }
    40% {
        opacity: 0.7;
    }
    55% {
        opacity: 1;
    }
    70% {
        opacity: 0.6;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0.3;
    }
}

@keyframes sway4 {
    50% {
        transform: rotate(2deg) scale(1.06);

    }
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes marquee2 {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
@keyframes marqueeX {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
@keyframes marqueeY {
    from { transform: translateY(0); }
    to   { transform: translateY(-100%); }
}

@keyframes slick-circle { 0%{left:0;} 100%{left:99%;} }

@keyframes soul_out {
    0% { opacity: 0.7; }
    100% { opacity: 0; transform: translateY(-50%); }
}

@keyframes ddm3 {
    0% { transform: scale(1); }
    50% { transform: rotate(-2deg); }
    100% { transform: scale(1.05); }
}
@keyframes ddm4 {
    0% { transform: scale(1); }
    25% { transform: rotate(-2deg); }
    50% { transform: scale(1.05); }
    75% { transform: rotate(2deg); }
    100% { transform: scale(1); }
}

@keyframes rotate360 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

@keyframes rotate_img10deg {
    0%,49% { transform: rotate(10deg); }
    50%,99% { transform: rotate(-10deg); }
    100% { transform: rotate(10deg); }
}


@keyframes rotate_img5deg {
    0%,49% { transform: rotate(5deg); }
    50%,99% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}

@keyframes opazoom {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.opazoom { animation: opazoom 1.5s infinite; }

@keyframes ani_scale {
    0% { transform: scale(1); }
    50% { transform: matrix(1.1, 0.01, 0.01, 1.2, 0, 0); }
    100% { transform: scale(1); }
}
@keyframes zoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes blk {
    0%,30% { opacity: 0; }
    31%,99% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes blk2 {
    0%,49% { opacity: 0; }
    50%,99% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes blk3 {
    0%,24% { opacity: 1; }
    25%,99% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes scaleOpa { 100% { transform: scale(1.1); opacity: 0; } }
@keyframes scaleOpa2 { 100% { transform: scale(1.4); opacity: 0; } }
@keyframes scaleOpa3 { 100% { transform: scale(1.3); opacity: 0; } }

@keyframes ball   { 0% { bottom: 0; } 100% { bottom: 20px; } }
@keyframes ddm    { 0% { transform: scale(1); } 50% { transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -30); } 100% { transform: scale(1); } }
@keyframes ddm_m  { 0% { transform: scale(1); } 50% { transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -15); } 100% { transform: scale(1); } }
@keyframes ddm_m2 { 0% { transform: scale(1); } 50% { transform: matrix(1.15, 0.01, 0.01, 1.15, 0, 30); } 100% { transform: scale(1); } }

@keyframes zoom2 { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

@keyframes rotate_imageY { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }

@keyframes ddm2   { 0% { transform: scale(1); } 50% { transform: translateY(20px); } 100% { transform: scale(1.02); } }
@keyframes ddm2X  { 0% { transform: scale(1); } 50% { transform: translateX(-100%); } 100% { transform: scale(1.02); } }
@keyframes ddm2Xhalf { 0% { transform: scale(1); } 50% { transform: translateX(-50%); } 100% { transform: scale(1.02); } }

@keyframes uitLineMove {
    0%   { stroke-dashoffset: 300.292; }
    100% { stroke-dashoffset: 110; }
}
@keyframes rotate_img10deg {
    0% {
        transform: rotate(10deg);
    }
    49% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    99% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(10deg);
    }
}
@keyframes hand {
    0%   { transform: translateY(-0.5%); }
    25%  { transform: translateY(1%); }
    50%  { transform: translate(0.5%, -1%); }
    75%  { transform: translate(1%, 0.5%); }
    100% { transform: translate(1%, -1%); }
}
@keyframes hand2 {
    0%   { transform: translateY(2%); }
    25%  { transform: translateY(-1%); }
    50%  { transform: translate(-1%, 2%); }
    75%  { transform: translate(2%, 1%); }
    100% { transform: translateY(2%); }
}

@keyframes bg-position {
    0%   { background-position: bottom; }
    25%  { background-position: center; }
    50%  { background-position: inherit; }
    75%  { background-position: center; }
    100% { background-position: bottom; }
}

/* ❗️기존 smoke에 있던 random()은 CSS 문법이 아니므로 제거/치환 */
@keyframes smoke {
    0% {
        transform: translate(0, 30%) rotate(0);
        opacity: 0.2;
    }
    25% {
        transform: translate(calc(random() * 100vw), 100vh) rotate(50deg) translateX(10px);
        opacity: 1;
    }
    50% {
        transform: translate(calc(random() * 100vw), 100vh) rotate(50deg) translateX(50px);
        opacity: 1;
    }
    75% {
        transform: translate(calc(random() * 100vw), 100vh) rotate(50deg) translateX(50px);
        opacity: 1;
    }
    100% {
        transform: translate(calc(random() * 100vw), 200vh) rotate(0) translateX(70px);
        opacity: 0.2;
    }
}
.smoke{
    animation: smoke 4s infinite linear;
    pointer-events: none;
}
@keyframes light {

    0%,31%,34%,39%,42%,47% { opacity: 0; }
    5%,30%,35%,38%,43%,46% { opacity: 0.4; }
    50%,55%,60%,67%,51%,54%,68%,100% { opacity: 1; }
    70% { opacity: 0.2; }
}
@keyframes shakeAndFall {
    0% {
        transform: translate(0, -100%) rotate(0);
        opacity: 0;
    }
}

/* 떨어지는 효과 – 잘못된 transform 토큰 제거 */
@keyframes fall {
    0% {
        top: 0;
        opacity: 1;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform-origin: center center;
    }
    100%{
        transform: rotateX(240deg) rotateY(400deg) rotateZ(310deg);
        transform-origin: center center;
        top: 100%;
        opacity: 0;
    }
}
@keyframes fall2 {
    0% {
        top: 0;
        opacity: 1;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform-origin: center center;
    }
    100%{
        transform: rotateX(-240deg) rotateY(-400deg) rotateZ(-310deg);
        transform-origin: center center;
        top: 100%;
        opacity: 0;
    }
}

@keyframes backgroundchange {
    0%   { background: url(/images/con11_07.png) no-repeat center / contain; }
    25%  { background: url(/images/con11_08.png) no-repeat center / contain; }
    50%  { background: url(/images/con11_09.png) no-repeat center / contain; }
    75%  { background: url(/images/con11_10.png) no-repeat center / contain; }
    100% { background: url(/images/con11_07.png) no-repeat center / contain; }
}
@keyframes opa {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes backgroundchange_2 {
    0%   { background: url(/images/con08_07.png) no-repeat center / contain; }
    20%  { background: url(/images/con08_08.png) no-repeat center / contain; }
    40%  { background: url(/images/con08_09.png) no-repeat center / contain; }
    60%  { background: url(/images/con08_10.png) no-repeat center / contain; }
    80%  { background: url(/images/con08_11.png) no-repeat center / contain; }
    100% {
        background: url(/images/con08_07.png) no-repeat center / contain;
    }
}

@keyframes rotateAnimation {
    0% { transform: rotate(-1deg); }
    40% { transform: rotate(1deg); }
    60% { transform: rotate(2deg); }
    80% { transform: rotate(-1deg); }
    100% { transform: rotate(1deg); }
}

/* ============ Helpers ============ */
.rotate    { animation: rotate360 20s linear infinite; }
.pointer   { cursor: pointer; }
.blk       { animation: blk 1s infinite; }
.scaleopa1 { animation: scaleOpa 2s infinite; }
.scaleopa2 { animation: scaleOpa2 2s infinite; }





/* ============ MAIN Section ============ */
.main{
    background: #111;
    overflow: visible;
    padding-top: 5.5vw;
    padding-bottom: 0;
    contain: layout style paint;
}

/* 배경: 비디오 2개 좌우 배치 */
.mainbg{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}
.mainbg video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    flex-shrink: 0;
    transform: translateZ(0);
    filter: brightness(0.5);
}
.mainbg video + video{
    border-left: 1px solid rgba(255,255,255,0.08);
}

.main .zin{ z-index: 5; }

/* GSAP 인트로 — JS 로드 전 숨김 (FOUC 방지) */
.mainbg,
.main_top,
.mainab { opacity: 0; }

/* SplitType 글자 단위 애니메이션용 */
.main_top_2nd .char,
.main_top_3rd .char { display: inline-block; will-change: transform, opacity, filter; }
.main_top_4th .word { display: inline-block; will-change: transform, opacity; }

/* CON1 SplitType 애니메이션용 */
.con1top .word { display: inline-block; will-change: transform, opacity; }
.con1body .line { display: block; will-change: transform, opacity; }
/* CON2 SplitType 애니메이션용 */
.con2top .word { display: inline-block; will-change: transform, opacity; }
/* CON3 GSAP FOUC 방지 + SplitType */
.con3line, .con3top, .con3top2nd, .con3top3rd, .con3top4th, .con3top5th { opacity: 0; }
.con3top2nd .word, .con3top3rd .word { display: inline-block; will-change: transform, opacity; }
.con3top4th .line { display: block; will-change: transform, opacity; }
/* CON4 GSAP FOUC 방지 + SplitType */
.con4top, .con4top2nd, .con4ab, .con4left, .con4right, .con4_arr_prev, .con4_arr_next { opacity: 0; }
.con4top .word { display: inline-block; will-change: transform, opacity; }
.con4top2nd .line { display: block; will-change: transform, opacity; }
/* CON5 GSAP FOUC 방지 + SplitType */
.con5top, .con5top2nd, .con5row { opacity: 0; }
.con5top .word { display: inline-block; will-change: transform, opacity; }
.con5top2nd .line { display: block; will-change: transform, opacity; }
/* CON6 GSAP FOUC 방지 + SplitType */
.con6top, .con6top2nd, .con6top3rd, .con6card { opacity: 0; }
.con6top2nd .word { display: inline-block; will-change: transform, opacity; }
.con6cards { perspective: 1200px; }
.con6card { backface-visibility: hidden; will-change: transform, opacity; }

/* CON7 FOUC */
.con7top, .con7card, .con7circle { opacity: 0; }
.con7 [class^="con7ab"] { opacity: 0; }
.con7top .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* mc 컬러 스윕 — overlay + clip-path */
.con7top .mc { position: relative; color: #000; }
.con7top .mc-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    color: #5e0000;
    overflow: visible;
}

/* CON8A FOUC */
.con8atop, .con8acounterbox, .con8aline2, .con8aline3, .con8aslide { opacity: 0; }
.con8atop .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* con8a counterbox SVG border draw */
.con8acounterbox { position: relative; }
.con8a-border-svg {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* CON9 FOUC */
.con9top, .con9top2nd, .con9circle1, .con9circle2, .con9chart { opacity: 0; }
.con9top .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* mc 컬러 스윕 — con9 */
.con9top .mc { position: relative; color: #000; }
.con9top .mc-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    color: #5e0000;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    overflow: visible;
}

/* CON10 FOUC */
.con10top, .con10top2nd, .con10line, .con10badge, .con10price, .con10photos { opacity: 0; }
.con10top .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* mc 컬러 스윕 — con10 */
.con10top .mc { position: relative; color: #000; }
.con10top .mc-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    color: #5e0000;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    overflow: visible;
}

/* CON11 FOUC */
.con11bg, .con11badge, .con11top, .con11top2nd, .con11note, .con11store, .con11arrow, .con11pre, .con11post { opacity: 0; }
.con11top .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }

/* CON14 FOUC */
.con14line, .con14line2, .con14vleft, .con14vright, .con14badge, .con14top, .con14tabs, .con14content, .con14arrleft, .con14arrright { opacity: 0; }

/* CON12 FOUC */
.con12top, .con12top2nd, .con12card { opacity: 0; }
.con12top .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* mc 컬러 스윕 — con12 */
.con12top .mc { position: relative; color: #000; }
.con12top .mc-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    color: #5e0000;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    overflow: visible;
}

/* CON15 FOUC */
.con15bg, .con15badge, .con15top, .con15swiperwrap, .con15arrleft, .con15arrright, .con15bottom { opacity: 0; }
.con15top .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* sc 컬러 스윕 — con15 */
.con15top .sc { position: relative; color: #fff; }
.con15top .sc-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    color: #eccaaf;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    overflow: visible;
}

/* CON16 FOUC */
.con16stars, .con16top, .con16statleft, .con16statright, .con16phone, .con16swiperwrap, .con16arrleft, .con16arrright, .con16bubble1, .con16bubble2, .con16bubble3 { opacity: 0; }
.con16top .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* mc 컬러 스윕 — con16 */
.con16top .mc { position: relative; color: #000; }
.con16top .mc-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    color: #5e0000;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    overflow: visible;
}

/* CON17 FOUC */
.con17bg, .con17top, .con17top2nd, .con17circles, .con17bottom, .con17photo1, .con17photo2, .con17photo3, .con17photo4, .con17photo5 { opacity: 0; }
.con17top .word, .con17top2nd .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }

/* CON18 FOUC */
.con18bowl, .con18top, .con18top2nd, .con18top3rd, .con18col1, .con18col2 { opacity: 0; }
.con18top .word, .con18top2nd .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* mc 컬러 스윕 — con18 */
.con18top2nd .mc { position: relative; color: #000; }
.con18top2nd .mc-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    color: #5e0000;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    overflow: visible;
}

/* CON19 FOUC */
.con19bg, .con19smoke, .con19top, .con19top2nd, .con19sub, .con19body { opacity: 0; }
.con19top .word, .con19top2nd .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* sc 컬러 스윕 — con19 */
.con19top2nd .sc { position: relative; color: #fff; }
.con19top2nd .sc-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    color: #eccaaf;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    overflow: visible;
}

/* CON23 FOUC */
.con23frame, .con23title, .con23subtitle, .con23map { opacity: 0; }
.con23inqbg, .con23inqt1, .con23inqt2, .con23inqsub, .con23phone, .con23form { opacity: 0; }
.con23inqt2 .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* sc 컬러 스윕 — con23 */
.con23inqt2 .sc { position: relative; color: #fff; }
.con23inqt2 .sc-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    color: #eccaaf;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    overflow: visible;
}

/* CON22 FOUC */
.con22bg, .con22top, .con22cards { opacity: 0; }
.con22top .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* sc 컬러 스윕 — con22 */
.con22top .sc { position: relative; color: #fff; }
.con22top .sc-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    color: #eccaaf;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    overflow: visible;
}

/* CON20 FOUC */
.con20corner1, .con20corner2, .con20corner3, .con20corner4, .con20costtitle, .con20maintitle, .con20cost1, .con20cost2, .con20label1, .con20label2, .con20brush1, .con20brush2, .con20brush3, .con20brush4 { opacity: 0; }
.con20maintitle .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }

/* CON21 FOUC */
.con21bg, .con21top, .con21sub, .con21grid { opacity: 0; }
.con21top .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* mc 컬러 스윕 — con21 */
.con21top .mc { position: relative; color: #000; }
.con21top .mc-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    color: #5e0000;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    overflow: visible;
}

/* CON13 FOUC */
.con13bg, .con13cup1, .con13cup2, .con13bowl, .con13badge, .con13top, .con13top2nd, .con13arrows, .con13slider { opacity: 0; }
.con13top .word { display: inline-block; will-change: transform, opacity; padding-right: 0.3vw; }
/* sc 컬러 스윕 — con13 */
.con13top .sc { position: relative; color: #fff; }
.con13top .sc-overlay {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    color: #eccaaf;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    overflow: visible;
}

/* 배지 */
.main_top{
    width: 31.9685%;
    margin-top: 4%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0%;
}

/* 타이틀 1줄 */
.main_top_2nd{
    margin-top: 1.2%;
    text-align: center;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

/* 타이틀 2줄 (큰 글씨) */
.main_top_3rd{
    margin-top: 0%;
    text-align: center;
    text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}

/* 서브 텍스트 */
.main_top_4th{
    margin-top: 1%;
    text-align: center;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.main_top_4th p{
    line-height: 1.8;
}

/* 칼국수 그릇: 서브텍스트 아래, 카드 앞 */
.mainab{
    width: 35% !important;
    max-width: 35%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 42%);
    z-index: 7;
    pointer-events: none;
}
.mainab img{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* 매출 슬라이더 영역 */
.main_top_5th{
    width: 100%;
    margin-top: 6%;
    padding: 1.5vw 0;
    position: relative;
    margin-bottom: 1.5%;
}
/* 빨간 라인: 흰 gap + 빨간 띠 + 흰 gap 으로 떠있는 형태 */
.main_line_wrap{
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: 3;
}
.main_line_top{
    top: -1vw;
    left: 0;
}
.main_line_bottom{
    bottom: -1vw;
    left: 0;
}
.main_line_gap{
    height: 0.08vw;
    background: rgba(255,255,255,0.12);
}
.main_line_bar{
    height: 0.15vw;
    background: var(--mc);
}
.main_slide_bg{
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: var(--mc);
}
.main_slide{
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.main_slide .swiper-slide{
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}
.main_slide .swiper-wrapper{
    backface-visibility: hidden;
}
.con02_slide .swiper-wrapper{
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* "문화" 빛 지나가는 모션 - 성능 고려 (6초, GPU 가속) */
@keyframes lightSweep {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
.light_sweep{
    background: linear-gradient(
        120deg,
        var(--mc) 0%,
        var(--mc) 35%,
        #a03030 50%,
        var(--mc) 65%,
        var(--mc) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: lightSweep 6s ease-in-out infinite;
}
.light_sweep .char{
    background: linear-gradient(120deg, var(--mc) 0%, var(--mc) 35%, #a03030 50%, var(--mc) 65%, var(--mc) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: lightSweep 6s ease-in-out infinite;
}

/* ============ CON1 Section ============ */
/* Section bg: Figma y=819, h=900, fill=#000 */
.con1{
    background: #000000;
    overflow: hidden;
    justify-content: flex-start;
    align-items: flex-start;
}
/* 배경 이미지 — con01_4.jpg 1920×900, Figma opacity=0.10 */
.con1bg{
    width: 100% !important;
    opacity: 1;
}
/* 셰프 반죽 사진 — Figma: page_x=831, y=650, w=1166 */
/* JS width=53.5958% (1021/1905), right edge=(1997-1021)/1905=51.2336% */
.con1ab{
    left: unset;
    top: unset;
    z-index: 1;
    display: flex;
    bottom: 0;
    right: 0;
    width: 54.8268%;
}
/* Since 1995 배지 — Figma: page_x=436.0, y=1026.9, w=178.7 */
/* margin-top=(1026.9-819)/1905=10.9134%, margin-left=436.0/1905=22.8871% */
.con1badge{
    width: 9.3806%; /* 178.7/1905 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10.9134%;
    margin-left: 22.8871%;
    z-index: 2;
}
/* 타이틀: Shilla Bold 60px, #fff, center */
/* Figma: page_x=85.4, y=~1095(visible), w=660 */
/* width=660/1905=34.6457%, margin-left=85.4/1905=4.4829% */
/* gap badge→title: ~19px → 19/1905=1.0026% */
/* nowrap: 브라우저 폰트 렌더링 차이로 줄바꿈 방지, overflow:visible로 표시 */
.con1top{
    width: 37.6457%;
    margin-top: 1.0026%;
    margin-left: 8.4829%;
    z-index: 2;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    line-height: 1.15;
    letter-spacing: -0.0525vw;
    color: #ffffff;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
/* 붓글씨 장식 — con01_2.png, nested absol inside con1top */
/* Figma: page_x=543.0, y=1146, w=344, h=42 */
/* left relative to title box: (543.0-85.4)/660=69.3333% */
/* width relative to title box: 345/660=52.2727% (naturalWidth/titleWidth) */
/* !important: JS calcSectionDiv가 parent(con1top) 기준으로 잘못 계산하므로 덮어쓰기 */
.con1brushimg{
    width: 52.2727% !important;
    left: 49.3333%;
    bottom: -22%;
    z-index: -1;
    display: flex;
    display: flex;
}
/* 본문: Pretendard 20px, center */
/* Figma: page_x=198.3, y=1229.3, w=661, h=288.9 */
/* width=661/1905=34.6982%, margin-left=198.3/1905=10.4094% */
/* gap title→body: ~85px → 85/1905=4.4619% */
.con1body{
    width: 34.6982%;
    margin-top: 4.4619%;
    margin-left: 10.4094%;
    margin-bottom: 10.5407%;
    z-index: 2;
    text-align: center;
    line-height: 1.6;
    letter-spacing: -0.0263vw;
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.con1body p{
    margin: 0;
}
/* 회색 구간: Thin 100, #6a6a6a */
/* specificity: .con1body p (0-1-1) > .con1gray (0-1-0) → p.con1gray 로 맞춤 */
.con1body p.con1gray {
    font-weight: 300;
    margin-top: 1.6em;
}

/* ============ CON2 Section ============ */
/* Section: Figma y=1719, h=950, bg=#fff6ee */
.con2{
    background: #fff6ee;
    overflow: hidden;
    justify-content: flex-start;
    align-items: flex-start;
}
/* 배경: 크림 한지 텍스처 — Figma opacity=0.35 */
.con2bg{
    width: 100% !important;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.35;
}
.con2bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 외곽 테두리 — Figma: px=30, y=1749, w=1860, h=890 */
/* stroke=#5e0000/1px/INSIDE, radius=20px(M20→1.0499vw) */
.con2border{
    left: 1.5748%;
    right: 0.7874%;
    top: 3.1579%;
    bottom: 3.1579%;
    border: 0.0525vw solid #5e0000;
    border-radius: 1.0499vw;
    z-index: 10;
    pointer-events: none;
}
/* 우측 서브타이틀 — Figma: px=1106.1, y=1903.7, w=575 */
/* Pretendard 22px/300, #000, ov4='흔들리지 않는 탄탄함을 증명합니다.'→Bold #5e0000 */
.con2ab{
    top: 19.4421%;
    right: 11.7533%;
    z-index: 5;
    text-align: left;
}
.con2ab p{
    line-height: 1.3636;
    letter-spacing: -0.0578vw;
}
/* 타이틀 — Figma: px=239, y=1826.7, w=650, h=134.6 */
/* Shilla Medium 40px(L1) + Bold 60px(L2), ls=-2.0, lh=70.06, align=LEFT */
.con2top{
    margin-top: 5.6535%;
    margin-left: 12.5459%;
    width: 34.1207%;
    align-self: flex-start;
    z-index: 5;
    text-align: left;
    letter-spacing: -0.1051vw;
    white-space: nowrap;
    overflow: visible;
}
.con2top p{
    margin: 0;
}
.con2top p:first-child{
    line-height: 1.0;
}
.con2top p:last-child{
    line-height: 1.0;
    margin-top: 1.0530vw;
}
/* 차트 영역 — 그리드 이미지(1324×457) 기준 */
/* Figma: grid left=273.9(page), title-chart gap=49.2px */
/* margin-top 증가: 디자인 대비 여유 간격 */
.con2top2nd{
    margin-top: 3.9370%;
    margin-left: 14.3780%;
    margin-bottom: 6.1417%;
    align-self: flex-start;
    z-index: 5;
    width: 69.5013%;
}
/* 차트 그리드 래퍼 — absol 요소(바,화살표,범례)의 기준점 */
.con2chartarea{
    width: 100%;
}
/* Y축 그리드 이미지 (rltv → 차트 높이 결정) */
/* con02_6.png: 1324×457, 100~0 라벨+라인 포함 */
.con2gridbg{
    width: 100%;
    display: flex;
    z-index: 3;
}
/* 범례 2024/2025 — con02_5.png (154×20) */
/* Figma: page_x=1445, y=2019 → grid 우상단 */
.con2legend{
    width: 11.6314%;
    top: -6%;
    right: 0%;
    z-index: 6;
    display: flex;
}
/* 화살표 — con02_1.png (540×217) */
/* Figma: page_x=775, y=2118, op=0.60 */
/* grid 기준: left=(775-273.9)/1324=37.84%, top=(2118-2010)/457=23.63% */
.con2arrow{
    width: 40.7855%;
    z-index: 7;
    top: 23.6%;
    left: 37.8%;
    opacity: 0.60;
    display: flex;
}
/* 바 컨테이너 — absol, 0선에 바닥 맞춤 */
/* 바 영역: page left=460 → right=1462, width=1002 */
/* grid 기준: left=(460-273.9)/1324=14.0483% */
/* grid 기준: right=(1597.9-1462)/1324=10.2645% */
/* bottom: 0선은 그리드 이미지 하단에서 ~2.8% 위 */
.con2bars{
    z-index: 5;
    left: 14.0483%;
    width: 75.6872%;
    bottom: 2.1882%;
    align-items: flex-end;
    justify-content: space-between;
}
/* 바 쌍 — gap=10px(0.5249vw), flex-end 정렬 */
.con2g1bars, .con2g2bars, .con2g3bars{
    align-items: flex-end;
    gap: 0.5249vw;
}
/* 개별 바 컬럼 — 100px → 5.2493vw */
.con2g1b1, .con2g1b2, .con2g2b1, .con2g2b2, .con2g3b1, .con2g3b2{
    align-items: center;
    width: 5.2493vw;
}
/* 바 안쪽 숫자 라벨 */
.con2barlabel{
    white-space: nowrap;
    text-align: center;
    padding: 0.25vw 0.6vw;
    margin-top: 0.5vw;
    border-radius: 0.25vw;
}
/* 2024 숫자 — 연한 배경 + 얇은 border */
.con2bar2024 .con2barlabel{
    border: none;
    background: none;
}
/* 2025 숫자 */
.con2bar2025 .con2barlabel{
    background: none;
}
/* 바 채우기 공통 — radius=30px top only(M30→1.5748vw) */
.con2barfill{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 1.5748vw 1.5748vw 0 0;
}
/* 2024 바 — Figma fill=#e3e3e3 */
.con2bar2024{
    background: #e3e3e3;
}
/* 2025 바 — Figma fill=#5e0000 */
.con2bar2025{
    background: #5e0000;
}
/* 바 높이 — Figma 정확값(px/19.05=vw) */
.con2g1b1 .con2barfill{ height: 22.2047vw; }
.con2g1b2 .con2barfill{ height: 23.0971vw; }
.con2g2b1 .con2barfill{ height: 6.9291vw; }
.con2g2b2 .con2barfill{ height: 8.7664vw; }
.con2g3b1 .con2barfill{ height: 3.4646vw; }
.con2g3b2 .con2barfill{ height: 6.4042vw; }
/* 라벨 — 각 바그룹 안 absol, bottom:0 + translateY로 0선 아래 배치 */
/* 부모=바그룹=1002/3=334px 기준 */
.con2g1label, .con2g2label, .con2g3label{
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 150%);
    z-index: 6;
}
.con2g1label{ width: 65.8683%; }
.con2g2label{ width: 56.2874%; }
.con2g3label{
    width: 56.2874%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}


/* ============ CON3 Section ============ */
.con3{
    background: #5e0000;
    padding: 6.5104% 0 14%;
}
.con3 .zin{ z-index: 5; }

/* 세로선 4개 — Figma: w=1, h=900, fill=#fff */
.con3line{
    width: 0.0525vw;
    top: 0;
    bottom: 0;
    background: #ffffff;
    opacity: 0.15;
    z-index: 2;
}
.con3line1{ left: 16.7979%; }
.con3line2{ left: 33.5958%; }
.con3line3{ left: 67.1391%; }
.con3line4{ left: 83.9370%; }

/* absol 음식 사진 공통 — display:flex 필수 (JS width 덮어쓰기 방지) */
.con3ab1,.con3ab2,.con3ab3,.con3ab4,.con3ab5,.con3ab6,.con3ab7,.con3ab8{
    display: flex;
    justify-content: center;
    align-items: center;
}
.con3 [class^="con3ab"] img{
    width: 100%;
    border-radius: 0.6vw;
}

/* 좌상: 가로 사진 (con03_6, 320x216) — 320/1905 */
.con3ab1{
    width: 16.7979%;
    top: 0%;
    left: 13.8021%;
    z-index: 4;
}
/* 좌중: 세로 사진 (con03_7, 216x320) — 216/1905 */
.con3ab2{
    width: 11.3386%;
    top: 13%;
    left: 3.2813%;
    z-index: 4;
}
/* 좌하: 가로 사진 (con03_12, 320x216) — 320/1905 */
.con3ab3{
    width: 16.7979%;
    bottom: 12%;
    left: -4.0625%;
    z-index: 4;
}
/* 중앙: 칼국수 대표 (con03_5, 814x611) — 814/1905 */
.con3ab4{
    width: 42.3958%;
    bottom: -26%;
    left: 28.8021%;
    z-index: 6;
}
/* 우상: 세로 사진 (con03_9, 320x216) — 320/1905 */
.con3ab5{
    width: 16.7979%;
    top: 22%;
    right: 10.0521%;
    z-index: 4;
}
/* 우중: 세로 사진 (con03_10, 216x320) — 216/1905 */
.con3ab6{
    width: 11.3386%;
    top: 0%;
    right: 4.4792%;
    z-index: 4;
}
/* 우하: 세로 사진 (con03_11, 216x320) — 216/1905 */
.con3ab7{
    width: 11.3386%;
    bottom: 15%;
    right: -0.6250%;
    z-index: 4;
}
/* 좌중소: 보쌈 세로 (con03_8, 177x263) — 177/1905 */
.con3ab8{
    width: 9.2913%;
    top: 24%;
    left: 19.4271%;
    z-index: 4;
}

/* 그릇 아이콘 */
.con3top{
    width: 2.0833%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

/* 타이틀 1줄 */
.con3top2nd{
    margin-top: 1.8229%;
    margin-left: 0%;
    text-align: center;
}

/* 타이틀 2줄 */
.con3top3rd{
    margin-top: 1.0417%;
    margin-left: 0%;
    text-align: center;
}

/* 설명 텍스트 */
.con3top4th{
    margin-top: 1.3021%;
    margin-left: 0%;
    text-align: center;
}
.con3top4th p{
    line-height: 1.8;
    opacity: 1;
    font-weight: 300;
}

/* 카운터 영역 (흰 컨테이너 + 라벨 + 숫자) */
.con3top5th{
    width: 52.0833%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.3958%;
    margin-left: 0%;
}
.con3top5th > img{
    width: 100%;
}
.con3counter{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.con3counterlabel{
    width: 35.0649%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}
.con3counternum{
    margin-top: 3%;
    margin-left: 0%;
    gap: 0.5092vw;
    justify-content: center;
    align-items: center;
}
/* 자릿수 박스 — Figma: 86.29×117.58, radius=10, fill=#5e0000 */
.con3digit{
    width: 4.5300vw;
    aspect-ratio: 86.29 / 117.58;
    overflow: hidden;
    border-radius: 0.5249vw;
    background: #5e0000;
}
.con3digitroll{
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* transition 제거 — GSAP에서 직접 제어 */
}
.con3digitroll span{
    width: 100%;
    aspect-ratio: 86.29 / 117.58;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Shilla_Culture(B)', serif;
    font-size: 4.4619vw;
    font-weight: 700;
    color: #ffffff;
}
/* 쉼표 — Figma: Shilla 85px bold #000 */
.con3comma{
    font-size: 4.4619vw;
    color: #000000;
    line-height: 1;
}
/* "그릇" — Figma: Shilla 85px bold #000 */
.con3grut{
    font-size: 4.4619vw;
    color: #000000;
    line-height: 1;
    margin-left: 0.4vw;
}


/* ============ CON4 Section ============ */
.con4{
    background: #1c1a17;
    padding: 5.5118% 0 0;
    justify-content: flex-start;
    align-items: flex-start;
}
.con4 .zin{ z-index: 5; }

/* 배경 텍스처 — con04_4.png, cover */
.con4bg{
    width: 100% !important;
    top: 0;
    left: 0;
    z-index: 1;
}
.con4bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

/* 좌측 배경 장식 — con04_3.png (983×1209), opacity=0.6 */
/* 983/1905 = 51.6010% */
.con4leftbg{
    width: 51.6010%;
    display: flex;
    top: 0;
    left: 9.3438%;
    z-index: 111;
    opacity: 0.6;
    pointer-events: none;
}
.con4leftbg img{
    width: 100%;
}
/* 연기 이펙트 — con4leftbg ::before / ::after */
.con4leftbg::before,
.con4leftbg::after{
    content: '';
    position: absolute;
    width: 60%;
    height: 45%;
    left: 20%;
    top: 5%;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2vw);
    opacity: 0;
}
.con4leftbg::before{
    background: radial-gradient(ellipse at 50% 70%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 40%, transparent 70%);
    animation: con4smoke1 5s ease-in-out infinite;
}
.con4leftbg::after{
    background: radial-gradient(ellipse at 40% 60%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 45%, transparent 70%);
    animation: con4smoke2 6.5s ease-in-out 1.5s infinite;
    width: 50%;
    left: 30%;
}
@keyframes con4smoke1{
    0%   { opacity: 0;   transform: translateY(0) scaleX(0.7) scaleY(0.8); }
    20%  { opacity: 0.6; }
    50%  { opacity: 0.4; transform: translateY(-4vw) scaleX(1.1) scaleY(1); }
    80%  { opacity: 0.15; }
    100% { opacity: 0;   transform: translateY(-9vw) scaleX(1.3) scaleY(1.1); }
}
@keyframes con4smoke2{
    0%   { opacity: 0;   transform: translateY(0) scaleX(0.8) scaleY(0.7); }
    25%  { opacity: 0.5; }
    55%  { opacity: 0.3; transform: translateY(-5vw) scaleX(1.0) scaleY(1.1); }
    85%  { opacity: 0.1; }
    100% { opacity: 0;   transform: translateY(-10vw) scaleX(1.2) scaleY(1.2); }
}

/* 붓글씨 밑줄 장식 — con04_1.png (241×43) → 241/1905 = 12.6509% */
.con4ab{
    width: 12.6509%;
    display: flex;
    top: 11.3911vw;
    left: 5.7743%;
    z-index: 4;
}
.con4ab img{
    width: 100%;
}

/* 타이틀 — L1: Shilla(M) 40.02px/500 = 2.1006vw, L2: Shilla(B) 65.03px/700 = 3.4135vw */
.con4top{
    margin-top: 0%;
    margin-left: 6.2520%;
    align-self: flex-start;
    text-align: left;
}
.con4top p:first-child{
    line-height: 1.825;
}
.con4title2{
    line-height: 1.123;
}

/* 서브타이틀 — Pretendard 22.01px/300 = 1.1553vw, lh=30.01/22.01=1.3636 */
.con4top2nd{
    margin-top: 1.3806%;
    margin-left: 6.2782%;
    align-self: flex-start;
    text-align: left;
}
.con4top2nd p{
    line-height: 1.3636;
}

/* 좌측+우측 메인 컨텐츠 */
.con4content{
    width: 100%;
    margin-top: -18%;
    margin-left: 3%;
    align-items: flex-start;
    justify-content: flex-start;
}

/* 좌측: 음식 이미지 — con04_2.png (789×603) → 789/1905 */
/* 디자인: 칼국수가 섹션 하단 걸쳐서 ~40% 잘림, absol로 section overflow:hidden에 의해 클리핑 */
.con4left{
    width: 41.4173%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    left: 6.2467%;
    bottom: -36%;
    z-index: 5;
}
.con4left img{
    width: 100%;
}

/* 우측: 카드 스와이퍼 — Figma card1 page_x=1020 → 1020/1905=53.5433% from left */
/* food is absol now, so right side uses margin-left from section edge */
.con4right{
    flex: 1;
    min-width: 0;
    margin-top: 0%;
    margin-left: 50.5433%;
    overflow: hidden;
    padding: 3% 3%;
    background: white;
}
.con4_slide{
    width: 100%;
    overflow: hidden;
}
/* 카드 이미지 651×651 → 651/1905 = 34.1732vw */
.con4_slide .swiper-slide{
    width: 34.1732vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.con4_slide .swiper-slide img{
    width: 100%;
    border-radius: 0;
    border: none;
}

/* 네비게이션 화살표 — 55/1905 = 2.8871vw, absol on con4content (100% width) */
/* Prev: page_x=992.5 → 992.5/1905 = 52.0997%, center at card left edge */
/* Next: page_x=1644.3 → 1644.3/1905 = 86.3071% */
.con4_arr_prev, .con4_arr_next{
    width: 2.8871%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}
.con4_arr_prev{
    left: 52.0997%;
    transform: translateY(-50%) scaleX(-1);
}
.con4_arr_next{
    left: 86.3071%;
}
.con4_arr_prev img, .con4_arr_next img{
    width: 100%;
}

/* 스팀(연기) 애니메이션 — 칼국수 위에서 올라오는 김 */
.con4steam{
    width: 25%;
    height: 40%;
    left: 10%;
    bottom: 15%;
    z-index: 6;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 80%, rgba(255,255,255,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 60% 70%, rgba(255,255,255,0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 45% 90%, rgba(255,255,255,0.05) 0%, transparent 50%);
    filter: blur(1.5vw);
    animation: con4steamrise 4s ease-in-out infinite;
}
.con4steam::before,
.con4steam::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background:
        radial-gradient(ellipse at 50% 85%, rgba(255,255,255,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 35% 75%, rgba(255,255,255,0.05) 0%, transparent 50%);
    filter: blur(1.2vw);
}
.con4steam::before{
    animation: con4steamrise 5s ease-in-out 1.2s infinite;
    transform: translateX(15%) scale(0.8);
}
.con4steam::after{
    animation: con4steamrise 3.5s ease-in-out 0.6s infinite;
    transform: translateX(-10%) scale(0.9);
}
@keyframes con4steamrise{
    0%  { opacity: 0; transform: translateY(0) scaleX(0.8); }
    30% { opacity: 1; }
    70% { opacity: 0.7; }
    100%{ opacity: 0; transform: translateY(-5vw) scaleX(1.2); }
}


/* ============ CON5 Section ============ */
.con5{
    padding: 5.7396% 0 6.7708%;
}
.con5 .zin{ z-index: 5; }

/* 배경: 크림 한지 텍스처 */
.con5bg{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.con5bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 타이틀: Figma 40px line1 / 60px bold line2 */
.con5top{
    margin-top: 0%;
    margin-left: 0%;
    text-align: center;
}
.con5top p:first-child{
    line-height: 1.625;
}
.con5top p:last-child{
    line-height: 1.167;
}

/* 서브 타이틀: Figma Pretendard 22px, gap 21.3px from title */
.con5top2nd{
    margin-top: 1.1094%;
    margin-left: 0%;
    text-align: center;
}
.con5top2nd p{
    line-height: 1.364;
}

/* 이미지 행: Figma row=1440px, gap=0, cards edge-to-edge */
.con5row{
    width: 75.0000%;
    margin-top: 0%;
    margin-left: 0%;
    gap: 0;
    justify-content: center;
    align-items: stretch;
}
/* 첫 번째 row: subtitle 바로 다음 (gap 56.6px) */
.con5top2nd + .con5row{
    margin-top: 2.9479%;
}

/* 이미지 패널 & 텍스트 카드: 각 50% */
.con5img, .con5card{
    width: 50.0000%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.con5img img, .con5card img{
    width: 100%;
}


/* ============ CON6 Section ============ */
.con6{
    background: #111;
    padding: 6.2500% 0 3.3333%;
}
.con6 .zin{ z-index: 5; }

/* 배경: 다크 텍스처 */
.con6bg{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.con6bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 장식: 비빔국수 좌측 */
.con6ab1{
    width: 33.2813%;
    left: -7.1354%;
    top: -8.8021%;
    z-index: 2;
    opacity: 0.85;
}
.con6ab1 img{
    width: 100%;
}

/* 장식: 보쌈 우측 */
.con6ab2{
    width: 49.8438%;
    right: -10%;
    bottom: -10%;
    z-index: 2;
    opacity: 0.7;
}
.con6ab2 img{
    width: 100%;
}

/* 서브타이틀 이미지 (con06_1.png) */
.con6top{
    width: 19.7917%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}
.con6top img{
    width: 100%;
}

/* 메인타이틀: Shilla(B) 65px, white, "비수기" = #eccaaf */
.con6top2nd{
    margin-top: 1.0417%;
    margin-left: 0%;
    text-align: center;
}
.con6top2nd p{
    line-height: 1.0;
    letter-spacing: -0.1693vw;
}

/* 설명: Pretendard Light 22px */
.con6top3rd{
    margin-top: 1.6927%;
    margin-left: 0%;
    text-align: center;
}
.con6top3rd p{
    letter-spacing: -0.0286vw;
}

/* 카드 3개 컨테이너 */
.con6cards{
    width: 65.9375%;
    margin-top: 3.2552%;
    margin-left: 0%;
    gap: 1.3021%;
    align-items: stretch;
}

/* 카드 공통 — 기본: 검정 배경 + 흰 테두리 */
.con6card{
    width: 32.0000%;
    background: #000;
    border: 0.0521vw solid rgba(255,255,255,0.35);
    border-radius: 0.7813vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2.6042vw 1.8229vw 1.8229vw;
    aspect-ratio: 405 / 417;
    cursor: pointer;
    transition: background 0.5s ease, border-color 0.5s ease;
}
.con6card:hover{
    background: var(--mc);
    border-color: rgba(255,255,255,0.08);
}
.con6card2:hover{
    background: var(--mc);
}

/* 카드 음식 이미지 (absol) — 기본: 보임, 호버시 약간 내려감 */
.con6cardimg{
    width: 86.6667%;
    bottom: 0;
    right: 0;
    z-index: 1;
    transition: transform 0.5s ease;
}
.con6cardimg img{
    width: 100%;
}
.con6card:hover .con6cardimg{
    transform: translateY(24%);
}

/* 카드1 음식: 칼국수 집게 */
.con6card1 .con6cardimg{
    width: 86.6667%;
    top: -1%;
    right: -5%;
    bottom: auto;
}

/* 카드2 음식: 칼국수 탑뷰 */
.con6card2 .con6cardimg{
    width: 79.2593%;
    bottom: -15%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
.con6card2:hover .con6cardimg{
    transform: translateX(-50%) translateY(24%);
}

/* 카드3 음식: 김치 */
.con6card3 .con6cardimg{
    width: 88.6420%;
    bottom: -10%;
    right: -5%;
}

/* 번호 배지 — 원형, 흰배경, 호버시 mc색 텍스트 */
.con6badge{
    width: 2.0833vw;
    height: 2.0833vw;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}
.con6badge span{
    letter-spacing: -0.0326vw;
    color: #000;
    text-transform: uppercase;
    transition: color 0.4s ease;
}
.con6card:hover .con6badge span{
    color: #5e0000;
}

/* 카드 제목 */
.con6cardtitle{
    letter-spacing: -0.0781vw;
    margin-top: 1.3021vw;
    z-index: 3;
    white-space: nowrap;
}

/* 카드 정보 텍스트 — 타이틀 바로 밑, 좌측정렬, 호버시 나타남 */
.con6cardinfo{
    z-index: 3;
    margin-top: 0.7813vw;
    opacity: 0;
    transform: translateY(0.3vw);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
    text-align: left;
}
.con6card:hover .con6cardinfo{
    opacity: 1;
    transform: translateY(0);
}
.con6cardinfo p{
    line-height: 1.526;
    letter-spacing: -0.0247vw;
    color: #fff;
    font-weight: 300;
}


/* ============ CON7 Section ============ */
.con7{
    background: #fff;
    padding: 5.2083% 0 5.7292%;
}
.con7 .zin{ z-index: 5; }

/* 모서리 장식 (4개, absol) — con07_6.png 125×123, scaleX/Y로 회전 */
.con7 [class^="con7ab"]{
    width: 6.5104%;
    z-index: 10;
}
.con7 [class^="con7ab"] img{ width: 100%; }
.con7ab1{ top: 3.5%; left: 2.6042%; }
.con7ab2{ top: 3.5%; right: 2.6042%; }
.con7ab3{ bottom: 3.5%; left: 2.6042%; }
.con7ab4{ bottom: 3.5%; right: 2.6042%; }

/* 타이틀 */
.con7top{
    margin-top: 0%;
    margin-left: 0%;
    text-align: center;
}
.con7top p:first-child{
    line-height: 1.75;
    letter-spacing: -0.1042vw;
}
.con7top p:last-child{
    line-height: 1.167;
    letter-spacing: -0.1563vw;
}

/* 4카드 그리드 컨테이너 */
.con7grid{
    width: 74.4792%;
    margin-top: 3.1250%;
    margin-left: 0%;
    gap: 0.5208%;
    align-items: stretch;
}

/* 카드 공통 — 기본: 흰bg, 호버: mcbg */
.con7card{
    width: 49.6503%;
    background: #fff;
    border: 1px solid var(--mc);
    border-radius: 0.7813vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.8229vw 2.0833vw 1.5625vw;
    aspect-ratio: 710 / 235;
    cursor: pointer;
    transition: background 0.5s ease, border-color 0.5s ease;
    margin: 0.5% 0;
}
/* 우측 카드: 우측정렬 */
.con7card2, .con7card4{
    align-items: flex-end;
    text-align: right;
}
/* 호버: 다크마룬bg */
.con7card:hover{
    background: #5e0000;
    border-color: rgba(94,0,0,0.3);
}

/* 배지 — absol, 카드 상단에 걸침, 기본 숨김 */
.con7badge{
    width: 2.6042vw;
    top: -1.3021vw;
    left: 2.0833vw;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.con7badge img{ width: 100%; }
.con7card2 .con7badge, .con7card4 .con7badge{
    left: auto;
    right: 2.0833vw;
}
.con7card:hover .con7badge{
    opacity: 1;
}

/* 카드 제목 — 기본: mc, 호버: 흰 */
.con7cardtitle{
    letter-spacing: -0.0781vw;
    margin-top: 0.7813vw;
    color: #5e0000;
    transition: color 0.4s ease;
    z-index: 3;
}
.con7card:hover .con7cardtitle{
    color: #fff;
}

/* 카드 설명 — 기본: 검정, 호버: 흰 */
.con7carddesc{
    margin-top: 1.5208vw;
    z-index: 3;
}
.con7carddesc p{
    line-height: 1.474;
    letter-spacing: -0.0247vw;
    color: #3B3329;
    font-weight: 400;
    transition: color 0.4s ease;
}
.con7card:hover .con7carddesc p{
    color: #fff;
}

/* 중앙 원형 이미지 (4카드 교차점) */
.con7circle{
    width: 14.8438%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    border-radius: 50%;
    overflow: hidden;
}
.con7circle > img{
    width: 100%;
    border-radius: 50%;
}


/* =========== CON8 파트A: 매출 ============ */
.con8a{
    background: #000;
    padding: 5.1563% 0 0;  /* 99/1920 — Figma: 섹션상단→타이틀 99px */
    overflow: hidden;
}
.con8a .zin{ z-index: 5; }

/* 다크배경 */
.con8abg{
    width: 100%;
    top: 0;
    left: 0;
    opacity: 1;
}
.con8abg img{ width: 100%; }

/* 장식 음식사진 — width는 JS calcSectionDiv() 자동계산 */
.con8aab1{
    width: 37.2178%;
    left: -16.0938%;
    top: 15%;
}
.con8aab1 img{ width: 100%; }
.con8aab2{
    width: 38.8976%;
    right: -17.8125%;
    top: 12%;
}
.con8aab2 img{ width: 100%; }

/* 타이틀 */
.con8atop{
    margin-top: 0%;
    margin-left: 0%;
    text-align: center;
}
.con8atop p:first-child{
    line-height: 1.925;   /* Figma: lh=77.03px / fs=40.017 */
    letter-spacing: -0.1042vw;  /* Figma: -2.0px */
    z-index: 2;
}
.con8atop p:nth-child(3){
    line-height: 1.185;   /* Figma: lh=77.03px / fs=65.028 */
    letter-spacing: -0.1693vw;  /* Figma: -3.25px */
    z-index: 2;
}
/* 붓글씨 밑줄 — 첫 줄 "칼국수로 월 1억?" 밑에 */
.con8aline{
    width: 34.7924%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 2.3vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.con8atop p{ z-index: 2; }
.con8aline img{ width: 100%; }

/* 카운터 둥근 박스 — Figma: x=400.3 y=8695 w=1000 h=190 */
.con8acounterbox{
    width: 52.0833%;
    margin-top: 2.4531%;  /* Figma: (8671-8623.9)=47px / 1920 — 배지 기준으로 조정 */
    margin-left: 0%;
    border: 0.0521vw solid rgba(255,255,255,0.2);  /* 옅은 가이드 border, SVG가 진하게 덮음 */
    border-radius: 0.5208vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.7396vw 1.0417vw 1.4688vw;  /* Figma: top=52.6px bottom=28.2px */
    box-sizing: border-box;
}

/* 월 최고 매출액 배지 — border 위에 걸침 */
.con8alabel{
    width: 22.1826%;  /* JS 계산값 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: -1.2500vw;  /* Figma: 배지y=8671, 박스y=8695 → 24px / 1920 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
}
.con8alabel img{ width: 100%; }

/* 숫자 카운터 flexrow */
.con8acounter{
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 0.4167vw;
}

/* 각 자릿수 박스 — Figma: w=80.1 h=109.2, fill=#fff, stroke=#5e0000 sw=1 */
.con8adigit{
    width: 4.1667vw;
    aspect-ratio: 80 / 109;
    overflow: hidden;
    border-radius: 0.3125vw;
    border: 0.0521vw solid #5e0000;
    box-sizing: border-box;
}
.con8adigit img{
    width: 100%;
    display: block;
}
/* 0~9 세로 스트립 */
.con8adigitroll{
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* transition 제거 — GSAP에서 직접 제어 */
}
.con8adigitroll span{
    width: 100%;
    aspect-ratio: 80 / 109;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Shilla_Culture(B)', serif;
    font-size: 4.1099vw;  /* Figma: 78.91px */
    font-weight: 700;
    color: #5e0000;
    letter-spacing: -0.2057vw;
}
/* 활성 상태 — JS가 inline transform 설정 */

/* 콤마 / 원 — Figma: 78.91px, #fff */
.con8acomma{
    letter-spacing: -0.2057vw;
    line-height: 1;
}
.con8awon{
    letter-spacing: -0.2057vw;
    line-height: 1;
    margin-left: 0.5208vw;
}

/* mc 얇은 라인 — 슬라이드 위 (Figma: h=1px, y=8955) */
.con8aline2{
    width: 100%;
    margin-top: 3.6458%;  /* 70/1920 — Figma: 카운터끝→윗라인 70px */
    border-top: 0.0521vw solid var(--mc);
}
/* 월별 매출 카드 슬라이드 영역 */
.con8aslide{
    width: 100%;
    margin-top: 0.5208%;
    padding: 1.6042% 0 1.625%;
    background: var(--mc);
}
/* mc 얇은 라인 — 슬라이드 아래 (Figma: h=1px, y=9276) */
.con8aline3{
    width: 100%;
    margin-top: 0.5208%;  /* 10/1920 — Figma: 슬라이드bg끝→아랫라인 10px */
    border-top: 0.0521vw solid var(--mc);
    margin-bottom: 0.5208%;
}

/* 슬라이드 이미지 */
.con8aslide .swiper-slide img{
    width: 100%;
    display: block;
    border-radius: 0.5208vw;
}


/* =========== CON9: 수익률 ============ */
.con9{
    background: #fff6ee;
    padding: 2.6247% 0; /* 50/1905 */
    overflow: hidden;
}
.con9box{
    width: 88.1890%; /* 1680/1905 */
    margin: 0 auto;
    background: #ffffff;
    border: 0.0525vw solid #5e0000; /* 1/1905 */
    border-radius: 1.5748vw; /* 30/1905 — vector path M30 */
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 6.7262%; /* 113/1680 — circles bottom → box bottom */
}
/* 타이틀 */
.con9top{
    margin-top: 5.4643%; /* 91.80/1680 */
    margin-left: 11.3113%; /* 190.03/1680 */
}
.con9top p:first-child{
    line-height: 1.8743; /* 74.97/40 */
    letter-spacing: -0.1050vw; /* -2/1905 */
}
.con9top p:nth-child(2){
    line-height: 1.1534; /* 74.97/65 */
    letter-spacing: -0.1706vw; /* -3.25/1905 */
    font-weight: 700;
}
/* 설명 */
.con9top2nd{
    margin-top: 1.2018%; /* 20.19/1680 */
    margin-left: 11.3429%; /* 190.56/1680 */
    line-height: 1.3636; /* 30/22 */
    letter-spacing: -0.0289vw; /* -0.55/1905 */
}
/* 원형 영역 */
.con9circles{
    width: 32.4867%; /* 550/1693 — JS측정: circle1+circle2 */
    margin-top: 2.7637%; /* 46.43/1680 */
    margin-left: 11.3690%; /* 191.00/1680 */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
/* Circle 1 - 투자금 회수기간 */
.con9circle1{
    width: 50.0000%; /* 275/550 — JS측정 */
    position: relative;
}
.con9circle1bg{
    width: 100.7874%; /* JS: 275nat / 275parent */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}
.con9circle1txt{
    width: 46.1790%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    top: 47%;
}
/* Circle 2 - 순수익 */
.con9circle2{
    width: 50.0000%; /* 275/550 — JS측정 */
    position: relative;
    margin-left: -4.1818%; /* 23px 겹침: 23/550 (parent=con9circles) */
}
.con9circle2bg{
    width: 100.7874%; /* JS: 275nat / 275parent */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}
.con9circle2txt{
    width: 60.8389%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    top: 46%;
}
/* 도넛 차트 */
.con9chart{
    width: 38.3934%; /* 650/1693 — JS측정: 도넛차트 */
    position: absolute;
    left: 50.8929%; /* (916.33-61.33)/1680 — 이미지 좌측경계 기준 */
    top: 2.3360vw; /* (9381.45-9337)/1905 — 박스top→이미지top */
}
.con9chartbg{
    width: 100.7874%; /* JS: 650nat / 650parent */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}
.con9charttxt{
    width: 13.6451%; /* JS: 88nat / 650parent */
    display: flex;
    justify-content: center;
    align-items: center;
    left: 62.4215%; /* (1322.07-916.33)/650 — 순이익 28.1% 위치 */
    top: 29.0320%; /* (9572.17-9381.45)/657 */
}

/* =========== CON10: 점심의 완성 ============ */
.con10{
    background: #5e0000;
    overflow: hidden;
}
.con10box{
    width: 94.4882%; /* 1800/1905 */
    margin: 0 auto;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding-bottom: 6.9556%; /* 125.20/1800 — 가격→박스하단 */
}
/* 타이틀 */
.con10top{
    margin-top: 9.2667%; /* 166.80/1800 */
    margin-left: 9.9483%; /* (179.40-0.33)/1800 */
}
.con10top p:first-child{
    line-height: 1.8743; /* 74.97/40 */
    letter-spacing: -0.1050vw; /* -2/1905 */
}
.con10top p:nth-child(2){
    line-height: 1.1534; /* 74.97/65 */
    letter-spacing: -0.1706vw; /* -3.25/1905 */
    font-weight: 700;
}
/* 설명 */
.con10top2nd{
    margin-top: 1.5106%; /* 27.19/1800 */
    margin-left: 9.9772%; /* (179.92-0.33)/1800 */
    line-height: 1.3636; /* 30/22 */
    letter-spacing: -0.0289vw; /* -0.55/1905 */
}
/* mc 구분선 + 아이콘 */
.con10line{
    margin-top: 3.1283%; /* 56.31/1800 */
    margin-left: 8.8889%; /* (160.33-0.33)/1800 */
    width: 41.1111%; /* 740/1800 */
    border-top: 0.0525vw solid #5e0000;
    position: relative;
}
.con10icon{
    width: 5.2279%; /* JS: 39/746 */
    display: flex;
    left: -5.2703%; /* -39/740 */
    top: 0;
    transform: translateY(-50%);
}
/* 배지 (HTML 텍스트 — GSAP 변경 대응) */
.con10badge{
    margin-top: 3.4444%; /* 62/1800 */
    margin-left: 11.2222%; /* (202.33-0.33)/1800 */
    background: #5e0000;
    color: #fff;
    border-radius: 1.3123vw; /* 25/1905 */
    padding: 0.5249vw 0.8399vw; /* ~10px 16px */
    font-size: 1.3123vw; /* 25/1905 */
    display: inline-block;
    white-space: nowrap;
}
.con10badge p{
    line-height: 1;
}
/* 가격 (HTML — GSAP 카운팅 대응) */
.con10price{
    margin-top: -0.4000%; /* -7.2/1800 — 배지와 살짝 겹침 */
    margin-left: 10.8739%; /* (196.06-0.33)/1800 */
    line-height: 1;
}
.con10price-num{
    font-weight: 700;
    letter-spacing: -0.3412vw; /* -6.5/1905 */
}
.con10price-won{
    font-weight: 700;
    letter-spacing: -0.1575vw; /* -3/1905 */
    color: #000;
}
/* 우측 사진 영역 */
.con10photos{
    width: 40.0000%; /* 720/1800 */
    left: 50.0000%; /* (900.33-0.33)/1800 */
    top: 6.8241vw; /* 130/1905 */
    position: absolute; /* absol — 자식 absol 포함하므로 containing block 역할도 겸함 */
}
.con10photo1{
    width: 99.8623%; /* JS: 725/726 */
    display: flex;
    position: relative;
}
.con10photo2, .con10photo3{
    width: 99.8623%; /* JS: 725/726 */
    display: flex;
    top: 0;
    left: 0;
    opacity: 0; /* GSAP 전환용 — 기본 숨김 */
}

/* =========== CON11: 업종변경 ============ */
.con11{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background: #000000;
}
.con11bg{
    width: 100%;
    top: 0;
    left: 0;
}
/* 배지 */
.con11badge{
    margin-top: 5.7743%; /* 110/1905 */
    width: 16.2730%; /* 310/1905 */
    display: flex;
}
/* 타이틀 */
.con11top{
    margin-top: 1.1863%; /* 22.6/1905 */
    line-height: 1.0;
    letter-spacing: -0.0854vw; /* -1.626/1905 */
    color: #ffffff;
}
.con11top p{ margin: 0; }
/* 설명 */
.con11top2nd{
    margin-top: 1.4856%; /* 28.3/1905 */
    line-height: 1.3636; /* 30/22 */
    letter-spacing: -0.0289vw;
    color: #ffffff;
    text-align: center;
}
.con11top2nd p{ margin: 0; }
/* 참고 */
.con11note{
    margin-top: 1.9265%; /* 36.7/1905 */
    color: #ffffff;
    align-self: flex-start;
    margin-left: 27.2756%; /* 519.6/1905 */
}
.con11note p{ margin: 0; }
/* 매장 before/after */
.con11store{
    margin-top: 0.5984%;
    width: 47.6641%;
    position: relative;
    z-index: 3;
    margin-bottom: -1.5%;
}
.con11before{
    display: flex;
}
.con11after{
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    transform-origin: right center;
    clip-path: inset(0 0 0 100%);
    animation: con11reveal 4s ease-in-out infinite;
}
@keyframes con11reveal{
    0%   { clip-path: inset(0 0 0 100%); opacity: 0; }
    15%  { clip-path: inset(0 0 0 0%); opacity: 1; }
    50%  { clip-path: inset(0 0 0 0%); opacity: 1; }
    65%  { clip-path: inset(0 100% 0 0); opacity: 0; }
    100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}
/* 화살표 (absol 우측) */
.con11arrow{
    left: 68.1365%; /* 1298/1905 */
    top: 10.4987vw; /* 200/1905 */
    width: 14.5931%; /* 278/1905 */
    z-index: 2;
}
.con11arrowbg{
    width: 100%;
    display: flex;
    animation: con11float 1.5s ease-in-out infinite;
}
@keyframes con11float{
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8%); }
    100% { transform: translateY(0); }
}
.con11arrowtxt{
    animation: con11stamp 2.5s ease-out infinite;
    left: 34.6498%; /* (1334.28-1238.3)/277 — 이미지 중심 맞춤 */
    top: 30.2016%; /* (12573.23-12450)/408 — 텍스트(90×85)→이미지(84×65) crop 보정 */
    width: 30.2158%; /* 84/278 */
    display: flex;
}
@keyframes con11stamp{
    0%   { transform: scale(1.6); opacity: 0; }
    15%  { transform: scale(1); opacity: 1; }
    70%  { transform: scale(1); opacity: 1; }
    85%  { opacity: 0; }
    100% { opacity: 0; }
}
/* 업종변경 전 (absol 좌측) */
.con11pre{
    left: 0;
    top: 34.5144vw; /* 657.5/1905 */
    z-index: 4; /* store(z:3)보다 앞 */
    width: 34.1207%; /* 650/1905 */
    display: flex;
    flex-direction: column;
}
.con11label{
    font-size: 1.8373vw; /* 35/1905 */
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    margin: 0;
}
.con11sublabel{
    line-height: 1;
    color: #ffffff;
    margin: 0;
    margin-top: 0.7743vw; /* 14.75/1905 */
}
.con11pre .con11label{
    margin-left: 27.6000%; /* 179.4/650 */
}
.con11pre .con11sublabel{
    margin-left: 27.6000%; /* 179.4/650 */
}
.con11bar-black{
    margin-top: 1.8740vw; /* 35.7/1905 */
    display: flex;
}
.con11preprice{
    margin-top: -4.8819vw; /* 가격바 위에 겹침 */
    margin-left: 18.8%;
    line-height: 1;
    color: #959595;
    white-space: nowrap;
}
.con11price-num{
}
.con11price-unit{
}
/* 업종변경 후 (absol 우측) */
.con11post{
    right: 0;
    top: 34.5144vw; /* 657.5/1905 */
    width: 34.1207%; /* 650/1905 */
    display: flex;
    flex-direction: column;
    z-index: 4; /* store(z:3)보다 앞 */
}
.con11post .con11label{
    margin-left: 50.6462%; /* (1584.2-1255)/650 — container left=1905-650=1255 */
}
.con11post .con11sublabel{
    margin-left: 62.0000%; /* (1658.0-1255)/650 */
}
.con11bar-red{
    margin-top: 1.8740vw; /* 35.7/1905 */
    display: flex;
}
.con11postprice{
    margin-top: -4.8819vw; /* 가격바 위에 겹침 */
    margin-left: 11.9692%; /* (1332.8-1255)/650 — container left=1255 */
    line-height: 1;
    color: #ffffff;
}
.con11footnote{
    color: #ffffff;
    margin: 0;
    margin-left: 53.0000%; /* "만 원" 끝(50.57%) + 여유 간격 */
    margin-top: -1.6850vw; /* Figma: price top+52.58px = footnote top. (84.7-52.58)/19.05 */
    position: relative; /* postprice(rltv)가 static 요소를 덮어쓰므로 동일 stacking 필요 */
    z-index: 1;
}

/* =========== CON12: 매장·배달·리테일 3박자 =========== */
.con12{
    overflow: visible; /* 카드가 CON13 위로 올라가야 하므로 visible */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-top: 3.8845%;
    padding-bottom: 1.5748%;
    background: #FBF2E6;
}
.con12top{
    text-align: center;
    line-height: 3.9386vw; /* 75.032/1905 */
}
.con12line1{
    letter-spacing: -0.1050vw; /* -2.0009/1905 */
    color: #000000;
    margin: 0;
}
.con12line2{
    letter-spacing: -0.1707vw; /* -3.2514/1905 */
    color: #000000;
    margin: 0;
}
.con12top2nd{
    margin-top: 1.0236vw; /* 19.5/1905 */
    line-height: 1.5754vw; /* 30.013/1905 */
    letter-spacing: -0.0578vw; /* -1.1005/1905 */
    color: #000000;
    text-align: center;
}
.con12top2nd p{ margin: 0; }
.con12cards{
    margin-top: 3.3386vw; /* 63.6/1905 */
    gap: 1.5748vw; /* 30/1905 */
    display: flex;
    position: relative; /* z-index 적용 위해 */
    z-index: 2; /* CON13 다크bg(z:1) 위에 카드 표시 */
}
.con12card{
    width: 24.1469%; /* 460/1905 */
    display: flex;
}

/* =========== CON13: 저가 커피 10잔보다 =========== */
.con13{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    z-index: 1; /* 다크bg가 CON12 크림bg 위에 (cards z:2보다 아래) */
    margin-top: -6.2992vw; /* -120/1905 — torn-edge 120px 겹침 (카드 round corner 커버) */
    padding-top: 12.0735vw; /* 230/1905 — dark gap 210px = pt230 + badge_mt70 + con12_pb30 - overlap120 */
    background-color: transparent; /* torn-edge(con13_10.png) alpha 보이려면 투명 필수 */
}
.con13bg{ width: 100% !important; top: 0; left: 0; display: flex; }
.con13cup1, .con13cup2 { transform-origin: bottom center; }
/* 장식 (absol) */
.con13glow{
    left: 16.2205vw; top: 21.7323vw; width: 40.2625%; opacity: 0.6;
    z-index: 1; /* bowl 위에 연기 */
    animation: con13smoke 6s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes con13smoke{
    0%  { opacity:0.3; transform:translateY(0) scale(1); filter:blur(0); }
    50% { opacity:0.6; transform:translateY(-1.5vw) scale(1.06); filter:blur(0.15vw); }
    100%{ opacity:0.3; transform:translateY(0) scale(1); filter:blur(0); }
}
.con13cup1{ left: 3.6745vw; top: 1.5vw; width: 9.4488%; opacity: 0.7; }
.con13cup2{ left: 12.9659vw; top: 10.4987vw; width: 7.4541%; opacity: 0.3; } /* top: -1.5748+12.0735 */
.con13bowl{ left: 22.4147vw; top: 34.1732vw; width: 32.1260%; } /* top: 22.0997+12.0735 */
/* 배지 (rltv) */
.con13badge{
    margin-top: 3.6745vw; /* 70/1905 */
    margin-left: 12.5984%;
    width: 25.1969%; /* 480/1905 */
    display: flex;
}
/* 타이틀 (rltv) */
.con13top{
    margin-top: 0.7769vw; /* badge→title gap: 14.8/1905 (title_y134.8 - badge_y70 - badge_h50) */
    margin-left: 12.5512%;
    color: #ffffff;
}
.con13line1{
    line-height: 3.6819vw; /* 70.14/1905 */
    letter-spacing: -0.1049vw;
    margin: 0;
}
.con13line2{
    line-height: 3.6819vw; /* 70.14/1905 */
    letter-spacing: -0.1578vw;
    margin: 0;
}
/* 설명 (rltv) */
.con13top2nd{
    margin-top: 1.1024vw; /* title→desc gap: 21/1905 (desc_y290.5 - title_y134.8 - title_h134.7) */
    margin-left: 12.5774%;
    line-height: 1.5780vw; /* 30.06/1905 */
    letter-spacing: -0.0263vw;
    color: #ffffff;
}
.con13top2nd p{ margin: 0; }
/* 화살표 (rltv flexrow) */
.con13arrows{
    margin-top: 3.4121vw; /* desc→arrows gap: ~65/1905 */
    margin-left: 12.5984%;
    gap: 0.5249vw; /* 10/1905 */
    margin-bottom: 14.6273vw;
    justify-content: flex-start; /* 화살표 왼쪽 정렬 */
}
.con13arrleft{
    width: 2.8871%; /* 55/1905 */
    display: flex;
    transform: rotate(180deg);
    cursor: pointer;
}
.con13arrright{
    width: 2.8871%; /* 55/1905 */
    display: flex;
    cursor: pointer;
    position: relative;
    z-index: 10;
}
/* Swiper 슬라이더 (absol) */
.con13slider{
    position: absolute; /* swiper position:relative 덮어쓰기 */
    left: 48.8976vw;
    top: 12.0735vw; /* 0+12.0735 (padding-top offset) */
    width: 51.1024%; /* (1905-931.5)/1905 */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%, black 3%, black 97%, rgba(0,0,0,0.6) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%, black 3%, black 97%, rgba(0,0,0,0.6) 100%);
}
.con13slider .swiper-slide{
    width: 54.4428%; /* 530/973.5 */
    display: flex;
    transition: opacity 0.8s ease, filter 0.8s ease;
}
.con13slider .swiper-slide img{
    width: 100%;
}

/* =========== CON14: 대표 메뉴 소개 =========== */
.con14{
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background-color: #ffffff;
    padding-top: 2.6247vw; /* 50/19.05 — 세로선 상단 확장분 */
    padding-bottom: 2.6772vw; /* 51/19.05 — 세로선 하단 확장분 */
}

/* 구분선 — 가로 */
.con14line{ width: 100%; height: 1px; background-color: #5e0000; }
.con14line2{ width: 100%; height: 1px; background-color: #5e0000; margin-top: 4.1732vw; }
/* 좌우 세로 구분선 */
.con14vleft{
    left: 2.6783%; /* 51.033/1905 */
    top: 0;
    width: 0;
    height: 100%; /* section 전체 높이 (padding 포함) */
    border-left: 1px solid #5e0000;
}
.con14vright{
    left: 98.1122%; /* 1869.033/1905 */
    top: 0;
    width: 0;
    height: 100%;
    border-left: 1px solid #5e0000;
}

/* 로고 배지 */
.con14badge{
    margin-top: 4.1995vw; /* 80/1905 */
    width: 12.9659%; /* 247/1905 */
    display: flex;
}

/* 타이틀 */
.con14top{
    margin-top: 0.9291vw; /* (15162.7-15145)/19.05 — 배지→타이틀 렌더 */
    text-align: center;
    font-weight: 700;
    letter-spacing: -0.1707vw; /* -3.251/19.05 */
    line-height: 1.15;
    color: #000000;
}
.con14top p{ margin: 0; }

/* 탭 바 */
.con14tabs{
    margin-top: 3.3753vw; /* (15287-15222.7)/19.05 — 타이틀→탭 */
    width: 34.4882%; /* 657/1905 */
    height: 2.8871vw; /* 55/1905 */
    display: flex;
    align-items: center;
    border: 1px solid #5e0000;
    border-radius: 1.4436vw; /* pill shape */
    overflow: hidden;
    background: #ffffff;
    z-index: 2; /* 콘텐츠 border 위에 표시 */
}
.con14tabindicator{
    width: 22%; /* flex:1 탭(25%)보다 살짝 작게 — 양옆 여백 */
    height: 76.3636%; /* 42/55 */
    top: 50%;
    left: 1.5%; /* (25-22)/2 — 첫 탭 중앙 정렬 */
    transform: translateY(-50%);
    border-radius: 1.1024vw; /* pill */
    transition: left 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 0;
}
.con14tab{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: pointer;
    position: relative;
    z-index: 1;
    font-weight: 300;
    color: #000000;
    transition: color 0.4s ease, font-weight 0.4s ease;
}
.con14tab.active{
    color: #ffffff;
    font-weight: 700;
    font-size: 1.0499vw; /* 20/1905 — active는 20px */
}

/* 콘텐츠 컨테이너 */
.con14content{
    margin-top: -1.4449vw; /* 음수: 탭바 하단 27.5px 겹침 */
    width: 75.5906%; /* 1440/1905 */
    border: 1px solid #5e0000;
    border-radius: 0.8698vw; /* 16.57/19.05 — Figma vector path */
    overflow: hidden;
    padding: 3.9370vw 5.2493vw; /* top: 75/1905, left/right: 100/1905 */
    background: #ffffff;
}

/* Swiper */
.con14slider{ width: 100%; overflow: hidden; }
.con14slider .swiper-slide{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.con14slider .swiper-slide img{
    border-radius: 0.8698vw;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.con14menuname{
    margin-top: 1.4173vw; /* ~27/1905 */
    color: #000000;
}

/* 화살표 — section 기준 absol */
.con14arrleft{
    left: 9.2113%; /* 12.5984% - 2.8871% - 0.5% */
    top: 29.9213vw; /* 27.2966 + 2.6247 (padding-top 보정) */
    transform: scaleX(-1);
    width: 2.8871%; /* 55/1905 */
    display: flex;
    cursor: pointer;
    z-index: 5;
}
.con14arrright{
    left: 88.6890%; /* 88.1890% + 0.5% */
    top: 29.9213vw; /* 27.2966 + 2.6247 (padding-top 보정) */
    width: 2.8871%; /* 55/1905 */
    display: flex;
    cursor: pointer;
    z-index: 5;
}

/* === CON15 === */
.con15{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.con15bg{ width: 100%; top: 0; left: 0; }
.con15bg img{ width: 100%; }
.con15badge{ left: 61.3123%; top: 13.6745vw; width: 10.3412%; z-index: 3; }
.con15top{
    margin-top: 5.7270vw;
    text-align: center;
    z-index: 1;
}
.con15line1{
    line-height: 1.2;
    letter-spacing: -0.0525vw;
    color: #ffffff;
}
.con15line2{
    margin-top: 0.5249vw;
    line-height: 1.2;
    letter-spacing: -0.0788vw;
    color: #ffffff;
}
.con15swiperwrap{
    margin-top: 3.0709vw;
    width: 100%;
    z-index: 1;
}
.con15slider{ overflow: visible; }
.con15slider .swiper-slide{ width: 35.0131vw; }
.con15slide{
    background: #5e0000;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border-radius: 1.0499vw;
}
.con15video{
    width: 96.9565%;
    margin-top: 1.4993%;
    aspect-ratio: 646.7 / 380;
    overflow: hidden;
    border-radius: 1.0499vw;
}
.con15video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.con15step{
    width: 18.7406%;
    margin-top: -2.7736%;
    z-index: 1;
    display: flex;
}
.con15step img{ width: 100%; }
.con15steptext{
    margin-top: 2.1739%;
    margin-bottom: 4.4228%;
    letter-spacing: -0.0656vw;
    color: #ffffff;
    text-align: center;
}
.con15arrleft{
    left: 31.4698%;
    top: 26.7402vw;
    width: 2.8871%;
    transform: scaleX(-1);
    display: flex;
    cursor: pointer;
    z-index: 5;
}
.con15arrright{
    left: 66.4882%;
    top: 26.7402vw;
    width: 2.8871%;
    display: flex;
    cursor: pointer;
    z-index: 5;
}
.con15bottom{
    margin-top: 2.1785vw;
    margin-bottom: 5.9843vw;
    text-align: center;
    line-height: 1.5748vw;
    letter-spacing: -0.0289vw;
    color: #ffffff;
    z-index: 1;
}

/* === CON16 === */
.con16{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: #fff6ee;
}

/* 별점 */
.con16stars{
    margin-top: 3.5vw;
    width: 6.9816%;
    display: flex;
    z-index: 1;
}

/* 타이틀 */
.con16top{
    margin-top: 1.8793vw;
    text-align: center;
    z-index: 1;
}
.con16line1{
    line-height: 1.2;
    letter-spacing: -0.0525vw;
    color: #000000;
}
.con16line2{
    margin-top: 0.5249vw;
    line-height: 1.2;
    letter-spacing: -0.0853vw;
    color: #000000;
}

/* 통계 좌 (고객 평점) */
.con16statleft{
    left: 27.1391%;
    top: 18.4252vw;
    z-index: 2;
}
.con16statright{
    left: 66.3517%;
    top: 18.4252vw;
    z-index: 2;
}
.con16pill{
    width: 7.3491vw;
    display: flex;
}
.con16num{
    font-size: 4.1995vw;
    color: #5e0000;
    line-height: 1;
    margin-top: 0.5vw;
}
.con16unit{
    color: #000000;
}

/* 핸드폰 프레임 (overlay) */
.con16phone{
    left: 40.1575%;
    top: 16.4304vw;
    width: 20.4724%;
    z-index: 3;
    pointer-events: none;
    display: flex;
}
.con16phone img{ width: 100%; }

/* 리뷰 스와이퍼 */
.con16swiperwrap{
    margin-top: 12.1575vw; /* gap to card y_rel=490: (490-258.4)/19.05 */
    width: 100%;
    height: 21.6273vw; /* fixed: inactive card height, prevents layout shift */
    z-index: 1;
}
.con16slider{
    overflow: visible;
}
.con16slider .swiper-slide{
    width: 16.9082vw; /* FIXED: never changes → no Swiper layout conflict */
    overflow: visible;
    transition: transform 0.8s ease;
}
/* slides BEFORE active → shift left */
.con16slider .swiper-slide:has(~ .swiper-slide-active){
    transform: translateX(-4.7585vw); /* creates 108px gap from active card edge */
}
/* active → shift up into phone */
.con16slider .swiper-slide-active{
    transform: translateY(-8.0315vw);
}
/* slides AFTER active → shift right */
.con16slider .swiper-slide-active ~ .swiper-slide{
    transform: translateX(4.7585vw);
}

/* 리뷰 카드 */
.con16card{
    width: 100% !important;
    height: 21.6273vw;
    overflow: hidden;
    border: 1px solid #5e0000;
    border-radius: 1.0499vw 1.0499vw 0 0;
    margin-left: 0;
    transition: height 0.8s ease, width 0.8s ease, margin-left 0.8s ease, border 0.8s ease, border-radius 0.8s ease;
}
.con16card img{
    width: 100%;
    height: auto;
    display: block;
}
.swiper-slide-active .con16card{
    width: 19.2152vw !important;
    height: 29.8609vw;
    margin-left: -0.2535vw;
    border: none;
    border-radius: 1.0499vw;
    margin-top: -2%;
}
.swiper-slide-active .con16card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* 화살표 */
.con16arrleft{
    left: 35.8740%;
    top: 30.4147vw;
    width: 2.8871%;
    transform: scaleX(-1);
    display: flex;
    cursor: pointer;
    z-index: 5;
}
.con16arrright{
    left: 62.0472%;
    top: 30.3937vw;
    width: 2.8871%;
    display: flex;
    cursor: pointer;
    z-index: 5;
}

/* 말풍선 (떠다니는 효과) */
.con16bubble1{
    left: 10.3937%;
    top: 4.5669vw;
    width: 23.1496%;
    opacity: 1.0;
    z-index: 2;
    display: flex;
    animation: con16float1 3s ease-in-out infinite;
}
.con16bubble2{
    left: 68.0315%;
    top: 3.8320vw;
    width: 25.0919%;
    opacity: 0.7;
    z-index: 2;
    display: flex;
    animation: con16float2 4s ease-in-out infinite 0.5s;
}
.con16bubble3{
    left: 7.7690%;
    top: 11.1286vw;
    width: 16.9554%;
    opacity: 0.5;
    z-index: 2;
    display: flex;
    animation: con16float3 3.5s ease-in-out infinite 1s;
}
@keyframes con16float1{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
}
@keyframes con16float2{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
}
@keyframes con16float3{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-12px); }
}

/* =========== CON17: 상권 추천 ============ */
.con17{
    background: #4e0000;
    overflow: hidden;
}
/* BG 이미지 */
.con17bg{
    width: 100% !important;
    height: 100%;
    top: 0; left: 0;
    z-index: 0;
}
.con17bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 매장사진 (absol, 원형 뒤, 스크린샷 기준 배치) z-index:1 */
.con17photo1,
.con17photo2,
.con17photo3,
.con17photo4,
.con17photo5{
    z-index: 1;
    display: flex;
}
/* con17_4: 350×236 우하 [1:667] x=1405.3 y=18083.7 w=349.8 h=236.1 */
/* left=(1465.0/1905)=76.9029%, top=(259.2/900)=28.8000%, width=(349.8/1905)=18.3622% */
.con17photo1{
    width: 18.3622%;
    left: 76.9029%;
    top: 28.8000%;
}
/* con17_5: 236×350 우상 [1:672] x=1636.0 y=17668.3 w=236.1 h=349.8 */
/* left=(1695.7/1905)=89.0131%, top=(-156.2/900)=-17.3556%, width=(236.1/1905)=12.3937% */
.con17photo2{
    width: 12.3937%;
    left: 89.0131%;
    top: -17.3556%;
}
/* con17_6: 194×288 좌하 [1:688] x=284.5 y=18275.7 w=193.5 h=287.5 */
/* left=(344.2/1905)=18.0682%, top=(451.2/900)=50.1333%, width=(193.5/1905)=10.1575% */
.con17photo3{
    width: 10.1575%;
    left: 18.0682%;
    top: 50.1333%;
}
/* con17_7: 236×350 좌중 [1:678] x=-0.8 y=17993.1 w=236.1 h=349.8 */
/* left=(58.9/1905)=3.0919%, top=(168.6/900)=18.7333%, width=(236.1/1905)=12.3937% */
.con17photo4{
    width: 12.3937%;
    left: 3.0919%;
    top: 18.7333%;
}
/* con17_8: 350×236 좌상 [1:683] x=198.1 y=17718.7 w=349.8 h=236.1 */
/* left=(257.8/1905)=13.5276%, top=(-105.8/900)=-11.7556%, width=(349.8/1905)=18.3622% */
.con17photo5{
    width: 18.3622%;
    left: 13.5276%;
    top: -11.7556%;
}
/* 타이틀 L1: Shilla M 40px, #fff, center */
.con17top{
    margin-top: 5.6640%;
    line-height: 1.876;
    letter-spacing: -0.1050vw;
    color: #ffffff;
    z-index: 2;
}
/* 타이틀 L2: Shilla B 65px, #fff, center */
.con17top2nd{
    line-height: 1.154;
    letter-spacing: -0.1706vw;
    color: #ffffff;
    z-index: 2;
}
/* 3 원형 카드 컨테이너 */
.con17circles{
    margin-top: 2.8136%;
    gap: 2.6142%;
    z-index: 2;
    justify-content: center;
}
/* 원형 카드 공통 */
.con17circle{
    width: 18.3832%;
    border-radius: 50%;
    overflow: visible;
    flex-shrink: 0;
}
.con17circle img{
    width: 100%;
    display: block;
    border-radius: 50%;
}
/* 음파 pulse 공통 */
.con17circle::before,
.con17circle::after{
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35);
    transform: translate(-50%,-50%) scale(1);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}
.con17circle::before{ animation: con17pulse 3.5s ease-out infinite; }
.con17circle::after{ animation: con17pulse 3.5s ease-out 1s infinite; }
.con17circle1::before{ animation-delay: 0s; }
.con17circle1::after{ animation-delay: 1s; }
.con17circle2::before{ animation-delay: 0.6s; }
.con17circle2::after{ animation-delay: 1.6s; }
.con17circle3::before{ animation-delay: 1.2s; }
.con17circle3::after{ animation-delay: 2.2s; }
@keyframes con17pulse{
    0%   { transform: translate(-50%,-50%) scale(1);   opacity: 0.5; }
    70%  { transform: translate(-50%,-50%) scale(1.45); opacity: 0; }
    100% { transform: translate(-50%,-50%) scale(1.45); opacity: 0; }
}
/* 하단 텍스트: Pretendard L 22px, #fff, center */
.con17bottom{
    margin-top: 2.6929%;
    margin-bottom: 6.6142%;
    line-height: 1.363;
    letter-spacing: -0.0289vw;
    text-align: center;
    color: #ffffff;
    z-index: 2;
}

/* =========== CON18: 인테리어 (회전율) ============ */
.con18{
    background: #ffffff;
    overflow: hidden;
}
/* 장식: 칼국수 볼 (badge를 포함하는 컨테이너) */
.con18bowl{
    width: 33.5958%;
    left: 17.3228%;
    top: 47.1111%;
    z-index: 2;
    display: flex;
}
.con18bowl > img{ border-radius: 50%; }
/* 마룬 원형 뱃지 — bowl 기준 상대좌표 */
/* Figma: badge(223.3,19140,228,233) bowl(270.3,19149,640,638) */
/* left=(223.3-270.3)/640=-7.3438%, top=(19140-19149)/638=-1.4107%, w=228/640=35.6250% */
.con18badge{
    width: 35.6250%;
    left: -7.3438%;
    top: -1.4107%;
    z-index: 2;
    display: flex;
}
/* 타이틀 Line1: Shilla Medium 40px */
.con18top{
    margin-top: 5.6483%;
    margin-left: 9.4016%;
    align-self: flex-start;
    line-height: 1.874;
    color: #000;
    z-index: 1;
}
/* 타이틀 Line2: Shilla Bold 65px */
.con18top2nd{
    margin-left: 9.4016%;
    align-self: flex-start;
    line-height: 1.1534;
    letter-spacing: -0.1706vw;
    color: #000;
    z-index: 1;
}
/* 서브타이틀: Pretendard Light 22px */
.con18top3rd{
    margin-top: 1.4278%;
    margin-left: 9.4278%;
    margin-bottom: 29.4803%;
    align-self: flex-start;
    line-height: 1.363;
    color: #000;
    z-index: 1;
}
/* 카드 컬럼 공통 */
.con18col1,
.con18col2{
    width: 22.5722%;
    z-index: 3;
    overflow: hidden;
}
.con18col1{
    left: 48.5564%;
    top: -13.3858vw;
    height: calc(100% + 13.3858vw);
}
.con18col2{
    left: 71.9160%;
    top: -1.4698vw;
    height: calc(100% + 1.4698vw);
}
/* 무한 롤링 래퍼 */
.con18roll{
    display: flex;
    flex-direction: column;
    gap: 0.7874vw;
}
.con18roll1{
    animation: con18scrollUp 16s linear infinite;
}
.con18roll2{
    animation: con18scrollDown 12s linear infinite;
}
@keyframes con18scrollUp{
    0%{ transform: translateY(0); }
    100%{ transform: translateY(-50%); }
}
@keyframes con18scrollDown{
    0%{ transform: translateY(-50%); }
    100%{ transform: translateY(0); }
}
.con18card{
    width: 100%;
    aspect-ratio: 430 / 335;
    overflow: hidden;
    border: 1px solid #222222;
    box-sizing: border-box;
    background: #222222;
    flex-shrink: 0;
}
.con18card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================== CON19: 기획 중심의 본사 ==================== */
.con19{
    background: #000000;
    overflow: hidden;
}
/* 배경 이미지 */
.con19bg{
    width: 100% !important;
}
/* 연기 오버레이 — Figma: x=215.3 y=19489 w=1313 h=1614, opacity=0.60 */
/* page_x=(215.3+59.7)=275.0, left=275/1905=14.4357%, top=(19489-19575.1)/950=-9.0632% */
.con19smoke{
    width: 68.9239%;
    left: 14.4357%;
    top: -9.0632%;
    opacity: 0.6;
    z-index: 1;
    display: flex;
    animation: con19smoke 8s ease-in-out infinite;
}
@keyframes con19smoke{
    0%{   transform: translateY(0) scale(1);     opacity: 0.7; }
    25%{  transform: translateY(-6%) scale(1.08); opacity: 0.4; }
    50%{  transform: translateY(-3%) scale(1.12); opacity: 0.6; }
    75%{  transform: translateY(-8%) scale(1.05); opacity: 0.35; }
    100%{ transform: translateY(0) scale(1);     opacity: 0.7; }
}
/* 타이틀 L1: Shilla Medium 40px, #fff */
/* margin-top=129px/1905=6.7717%, margin-left=248.9/1905=13.0656% */
.con19top{
    margin-top: 6.7717%;
    margin-left: 13.0656%;
    align-self: flex-start;
    line-height: 1.874;
    letter-spacing: -0.1050vw;
    color: #ffffff;
    z-index: 2;
}
/* 타이틀 L2: Shilla Bold 65px, #fff, "성장"=#eccaaf */
.con19top2nd{
    margin-left: 13.0656%;
    align-self: flex-start;
    line-height: 1.1534;
    letter-spacing: -0.1050vw;
    color: #ffffff;
    z-index: 2;
}
/* 서브타이틀: Pretendard Light 22px, #fff */
/* gap=31.4px/1905=1.6483%, margin-bottom=623.7px/1905=32.7349% */
.con19sub{
    margin-top: 1.6483%;
    margin-left: 13.0919%;
    margin-bottom: 32.7349%;
    align-self: flex-start;
    line-height: 1.0;
    letter-spacing: -0.0315vw;
    color: #ffffff;
    z-index: 2;
}
/* 우측 본문: Pretendard Light 20px */
/* page_x=(1069.3+59.7)=1129.0, left=1129/1905=59.2651% */
/* top=(19715.4-19575.1)/950=14.7684% */
.con19body{
    left: 59.2651%;
    top: 14.7684%;
    width: 30.0787%;
    line-height: 1.5993;
    letter-spacing: -0.0262vw;
    color: #ffffff;
    z-index: 2;
}
.con19body p + p{
    margin-top: 1.3123vw;
}

/* ============ CON20: 합리적인 창업비용 ============ */
.con20{
    background: #ffffff;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
    margin-top: -1%;
}
/* 모서리 장식: con20_4.png 125×123 = 6.5617% */
.con20corner1{ width: 6.5617%; top: 1.5%; left: 1.5%; z-index: 3; display: flex; }
.con20corner2{ width: 6.5617%; top: 1.5%; right: 1.5%; z-index: 3; display: flex; }
.con20corner3{ width: 6.5617%; bottom: 1.5%; left: 1.5%; z-index: 3; display: flex; }
.con20corner4{ width: 6.5617%; bottom: 1.5%; right: 1.5%; z-index: 3; display: flex; }
/* 뱃지 이미지: con20_1.png 270×55 = 14.1732% */
.con20costtitle{
    width: 14.1732%;
    margin-top: 5.2493%;
    display: flex;
    justify-content: center;
    z-index: 2;
}
/* 메인 타이틀: "투명하게 공개합니다." Shilla B ~65px center */
.con20maintitle{
    margin-top: 1.0499%;
    z-index: 2;
    text-align: center;
    line-height: 1.2;
    letter-spacing: -0.1706vw;
    color: #000000;
}
.con20maintitle p{ margin: 0; }
/* 비용표 컨테이너 */
.con20costs{
    margin-top: 2.6247%;
    margin-bottom: 5.2493%;
    width: 78.7402%;
    justify-content: space-between;
    z-index: 2;
}
/* 각 테이블: 709 / (1905*0.787402) = 47.2667% of costs container */
.con20cost1, .con20cost2{
    width: 47.2667%;
    display: flex;
}
/* 합계 라벨 (absol inside cost tables) */
/* con20_2_2.png 111×27 → 111/709=15.6558% of table */
/* con20_3_2.png 101×27 → 101/709=14.2454% of table */
/* 합계 row: y=678~752 of 753px → top=92.4% */
.con20label1{
    width: 15.6558%; z-index: 3; display: flex;
    top: 91.4%; left: 42%;
}
.con20label2{
    width: 14.2454%; z-index: 3; display: flex;
    top: 91.7%; left: 43%;
}
/* 브러시 뱃지: 202/709=28.4908% of table */
/* PIL: 인테리어 y=349(46.3%), 주방설비 y=443(58.8%), 주방집기 y=490(65.1%), 의탁자 y=537(71.3%) */
.con20brush1{ width: 28.4908%; top: 46.3%; right: 2%; z-index: 3; display: flex; }
.con20brush2{ width: 28.4908%; top: 58.8%; right: 2%; z-index: 3; display: flex; }
.con20brush3{ width: 28.4908%; top: 65.1%; right: 2%; z-index: 3; display: flex; }
.con20brush4{ width: 28.4908%; top: 71.3%; right: 2%; z-index: 3; display: flex; }

/* ============ CON21: 완전한 창업 프로세스 ============ */
/* Figma 1:253, bg=#fff6ee, section y=21727.4, h≈1484 */
.con21{
    background: #fff6ee;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
}
/* 배경: 한지텍스처 con21_12.jpg, op=0.35 */
.con21bg{
    width: 100% !important;
    top: 0; left: 0;
    z-index: 1;
    opacity: 0.35;
}
.con21bg img{ width: 100%; height: 100%; object-fit: cover; }
/* 타이틀 블록 */
/* mt from section top: 108.3/1905 = 5.6850% */
.con21top{
    margin-top: 5.6850%;
    z-index: 2;
    text-align: center;
}
/* Line1: Shilla M 40px w500 #000, lh=75px */
.con21topline1{
    margin: 0;
    line-height: 1.8;
    letter-spacing: -0.1051vw;
    color: #000000;
}
/* Line2: Shilla B 65px w700, lh=75px */
.con21topline2{
    margin: 0;
    line-height: 1.1538;
    letter-spacing: -0.1706vw;
    color: #000000;
}
/* 서브타이틀: Pretendard 22px w300, center */
/* gap: 19.3/1905 = 1.0131% */
.con21sub{
    margin-top: 1.0131%;
    z-index: 2;
    text-align: center;
    line-height: 1.2727;
    letter-spacing: -0.0289vw;
    color: #000000;
}
.con21sub p{ margin: 0; }
/* 카드 그리드: width=1280/1905=67.1916%, centered */
/* gap subtitle→cards: 56.5/1905 = 2.9659% */
.con21grid{
    margin-top: 2.9659%;
    margin-bottom: 4.1995%;
    width: 67.1916%;
    z-index: 2;
}
/* 각 행: flexrow + wrap, space-between */
.con21row{
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
/* row gap: 15/1905 = 0.7874% */
.con21row ~ .con21row{
    margin-top: 0.7874%;
}
/* 카드 이미지: 600/1280 = 46.8750% */
.con21card{
    width: 46.8750%;
    display: flex;
}
/* STEP 10 카드: 610/1280 = 47.6563% */
.con21cardlast{
    width: 47.6563%;
    display: flex;
}
/* 화살표: con21_11.png 25×20 → 25/1280=1.9531% of grid */
/* arrow page_x=948, container left=320, container_w=1280 */
/* (948-320)/1280 = 49.0625% */
.con21arrow{
    width: 1.9531%;
    left: 49.0625%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
}

/* ============ CON22: 한 그릇, 세 사람의 상생 ============ */
/* Figma 1:193, bg=#000, h=900 */
.con22{
    background: #000000;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
}
/* 배경: con22_3.jpg (매장 사진, 다크 오버레이) */
.con22bg{
    width: 100% !important;
    top: 0; left: 0;
    z-index: 1;
    opacity: 1;
}
.con22bg img{ width: 100%; height: 100%; object-fit: cover; }
/* 타이틀 블록 */
/* mt from section top: 109/1905 = 5.7218% */
.con22top{
    margin-top: 5.7218%;
    z-index: 2;
    text-align: center;
}
/* Line1: Shilla M 40px w500 #fff */
.con22topline1{
    margin: 0;
    line-height: 1.8;
    letter-spacing: -0.1051vw;
    color: #ffffff;
}
/* Line2: Shilla B 65px w700 #fff, "시작"=#eccaaf */
.con22topline2{
    margin: 0;
    line-height: 1.1538;
    letter-spacing: -0.1706vw;
    color: #ffffff;
}
/* 카드 컨테이너: flexrow, centered */
/* gap title→cards: 59.7/1905 = 3.1339% */
/* width: 1440/1905 = 75.5906%, gap=20/1440=1.3889% */
.con22cards{
    margin-top: 3.1339%;
    margin-bottom: 6.9501%;
    width: 75.5906%;
    justify-content: space-between;
    z-index: 2;
}
/* 개별 카드 이미지: 710/1440 = 49.3056% */
.con22card1, .con22card2{
    width: 49.3056%;
    display: flex;
}


/* ============ CON23: 매장 안내 + 창업 문의 ============ */
.con23{
    background: #5e0000;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
}
.con23frame{
    width: 94.4882%; /* 1800/1905 */
    margin-top: 3.1496%; /* 60/1905 */
    margin-bottom: 3.1496%; /* 60/1905 */
    z-index: 2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 흰 프레임 배경 (con23_9.png, rounded corners) */
.con23framebg{
    width: 100% !important;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.con23framebg img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
/* 타이틀: Shilla B 60px = 3.1496vw */
.con23title{
    margin-top: 5.2333%; /* 94.2/1800 */
    text-align: center;
    line-height: 1.2;
    letter-spacing: -0.1575vw;
    color: #000000;
    z-index: 2;
}
/* 부제: Pretendard Light 22px = 1.1549vw */
.con23subtitle{
    margin-top: 1.2389%; /* 22.3/1800 */
    text-align: center;
    line-height: 1.3;
    color: #000000;
    z-index: 2;
}
/* 지도 플레이스홀더 (검색바+지도 영역) */
.con23map{
    width: 80%;
    margin-top: 2.7833%;
    padding-bottom: 0;
    border-radius: 1.5748vw;
    z-index: 2;
}
/* ── 창업 문의 다크박스 (1440×650, radius=30) ── */
.con23inquiry{
    width: 80%; /* 1440/1800 */
    margin-top: -2%;
    margin-bottom: 5.5556%; /* 100/1800 */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #5e0000;
    border-radius: 1.5748vw; /* 30/1905 */
    overflow: hidden;
}
/* 다크 배경 (con23_8.png 텍스처) */
.con23inqbg{
    width: 100% !important;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.con23inqbg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 좌측: 타이틀 L1 — Shilla M 40.09px, white */
.con23inqt1{
    margin: 0;
    margin-top: 9.5486%; /* 137.5/1440 (138.5 - 1px border) */
    margin-left: 5.4583%; /* 78.6/1440 */
    line-height: 1.8; /* 72.15/40.09 */
    letter-spacing: -0.1052vw;
    color: #ffffff;
    z-index: 2;
}
/* 좌측: 타이틀 L2 — Shilla B 65.03px, 동반자=#eccaaf 나머지=#fff */
.con23inqt2{
    margin: 0;
    margin-top: -0.4583%; /* -6.6/1440 half-leading 보정 */
    margin-left: 5.4583%; /* 78.6/1440 */
    line-height: 1.1096; /* 72.15/65.03 */
    letter-spacing: -0.1706vw;
    color: #ffffff;
    z-index: 2;
}
/* 좌측: 부제 — Pretendard Light 22px, white */
.con23inqsub{
    margin: 0;
    margin-top: 1.2292%; /* 17.7/1440 */
    margin-left: 5.6597%; /* 81.5/1440 */
    line-height: 1.3636; /* 30.01/22.01 */
    letter-spacing: -0.0289vw;
    color: #ffffff;
    z-index: 2;
}
/* 좌측: 전화번호 뱃지 (con23_7.png, 280×70) */
.con23phone{
    width: 19.4444%; /* 280/1440 */
    margin-top: 4.5903%; /* 66.1/1440 */
    margin-left: 6.1111%; /* 88/1440 */
    margin-bottom: 11.0417%; /* 159/1440 → content높이=648+2border=650 */
    display: flex;
    z-index: 2;
}
/* ── 우측: 폼 (absol, #fff op=0.70, stroke=#9b9b9b) ── */
.con23form{
    width: 45.8333%;
    right: 4%;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255,0.70);
    border: 1px solid #9b9b9b;
    z-index: 3;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 2.6772vw 2.6247vw;
}
/* 입력 필드 래퍼 (560×60, radius=10, stroke=#5e0000) */
.con23field{
    width: 100%;
    margin-bottom: 0.7874vw; /* 15/1905 gap */
}
.con23field input{
    width: 100%;
    border: 1px solid #5e0000;
    border-radius: 0.5249vw; /* 10/1905 */
    background: #ffffff;
    padding: 0.8924vw 0 0.8924vw 2.2507vw; /* 17/1905 top/bottom, 43/1905 left */
    font-family: 'Inter', sans-serif;
    font-size: 1.0499vw; /* 20/1905 */
    font-weight: 400;
    line-height: 1.0;
    color: #000000;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.con23field input::placeholder{ color: #000000; }
/* 별표 (*) — absol, mc색(#5e0000) */
.con23ast{
    position: absolute;
    left: 1.7848vw; /* 34/1905 from input left */
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Inter', sans-serif;
    font-size: 1.0499vw; /* 20/1905 */
    font-weight: 400;
    color: #4d311c;
    z-index: 2;
    pointer-events: none;
}
.con23ast.mc{ color: #5e0000; }
/* textarea (560×120, radius=10) */
.con23fieldtxt{
    width: 100%;
    margin-bottom: 0.6824vw; /* 13/1905 gap to privacy */
    display: flex;
}
.con23fieldtxt textarea{
    width: 100%;
    border: 1px solid #5e0000;
    border-radius: 0.5249vw; /* 10/1905 */
    background: #ffffff;
    padding: 0.9974vw 0 0.9974vw 2.2507vw;
    font-family: 'Inter', sans-serif;
    font-size: 1.0499vw;
    font-weight: 400;
    line-height: 1.2;
    color: #000000;
    outline: none;
    resize: none;
    box-sizing: border-box;
    min-height: 6.2992vw; /* 120/1905 */
}
.con23fieldtxt textarea::placeholder{ color: #000000; }
/* 개인정보 동의 — Pretendard Light 18px */
.con23privacy{
    margin: 0;
    line-height: 1.0;
    color: #000000;
    margin-bottom: 1.5748vw; /* 30/1905 gap to button */
    display: flex;
    align-items: center;
    gap: 0.3150vw; /* 6/1905 */
    cursor: pointer;
}
.con23check{
    width: 0.7874vw; /* 15/1905 */
    height: 0.7874vw;
    accent-color: #5e0000;
    cursor: pointer;
    margin: 0;
}
/* 창업 문의하기 버튼 — 560×65, bg=#5e0000, radius=32.5 */
.con23btn{
    width: 100%;
    background: #5e0000;
    color: #ffffff;
    border: 1px solid #000000;
    border-radius: 1.7060vw; /* 32.5/1905 */
    padding: 0.7874vw 0; /* 15/1905 → 33+30+2=65 */
    line-height: 1.0;
    cursor: pointer;
}

/* =========== Breakpoints ============ */
@media screen and (max-width: 1023px) {
    .pc        { display: none; }
    .tablet    { display: flex; }
    .pc-mobile { display: none; }
    .mobile-pc { display: flex; }
}
@media screen and (max-width: 599px) {
    .tablet { display: none; }
    .mobile { display: flex; }
    .mobile-pc { display: flex !important; }
    .pc-mobile{
        display: none !important;
    }

    /* ===== MAIN 섹션 모바일 ===== */
    .main{
        padding-top: 17vw; /* 헤더 15vw + 여백 */
        padding-bottom: 0;
        overflow: visible;
    }
    /* 비디오 배경: 1개만, 전체 커버 */
    .mainbg{
        flex-direction: column;
    }
    .mainbg video{
        width: 100%;
        height: 100%;
        opacity: 0.4;
    }
    /* 배지 */
    .main_top{
        width: 85%;
        margin-top: 5%;
    }
    /* 타이틀 1줄 */
    .main_top_2nd{
        margin-top: 7%;
    }
    /* 타이틀 2줄 */
    .main_top_3rd{
        margin-top: 1.5%;
    }
    /* 서브 텍스트 */
    .main_top_4th{
        margin-top: 6%;
    }
    .main_top_4th p{
        line-height: 2;
    }
    /* 칼국수 그릇 */
    .mainab{
        width: 60% !important;
        max-width: 60%;
        transform: translate(-50%, 38%);
    }
    /* 매출 슬라이더 */
    .main_top_5th{
        margin-top: 10%;
        padding: 3vw 0;
    }
    .main_line_gap{
        height: 0.2vw;
    }
    .main_line_bar{
        height: 0.7vw;
    }
    .main_line_top{
        top: 0.8vw;
    }
    .main_line_bottom{
        bottom: 0.8vw;
    }

    /* CON21: 모바일 1열 나열 */
    .con21grid{ width: 90%; }
    .con21card, .con21cardlast{ width: 100%; }
    .con21arrow{ display: none !important; }

    .main_top {
    width: 85%;
    margin-top: 15%;
}
.mainab {
    width: 80% !important;
    max-width: 81%;
    transform: unset;
    left: unset;
    margin-top: 8%;
    display: flex;
    margin-bottom: -66%;
    position: relative;
}

.main_top_5th{
        z-index: 11 !important;
}
.main_line_top {
    top: -2.2vw;
}
.main_top_5th {
    width: 100%;
    margin-top: 1%;
    padding: 1.5vw 0;
    position: relative;
    margin-bottom: 7.5%;
}
.main_line_bottom {
    bottom: -2.2vw;
}

    /* ===== CON1 섹션 모바일 ===== */
    .con1{
        align-items: center;
        justify-content: center;
    }
    .con1bg{
        width: 280% !important;
        opacity: 1;
    }
    /* 셰프 사진: 모바일에서 숨김 */
    .con1ab{
        display: none !important;
    }
    /* 배지: 가운데, 첫 요소 margin-top:15% 룰 */
    .con1badge{
        width: 22% !important;
        margin-left: 0;
        margin-top: 15%;
        align-self: center;
        z-index: 2;
    }
    /* 타이틀: 가운데, 2줄 ("양평에서 시작된" / "한 그릇의 기록") */
    .con1top{
        width: 90%;
        margin-left: 0;
        margin-top: 4%;
        align-self: center;
        white-space: normal;
        line-height: 1.3;
        z-index: 2;
    }
    /* 붓글씨: "한 그릇의 기록" 하단에 걸치게 */
    .con1brushimg{
        width: 55% !important;
        left: 50%;
        transform: translateX(-50%);
        bottom: -5%;
    }
    /* 모바일 전용 br: inline으로 정상 줄바꿈 */
    br.mobile-pc{
        display: inline !important;
    }
    /* 본문: 가운데, 넓게, br 숨김 (자연 줄바꿈) */
    .con1body{
        width: 85%;
        margin-left: 0;
        margin-top: 6%;
        margin-bottom: 12%;
        align-self: center;
        z-index: 2;
    }
    .con1body br{
        display: none;
    }
    .con1body p.con1gray{
        margin-top: 1.2em;
    }

    /* ===== 모바일 공통: .tc 그레이 → 블랙 ===== */
    .tc{ color: #000000 !important; }

    /* ===== CON2 모바일 ===== */
    .con2{
        align-items: center;
        justify-content: center;
    }
    .con2bg{
        width: 100% !important;
        opacity: 0.25;
    }
    /* 외곽 테두리: 모바일 좌우 균등 */
    .con2border{
        left: 3%;
        right: 3%;
        top: 2%;
        bottom: 2%;
    }
    /* 타이틀: 가운데, 순서 위로 (order:-1) */
    .con2top{
        order: -1;
        margin-top: 15%;
        margin-left: 0;
        width: 90%;
        align-self: center;
        text-align: center;
        white-space: normal;
        z-index: 2;
    }
    .con2top p:last-child{
        margin-top: 0.5vw;
    }
    /* 우측 설명 → 타이틀 아래로 */
    .con2ab{
        position: relative;
        top: auto;
        right: auto;
        width: 85%;
        margin-top: 4%;
        margin-left: 0;
        align-self: center;
        text-align: center;
        z-index: 2;
    }
    .con2ab br{
        display: none;
    }
    /* 차트 영역: 넓게 + 키우기 */
    .con2top2nd{
        width: 95%;
        margin-left: 0;
        margin-top: 5%;
        margin-bottom: 12%;
        align-self: center;
        z-index: 2;
    }
    .con2chartarea{
        width: 100%;
    }
    /* 바 개별 폭 확대 */
    .con2g1b1, .con2g1b2, .con2g2b1, .con2g2b2, .con2g3b1, .con2g3b2{
        width: 10vw;
    }
    .con2g1bars, .con2g2bars, .con2g3bars{
        gap: 1.5vw;
    }
    /* 바 높이 — 0~100 스케일, max(100)=40vw 기준 비례 */
    .con2g1b1 .con2barfill{ height: 39.2vw; }
    .con2g1b2 .con2barfill{ height: 40vw; }
    .con2g2b1 .con2barfill{ height: 11.2vw; }
    .con2g2b2 .con2barfill{ height: 15.2vw; }
    .con2g3b1 .con2barfill{ height: 6.4vw; }
    .con2g3b2 .con2barfill{ height: 10.8vw; }
    /* 라벨 크게 */
    .con2g1label, .con2g2label, .con2g3label{
        transform: translate(-50%, 120%) scale(1.3);
    }
    /* 범례 크게 */
    .con2legend{
        transform: scale(1.3);
        transform-origin: right top;
    }

    /* ===== CON3 모바일 ===== */
    .con3{
        align-items: center;
        padding: 0 0 20%;
    }
    /* 세로선 숨김 */
    .con3line{
        display: none !important;
    }
    /* 음식 사진 absol 숨김 */
    .con3ab1, .con3ab2, .con3ab3,
    .con3ab5, .con3ab6, .con3ab7, .con3ab8{
        display: none !important;
    }
    /* 메인 칼국수만 유지, 넓게 */
    .con3ab4{
        width: 80%;
        left: 10%;
        bottom: -5%;
    }
    /* 그릇 아이콘 */
    .con3top{
        margin-top: 15%;
        margin-left: 0;
        align-self: center;
        width: 6%;
        z-index: 2;
    }
    /* 타이틀 1줄 */
    .con3top2nd{
        margin-top: 4%;
        margin-left: 0;
        align-self: center;
        z-index: 2;
    }
    /* 타이틀 2줄 */
    .con3top3rd{
        margin-top: 2%;
        margin-left: 0;
        align-self: center;
        z-index: 2;
    }
    /* 설명 텍스트 */
    .con3top4th{
        width: 85%;
        margin-top: 3%;
        margin-left: 0;
        align-self: center;
        z-index: 2;
    }
    .con3top4th br{
        display: none;
    }
    /* 카운터 영역: 크게 */
    .con3top5th{
        width: 95%;
        margin-top: 5%;
        margin-left: 0;
        align-self: center;
        z-index: 2;
    }
    /* 라벨 ("9504양평칼국수 누적 판매 그릇 수") 크게 */
    .con3counterlabel{
        width: 55% !important;
    }
    .con3digit{
        width: 9vw;
    }
    .con3digitroll span{
        font-size: 9vw;
    }
    .con3comma, .con3grut{
        font-size: 9vw;
    }

    /* ===== CON4 모바일 ===== */
    .con4{
        align-items: center;
        justify-content: center;
        padding: 0 0 8%;
    }
    /* 좌측 배경 장식 숨김 */
    .con4leftbg{
        display: none !important;
    }
    /* 붓글씨 밑줄 — 타이틀 아래 배치 */
    .con4ab{
        display: flex !important;
        position: relative !important;
        left: -23% !important;
        top: -553% !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 30%;
        align-self: center;
        margin-top: -4%;
        z-index: 4;
        order: 2;
    }
    /* 타이틀 가운데 */
    .con4top{
        margin-top: 15%;
        margin-left: 0;
        align-self: center;
        text-align: center;
        z-index: 41 !important;
        order: 1;
    }
    /* 서브타이틀 가운데 */
    .con4top2nd{
        width: 85%;
        margin-top: 3%;
        margin-left: 0;
        align-self: center;
        text-align: center;
        z-index: 2;
        order: 3;
    }
    .con4top2nd br{
        display: none;
    }
    /* 컨텐츠 영역: 세로 정렬 */
    .con4content{
        flex-direction: column;
        align-items: center;
        margin-top: 5%;
        margin-left: 0;
        order: 4;
        margin-bottom: 12%;
    }
    /* 좌측 음식이미지: rltv로 변경, 가운데 */
    .con4left{
        position: relative;
        left: auto;
        bottom: auto;
        width: 70% !important;
        align-self: center;
        margin-top: -28%;
        opacity: 0 !important;
    }
    /* 우측 스와이퍼: 풀폭 */
    .con4right{
        width: 100% !important;
        margin-left: 0;
        margin-top: -30%;
        flex: none;
        z-index: 8;
        background: transparent;
        padding: 6% 0;
        margin-bottom: -20%;
    }
    .con4_slide .swiper-slide{
        width: 70vw;
        opacity: 0.15;
        transition: opacity 0.3s ease;
    }
    .con4_slide .swiper-slide-active{
        opacity: 1;
    }
    /* 네비게이션 화살표 숨김 (모바일에서 스와이프) */
    .con4_arr_prev, .con4_arr_next{
        display: none !important;
    }
    /* 연기 숨김 */
    .con4steam{
        display: none !important;
    }

    /* ===== CON5 모바일 ===== */
    .con5{
        align-items: center;
        padding: 0 0 0;
    }
    .con5bg{
        width: 100% !important;
    }
    /* 타이틀 가운데 */
    .con5top{
        margin-top: 15%;
        margin-left: 0;
        width: 90%;
        align-self: center;
        text-align: center;
        z-index: 2;
    }
    .con5top br{
        display: none;
    }
    /* 서브타이틀 */
    .con5top2nd{
        width: 85%;
        margin-top: 3%;
        margin-left: 0;
        align-self: center;
        text-align: center;
        z-index: 2;
    }
    .con5top2nd br{
        display: none;
    }
    /* 이미지 행: 세로 스택 */
    .con5row{
        flex-direction: column;
        width: 85%;
        margin-top: 0;
        margin-left: 0;
        align-self: center;
        z-index: 2;
    }
    /* 2번째 행: card+img → reverse해서 img가 위로 (통일감) */
    .con5row:nth-child(5){
        flex-direction: column-reverse;
    }
    .con5top2nd + .con5row{
        margin-top: 5%;
    }
    .con5row:last-child{
        margin-bottom: 12%;
    }
    .con5img, .con5card{
        width: 100%;
        border-radius: 3vw;
        overflow: hidden;
    }

    /* ===== CON6 모바일 ===== */
    .con6{
        align-items: center;
        padding: 0 0 0;
    }
    /* 장식 숨김 */
    .con6ab1, .con6ab2{
        display: none !important;
    }
    /* 서브타이틀 이미지 */
    .con6top{
        margin-top: 15%;
        margin-left: 0;
        width: 35%;
        align-self: center;
        z-index: 2;
    }
    /* 메인타이틀 */
    .con6top2nd{
        margin-top: 3%;
        margin-left: 0;
        align-self: center;
        z-index: 2;
    }
    /* 설명 */
    .con6top3rd{
        width: 85%;
        margin-top: 2%;
        margin-left: 0;
        align-self: center;
        z-index: 2;
    }
    .con6top3rd br{
        display: none;
    }
    /* 카드 3개: 세로 스택 */
    .con6cards{
        flex-direction: column;
        width: 85%;
        margin-top: 5%;
        margin-left: 0;
        margin-bottom: 12%;
        align-self: center;
        align-items: center;
        gap: 4vw;
    }
    .con6card{
        width: 100% !important;
        aspect-ratio: auto;
        padding: 6vw 5vw 5vw;
        align-items: center;
        text-align: center;
    }
    .con6card br{
        display: none;
    }
    /* 배지 숫자 키우기 */
    .con6badge{
        font-size: 7vw !important;
        margin-bottom: 2vw;
    }
    .con6badge span{
        font-size: 7vw !important;
    }
    /* 카드 타이틀 키우기 */
    .con6cardtitle{
        font-size: 6.5vw !important;
        margin-bottom: 2vw;
    }
    /* 카드 이미지: 더 보이게 */
    .con6cardimg{
        opacity: 0.6;
    }
    .con6card1 .con6cardimg{
        width: 46.6667%;
        top: -27%;
        right: 0%;
        bottom: auto;
    }
    /* 카드 정보: 항상 보이기 */
    .con6cardinfo{
        opacity: 1;
        transform: translateY(0);
    }
    .con6cardinfo p{
        font-size: 3.5vw !important;
        line-height: 1.6;
    }

    /* ===== CON7 모바일 ===== */
    .con7{
        align-items: center;
        padding: 0 0 0;
    }
    /* 모서리 장식 숨김 */
    .con7ab1, .con7ab2, .con7ab3, .con7ab4{
        display: none !important;
    }
    /* 타이틀 */
    .con7top{
        margin-top: 15%;
        margin-left: 0;
        width: 90%;
        align-self: center;
        text-align: center;
        z-index: 2;
    }
    .con7top br{
        display: none;
    }
    /* 그리드: 1열 세로 스택 */
    .con7grid{
        flex-direction: column;
        width: 85%;
        margin-top: 5%;
        margin-left: 0;
        margin-bottom: 12%;
        align-self: center;
        align-items: center;
        gap: 4vw;
    }
    .con7card{
        width: 100% !important;
        aspect-ratio: auto;
        align-items: center !important;
        text-align: center !important;
        padding: 6vw 5vw 5vw;
        background: #fff !important;
        border-color: var(--mc) !important;
    }
    .con7card2, .con7card4{
        align-items: center !important;
        text-align: center !important;
    }
    .con7card br{
        display: none;
    }
    /* 배지: 모두 중앙 상단 */
    .con7badge{
        opacity: 1;
        width: 8vw !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        top: -4.3021vw;
    }
    .con7card2 .con7badge, .con7card4 .con7badge{
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }
    /* 카드 타이틀 키우기 */
    .con7cardtitle{
        font-size: 6.5vw !important;
        margin-top: 1vw;
        margin-bottom: 1.5vw;
    }
    /* 카드 설명 키우기 */
    .con7carddesc p{
        font-size: 3.5vw !important;
        line-height: 1.6;
    }
    /* 중앙 원: 숨김 */
    .con7circle{
        display: none !important;
    }

    /* ===== CON8A 모바일 ===== */
    .con8a{
        align-items: center;
        padding: 0 0 0;
    }
    /* 장식 음식사진 숨김 */
    .con8aab1, .con8aab2{
        display: none !important;
    }
    /* 타이틀 */
    .con8atop{
        margin-top: 15%;
        margin-left: 0;
        width: 90%;
        align-self: center;
        z-index: 2;
    }
    .con8atop br{
        display: none;
    }
    /* 붓글씨 밑줄: 중앙정렬 */
    .con8aline{
        width: 55%;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin-top: -4vw;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 0;
    }
    .con8atop .con8atitle1{
        z-index: 1;
    }
    /* 카운터 박스 */
    .con8acounterbox{
        width: 90%;
        margin-top: 5%;
        margin-left: 0;
        align-self: center;
        padding: 7vw 2vw 5vw;
        z-index: 2;
    }
    .con8alabel{
        width: 35% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .con8adigit{
        width: 9vw;
    }
    .con8adigitroll span{
        font-size: 9vw;
    }
    .con8acomma, .con8awon{
        font-size: 8vw;
    }
    /* mc 라인 */
    .con8aline2{
        margin-top: 6%;
        z-index: 2;
    }
    /* 슬라이드 영역 */
    .con8aslide{
        width: 100%;
        margin-top: 0;
        padding: 4vw 0;
        z-index: 2;
        position: relative;
    }
    .con8aslide::before,
    .con8aslide::after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 10%;
        z-index: 10;
        pointer-events: none;
    }
    .con8aslide::before{
        left: 0;
        background: linear-gradient(to right, rgba(94,0,0,1), transparent);
    }
    .con8aslide::after{
        right: 0;
        background: linear-gradient(to left, rgba(94,0,0,1), transparent);
    }
    .con08_slide2.swiper{
        width: 100%;
    }
    /* 하단 라인 */
    .con8aline3{
        margin-bottom: 12%;
        z-index: 2;
    }

    /* ===== CON9 모바일 ===== */
    .con9{
        align-items: center;
        padding: 5% 0;
    }
    .con9box{
        width: 92%;
        align-items: center;
        padding-bottom: 8%;
    }
    /* 타이틀 가운데 */
    .con9top{
        margin-top: 8%;
        margin-left: 0;
        align-self: center;
        text-align: center;
        width: 85%;
        z-index: 2;
    }
    /* 설명 가운데 */
    .con9top2nd{
        margin-top: 3%;
        margin-left: 0;
        width: 85%;
        align-self: center;
        text-align: center;
        z-index: 2;
        word-break: keep-all;
        text-wrap: balance;
        line-height: 1.7;
    }
    .con9top2nd br{
        display: none;
    }
    /* 원형 영역: 가운데, 키우기 */
    .con9circles{
        width: 85%;
        margin-top: 5%;
        margin-left: 0;
        align-self: center;
        justify-content: center;
        z-index: 2;
    }
    /* 도넛 차트: absol → rltv, 가운데, 키우기 */
    .con9chart{
        position: relative;
        left: auto;
        top: auto;
        width: 90%;
        margin-top: 5%;
        margin-left: 0;
        margin-bottom: 5%;
        align-self: center;
        z-index: 2;
    }
}

/* ================================================================
   MOBILE: CON10 ~ CON16 (max-width: 599px)
   ================================================================ */
@media screen and (max-width: 599px) {

    /* ===== CON10 모바일 (점심의 완성) ===== */
    .con10{
        overflow: visible;
    }
    .con10box{
        width: 100%;
        align-items: center;
        padding-bottom: 0;
    }
    /* 타이틀 */
    .con10top{
        margin-top: 15%;
        margin-left: 0;
        align-self: center;
        width: 85%;
        text-align: center;
        z-index: 2;
    }
    .con10top p:first-child{
        line-height: 1.6;
    }
    .con10top p:nth-child(2){
        line-height: 1.2;
    }
    /* 설명 */
    .con10top2nd{
        margin-left: 0;
        align-self: center;
        width: 85%;
        text-align: center;
        z-index: 2;
    }
    .con10top2nd br{
        display: none;
    }
    /* mc 구분선 + 아이콘 */
    .con10line{
        display: none !important;
        z-index: 2;
    }
    .con10icon{
        width: 8%;
        left: -8%;
    }
    /* 배지 */
    .con10badge{
        margin-left: 0;
        align-self: center;
        width: 25%;
        z-index: 2;
    }
    /* 가격 */
    .con10price{
        margin-left: 0;
        align-self: center;
        text-align: center;
        z-index: 2;
    }
    /* 사진: absol -> rltv 스택 */
    .con10photos{
        position: relative;
        left: auto;
        top: auto;
        width: 90%;
        align-self: center;
        margin-top: 6%;
        margin-bottom: 12%;
    }
    .con10photo1{
        width: 100%;
    }
    .con10photo2,
    .con10photo3{
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100%;
        opacity: 1 !important;
        margin-top: 4%;
    }
    /* 배지+가격: 모바일에서 숨기기 (사진 3장 나열이라 의미 없음) */
    .con10badge,
    .con10price{
        display: none !important;
    }

    /* ===== CON11 모바일 (업종변경) ===== */
    .con11{
        align-items: center;
    }
    .con11bg{
        display: none !important;
    }
    .con11::before{
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: url('/images/con11bg_m.png') no-repeat center / cover;
        opacity: 1;
        z-index: 0;
    }
    /* 배지 */
    .con11badge{
        margin-top: 15%;
        width: 40%;
        align-self: center;
        z-index: 2;
    }
    /* 타이틀 */
    .con11top{
        width: 85%;
        margin-top: 4%;
        align-self: center;
        text-align: center;
        z-index: 2;
    }
    /* 설명 */
    .con11top2nd{
        width: 85%;
        margin-top: 4%;
        align-self: center;
        text-align: center;
        z-index: 2;
    }
    .con11top2nd br{
        display: none;
    }
    /* 참고 */
    .con11note{
        align-self: center;
        margin-left: 0;
        margin-top: 4%;
        z-index: 2;
    }
    /* 매장 이미지 */
    .con11store{
        width: 85%;
        align-self: center;
        margin-top: 6%;
        z-index: 2;
    }
    /* 화살표: 모바일 숨김 */
    .con11arrow{
        display: none !important;
    }
    /* 업종변경 전: absol -> rltv 스택 */
    .con11pre{
        position: relative;
        left: auto;
        top: auto;
        width: 85%;
        align-self: center;
        margin-top: 8%;
        text-align: center;
        z-index: 2;
    }
    .con11pre .con11label{
        margin-left: 0;
        font-size: 5vw !important;
    }
    .con11pre .con11sublabel{
        margin-left: 0;
        font-size: 4vw !important;
    }
    .con11bar-black{
        width: 107% !important;
        align-self: center;
        margin-left: -14%;
        margin-top: 3%;
        margin-bottom: -8%;
    }
    .con11preprice{
        margin-left: 0;
        margin-top: -6vw;
    }
    /* 업종변경 후: absol -> rltv 스택 */
    .con11post{
        position: relative;
        right: auto;
        top: auto;
        width: 85%;
        align-self: center;
        margin-top: 8%;
        margin-bottom: 12%;
        text-align: center;
        z-index: 2;
    }
    .con11post .con11label{
        margin-left: 0;
        font-size: 5vw !important;
    }
    .con11post .con11sublabel{
        margin-left: 0;
        font-size: 4vw !important;
    }
    .con11bar-red{
        width: 111% !important;
        align-self: center;
        margin-left: 16%;
    }
    .con11postprice{
        margin-left: 0;
        margin-top: -13vw;
    }
    .con11footnote{
        margin-left: 0;
        margin-top: 2vw;
    }

    /* ===== CON12 모바일 (매장·배달·리테일 3박자) ===== */
    .con12{
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
    }
    .con12top{
        width: 90%;
        margin-top: 15%;
        align-self: center;
        text-align: center;
        z-index: 2;
    }
    .con12top .con12line1{
        line-height: 1.4;
    }
    .con12top .con12line2{
        line-height: 1.3;
        margin-top: 1vw;
    }
    .con12top2nd{
        width: 85%;
        margin-top: 3%;
        align-self: center;
        text-align: center;
        line-height: 1.6;
        z-index: 2;
    }
    .con12top2nd br{
        display: none;
    }
    /* 카드: 세로 스택 */
    .con12cards{
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 4vw;
    }
    .con12card{
        width: 85% !important;
    }
    .con12card:last-child{
        margin-bottom: 12%;
    }

    /* ===== CON13 모바일 (저가 커피 10잔보다) ===== */
    .con13{
        align-items: center;
        margin-top: -26vw;
        padding-top: 0;
    }
    .con13bg{
        width: 100% !important;
    }
    /* 장식: 숨김 */
    .con13glow{
        display: none !important;
    }
    .con13cup1{
        display: none !important;
    }
    .con13cup2{
        display: none !important;
    }
    .con13bowl{
        display: none !important;
    }
    /* 배지: 크게 (이미지 내 텍스트 가독성) */
    .con13badge{
        margin-top: 29%;
        margin-left: 0;
        align-self: center;
        width: 75%;
        z-index: 2;
    }
    /* 타이틀 */
    .con13top{
        margin-left: 0;
        align-self: center;
        width: 90%;
        text-align: center;
        z-index: 2;
    }
    .con13line1{
        line-height: 1.4;
    }
    .con13line2{
        line-height: 1.3;
        margin-top: 1vw;
    }
    /* 설명 */
    .con13top2nd{
        margin-left: 0;
        margin-top: 3%;
        align-self: center;
        width: 85%;
        text-align: center;
        line-height: 1.6;
        z-index: 2;
    }
    .con13top2nd br{
        display: none;
    }
    /* 화살표 */
    .con13arrows{
        margin-left: 0;
        align-self: center;
        justify-content: center;
        margin-bottom: 0;
        z-index: 2;
    }
    .con13arrleft,
    .con13arrright{
        width: 8%;
    }
    /* Swiper: absol -> rltv, 전폭 */
    .con13slider{
        position: relative !important;
        left: auto;
        top: auto;
        width: 95% !important;
        align-self: center;
        margin-top: 4%;
        margin-bottom: 12%;
        z-index: 2;
    }
    .con13slider .swiper-slide{
        width: 90%;
    }
    .con13slider .swiper-slide img{
        width: 100%;
    }

    /* ===== CON14 모바일 (대표 메뉴 소개) ===== */
    .con14{
        padding-top: 0;
        padding-bottom: 0;
    }
    /* 세로 구분선: 숨김 */
    .con14vleft{
        display: none !important;
    }
    .con14vright{
        display: none !important;
    }
    /* 배지 */
    .con14badge{
        margin-top: 15%;
        width: 25%;
        z-index: 2;
    }
    /* 타이틀 */
    .con14top{
        width: 85%;
        z-index: 2;
    }
    /* 탭 바: 콘텐츠 상단에 걸치게 */
    .con14tabs{
        width: 90%;
        height: 8vw;
        border-radius: 4vw;
        z-index: 3;
        position: relative;
        margin-bottom: -4vw;
    }
    .con14tabindicator{
        border-radius: 3.5vw;
    }
    .con14tab{
        font-size: 2.8vw;
    }
    .con14tab.active{
        font-size: 3vw;
    }
    /* 콘텐츠 */
    .con14content{
        width: 90%;
        margin-top: 0;
        padding: 8vw 3vw 5vw;
        z-index: 1;
    }
    .con14slider .swiper-slide{
        width: auto;
    }
    .con14slider .swiper-slide img{
        border-radius: 2vw;
    }
    .con14menuname{
        margin-top: 2vw;
        text-align: center;
    }
    /* 화살표 */
    .con14arrleft{
        left: 2%;
        top: 60%;
        width: 6%;
        z-index: 5;
    }
    .con14arrright{
        left: 92%;
        top: 60%;
        width: 6%;
        z-index: 5;
    }
    /* 하단 구분선 */
    .con14line2{
        margin-top: 8vw;
        margin-bottom: 12%;
    }

    /* ===== CON15 모바일 (라면 끓이듯 쉽게) ===== */
    .con15{
        align-items: center;
        background-color: #000;
    }
    .con15bg{
        width: 100% !important;
        top: auto;
        bottom: 0;
        opacity: 0.3;
    }
    /* NO 배지: 가운데 영상 우상단에 삐져나오게 */
    .con15badge{
        left: auto;
        right: 8%;
        top: 27%;
        width: 21%;
        z-index: 10;
    }
    /* 타이틀 */
    .con15top{
        margin-top: 15%;
        width: 90%;
        z-index: 2;
    }
    .con15line1{
        line-height: 1.4;
    }
    .con15line2{
        line-height: 1.3;
        margin-top: 1vw;
    }
    /* Swiper: 타이틀과 간격 */
    .con15swiperwrap{
        width: 100%;
        margin-top: 6%;
        z-index: 2;
        position: relative;
    }
    .con15swiperwrap::before,
    .con15swiperwrap::after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 12%;
        z-index: 10;
        pointer-events: none;
    }
    .con15swiperwrap::before{
        left: 0;
        background: linear-gradient(to right, rgba(28,26,23,0.85), transparent);
    }
    .con15swiperwrap::after{
        right: 0;
        background: linear-gradient(to left, rgba(28,26,23,0.85), transparent);
    }
    .con15slider .swiper-slide{
        width: 70vw;
    }
    .con15slide{
        border-radius: 2vw;
    }
    .con15video{
        border-radius: 2vw;
    }
    /* 화살표 */
    .con15arrleft{
        left: 3%;
        top: 50%;
        width: 6%;
        z-index: 5;
    }
    .con15arrright{
        left: 91%;
        top: 50%;
        width: 6%;
        z-index: 5;
    }
    /* 하단 설명 */
    .con15bottom{
        width: 90%;
        margin-bottom: 12vw;
        z-index: 2;
        line-height: 1.7;
        word-break: keep-all;
        text-wrap: balance;
    }

    .con15bottom br{
        display: none;
    }
    .con15bottom p{
        line-height: 1.7;
    }

    /* ===== CON16 모바일 (한 번 오면 또 찾게 됩니다) ===== */
    .con16{
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    /* 말풍선: 키우고 잘 보이게 배치 */
    .con16bubble1{
        left: 2%;
        top: 2%;
        width: 48%;
        z-index: 5;
    }
    .con16bubble2{
        left: 52%;
        top: 8%;
        width: 46%;
        z-index: 5;
    }
    /* 별점 */
    .con16stars{
        margin-top: 22%;
        width: 15%;
        z-index: 2;
    }
    .con16stars img{
        width: 100%;
    }
    /* 타이틀 */
    .con16top{
        width: 100%;
        text-align: center;
        z-index: 2;
    }
    .con16line1{
        line-height: 1.4;
    }
    .con16line2{
        line-height: 1.3;
        margin-top: 1vw;
    }
    /* 통계: absol -> rltv, 좌우 나란히 */
    .con16statleft,
    .con16statright{
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
        width: 44%;
        margin-top: 5%;
    }
    .con16pill{
        width: 22vw;
    }
    .con16num{
        font-size: 12vw;
    }
    /* 핸드폰 프레임: 모바일에서 숨김 */
    .con16phone{
        display: none !important;
    }
    /* 리뷰 스와이퍼: 가운데 강조 */
    .con16swiperwrap{
        margin-top: 10%;
        margin-bottom: 12%;
        width: 100%;
        height: 65vw;
        z-index: 1;
        overflow: visible;
    }
    .con16slider .swiper-slide{
        width: 35vw;
        transition: transform 0.3s ease;
    }
    .con16slider .swiper-slide-active{
        transform: scale(1.35);
        z-index: 3;
    }
    .con16card{
        height: 55vw;
        border-radius: 2vw;
    }
    .swiper-slide-active .con16card{
        width: auto !important;
        height: 55vw;
        margin-left: 0;
        border-radius: 2vw;
        box-shadow: 0 2vw 4vw rgba(0,0,0,0.15);
    }
    /* 화살표 */
    .con16arrleft{
        left: 3%;
        top: auto;
        bottom: 20%;
        width: 6%;
        z-index: 5;
    }
    .con16arrright{
        left: 91%;
        top: auto;
        bottom: 20%;
        width: 6%;
        z-index: 5;
    }
}

/* ============================================================
   MOBILE: CON17 ~ CON23 (max-width: 599px)
   ============================================================ */
@media screen and (max-width: 599px) {

    /* ===== CON17: 상권 추천 ===== */
    .con17{
        align-items: center;
    }
    /* 배경 유지 */
    .con17bg{
        width: 100% !important;
        height: 100%;
    }
    /* 산개된 매장사진: 하단 배치 (스크롤 애니메이션 시작점) */
    /* scrub: 스크롤 내리면서 위로 올라가며 opacity 연해짐 */
    .con17photo1,
    .con17photo2,
    .con17photo3,
    .con17photo4,
    .con17photo5{
        display: flex !important;
        opacity: 0.45;
        border-radius: 2vw;
        overflow: hidden;
    }
    .con17photo1{
        width: 32%;
        left: -6%;
        top: 50%;
    }
    .con17photo2{
        width: 28%;
        left: 78%;
        top: 60%;
    }
    .con17photo3{
        width: 30%;
        left: -4%;
        top: 72%;
    }
    .con17photo4{
        width: 26%;
        left: 80%;
        top: 82%;
    }
    .con17photo5{
        width: 32%;
        left: 33%;
        top: 92%;
    }
    /* 타이틀 L1 */
    .con17top{
        margin-top: 15%;
        margin-left: 0;
        align-self: center;
        width: 85%;
        text-align: center;
        z-index: 2;
    }
    /* 타이틀 L2 */
    .con17top2nd{
        margin-left: 0;
        align-self: center;
        width: 85%;
        text-align: center;
        z-index: 2;
    }
    /* 3 원형 카드: 크게 + 위아래 겹침 */
    .con17circles{
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-top: 6%;
        width: 85%;
    }
    .con17circle{
        width: 70%;
    }
    .con17circle + .con17circle{
        margin-top: -6vw;
    }
    /* 하단 텍스트 */
    .con17bottom{
        width: 85%;
        margin-left: 0;
        align-self: center;
        margin-top: 6%;
        margin-bottom: 12%;
        z-index: 2;
    }
    .con17bottom br{
        display: none;
    }

    /* ===== CON18: 인테리어 (회전율) ===== */
    .con18{
        align-items: center;
        overflow: visible;
    }
    /* 볼+뱃지: 하단에 1/3 걸치게 배치 */
    .con18bowl{
        display: flex !important;
        width: 55%;
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        bottom: -18%;
        opacity: 0.8;
        z-index: 0;
    }
    /* 타이틀 L1 */
    .con18top{
        margin-top: 15%;
        margin-left: 0;
        align-self: center;
        width: 85%;
        text-align: center;
        z-index: 2;
    }
    /* 타이틀 L2 */
    .con18top2nd{
        margin-left: 0;
        align-self: center;
        width: 85%;
        text-align: center;
        z-index: 2;
    }
    /* 서브타이틀 */
    .con18top3rd{
        margin-left: 0;
        margin-bottom: 6%;
        align-self: center;
        width: 85%;
        text-align: center;
        z-index: 2;
        word-break: keep-all;
        text-wrap: balance;
        line-height: 1.7;
    }
    .con18top3rd br{
        display: none;
    }
    /* 롤링 컬럼: 가로 스크롤로 변환, 고정 높이 */
    .con18col1,
    .con18col2{
        position: relative;
        width: 90% !important;
        left: auto;
        top: auto;
        height: 60vw;
        align-self: center;
        overflow: hidden;
        z-index: 2;
    }
    .con18col1{
        margin-bottom: 4%;
    }
    .con18col2{
        margin-bottom: 12%;
    }
    .con18roll{
        gap: 2vw;
    }
    .con18card{
        min-height: 40vw;
        aspect-ratio: 430 / 335;
    }

    /* ===== CON19: 기획 중심의 본사 ===== */
    .con19{
        align-items: center;
    }
    /* 배경: 어둡게 + 하단 배치 */
    .con19bg{
        width: 100% !important;
        opacity: 0.15;
        top: auto;
        bottom: 0;
    }
    /* 연기 장식 숨김 */
    .con19smoke{
        display: none !important;
    }
    /* 타이틀 L1 */
    .con19top{
        margin-top: 15%;
        margin-left: 0;
        align-self: center;
        width: 85%;
        text-align: center;
        z-index: 2;
    }
    /* 타이틀 L2 */
    .con19top2nd{
        margin-left: 0;
        align-self: center;
        width: 85%;
        text-align: center;
        z-index: 2;
    }
    /* 서브타이틀 */
    .con19sub{
        margin-left: 0;
        margin-top: 4%;
        margin-bottom: 6%;
        align-self: center;
        width: 85%;
        text-align: center;
        z-index: 2;
    }
    /* 본문: absol → rltv 전환, 가운데정렬 */
    .con19body{
        position: relative;
        left: auto;
        top: auto;
        width: 85% !important;
        align-self: center;
        text-align: center;
        margin-bottom: 12%;
        z-index: 2;
        word-break: keep-all;
        text-wrap: balance;
        line-height: 1.7;
    }
    .con19body br{
        display: none;
    }
    .con19gray{
        margin-top: 1.2em;
        color: #ffffff;
    }

    /* ===== CON20: 합리적인 창업비용 ===== */
    .con20{
        align-items: center;
    }
    /* 모서리 장식: 모바일에서도 유지, 약간 크게 */
    .con20corner1,
    .con20corner2,
    .con20corner3,
    .con20corner4{
        width: 10%;
    }
    /* 뱃지 */
    .con20costtitle{
        margin-top: 15%;
        width: 35%;
        z-index: 2;
    }
    /* 메인 타이틀 */
    .con20maintitle{
        width: 85%;
        z-index: 2;
    }
    /* 비용표 세로 스택 */
    .con20costs{
        flex-direction: column;
        align-items: center;
        width: 85% !important;
        gap: 5vw;
        margin-bottom: 12%;
        z-index: 2;
    }
    .con20cost1,
    .con20cost2{
        width: 100% !important;
    }

    /* ===== CON21: 완전한 창업 프로세스 ===== */
    /* (기존 media query에 grid/card/arrow 있음, 나머지 보강) */
    .con21{
        align-items: center;
    }
    .con21top{
        margin-top: 15%;
        width: 85%;
        z-index: 2;
    }
    .con21sub{
        width: 85%;
        z-index: 2;
    }
    .con21sub br{
        display: none;
    }
    .con21grid{
        width: 85% !important;
        margin-top: 5%;
        margin-bottom: 12%;
        z-index: 2;
    }
    .con21row{
        flex-direction: column;
        align-items: center;
        gap: 3vw;
    }
    .con21card,
    .con21cardlast{
        width: 100% !important;
    }
    .con21arrow{
        display: none !important;
    }
    .con21row ~ .con21row{
        margin-top: 3vw;
    }

    /* ===== CON22: 한 그릇, 세 사람의 상생 ===== */
    .con22{
        align-items: center;
    }
    /* 타이틀 */
    .con22top{
        margin-top: 15%;
        width: 85%;
        text-align: center;
        z-index: 2;
    }
    .con22top .con22topline1{
        line-height: 1.4;
    }
    .con22top .con22topline2{
        line-height: 1.3;
        margin-top: 1vw;
    }
    /* 카드 세로 스택 */
    .con22cards{
        flex-direction: column;
        align-items: center;
        width: 85% !important;
        gap: 5vw;
        margin-top: 6%;
        margin-bottom: 12%;
        z-index: 2;
    }
    .con22card1,
    .con22card2{
        width: 100% !important;
    }

    /* ===== CON23: 매장 안내 + 창업 문의 ===== */
    .con23{
        align-items: center;
    }
    .con23frame{
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0;
        border-radius: 7vw;
        overflow: hidden;
    }
    /* 타이틀 */
    .con23title{
        margin-top: 15%;
        z-index: 2;
    }
    .con23subtitle{
        width: 85%;
        text-align: center;
        z-index: 2;
    }
    /* 지도 */
    .con23map{
        width: 89%;
        margin-top: 2.7833%;
        padding-bottom: 0;
        border-radius: 1.5748vw;
        z-index: 2;
    }
    /* 창업 문의 다크박스 */
    .con23inquiry{
        width: 90% !important;
        align-items: center;
        z-index: 2;
        border-radius: 3vw;
        overflow: hidden;
    }
    /* 좌측 텍스트 → 센터 */
    .con23inqt1{
        margin-left: 0;
        align-self: center;
        text-align: center;
        width: 85%;
        margin-top: 8%;
    }
    .con23inqt2{
        margin-left: 0;
        align-self: center;
        text-align: center;
        width: 85%;
    }
    .con23inqsub{
        margin-left: 0;
        align-self: center;
        text-align: center;
        width: 85%;
    }
    .con23inqsub br{
        display: none;
    }
    .con23phone{
        width: 45% !important;
        margin-left: 0;
        align-self: center;
        margin-bottom: 6%;
    }
    /* 폼: absol → rltv, 풀폭 */
    .con23form{
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100% !important;
        border: none;
        border-top: 1px solid #9b9b9b;
        padding: 5vw 5%;
        box-sizing: border-box;
    }
    .con23field{
        width: 100%;
    }
    .con23field input{
        width: 100%;
        font-size: 3.5vw;
        padding: 3vw 0 3vw 8vw;
        border-radius: 1.5vw;
    }
    .con23ast{
        left: 3vw;
        font-size: 3.5vw;
    }
    .con23fieldtxt{
        width: 100%;
    }
    .con23fieldtxt textarea{
        width: 100%;
        font-size: 3.5vw;
        padding: 3vw 0 3vw 8vw;
        border-radius: 1.5vw;
        min-height: 20vw;
    }
    .con23privacy{
        font-size: 3vw;
        margin-bottom: 3vw;
    }
    .con23check{
        width: 4vw;
        height: 4vw;
    }
    .con23btn{
        width: 100%;
        font-size: 4vw;
        padding: 3.5vw 0;
        border-radius: 5vw;
        margin-bottom: 8%;
    }
    .con23inquiry{
        margin-bottom: 12%;
    }
    .con2border {
    left: 3%;
    right: 3%;
    top: 2%;
    bottom: 2%;
    display: unset;
}
.con2gridbg {
    width: 100%;
    display: flex;
    z-index: 3;
    overflow: hidden;
}
.con2gridbg {
    width: 94%;
    display: flex;
    z-index: 3;
    overflow: hidden;
    margin-left: 2%;

}

    .con2gridbg img{
        min-width: 174% !important; 
    }
    .con2legend {
    transform: unset;
    transform-origin: right top;
    right: 4%;
    width: 21%;
}

.con2g1b2 .con2barfill {
    height: 51.5vw;
}
.con2g1b1 .con2barfill {
    height: 50.2vw;
}
.con2g2b2 .con2barfill {
    height: 19.2vw;
}
.con2g2b1 .con2barfill {
    height: 14.2vw;
}
.con2g3b1 .con2barfill {
    height: 8.4vw;
}
.con2g3b2 .con2barfill {
    height: 12.8vw;
}
.con2bars {
    z-index: 5;
    left: 9.0483%;
    width: 85.6872%;
    bottom: 2.1882%;
    align-items: flex-end;
    justify-content: space-between;
}
.con2g1label, .con2g2label, .con2g3label {
    transform: translate(-50%, 132%);
}


.con2g1label {
    width: 97.8683%;
}
.con2g2label {
    width: 82.2874%;
}
.con2g3label {
    width: 84.2874%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}
.con2arrow {
    width: 51.7855%;
    z-index: 7;
    top: 20.6%;
    left: 37.8%;
    opacity: 0.60;
    display: flex;
}
.con3ab4 {
    width: 80%;
    left: 10%;
    bottom: -22%;
}
.con3counternum {
    margin-top: 1%;
    margin-left: 0%;
    gap: 0.5092vw;
    justify-content: center;
    align-items: center;
}

.con6badge {
    width: 7.0833vw;
    height: 7.0833vw;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}
.con6badge span {
    font-size: 4vw !important;
}

.con6cardinfo {
    text-align: center;
}
.con6top {
    margin-top: 15%;
    margin-left: 0;
    width: 39%;
    align-self: center;
    z-index: 2;
}
.con8acounterbox {
    width: 93%;
    margin-top: 5%;
    margin-left: 0;
    align-self: center;
    padding: 8vw 2vw 3vw;
    z-index: 2;
}

.con8aline {
    width: 55%;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: -5.5vw;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
}
.con8alabel {
    width: 22.1826%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: -3.25vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
}
.con8acounterbox {
    width: 93%;
    margin-top: 8%;
    margin-left: 0;
    align-self: center;
    padding: 8vw 2vw 3vw;
    z-index: 2;
}
.con16stars {
    margin-top: 26%;
    width: 30%;
    z-index: 2;
}
.con16bubble3 {
    left: 7.7690%;
    top: 22.1286vw;
    width: 41.9554%;
    opacity: 1;
    z-index: 2;
    display: flex;
    animation: con16float3 3.5s ease-in-out infinite 1s;
}
.con16stars {
    margin-top: 36%;
    width: 30%;
    z-index: 2;
}
.con16bubble1 {
    left: 2%;
    top: 3%;
    width: 56%;
    z-index: 5;
}
.con16bubble2 {
    left: 38%;
    top: 9%;
    width: 58%;
    opacity: 1;
    z-index: 5;
}
.con16bubble3 {
    left: 7.7690%;
    top: 27.1286vw;
    width: 41.9554%;
    opacity: 1;
    z-index: 2;
    display: flex;
    animation: con16float3 3.5s ease-in-out infinite 1s;
}
.con16swiperwrap {
    margin-top: 15%;
    margin-bottom: 12%;
    width: 109%;
    height: 65vw;
    z-index: 1;
    overflow: visible;
}
.con16card{
    border: unset;
}
.con18bowl {
    display: flex !important;
    width: 71%;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    bottom: -18%;
    opacity: 1;
    z-index: 0;
}
.con18col2 {
    margin-bottom: 43%;
}

.con18bowl {
    display: flex !important;
    width: 71%;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    bottom: -14%;
    opacity: 1;
    z-index: 0;
}

.con19bg {
    width: 100% !important;
    opacity: 1;
    top: auto;
    bottom: -1%;
    height: unset !important;
}
.con19bg {
    width: 100% !important;
    opacity: 1;
    top: auto;
    bottom: -1%;
    height: unset !important;
    filter: brightness(0.5);
}

.con23inqbg {
    width: 141% !important;
    height: unset !important;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
}
.con23inqbg img {
    width: 106% !important;
    height: unset;
    object-fit: unset;
    max-width: unset;
    min-width: unset;
}
.con23inqbg {
    width: 141% !important;
    height: unset !important;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    height: 57.6vw !important;
}
.con23inquiry {
    margin-bottom: 12%;
    background: black;
}
    .con7card:hover {
        background: #5e0000 !important;
        border-color: rgba(94,0,0,0.3) !important;
    }
}

/* ============ 매장안내 지도 + 매장 리스트 ============ */
.con17_mid_2nd {
    display: flex; justify-content: center; align-items: center;
    flex-direction: column; width: 100%; margin-bottom: 5%;
    margin-left: auto; margin-right: auto;
    position: relative; border: 1px solid;
    border-radius: 2vw; overflow: hidden;
}
.map { width: 100%; height: 35vw; border-radius: 0.5208vw; overflow: hidden; background: #e8e0d8; }
/* 검색바: 지도 상단 중앙 오버레이 (패널 제외한 지도 영역 중앙) */
.con17_mid_map_search_mid {
    display: flex; justify-content: center; align-items: center;
    width: 40%; background: transparent;
    padding: 0; box-sizing: border-box;
    top: 2%; left: 42%; transform: translateX(-30%);
    z-index: 3;
}
.con17_mid_map_search_mid input {
    appearance: none; border: #5e0000 1px solid; outline: none;
    border-radius: 50px; width: 100%; height: 2.6vw;
    min-width: unset !important; max-width: unset !important;
    background: white; padding-left: 3%;
    font-family: 'Pretendard Variable', sans-serif; font-size: 0.8vw;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.con18_03 { width: 3% !important; min-width: unset !important; max-width: unset !important; right: 10%; top: 50%; transform: translateY(-50%); }
/* 왼쪽 매장 리스트 패널 */
.con17_mid_map_search {
    width: 22%; background: white; height: 100%;
    top: 0; left: 0; z-index: 2; overflow: hidden;
    border-radius: 0.5208vw 0 0 0.5208vw;
    box-sizing: border-box;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.con17_mid_map_search_bottom {
    overflow-y: scroll; height: 35vw; width: 100%;
    padding-top: 6%;
}
.con17_mid_map_search_bottom::-webkit-scrollbar { width: 0.3vw; }
.con17_mid_map_search_bottom::-webkit-scrollbar-thumb {
    background: #5e0000; border-radius: 10px;
}
.con17_mid_map_search_bottom::-webkit-scrollbar-track {
    background: transparent; border-radius: 10px;
    margin-top: 1vw; margin-bottom: 1vw;
}
.con17_mid_map_search_item {
    margin: 0% 7%; border-bottom: 1px solid #808080a3;
    padding: 5% 0; font-size: 0.8vw;
    font-family: 'Pretendard Variable', sans-serif;
    position: relative; cursor: pointer;
}
.con17_mid_map_search_item:hover { background: #f9f5f0; }
.con17_mid_map_search_item_title {
    font-size: 1vw; font-weight: 700;
    color: #333; margin-bottom: 0.3vw;
}
.con17_mid_map_search_item_address {
    margin-top: 0.3vw; color: #808080e6; font-size: 0.85vw;
}
.con17_mid_map_search_item_plus {
    width: 12.6926%; display: flex; justify-content: center; align-items: center;
    right: 9%; bottom: 19%;
}
.con17_mid_map_search_item_plus img { width: 100%; }
.con17_mid_map_search_item_naver {
    cursor: pointer; width: 35.4829%; display: flex;
    justify-content: center; align-items: center;
    margin-top: 4%; margin-bottom: 5%;
}
.con17_mid_map_search_item_naver img { width: 100%; }
.noshop { display: none; padding: 10% 7%; color: grey; text-align: center; }
.hide { display: none !important; }

/* 매장 팝업 */
.fixed_popup {
    position: fixed !important; top: 0; left: 0;
    width: 100%; height: 100vh;
    z-index: 9999; background: #00000045;
    display: flex; justify-content: center; align-items: center;
}
.fixed_popup_con { width: 100%; height: 100%; }
.popup {
    width: 65%; background: white; height: 32vw;
    overflow: hidden; z-index: 10; position: relative;
    justify-content: flex-start; border-radius: 3vw;
    border: 1px solid;
}
.popup_img {
    width: 47.5248%; display: flex; justify-content: center;
    align-items: center; height: 100%; overflow: hidden;
}
.popup_img img { width: 100%; height: 100%; object-fit: cover; }
.popup_right {
    width: 52.4752%; display: flex; justify-content: center;
    align-items: center; flex-direction: column;
}
.popup_right_2nd {
    font-weight: 600; width: 78%; font-size: 1.56vw;
    color: #333; margin-bottom: 7%; margin-top: 6%;
}
.popup_right > div { display: flex; justify-content: flex-start;
    align-items: flex-start; width: 78%; color: #333; margin-top: 3%;
}
.popup_right > div > div:nth-child(1) {
    font-weight: 600; font-size: 1vw; width: 21%; color: #000;
}
.popup_right > div > div:nth-child(2) {
    font-weight: 400; font-size: 1vw; width: 75%; color: #555;
}
.popup_close {
    width: 2.4063%; display: flex; justify-content: center; align-items: center;
    top: 5%; right: 4%; cursor: pointer;
}
.popup_close img { width: 100%; }
.my-place-label-wrap {
    display: flex; flex-direction: column; align-items: center;
    padding-bottom: 80px;
}
.my-place-label {
    background: #5e0000; color: white; padding: 5px 12px;
    border-radius: 20px; font-size: 13px; font-weight: 600;
    white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    position: relative;
    font-family: 'Pretendard Variable', sans-serif;
    text-align: center;
}
.my-place-label::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 50%; transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #5e0000;
}

/* 매장 지도 모바일 */
@media (max-width: 599px) {
    .con17_mid_2nd {
        flex-direction: column;
        width: 100%;
    }
    /* 검색바: absol → rltv, 상단 고정 */
    .con17_mid_map_search_mid {
        position: relative !important;
        left: auto !important; top: auto !important;
        transform: none !important;
        width: 100%;
        padding: 4% 5%;
        box-sizing: border-box;
        background: #5e0000;
    }
    .con17_mid_map_search_mid input {
        height: 10vw;
        font-size: 3.5vw;
        width: 100%;
        border-radius: 5vw;
        padding-left: 5%;
    }
    .con18_03 {
        width: 4.5vw !important;
        right: 10% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    /* 지도 */
    .map {
        height: 55vw;
        width: 100%;
    }
    #map {
        border-radius: 0;
    }
    /* 매장 리스트 패널: absol → rltv, 전폭 */
    .con17_mid_map_search {
        position: relative !important;
        width: 100% !important;
        height: auto;
        left: auto !important; top: auto !important;
        border-radius: 0;
        box-shadow: none;
    }
    .con17_mid_map_search_bottom {
        height: 50vw;
        width: 100%;
    }
    .con17_mid_map_search_item {
        font-size: 3.3vw;
        padding: 4% 5%;
        margin: 0;
    }
    .con17_mid_map_search_item_title {
        font-size: 4vw;
        margin-bottom: 1vw;
    }
    .con17_mid_map_search_item_address {
        font-size: 3.3vw;
    }
    .con17_mid_map_search_item_plus {
        width: 7vw; height: 7vw;
    }
    .con17_mid_map_search_item_naver {
        width: 30%;
        margin-top: 3%;
    }
    /* 팝업 */
    .popup {
        width: 92%; height: auto;
        flex-direction: column;
        border-radius: 4vw;
    }
    .popup_img {
        width: 100%; height: 50vw;
    }
    .popup_img img {
        width: 100%; height: 100%;
    }
    .popup_right {
        width: 100%; padding: 6% 0;
    }
    .popup_right_2nd {
        font-size: 4.5vw;
        width: 85%;
        margin-bottom: 2vw;
    }
    .popup_right > div {
        width: 85%;
        margin-top: 2%;
    }
    .popup_right > div > div:nth-child(1) {
        font-size: 3.3vw; width: 28%;
    }
    .popup_right > div > div:nth-child(2) {
        font-size: 3.3vw; width: 68%;
    }
    .popup_close {
        top: 3vw; right: 3vw;
        width: 5vw; height: 5vw;
    }
    /* 지도 라벨 */
    .my-place-label {
        font-size: 11px;
        padding: 4px 10px;
    }
}