@charset "UTF-8";

/* ============================================================
   Myung In Pain Clinic (명인마취통증의학과의원) - Main Stylesheet
   ============================================================ */

/* ----------------------------------------------------------
   Variables / Settings
   ---------------------------------------------------------- */
@font-face {
  font-family: 'Gmarket Sans';  font-style: normal;  font-weight: 700;
  src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
  url('https://script.gmarket.com/fonts/GmarketSansBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('https://script.gmarket.com/fonts/GmarketSansBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  unicode-range: U+0030-0039,U+0041-005A,U+0061-007A
}
@font-face {
  font-family: 'Gmarket Sans';  font-style: normal;  font-weight: 500;
  src: local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
  url('https://script.gmarket.com/fonts/GmarketSansMedium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('https://script.gmarket.com/fonts/GmarketSansMedium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  unicode-range: U+0030-0039,U+0041-005A,U+0061-007A
}
@font-face {
  font-family: 'Gmarket Sans';  font-style: normal;  font-weight: 300;
  src: local('Gmarket Sans Light'), local('GmarketSans-Light'),
  url('https://script.gmarket.com/fonts/GmarketSansLight.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('https://script.gmarket.com/fonts/GmarketSansLight.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  unicode-range: U+0030-0039,U+0041-005A,U+0061-007A
}
@font-face {
    font-family: 'ChosunilboNM';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ----------------------------------------------------------
   Popup - Swiper
---------------------------------------------------------- */
#main_modal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(239,239,239,0.8);
  z-index: 99999;
}

#main_modal .list-pops {
  width: 600px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
}

#main_modal .close_btn,
#main_modal .btn_today_close {
  position: absolute;
  top: -45px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  background-color: #2B201A;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  z-index: 20;
}

#main_modal .close_btn {
  right: 0;
  width: 100px;
  font-size: 16px;
}

#main_modal .btn_today_close {
  right: 110px;
  padding: 0 15px;
  font-size: 14px;
}

#main_modal .popupSwiper {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

#main_modal .popupSwiper .swiper-slide img {
  width: 100%;
  display: block;
}

#main_modal .popupSwiper .swiper-button-prev,
#main_modal .popupSwiper .swiper-button-next {
  color: #fff;
  z-index: 15;
}

#main_modal .popupSwiper .swiper-pagination-bullet-active {
  background: #2B201A;
}

@media (max-width: 768px) {
  #main_modal .list-pops {
    width: 90%;
  }

  #main_modal .close_btn {
    width: 80px;
    font-size: 14px;
  }

  #main_modal .btn_today_close {
    right: 90px;
    font-size: 12px;
    padding: 0 10px;
  }
}



:root {
    --color-primary: #1976D2;
    --color-teal: #26A69A;
    --color-dark-navy: #1B2A4A;
    --color-light-gray: #F5F5F5;
    --color-blue-gray: #ECEFF2;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-text-dark: #333333;
    --color-text-gray: #2C2C2C;
    --color-tab-active: #ACD1E8;
    --color-faq-bg: #E3F0F9;
    --color-faq-active: #ACD1E8;
    --color-deep-navy: #00263D;
}

/* ----------------------------------------------------------
   Base
   ---------------------------------------------------------- */
body {
    background: var(--color-white);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--color-text-dark);
    font-weight: 400;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

img {
    max-width: 100%;
}

.hide {
    display: none !important;
}

.mo {
    display: none;
}

.pc {
    display: block;
}

.scroll-disable {
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    touch-action: none;
}

/* ----------------------------------------------------------
   Layout
   ---------------------------------------------------------- */
.wrap {
    width: 100%;
    background: var(--color-white);
}

.container {
    width: 100%;
    margin: 0 auto;
    max-width: 1920px;
    overflow: clip;
    position: relative;
}

.section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    background: var(--color-white);
    margin-bottom: 250px;
}


/* ============================================================
   HEADER
   ============================================================ */
.header {
    margin: 0 auto;
    background: transparent;
    padding: 0;
    position: fixed;
    top: 0;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1920px;
}

.header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 0;
    transition: background 0.3s ease;
}

.header.scrolled::before {
    background: rgba(0, 0, 0, 0.7);
}

.header .zone_header {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 60px;
    height: 90px;
    position: relative;
}

.header .area_logo {
    position: relative;
    z-index: 2;
}

.header .zone_header.mo {
    display: none;
}

.header .area_logo a {
    display: block;
}

.header .area_logo img {
    height: 59px;
    display: block;
}

.header .area_gnb {
    display: flex;
    align-items: center;
    gap: 63px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.header .area_gnb a {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-white);
    height: 90px;
    transition: color 0.3s;
    white-space: nowrap;
}




/* ============================================================
   MAIN / HERO (section_main)
   ============================================================ */
.section_main {
    padding: 0;
    background: var(--color-black);
}

.zone_visual {
    position: relative;
    width: 100%;
    height: min(56.25vw, 1080px); /* 1920×1080 = 16:9, 1920px 초과 시 1080px 고정 */
    overflow: hidden;
}

.visual_slide,
.visual_slide .swiper-wrapper,
.visual_slide .swiper-slide {
    width: 100%;
    height: 100%;
}

.visual_slide .swiper-slide {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.bg_overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* 텍스트 등장 애니메이션 */
@keyframes textFadeUp {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

.zone_visual .zone_text {
    position: absolute;
    left: 0;
    z-index: 2;
    text-align: left;
    color: var(--color-white);
    width: 830px;
    height: 450px;
    top: 315px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 175px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.2);
}

.slide01 .zone_text { padding-left: 175px; }
.slide02 .zone_text { padding-left: 125px; }
.slide03 .zone_text { padding-left: 190px; }

.visual_slide .swiper-slide .zone_text .text_sub,
.visual_slide .swiper-slide .zone_text .text_main,
.visual_slide .swiper-slide .zone_text .text_desc {
  opacity: 0;
  transform: translateY(15px);
}

.visual_slide .swiper-slide-active .zone_text .text_sub {
  animation: textFadeUp 0.6s ease forwards 0.5s;
}

.visual_slide .swiper-slide-active .zone_text .text_main {
  animation: textFadeUp 0.6s ease forwards 0.7s;
}

.visual_slide .swiper-slide-active .zone_text .text_desc {
  animation: textFadeUp 0.6s ease forwards 0.9s;
}

/* 활성 슬라이드: 텍스트 순차 등장 (슬라이드 페이드 speed 800ms 고려) */
.swiper-slide-active .zone_text .text_sub  { animation: textFadeUp 0.6s ease forwards 0.5s; }
.swiper-slide-active .zone_text .text_main { animation: textFadeUp 0.6s ease forwards 0.7s; }
.swiper-slide-active .zone_text .text_desc { animation: textFadeUp 0.6s ease forwards 0.9s; }

.zone_visual .zone_text .text_sub {
    font-family: 'ChosunilboNM', 'Noto Serif KR', Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.67;
    margin-bottom: 0;
}

.zone_visual .zone_text .text_main {
    font-family: 'ChosunilboNM', 'Noto Serif KR', Georgia, serif;
    font-size: 50px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 40px;
}

.zone_visual .zone_text .text_desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

/* Scroll indicator */
.zone_scroll {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.zone_scroll .scroll_mouse img {
    display: block;
    width: 56px;
}

.zone_scroll .scroll_text {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-white);
    white-space: nowrap;
}

/* Side Navigation (우측 고정 패널) */
/* ============================================================
   QUICKMENU (플로팅 배너)
   ============================================================ */
/* ============================================================
   QUICKMENU (플로팅 배너)
   ============================================================ */
.quickmenu {
    display: flex;
    position: fixed;
    left: 50%;
    margin-left: 862px;    /* (1920÷2) - 98 = 960 - 98 = 862px → 컨테이너 우측 끝 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    width: 98px;           /* 패널 98px = 버튼 78px 중앙정렬 기준 */
    flex-direction: column;
    align-items: center;
    gap: 31px;             /* 패널 ~ scroll-top 버튼 간격 */
}

.quickmenu_panel {
    background: var(--color-deep-navy);
    width: 98px;
    border-radius: 30px 0 0 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 17px 0 18px;  /* 상: 17px, 하: 18px */
    gap: 20px;             /* 아이템 간 간격 */
}

.quickmenu_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 74px;
    height: 74px;
    padding-top: 8px;       /* 아이콘 상단 여백 */
    gap: 3px;               /* 아이콘 ~ 텍스트 간격 */
    color: var(--color-white);
    text-decoration: none;
    transition: opacity 0.2s;
}


.quickmenu_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.quickmenu_icon img {
    height: auto;
    object-fit: contain;
}
.quick01 .quickmenu_icon img { width: 38px; }
.quick02 .quickmenu_icon img { width: 24px; }
.quick03 .quickmenu_icon img { width: 32px; }
.quick04 .quickmenu_icon img { width: 38px; }

.quickmenu_item span {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-white);
    white-space: nowrap;
    line-height: 1;
}

/* Scroll-to-top 버튼 (78×78px, 중앙정렬) */
.quickmenu_top {
    background: var(--color-deep-navy);
    border: none;
    border-radius: 50%;
    width: 78px;
    height: 78px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.quickmenu_top.visible {
    opacity: 1;
    pointer-events: auto;
}


/* CSS 화살표 — 체브론 ^ (변 27px, 시각적 상하좌우 중앙 정렬)
   27×27 박스를 45° 회전 시 시각 ^ 영역은 상반부에 편중됨 (팁~암 수직거리 ≈ 19px)
   → top: calc(50% + 9.5px) 으로 9.5px 아래 보정 → 시각 중앙 = 버튼 중앙 */
.quickmenu_top::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(50% + 6.5px);
    transform: translate(-50%, -50%) rotate(45deg);
    width: 27px;
    height: 27px;
    border-top: 2px solid var(--color-white);
    border-left: 2px solid var(--color-white);
}

.quickmenu_top::after {
    content: none;
}

/* Autoplay 컨트롤 (좌측 하단) */
.zone_autoplay {
    position: absolute;
    left: 12.03%;
    bottom: 12.69%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
}

.zone_autoplay .autoplay_current,
.zone_autoplay .autoplay_total {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
}

.autoplay_progress {
    width: 134px;
    height: 2px;
    background: #d9d9d9;
    position: relative;
    overflow: hidden;
}

.autoplay_bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--color-white);
    width: 0%;
    transition: width 0.1s linear;
}

.autoplay_toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 86px;
}

.icon_pause {
    display: flex;
    align-items: center;
    gap: 4px;
}

.icon_pause i {
    display: block;
    width: 2px;
    height: 16px;
    background: var(--color-white);
}

/* Marquee */
.zone_marquee {
    overflow: hidden;
    white-space: nowrap;
    padding: 60px 0;
    background: var(--color-white);
}

.marquee_track {
    display: inline-flex;
    animation: marquee-scroll 80s linear infinite;
}

.marquee_track span {
    font-size: 200px;
    font-family: 'Gmarket Sans', dotum, sans-serif;
    font-weight:300;
    color: #f2f2f2;
    line-height: 1;
}

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

.section_main .zone_message {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    text-align: center;
    color: var(--color-black);
    font-size: 26px;
    white-space: nowrap;
}



/* ============================================================
   SECTION COMMON STYLES
   ============================================================ */
.section .zone_title {
    text-align: center;
    margin-bottom: 90px;
}

.section .zone_title .title {
    font-size: 60px;
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--color-text-dark);
}

.section .zone_title .title strong {
    font-weight: 700;
}

.section .zone_title .title_sub {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 15px;
    color: var(--color-text-dark);
}

.section .zone_title .title_sub strong {
    font-weight: 700;
}

.section .zone_title .en_name {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 30px;
    margin-right: -30px;
    text-transform: uppercase;
    color: var(--color-text-gray);
}

.section .zone_desc {
    text-align: center;
    margin-bottom: 50px;
}

.section .zone_desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-gray);
}

.section .zone_content {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}


/* ============================================================
   SECTION 01 : 진료 과목
   ============================================================ */
.section01 .zone_content {
    max-width: 1200px;
}

.section01 .zone_title .title {
    font-size: 50px;
}

.section01 .area_grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.section01 .grid_row {
    display: flex;
    gap: 30px;
}

/* 상단 행: 약간 왼쪽 */
.section01 .grid_row.row_top    { transform: translateX(-40px); }
/* 하단 행: 약간 오른쪽 */
.section01 .grid_row.row_bottom { transform: translateX(40px); }

.section01 .grid_item {
    width: 340px;
    height: 456px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease;
}

.section01 .item_img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.section01 .item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* hover: 이미지 확대 (section05 동일) */
.section01 .grid_item:hover .item_img img {
    transform: scale(1.05);
}

/* 텍스트 overlay: 이미지 위 하단 고정 높이 250px */
.section01 .item_text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 250px;
    padding: 25px;
    color: var(--color-black);
    box-sizing: border-box;
}

.section01 .item_title {
    font-size: 22px;
    font-weight: 400;
    color: var(--color-black);
    margin-bottom: 12px;
    padding-bottom: 12px;
    padding-left: 15px;
    border-bottom: 1px solid var(--color-black);
}

.section01 .item_text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section01 .item_text ul li {
    font-size: 14px;
    color: var(--color-black);
    padding: 4px 0 4px 15px;
}


/* ============================================================
   SECTION 02 : 특장점 캐러셀
   ============================================================ */
.section02 {
    background: var(--color-white);
    overflow: hidden;
}

.section02 .zone_content {
    max-width: 1430px;
    padding: 0;
}

.section02 .feature_slide {
    padding: 0;
    overflow: hidden;
}

.section02 .slide_inner {
    display: flex;
    align-items: stretch;
    width: 1430px;
    height: 763px;
}

/* slide-type-a (01, 03): 이미지 왼쪽 + 텍스트 오른쪽 (row-reverse) */
.section02 .slide-type-a .slide_inner {
    flex-direction: row-reverse;
}

/* slide-type-b (02, 04): 텍스트 왼쪽 + 이미지 오른쪽 (row 기본) */

/* box_left 공통 */
.section02 .box_left {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
}

/* slide-type-a (01, 03): 텍스트 상단 + 좌측 패딩 */
.section02 .slide-type-a .box_left {
    justify-content: flex-start;
    padding: 0 0 0 40px;
}

/* slide-type-b (02, 04): 텍스트 하단 + 우측 패딩 */
.section02 .slide-type-b .box_left {
    justify-content: flex-end;
    padding: 0 40px 0 0;
}

/* 비활성 슬라이드: box_num, box_text 숨김 */
.section02 .swiper-slide .box_num,
.section02 .swiper-slide .box_text .text01,
.section02 .swiper-slide .box_text .text02 {
    opacity: 0;
    transform: translateY(15px);
}

/* 활성 슬라이드: 순차 등장 */
.section02 .swiper-slide-active .box_num   { animation: textFadeUp 0.6s ease forwards 0.2s; }
.section02 .swiper-slide-active .box_text .text01 { animation: textFadeUp 0.6s ease forwards 0.45s; }
.section02 .swiper-slide-active .box_text .text02 { animation: textFadeUp 0.6s ease forwards 0.65s; }

.section02 .box_num {
    font-size: 220px;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1;
    margin-bottom: 30px;
    margin-left: -0.03em; /* 폰트 좌측 베어링 보정 — box_text와 세로 라인 맞춤 */
}

.section02 .box_text .text01 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-black);
}

.section02 .box_text .text02 {
    font-size: 18px;
    font-weight: 300;
    color: var(--color-black);
}

.section02 .box_img {
    width: 1060px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section02 .swiper-pagination {
    display: none;
}


/* ============================================================
   SECTION 03 : 실적 통계
   ============================================================ */
.section03 {
    background: var(--color-white);
    position: relative;
    overflow: visible;
}

/* symbol_1.png 배경 장식 — section03 좌측 하단, section04 제목 영역까지 걸침 */
.section03 .symbol_deco {
    position: absolute;
    left: calc(50% - 890px);
    bottom: -360px;
    width: 644px;
    height: 644px;
    background: url('../img/symbol_1.png') center / contain no-repeat;
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
}

.section03 .zone_content {
    max-width: 1180px;
    position: relative;
    z-index: 1;
}

/* area_stats_grid: 1180×704px, gap 20px, 3열(340 340 460), 2행(340 340) */
.section03 .area_stats_grid {
    display: grid;
    grid-template-columns: 340px 340px 1fr;
    grid-template-rows: 340px 340px;
    gap: 20px;
    width: 1180px;
}

/* stat_item 기본 — 개별 배경색은 아래 클래스로 지정 */
.section03 .stat_item {
    padding: 58px 36px;
    border-radius: 15px;
    text-align: left;
}

/* 개별 배경색 */
.section03 .stat_item.stat_color_1 { background: #DCF0FB; } /* 관절 및 척추 치료 */
.section03 .stat_item.stat_color_2 { background: #BEDAEB; } /* 연평균 진료 횟수 */
.section03 .stat_item.stat_color_3 { background: #DCF0FB; } /* 신경차단술 */
.section03 .stat_item.stat_color_4 { background: #E3F0F9; } /* 척추수술 */

.section03 .stat_item.stat_experience {
    grid-row: 1 / 3;
    grid-column: 3;
    background: #C2D7E3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 35px 30px 0;
    overflow: hidden;
    position: relative;
}

.section03 .stat_label {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-black);
    margin-bottom: 15px;
}

/* stat_experience의 stat_label — 다른 stat_item과 동일하게 상단 좌측 */
.section03 .stat_experience .stat_label {
    margin-bottom: 0;
    align-self: flex-start;
}

.section03 .stat_number {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.section03 .stat_number .counter {
    font-size: 50px;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1;
}

.section03 .stat_number .unit {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-black);
}

.section03 .stat_graph .graph_wrap {
    margin-top: 20px;
    clip-path: inset(0px 100% 0 0px);
    transition: clip-path 1s ease-in-out;
}

/* JS에서 .graph-animated 클래스 추가 시 그래프 드러남 */
.section03 .stat_graph .graph_wrap.graph-animated {
    clip-path: inset(0);
}

.section03 .stat_graph .graph_line {
    width: 100%;
    display: block;
}

/* exp_number: 우측 하단에 딱 붙음 */
.section03 .exp_number {
    display: flex;
    gap: 0;
    align-self: flex-end;
    line-height: 1;
    margin-bottom: -14px;
    margin-right: -45px;
}

.section03 .exp_number .digit {
    font-size: 400px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 0.78;
    letter-spacing: -55px;
    display: inline-block;
    transform: scaleX(0.94);
    transform-origin: bottom center;
    opacity: 0; /* JS로 슬롯머신 애니메이션 처리 */
}


/* ============================================================
   SECTION 04 : 의료진 소개
   ============================================================ */
.section04 {
    background: var(--color-white);
}

/* zone_content — JS transform으로 스티키 시뮬레이션 (overflow:clip 환경 호환) */
.section04 .zone_content {
    max-width: 100%;
    padding: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.section04 .zone_title {
    margin-bottom: 50px;
}

.section04 .scroll_track {
    position: relative;
    width: 100%;
    height: 700px;
}

.section04 .doctor_panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 700px;
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 초기 위치: 화면 밖 */
.section04 .panel01 { transform: translateX(-100%); }
.section04 .panel02 { transform: translateX(100%); }

/* 등장 완료 상태 */
.section04 .doctor_panel.anim-in { transform: translateX(0); }

.section04 .box_photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #9a9a9a;
    background-size: cover;
    background-position: top center;
}

/* 모바일 전용 이미지 — PC에서 숨김 */
.section04 .box_photo_mo {
    display: none;
}



/* ============================================================
   SECTION 05 : 척추 관절
   ============================================================ */
.section05 {
    background: var(--color-blue-gray);
    max-height: 854px;
    padding-top: 74px;
    margin-bottom:335px;
}

.section05 .zone_title {
    margin-bottom: 40px;
}

.section05 .zone_desc {
    margin-bottom: 100px;
}

.section05 .zone_desc p {
    font-size: 20px;
    color: var(--color-black);
}

.section05 .zone_content {
    display: flex;
    gap: 20px;
    justify-content: center;
    max-width: 1200px;
}

.section05 .area_card {
    width: 580px;
    height: 605px;
    flex: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
}

.section05 .area_card.active,
.section05 .area_card:hover {
    transform: translateY(-40px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

/* 이미지: 카드 전체 꽉 채우기 + 중앙 정렬 */
.section05 .card_img {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.section05 .card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
    will-change: transform;
    background-color: var(--color-white);
}

.section05 .area_card.active .card_img img,
.section05 .area_card:hover .card_img img {
    transform: scale(1.05);
}

/* 오버레이: 하단 260px 회색 반투명, 기본 숨김 → 호버 시 fadein + 위로 올라옴 */
.section05 .card_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 260px;
    padding: 35px 64px;
    background: linear-gradient(to bottom, rgba(189, 189, 189, 0.4), rgba(255, 255, 255, 0.4));
    color: var(--color-black);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
    will-change: opacity, transform;
}

.section05 .area_card.active .card_overlay,
.section05 .area_card:hover .card_overlay {
    opacity: 1;
    transform: translateY(0);
}

.section05 .card_title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-black);
}

.section05 .card_desc {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-black);
}


/* ============================================================
   SECTION 06 : FAQ
   ============================================================ */
.section06 {
    background: var(--color-white);
}

.section06 .zone_title {
    margin-bottom: 60px;
}

.section06 .area_faq {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section06 .faq_item {
    width: 1180px;
    position: relative;
    background: var(--color-faq-bg);
    border-radius: 30px;
    padding: 26px 50px 25px 84px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.section06 .faq_item.active {
    background: var(--color-dark-navy);
    padding: 58px 116px 55px 84px;
}

.section06 .faq_question {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s;
}

.section06 .q_mark {
    font-family: 'Gmarket Sans', Pretendard, sans-serif;
    color: var(--color-deep-navy);
    font-weight: 700;
    font-size: 26px;
    margin-right: 10px;
    flex-shrink: 0;
    align-self: flex-start;
}

.section06 .faq_item.active .q_mark {
    color: var(--color-faq-active);
}

.section06 .q_text {
    font-size: 26px;
    font-weight: 600;
    flex: 1;
    color: var(--color-deep-navy);
}

.section06 .faq_item.active .q_text {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-faq-active);
}

.section06 .q_toggle {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 40px;
    right: 50px;
    padding: 15px;
    margin: -15px;
    cursor: pointer;
    transition: transform 0.3s;
}

.section06 .q_toggle::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    border-right: 2px solid var(--color-deep-navy);
    border-bottom: 2px solid var(--color-deep-navy);
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform 0.3s, border-color 0.3s;
}

.section06 .faq_item.active .q_toggle {
    top: 74px;
    right: 50px;
    padding: 15px;
    margin: -15px;
}

.section06 .faq_item.active .q_toggle::before {
    border-color: var(--color-faq-active);
    transform: translate(-50%, -30%) rotate(-135deg);
}

.section06 .faq_answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding-bottom 0.4s ease;
}

.section06 .faq_answer p {
    font-size: 18px;
    font-weight: 300;
    color: var(--color-white);
    padding-left: 45px;
}

.section06 .faq_item.active .faq_answer {
    max-height: 300px;
    margin-top: 22px;
}


/* ============================================================
   SECTION 07 : 통증 클리닉
   ============================================================ */
.section07 {
    background: var(--color-white);
    height: 1068px;
}

/* 바닥 배경 레이어 */
.section07::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 674px;
    background: var(--color-blue-gray);
    z-index: 0;
}

/* 콘텐츠가 바닥 레이어 위에 표시되도록 */
.section07 .zone_title,
.section07 .zone_desc,
.section07 .zone_content {
    position: relative;
    z-index: 1;
}

.section07 .zone_title {
    margin-bottom: 62px;
}

.section07 .zone_desc p {
    font-size: 26px;
    color: var(--color-black);
}

.section07 .zone_tabs {
    display: flex;
    gap: 30px;
    position: absolute;
    top: 145px;
    left: 200px;
    z-index: 2;
}

.section07 .tab_btn {
    padding: 8px 32px;
    border: 0;
    border-radius: 30px;
    background: transparent;
    font-size: 20px;
    font-weight: 600;
    color: #A2A2A2;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Pretendard', sans-serif;
}

.section07 .tab_btn.active {
    border: 1px solid var(--color-deep-navy);
    color: var(--color-deep-navy);
}

.section07 .zone_content {
    position: relative;
    max-width: 1400px;
    padding-left: 200px;
}

.section07 .tab_panel {
    display: none;
    position: relative;
}

.section07 .tab_panel.active {
    display: block;
}

/* 탭 전환 애니메이션: 텍스트 아래→위, 이미지 오른쪽→왼쪽 */
.section07 .tab_panel.active .panel_text {
    animation: s07FadeInUp 0.6s ease both;
}

.section07 .tab_panel.active .panel_img {
    animation: s07FadeInLeft 0.65s ease both;
    animation-delay: 0.1s;
}

@keyframes s07FadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes s07FadeInLeft {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.section07 .panel_text {
    width: 550px;
    padding-top: 240px;
    color: var(--color-deep-navy);
}

.section07 .panel_text .text01 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 18px;
}

.section07 .panel_text .text02 {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 60px;
}

.section07 .feature_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 0;
    margin-bottom: 60px;
}

.section07 .feature_item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 20px;
    font-weight: 500;
}

.section07 .feature_item::before {
    content: "";
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: url("../img/icon_check.png") no-repeat center / contain;
}

.section07 .detail_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section07 .detail_list li {
    font-size: 16px;
    font-weight: 400;
    color: #4D4D4D;
    padding: 2px 0;
    padding-left: 12px;
    position: relative;
}

.section07 .detail_list li::before {
    content: "·";
    position: absolute;
    left: 0;
    top: 2px;
    font-weight: 800;
    color: #4D4D4D;
}

.section07 .panel_img {
    position: absolute;
    top: 0;
}

.section07 .panel_img img {
    display: block;
    width: auto;
    height: auto;
}

#tab7_1 .panel_img {
    left: 600px;
    top: -40px;
}

#tab7_2 .panel_text {
    width: 586px;
}

#tab7_2 .panel_img {
    left: 706px;
    top: 6px;
}


/* ============================================================
   SECTION 08 : 주사 치료
   ============================================================ */
.section08 {
    background: var(--color-black);
    position: relative;
    overflow: hidden;
}

.section08 .zone_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 997px;
    height: 100%;
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    opacity: 0.35;
    z-index: 0;
}

.section08 .zone_inner {
    position: relative;
    z-index: 1;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    gap: 80px;
    align-items: flex-start;
    min-height: 997px;
}

/* 좌측 영역: title + title_sub + tabs */
.section08 .zone_left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    padding-top: 200px;
}

.section08 .zone_title {
    text-align: left;
    color: var(--color-white);
    margin-bottom: 100px;
}

.section08 .zone_title .title {
    color: var(--color-white);
    font-size: 30px;
    font-weight: 700;
}

.section08 .zone_title .title_sub {
    color: var(--color-white);
    font-size: 24px;
    font-weight: 400;
    margin-top: 15px;
}

.section08 .zone_tabs {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 60px;
}

.section08 .zone_tabs .tab_btn {
    max-width: 193px;
    height: 35px;
    padding: 0 20px;
    border: 0;
    border-radius: 30px;
    background: transparent;
    font-size: 20px;
    font-weight: 400;
    color: #A2A2A2;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Pretendard', sans-serif;
    text-align: center;
    width: 100%;
    white-space: nowrap;
}

.section08 .zone_tabs .tab_btn:hover {
    color: var(--color-white);
}

.section08 .zone_tabs .tab_btn.active {
    border: 1px solid var(--color-tab-active);
    color: var(--color-tab-active);
    font-weight: 600;
}

/* 우측 영역: 세로 슬라이드 */
.section08 .zone_right {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
}

.section08 .slide_viewport {
    width: 100%;
    max-width: 699px;
    height: 823px;
    overflow: hidden;
}

.section08 .slide_viewport .swiper-slide {
    height: 708px;
}

.section08 .panel_card {
    background: var(--color-white);
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 708px;
}

.section08 .panel_visual {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.section08 .panel_visual video {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 510px;
    height: 460px;
    max-width: 100%;
    object-fit: cover;
    z-index: 1;
}

.section08 .panel_visual .layer_mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
}

.section08 .panel_visual .layer_deco {
    position: absolute;
    width: 50%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
}

.section08 .swiper-slide-active .panel_visual .layer_deco {
    opacity: 1;
}

/* 슬라이드별 layer_deco 위치 개별 조정 */
.section08 [data-slide="tab8_1"] .panel_visual .layer_deco {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -57%);
    width: 63%;
}

.section08 [data-slide="tab8_2"] .panel_visual .layer_deco {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -56%);
    width: 68%;
}

.section08 [data-slide="tab8_3"] .panel_visual .layer_deco {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -57%);
    width: 63%;
}

.section08 [data-slide="tab8_2"] .panel_text .text02 {
    padding: 0 12px;
}

.section08 .panel_text {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 394px;
    z-index: 4;
    color: var(--color-text-dark);
    text-align: center;
}

.section08 .panel_text .text02 {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-black);
    padding: 0 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section08 .panel_text .text02.text_visible {
    opacity: 1;
    transform: translateY(0);
}

.section08 .zone_marquee.marquee_s08 {
    position: relative;
    z-index: 1;
    background: var(--color-white);
    padding-top:70px;
}

.section08 .zone_marquee.marquee_s08 .marquee_track span {
    color: #A2A2A2;
}


/* ============================================================
   SECTION 09 : 도수 운동 치료
   ============================================================ */
.section09 {
    background: var(--color-white);
    position: relative;
    overflow-x: hidden;
}

/* symbol 배경 데코 */
.section09 .symbol_left,
.section09 .symbol_right {
    position: absolute;
    top: 400px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.05;
    z-index: 0;
}
.section09 .symbol_left {
    left: 0;
    width: 644px;
    height: 644px;
    background: url('../img/symbol_1.png') no-repeat center/contain;
}
.section09 .symbol_right {
    right: 0;
    width: 650px;
    height: 651px;
    background: url('../img/symbol_2.png') no-repeat center/contain;
}

.section09 .zone_title,
.section09 .zone_desc,
.section09 .zone_tabs,
.section09 .zone_content {
    position: relative;
    z-index: 1;
}

.section09 .zone_title {
    margin-bottom: 72px;
}

.section09 .zone_desc p {
    font-size: 30px;
    color: var(--color-black);
}

.section09 .zone_tabs {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-bottom: 60px;
}

.section09 .tab_btn {
    padding: 10px 45px;
    border: 1px solid transparent;
    border-radius: 30px;
    background: transparent;
    font-size: 20px;
    font-weight: 500;
    color: var(--color-black);
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Pretendard', sans-serif;
}

.section09 .tab_btn.active {
    border: 1px solid #00263D;
    color: var(--color-deep-navy);
    font-weight: 600;
}

.section09 .zone_content {
    max-width: 1420px;
}

.section09 .area_cards {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    padding-top: 50px;
}

/* 카드 기본 상태 */
.section09 .card_item {
    flex: 1;
    width: 340px;
    height: 724px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.5s ease;
    will-change: transform;
}
.card_item a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* 배경 이미지 */
.section09 .card_bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: filter 0.5s ease;
    filter: grayscale(70%) brightness(0.4);
}

/* card_text: 카드 하단 레이어 */
.section09 .card_text {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 284px;
    padding: 0 8px 90px;
    opacity: 0;
    transition: opacity 0.45s ease, transform 0.45s ease;
    z-index: 2;
    text-align: center;
}

.section09 .card_text .text01 {
    font-size: 30px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 12px;
}

.section09 .card_text .text02 {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-white);
}

/* 호버 / 활성 상태 */
.section09 .card_item.active,
.section09 .card_item:hover {
    transform: translateY(-50px);
}

.section09 .card_item.active .card_bg,
.section09 .card_item:hover .card_bg {
    filter: grayscale(0%) brightness(0.8);
}

.section09 .card_item.active .card_text,
.section09 .card_item:hover .card_text {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ============================================================
   SECTION 10 : 둘러보기
   ============================================================ */
.section10 {
    background: var(--color-white);
}

.section10 .zone_title {
    margin-bottom: 60px;
}

.section10 .zone_content {
    display: flex;
    gap: 20px;
    max-width: 1420px;
}

.section10 .area_main_view {
    flex: 0 0 940px;
    height: 785px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.section10 .main_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.section10 .main_img.active {
    opacity: 1;
}

.section10 .area_thumbs {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 220px);
    grid-template-rows: repeat(5, 141px);
    gap: 20px;
    align-content: start;
}

.section10 .thumb_item {
    width: 220px;
    height: 141px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.section10 .thumb_item.active {
    opacity: 1;
}

.section10 .thumb_item:hover {
    opacity: 0.75;
}

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


/* ============================================================
   SECTION 11 : 오시는 길
   ============================================================ */
.section11 {
    background: var(--color-white);
    margin-bottom: 0;
    min-height: 1360px;
}

.section11 .zone_content {
    max-width: 100%;
    padding: 0;
}

.section11 .area_info_grid {
    display: flex;
    justify-content: center;
    gap: 150px;
    height: 480px;
    background: var(--color-deep-navy);
    color: var(--color-white);
}

.section11 .info_box {
    background: transparent;
    padding-top:100px;
    border-radius: 0;
    border: none;
    text-align: center;
    color: var(--color-white);
}
.section11 .hours_list { list-style: none; padding: 0; margin: 0; }
.section11 .hours_list li { display: flex; justify-content: space-between; width: 100%; letter-spacing:2px }

.section11 .info_box.hours { width: 255px; }
.section11 .info_box.contact { width: 217px; }
.section11 .info_box.parking { width: 313px; }
.section11 .info_box.reservation { width: 157px; }
.section11 .info_box.contact .box_title { margin-bottom: 78px; }
.section11 .info_box.reservation .box_title { margin-bottom: 72px; }
.section11 .info_box.reservation .box_desc { margin-bottom: 60px; }

.section11 .box_title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 24px;
}

.section11 .box_desc {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 78px;
}

.section11 .hours_list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.section11 .hours_list li {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 400;
    padding: 5px 0;
}

.section11 .hours_list li .day {
    display: flex;
    justify-content: space-between;
    width: 80px;
    font-weight: 600;
    flex-shrink: 0;
}

.section11 .caution {
    font-size: 14px;
    margin-top: 8px;
    font-weight: 400;
}

.section11 .phone_number {
    font-size: 32px;
    font-weight: 700;
    display: block;
    margin-top: 15px;
    transition: opacity 0.3s;
}

.section11 .phone_number:hover {
    opacity: 0.8;
}

.section11 .parking_item {
    margin-bottom: 45px;
}

.section11 .parking_title {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 12px;
    padding: 4px 20px;
    border: 1px solid var(--color-white);
    border-radius: 20px;
}

.section11 .parking_desc {
    font-size: 14px;
    font-weight: 400;
}

.section11 .parking_warning {
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}
.section11 .parking_warning::before {
    content: "\26A0";
    font-size: 15px;
    flex-shrink: 0;
}

.section11 .btn_reserve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    width: 46px;
    border-radius: 50%;
    font-size: 20px;
    transition: background 0.3s;
}

.section11 .btn_reserve:hover {
    background: rgba(255, 255, 255, 0.25);
}

.section11 .btn_reserve img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.section11 .btn_reserve span {
    display: none;
}

.section11 .zone_map {
    position: relative;
    height: 680px;
    background:
        linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px),
        #cccc66;
    background-size: 30px 30px;
}

.section11 .area_address {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    padding: 40px 30px;
    font-size: 30px;
    font-weight: 600;
    color: var(--color-text-dark);
    background: rgba(255, 255, 255, 0.6);
}

.section11 #map {
    width: 100%;
    height: 100%;
}


/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background: var(--color-white);
    color: var(--color-text-gray);
    font-size: 16px;
    font-weight: 400;
    min-height: 470px;
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 0 !important;
}

.footer .footer_inner {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
}

.footer .area_company_info {
    flex: 1;
    margin-left: 88px;
}

.footer .area_links {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 53px;
}

.footer .area_sns {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-left: 87px;
}

.footer .area_logo {
    flex-shrink: 0;
}

.footer .area_logo img {
    height: 77px;
}

.footer .box_info {
    display: inline;
}

.footer .box_info::after {
    content: " ｜ ";
}

.footer .box_info:nth-child(3)::after,
.footer .box_info:last-of-type::after {
    content: none;
}

.footer .box_info a {
    color: inherit;
}

.footer .area_copyright {
    margin-top: 2px;
}

.footer .area_links a {
    font-size: 20px;
    white-space: nowrap;
}

.footer .sns_link img {
    height: auto;
    border-radius: 10px;
}

.footer .sns_link:first-child img {
    width: 38px;
}

.footer .sns_link:last-child img {
    width: 35px;
}


/* ============================================================
   GO TO TOP BUTTON
   ============================================================ */
.btn_go_top {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 90;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(25, 118, 210, 0.4);
    transition: all 0.3s;
    padding: 0;
    outline: none;
}

.btn_go_top:hover {
    background: #1565C0;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(25, 118, 210, 0.5);
}

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

.arrow {
    width: 10px;
    height: 10px;
    position: relative;
}

.arrow::before,
.arrow::after {
    content: '';
    position: absolute;
}

.arrow::before {
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-white);
    border-right: 0;
    border-bottom: 0;
}

.arrow--top {
    transform: rotate(45deg);
}


/* ============================================================
   MOBILE HEADER (hamburger menu)
   ============================================================ */
.navbar-toggler,
.navbar-toggler span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
}

.navbar-toggler {
    position: relative;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.navbar-toggler span {
    position: absolute;
    left: 0;
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    transition: all 0.3s;
}

.navbar-toggler span:nth-of-type(1) {
    top: 6px;
}

.navbar-toggler span:nth-of-type(2) {
    top: 14px;
}

.navbar-toggler span:nth-of-type(3) {
    top: 22px;
}

/* Hamburger closed state (3 lines) */
.zone_header.mo.closed .navbar-toggler span:nth-of-type(1) {
    top: 6px;
    transform: none;
}

.zone_header.mo.closed .navbar-toggler span:nth-of-type(2) {
    top: 14px;
    opacity: 1;
}

.zone_header.mo.closed .navbar-toggler span:nth-of-type(3) {
    top: 22px;
    transform: none;
}

/* Hamburger open state (X shape) */
.zone_header.mo:not(.closed) .navbar-toggler span:nth-of-type(1) {
    top: 14px;
    transform: rotate(-45deg);
}

.zone_header.mo:not(.closed) .navbar-toggler span:nth-of-type(2) {
    opacity: 0;
}

.zone_header.mo:not(.closed) .navbar-toggler span:nth-of-type(3) {
    top: 14px;
    transform: rotate(45deg);
}


/* ============================================================
   RESPONSIVE : max-width 1920px (VW scaling)
   ============================================================ */
@media only screen and (max-width: 1920px) {

    .section {
        margin-bottom: 13.02vw;
    }

    .section .zone_content {
        max-width: 62.50vw;
    }

    .section .zone_title {
        margin-bottom: 4.69vw;
    }

    .section .zone_title .title {
        font-size: 3.125vw;
        margin-bottom: 0.52vw;
    }

    .section .zone_title .title_sub {
        font-size: 1.46vw;
        margin-bottom: 0.78vw;
    }

    .section .zone_title .en_name {
        font-size: 0.63vw;
        letter-spacing: 1.52vw;
        margin-right: -1.52vw;
    }

    .section .zone_desc {
        margin-bottom: 2.60vw;
    }

    .section .zone_desc p {
        font-size: 0.83vw;
    }

    .header .zone_header {
        padding: 0 3.13vw;
        height: 4.69vw;
    }

    .header .area_logo img {
        height: 3.07vw;
    }

    .header .area_gnb {
        gap: 3.28vw;
    }

    .header .area_gnb a {
        font-size: 0.94vw;
        height: 4.69vw;
    }

    /* Hero */
    .zone_visual .zone_text {
        line-height: 1.4;
        width: 43.23vw;
        height: 23.44vw;
        top: 16.41vw;
        padding-left: 9.11vw;
    }

    .slide01 .zone_text { padding-left: 9.11vw; }
    .slide02 .zone_text { padding-left: 6.51vw; }
    .slide03 .zone_text { padding-left: 9.90vw; }

    .zone_visual .zone_text .text_sub {
        font-size: 1.5625vw;
    }

    .zone_visual .zone_text .text_main {
        font-size: 2.604vw;
        margin-bottom: 2.08vw;
    }

    .zone_visual .zone_text .text_desc {
        font-size: 1.042vw;
    }

    .section_main .zone_message {
        font-size: 1.35vw;
    }

    .zone_autoplay {
        gap: 0.52vw;
    }

    .zone_autoplay .autoplay_current,
    .zone_autoplay .autoplay_total {
        font-size: 1.042vw;
    }

    .autoplay_progress {
        width: 6.979vw;
        height: 0.10vw;
    }

    .autoplay_toggle {
        margin-left: 4.479vw;
    }

    .icon_pause {
        gap: 0.21vw;
    }

    .quickmenu {
        width: 5.104vw;
        margin-left: calc(50% - 5.104vw); /* 우측 끝 flush 유지 */
        gap: 1.615vw;
    }

    .quickmenu_panel {
        width: 5.104vw;
        border-radius: 1.563vw 0 0 1.563vw;
        padding: 0.885vw 0 0.938vw;
        gap: 1.042vw;
    }

    .quickmenu_item {
        width: 3.854vw;
        height: 3.854vw;
        padding-top: 0.417vw;
        gap: 0.156vw;
    }

    .quickmenu_item span {
        font-size: 0.781vw;
    }

    .quickmenu_icon img {
        height: auto;
    }
    .quick01 .quickmenu_icon img { width: 1.979vw; }
    .quick02 .quickmenu_icon img { width: 1.25vw; }
    .quick03 .quickmenu_icon img { width: 1.667vw; }
    .quick04 .quickmenu_icon img { width: 1.979vw; }

    .quickmenu_top {
        width: 4.063vw;
        height: 4.063vw;
    }

    .quickmenu_top::before {
        top: calc(50% + 0.495vw); /* 9.5px → 9.5/1920 */
        width: 1.406vw;           /* 27px → 27/1920 */
        height: 1.406vw;
        border-top-width: 0.104vw; /* 2px → 2/1920 */
        border-left-width: 0.104vw;
    }

    .zone_scroll {
        bottom: 4.17vw;
        gap: 0.833vw;
    }

    .zone_scroll .scroll_mouse img {
        width: 2.917vw;
    }

    .zone_scroll .scroll_text {
        font-size: 0.781vw;
    }

    .marquee_track span {
        font-size: 10.42vw;
        padding: 0 2.08vw;
        letter-spacing: 1.04vw;
    }

    .zone_marquee {
        padding: 3.13vw 0;
    }

    /* Section 01 */
    .section01 .zone_title .title {
        font-size: 2.604vw;
    }

    .section01 .area_grid {
        gap: 1.56vw;
    }

    .section01 .grid_row {
        gap: 1.56vw;
    }

    .section01 .grid_row.row_top {
        transform: translateX(-2.08vw);
    }

    .section01 .grid_row.row_bottom {
        transform: translateX(2.08vw);
    }

    .section01 .grid_item {
        width: 17.71vw;
        height: 23.75vw;
        border-radius: 0.78vw;
    }

    .section01 .item_text {
        height: 13.02vw;
        padding: 1.30vw;
    }

    .section01 .item_title {
        font-size: 1.15vw;
        margin-bottom: 0.63vw;
        padding-bottom: 0.63vw;
        padding-left: 0.78vw;
    }

    .section01 .item_text ul li {
        font-size: 0.73vw;
        padding: 0.21vw 0 0.21vw 0.78vw;
    }

    /* Section 02 */
    .section02 .zone_content {
        max-width: 74.48vw;
    }

    .section02 .slide_inner {
        width: 74.48vw;
        height: 39.74vw;
    }

    .section02 .slide-type-a .box_left {
        padding: 0 0 0 2.08vw;
    }

    .section02 .slide-type-b .box_left {
        padding: 0 2.08vw 0 0;
    }

    .section02 .box_left {
        width: 18.75vw;
    }

    .section02 .box_num {
        font-size: 11.46vw;
        margin-bottom: 1.56vw;
    }

    .section02 .box_text .text01 {
        font-size: 1.04vw;
        margin-bottom: 0.78vw;
    }

    .section02 .box_text .text02 {
        font-size: 0.94vw;
    }

    .section02 .box_img {
        width: 55.21vw;
    }

    /* Section 03 */
    .section03 .zone_content {
        max-width: 61.46vw;
    }

    .section03 .symbol_deco {
        left: calc(50% - 46.35vw);
        bottom: -18.75vw;
        width: 33.54vw;
        height: 33.54vw;
    }

    .section03 .area_stats_grid {
        grid-template-columns: 17.71vw 17.71vw 1fr;
        grid-template-rows: 17.71vw 17.71vw;
        gap: 1.04vw;
        width: 61.46vw;
    }

    .section03 .stat_item {
        padding: 3.02vw 1.88vw;
    }

    .section03 .stat_item.stat_experience {
        padding: 1.82vw 1.56vw 0;
    }

    .section03 .stat_label {
        font-size: 1.04vw;
        margin-bottom: 0.78vw;
    }

    .section03 .stat_number {
        gap: 0.26vw;
    }

    .section03 .stat_number .counter {
        font-size: 2.60vw;
    }

    .section03 .stat_number .unit {
        font-size: 1.04vw;
    }

    .section03 .stat_graph .graph_wrap {
        margin-top: 1.04vw;
    }

    .section03 .exp_number {
        margin-bottom: -0.73vw;
        margin-right: -2.34vw;
    }

    .section03 .exp_number .digit {
        font-size: 20.83vw;
        letter-spacing: -2.86vw;
    }

    /* Section 04 */
    .section04 .zone_content {
        max-width: 100%;
    }

    .section04 .zone_title {
        margin-bottom: 2.60vw;
    }

    .section04 .scroll_track {
        height: 36.46vw;
    }

    .section04 .doctor_panel {
        height: 36.46vw;
    }

    /* Section 05 */
    .section05 {
        max-height: 44.48vw;
        padding-top: 3.85vw;
        margin-bottom: 17.45vw;
    }

    .section05 .zone_title {
        margin-bottom: 2.08vw;
    }

    .section05 .zone_desc {
        margin-bottom: 5.21vw;
    }

    .section05 .zone_desc p {
        font-size: 1.04vw;
    }

    .section05 .zone_content {
        gap: 1.04vw;
        max-width: 62.50vw;
    }

    .section05 .area_card {
        width: 30.21vw;
        height: 31.51vw;
        border-radius: 0.78vw;
    }

    .section05 .area_card.active,
    .section05 .area_card:hover {
        transform: translateY(-2.08vw);
    }

    .section05 .card_overlay {
        height: 13.54vw;
        padding: 1.82vw 3.33vw;
    }

    .section05 .card_title {
        font-size: 1.35vw;
        margin-bottom: 0.63vw;
    }

    .section05 .card_desc {
        font-size: 1.04vw;
        margin-bottom: 0.78vw;
    }

    /* Section 06 */
    .section06 .zone_title {
        margin-bottom: 3.13vw;
    }

    .section06 .area_faq {
        gap: 1.04vw;
    }

    .section06 .faq_item {
        width: 61.46vw;
        padding: 1.35vw 2.60vw 1.30vw 4.38vw;
        border-radius: 1.56vw;
    }

    .section06 .faq_item.active {
        padding: 3.02vw 6.04vw 2.86vw 4.38vw;
    }

    .section06 .faq_item.active .faq_answer {
        max-height: 15.63vw;
        margin-top: 1.15vw;
    }

    .section06 .q_mark {
        font-size: 1.35vw;
        margin-right: 0.52vw;
    }

    .section06 .q_text {
        font-size: 1.35vw;
    }

    .section06 .faq_item.active .q_text {
        font-size: 1.35vw;
    }

    .section06 .q_toggle {
        width: 2.08vw;
        height: 2.08vw;
        top: 2.08vw;
        right: 2.60vw;
        padding: 0.78vw;
        margin: -0.78vw;
    }

    .section06 .q_toggle::before {
        width: 1.04vw;
        height: 1.04vw;
        border-right-width: 0.10vw;
        border-bottom-width: 0.10vw;
    }

    .section06 .faq_item.active .q_toggle {
        top: 3.85vw;
        right: 2.60vw;
        padding: 0.78vw;
        margin: -0.78vw;
    }

    .section06 .faq_answer p {
        font-size: 0.94vw;
        padding-left: 2.34vw;
    }

    /* Section 07 */
    .section07 {
        height: 55.63vw;
    }

    .section07::before {
        height: 35.10vw;
    }

    .section07 .zone_title {
        margin-bottom: 3.23vw;
    }

    .section07 .zone_desc p {
        font-size: 1.35vw;
    }

    .section07 .zone_content {
        max-width: 72.92vw;
        padding-left: 10.42vw;
    }

    .section07 .zone_tabs {
        gap: 1.56vw;
        top: 7.55vw;
        left: 10.42vw;
    }

    .section07 .tab_btn {
        padding: 0.42vw 1.67vw;
        border-radius: 1.56vw;
        font-size: 1.04vw;
    }

    .section07 .tab_panel {
        gap: 2.60vw;
    }

    .section07 .panel_text {
        width: 28.65vw;
        padding-top: 12.50vw;
    }

    .section07 .panel_text .text01 {
        font-size: 1.875vw;
        margin-bottom: 0.94vw;
    }

    .section07 .panel_text .text02 {
        font-size: 1.15vw;
        margin-bottom: 3.13vw;
    }

    .section07 .feature_list {
        gap: 0.63vw 0;
        margin-bottom: 3.13vw;
    }

    .section07 .feature_item {
        font-size: 1.04vw;
        gap: 0.78vw;
    }

    .section07 .feature_item::before {
        width: 1.25vw;
        height: 1.25vw;
    }

    .section07 .detail_list li {
        font-size: 0.83vw;
    }

    #tab7_1 .panel_img {
        left: 31.25vw;
        top: -2.08vw;
    }

    #tab7_1 .panel_img img {
        width: 30.47vw;
    }

    #tab7_2 .panel_text {
        width: 30.52vw;
    }

    #tab7_2 .panel_img {
        left: 36.77vw;
        top: 0.31vw;
    }

    #tab7_2 .panel_img img {
        width: 17.92vw;
    }

    /* Section 08 */
    .section08 .zone_bg {
        max-height: 51.93vw;
    }

    .section08 .zone_inner {
        max-width: 67.71vw;
        gap: 4.17vw;
        min-height: 51.93vw;
    }

    .section08 .zone_left {
        padding-top: 10.42vw;
    }

    .section08 .zone_title {
        margin-bottom: 5.21vw;
    }

    .section08 .zone_title .title {
        font-size: 1.56vw;
    }

    .section08 .zone_title .title_sub {
        font-size: 1.25vw;
        margin-top: 0.78vw;
    }

    .section08 .zone_tabs {
        gap: 0.78vw;
        padding-left: 3.13vw;
    }

    .section08 .zone_tabs .tab_btn {
        max-width: 10.05vw;
        height: 1.82vw;
        padding: 0 1.04vw;
        border-radius: 1.56vw;
        font-size: 1.04vw;
    }

    .section08 .slide_viewport {
        max-width: 36.41vw;
        height: 42.86vw;
    }

    .section08 .slide_viewport .swiper-slide {
        height: 36.88vw;
    }

    .section08 .panel_card {
        height: 36.88vw;
        border-radius: 1.56vw;
    }

    .section08 .panel_visual video {
        width: 26.4vw;
        height: 23.96vw;
    }

    .section08 .panel_text {
        width: 20.52vw;
        bottom: 2.60vw;
    }

    .section08 .panel_text .text02 {
        font-size: 0.94vw;
        padding: 0 1.04vw;
    }

    .section08 .zone_marquee.marquee_s08 {
        padding-top: 3.65vw;
        padding-bottom:0;
    }

    /* Section 09 */
    .section09 .zone_title {
        margin-bottom: 3.75vw;
    }

    .section09 .zone_desc p {
        font-size: 1.56vw;
    }

    .section09 .zone_tabs {
        gap: 1.56vw;
        margin-bottom: 3.13vw;
    }

    .section09 .tab_btn {
        padding: 0.52vw 2.34vw;
        border-radius: 1.56vw;
        font-size: 1.04vw;
    }

    .section09 .zone_content {
        max-width: 73.96vw;
    }

    .section09 .symbol_left {
        top: 20.83vw;
        width: 33.54vw;
        height: 33.54vw;
        left: -4.17vw;
    }

    .section09 .symbol_right {
        top: 20.83vw;
        width: 33.85vw;
        height: 33.91vw;
        right: -4.17vw;
    }

    .section09 .area_cards {
        gap: 1.04vw;
        padding-top: 2.60vw;
    }

    .section09 .card_item {
        width: 17.71vw;
        height: 37.71vw;
        border-radius: 0.83vw;
    }

    .section09 .card_item.active,
    .section09 .card_item:hover {
        transform: translateY(-2.60vw);
    }

    .section09 .card_text {
        width: 14.79vw;
        padding: 0 0.42vw 4.69vw;
    }

    .section09 .card_text .text01 {
        font-size: 1.56vw;
        margin-bottom: 0.63vw;
    }

    .section09 .card_text .text02 {
        font-size: 0.83vw;
    }

    /* Section 10 */
    .section10 .zone_title {
        margin-bottom: 3.13vw;
    }

    .section10 .zone_content {
        max-width: 73.96vw;
        gap: 1.04vw;
    }

    .section10 .area_main_view {
        flex: 0 0 48.96vw;
        height: 40.89vw;
        border-radius: 1.04vw;
    }

    .section10 .area_thumbs {
        grid-template-columns: repeat(2, 11.46vw);
        grid-template-rows: repeat(5, 7.34vw);
        gap: 1.04vw;
    }

    .section10 .thumb_item {
        width: 11.46vw;
        height: 7.34vw;
        border-radius: 0.63vw;
    }

    /* Section 11 */
    .section11 {
        min-height: 70.83vw;
        margin-bottom: 0;
    }

    .section11 .zone_content {
        max-width: 100%;
    }

    .section11 .area_info_grid {
        gap: 7.81vw;
        height: 25vw;
    }

    .section11 .info_box {
        padding-top: 5.21vw;
    }

    .section11 .info_box.hours   { width: 13.28vw; }
    .section11 .info_box.contact { width: 11.30vw; }
    .section11 .info_box.parking { width: 16.30vw; }
    .section11 .info_box.reservation { width: 8.18vw; }

    .section11 .box_title {
        font-size: 1.56vw;
        margin-bottom: 1.25vw;
    }

    .section11 .info_box.contact .box_title    { margin-bottom: 4.06vw; }
    .section11 .info_box.reservation .box_title { margin-bottom: 3.75vw; }

    .section11 .box_desc {
        font-size: 1.04vw;
        margin-bottom: 4.06vw;
    }

    .section11 .info_box.reservation .box_desc { margin-bottom: 3.13vw; }

    .section11 .hours_list {
        margin-bottom: 1.67vw;
    }

    .section11 .hours_list li {
        font-size: 1.04vw;
        padding: 0.26vw 0;
    }

    .section11 .hours_list li .day {
        width: 4.17vw;
    }

    .section11 .caution {
        font-size: 0.73vw;
        margin-top: 0.42vw;
    }

    .section11 .phone_number {
        font-size: 1.67vw;
        margin-top: 0.78vw;
    }

    .section11 .parking_title {
        font-size: 1.04vw;
        margin-top: 0.52vw;
        margin-bottom: 0.63vw;
        padding: 0.21vw 1.04vw;
        border-radius: 1.04vw;
    }

    .section11 .parking_desc {
        font-size: 0.73vw;
    }

    .section11 .parking_warning {
        font-size: 0.73vw;
        gap: 0.26vw;
    }

    .section11 .parking_warning::before {
        font-size: 0.78vw;
    }

    .section11 .parking_item {
        margin-bottom: 2.34vw;
    }

    .section11 .btn_reserve {
        width: 2.40vw;
        margin-top: 0.78vw;
    }

    .section11 .zone_map {
        height: 35.42vw;
        background-size: 6vw 6vw;
    }

    .section11 .area_address {
        font-size: 1.56vw;
        padding: 2.08vw 1.56vw;
    }

    /* GO TO TOP */
    .btn_go_top {
        bottom: 1.56vw;
        right: 1.56vw;
        width: 2.60vw;
        height: 2.60vw;
    }

    .arrow {
        width: 0.52vw;
        height: 0.52vw;
    }

    .arrow::before {
        border-width: 0.10vw;
    }

    /* Quickmenu icon spacing */
    .quickmenu_icon {
        margin-bottom: 0.21vw;
    }

    /* Footer */
    .footer {
        min-height: 24.48vw;
        font-size: 0.83vw;
    }

    .footer .footer_inner {
        max-width: 73.96vw;
    }

    .footer .area_company_info {
        margin-left: 4.58vw;
    }

    .footer .area_links {
        margin-left: 2.76vw;
        gap: 0.52vw;
    }

    .footer .area_sns {
        margin-left: 4.53vw;
        gap: 0.63vw;
    }

    .footer .area_logo img {
        height: 4.01vw;
    }

    .footer .area_links a {
        font-size: 1.04vw;
    }

    .footer .sns_link img {
        border-radius: 0.52vw;
    }

    .footer .sns_link:first-child img {
        width: 1.98vw;
    }

    .footer .sns_link:last-child img {
        width: 1.82vw;
    }
}
/* end @media max-width: 1920px */



/* ============================================================
   RESPONSIVE : max-width 750px (Mobile)
   ============================================================ */
@media only screen and (max-width: 750px) {

    .zone_visual {
        height: 72svh;
    }

    .pc {
        display: none !important;
    }

    .mo {
        display: block;
    }

    .section {
        max-width: 100vw;
        margin-bottom: 28vw;
    }

    .section .zone_content {
        padding: 0 4%;
        max-width: 100%;
    }

    /* --- Header Mobile --- */
    .header {
        height: 13.7vw;
        padding: 0;
        backdrop-filter: blur(10px);
    }

    .header::before {
        background: rgba(0, 0, 0, 0.9);
    }

    .header.scrolled::before {
        background: rgba(0, 0, 0, 0.9);
    }

    .header.fixed {
        padding: 0;
        background: rgba(27, 42, 74, 0.95);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .header .zone_header.pc {
        display: none !important;
    }

    .header .zone_header.mo {
        display: flex;
        height: 13.7vw;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        padding: 0 4%;
    }

    .header .zone_header.mo .area_logo {
        max-width: 31.9vw;
    }

    .header .zone_header.mo .area_logo img {
        height: 8.8vw;
    }

    .header .zone_header.mo .area_gnb {
        position: fixed;
        flex-direction: column;
        left: 0;
        transform: none;
        top: 13.7vw;
        width: 100%;
        height: calc(100vh - 13.7vw);
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        z-index: 200;
        padding-top: 9.1vw;
        opacity: 1;
        transition: opacity 0.3s;
    }

    .header .zone_header.mo.closed .area_gnb {
        display: none;
    }

    .header .zone_header.mo .area_gnb a {
        font-size: 4.1vw;
        margin-right: 0;
        height: auto;
        margin-bottom: 5.7vw;
        color: var(--color-white);
        justify-content: center;
    }

    .header .zone_header.mo .area_btn {
        display: flex;
        align-items: center;
    }

    /* --- Section titles mobile --- */
    .section .zone_title {
        margin-bottom: 6.8vw;
        padding: 0 4%;
    }

    .section .zone_title .title {
        font-size: 5.5vw;
        margin-bottom: 1.8vw;
    }

    .section .zone_title .title_sub {
        font-size: 4.1vw;
        margin-bottom: 2.3vw;
    }

    .section .zone_title .en_name {
        font-size: 2.0vw;
        letter-spacing: 3.1vw;
    }

    .section .zone_desc {
        padding: 0 4%;
        margin-bottom: 6.8vw;
    }

    .section .zone_desc p {
        font-size: 3.2vw;
        word-break: keep-all;
    }

    /* --- Hero slides mobile: 슬라이드별 background-position --- */
    .zone_visual .visual_slide .swiper-slide.slide01 {
        background-position: 64% center;
    }
    .zone_visual .visual_slide .swiper-slide.slide02 {
        background-position: 71% center;
    }
    .zone_visual .visual_slide .swiper-slide.slide03 {
        background-position: 64% center;
    }

    /* --- Hero mobile --- */
    .zone_visual .zone_text {
        width: 100%;
        height: auto;
        top: 50%;
        transform: translateY(-50%);
        padding: 8vw 6vw 8vw 8vw;
    }

    .slide01 .zone_text { padding-left: 8vw; }
    .slide02 .zone_text { padding-left: 6vw; }
    .slide03 .zone_text { padding-left: 9vw; }

    .zone_visual .zone_text .text_sub {
        font-size: 3.6vw;
        letter-spacing: 0.5vw;
    }

    .zone_visual .zone_text .text_main {
        font-size: 6.4vw;
        margin-bottom: 4.6vw;
    }

    .zone_visual .zone_text .text_desc {
        font-size: 3.2vw;
    }

    .section_main .zone_message {
        font-size: 3.3vw;
        bottom: -8vw;
        z-index: 1;
        line-height: 1.2;
    }

    .zone_text .en_name {
        font-size: 2.3vw;
        letter-spacing: 1.1vw;
    }

    .zone_intro {
        bottom: 27.4vw;
    }

    .zone_intro .text01 {
        font-size: 3.2vw;
    }

    .zone_intro .text02 {
        font-size: 3.6vw;
    }

    .marquee_track span {
        font-size: 11.4vw;
        padding: 0 4.6vw;
        letter-spacing: 2.3vw;
    }

    .zone_marquee {
        padding: 4.6vw 0;
    }

    .zone_autoplay {
        display: none;
    }

    .zone_scroll {
        bottom: 4.6vw;
        gap: 1.8vw;
    }

    .zone_scroll .scroll_mouse img {
        width: 8.8vw;
    }

    .zone_scroll .scroll_text {
        font-size: 2.7vw;
    }

    /* --- Section 01 mobile --- */
    .section01 {
        padding: 0;
    }

    .section01 .area_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3.4vw;
    }

    .section01 .grid_row {
        display: contents;
    }

    .section01 .grid_row.row_top,
    .section01 .grid_row.row_bottom {
        transform: none;
    }

    .section01 .grid_item {
        border-radius: 2.7vw;
        width: 100%;
        height: 66vw;
        box-shadow: 0 0.3vw 0.9vw rgba(0, 0, 0, 0.3);
    }

    .section01 .item_title {
        font-size: 4.1vw;
    }

    .section01 .item_text {
        height: 35.02vw;
        padding: 2.5vw;
    }

    .section01 .item_text ul li {
        font-size: 3vw;
    }

    /* --- Section 02 mobile --- */
    .section02 {
        padding: 0;
    }

    .section02 .slide_inner {
        flex-direction: column !important;
        width: 100%;
        height: auto;
        min-height: auto;
    }

    .section02 .box_left {
        width: 100%;
        padding: 6.8vw 4.6vw;
    }

    .section02 .box_num {
        font-size: 13.7vw;
        margin-bottom: 3.4vw;
    }

    .section02 .box_text .text01 {
        font-size: 3.6vw;
    }

    .section02 .box_text .text02 {
        font-size: 3.2vw;
    }

    .section02 .box_img {
        width: 100%;
        height: 57vw;
        margin-top: 2vw;
    }

    /* --- Section 03 mobile --- */
    .section03 {
        padding: 0;
    }

    .section03 .symbol_deco {
        left: 20vw;
        bottom: -40vw;
        width: 60vw;
        height: 60vw;
    }

    .section03 .area_stats_grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 44vw);
        gap: 3.4vw;
        width: 100%;
    }

    .section03 .stat_item {
        padding: 5.7vw 3.4vw;
        border-radius: 3.4vw;
        height: 44vw;
    }

    .section03 .stat_item.stat_experience {
        grid-column: 1 / -1;
        grid-row: auto;
        padding: 5.7vw 3.4vw 0;
        height: 44vw;
    }

    .section03 .stat_label {
        font-size: 3.5vw;
        margin-bottom: 2vw;
    }

    .section03 .stat_number .counter {
        font-size: 7.3vw;
    }

    .section03 .stat_number .unit {
        font-size: 3.2vw;
    }

    .section03 .exp_number .digit {
        font-size: 26vw;
    }

    /* --- Section 04 mobile (parallax active) --- */

    .section04 .zone_content {
        padding: 0;
    }

    .section04 .scroll_track {
        width: 100%;
        height: 73.46vw;
        overflow: hidden;
    }

    .section04 .panel01 {
        position: relative;
    }

    .section04 .panel02 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .section04 .box_photo {
        display: none;
    }

    .section04 .box_photo_mo {
        display: block;
        width: 100%;
        height: auto;
    }

    /* --- Section 05 mobile --- */
    .section05 {
        padding: 13.7vw 0;
        max-height: 150vw;
    }

    .section05 .zone_content {
        flex-direction: row;
        gap: 4vw;
    }

    .section05 .area_card {
        width: 44vw;
        height: 75vw;
        border-radius: 1.8vw;
    }

    .section05 .area_card.active,
    .section05 .area_card:hover {
        transform: none;
        box-shadow: none;
    }

    .section05 .area_card.active .card_img img,
    .section05 .area_card:hover .card_img img {
        transform: none;
    }

    .section05 .card_img img {
        object-fit: contain;
        object-position: center 2vw;
    }

    .section05 .card_overlay {
        opacity: 1;
        transform: translateY(0);
        height: 44vw;
        padding: 2vw;
    }

    .section05 .card_title {
        font-size: 4.2vw;
        margin-bottom: 1vw;
    }

    .section05 .card_desc {
        font-size: 3vw;
        opacity: 1;
        transform: translateY(0);
    }

    /* --- Section 06 mobile --- */
    .section06 {
        padding: 0;
    }

    .section06 .zone_title .title_sub {
        font-size: 4.6vw;
    }

    .section06 .area_faq {
        gap: 2.3vw;
    }

    .section06 .faq_item {
        width: 100%;
        padding: 4.6vw 9.1vw 4.1vw 4.6vw;
        border-radius: 3.6vw;
    }

    .section06 .faq_item.active {
        padding: 5.7vw 9.1vw 5.7vw 4.6vw;
    }

    .section06 .q_mark {
        font-size: 3.6vw;
        margin-top: -0.5vw;
    }

    .section06 .q_text {
        font-size: 3.4vw;
    }

    .section06 .faq_item.active .q_text {
        font-size: 3.4vw;
    }

    .section06 .q_toggle {
        width: 6.8vw;
        height: 6.8vw;
        top: 4.6vw;
        right: 3.4vw;
    }

    .section06 .q_toggle::before {
        width: 3.2vw;
        height: 3.2vw;
    }

    .section06 .faq_item.active .q_toggle {
        top: 5.7vw;
    }

    .section06 .faq_answer p {
        font-size: 3vw;
        padding-left: 4.9vw;
    }

    /* --- Section 07 mobile --- */
    .section07 .zone_desc {
        margin-bottom: 3vw;
    }

    .section07 {
        height: 135vw;
        padding: 0;
    }

    .section07::before {
        height: 97vw;
    }

    .section07 .zone_tabs {
        position: relative;
        top: 7vw;
        left: auto;
        flex-wrap: wrap;
        gap: 2.3vw;
        padding: 0 4%;
        margin-bottom: 6.8vw;
        justify-content: center;
    }

    .section07 .tab_btn {
        padding: 2.3vw 4.6vw;
        font-size: 3vw;
        border-radius: 6vw;
    }

    .section07 .tab_panel {
        position: relative;
        min-height: 60vw;
        top: 6vw;
    }

    .section07 .panel_text {
        width: 100%;
        padding-top: 0;
        position: relative;
        z-index: 1;
    }

    .section07 .panel_img {
        position: absolute;
        top: 0;
        right: 0;
        width: 55%;
        text-align: center;
        margin-top: 0;
        z-index: 0;
    }

    .section07 .panel_img img {
        max-width: 100%;
        height: auto;
    }

    #tab7_1 .panel_img,
    #tab7_2 .panel_img {
        top: 10vw;
        right: 0;
        left: unset;
        width: unset;
    }

    #tab7_1 .panel_img img {
        width: 50vw;
        opacity: 0.5;
    }

    #tab7_2 .panel_img img {
        width: 30vw;
        opacity: 0.5;
    }

    #tab7_2 .panel_text {
        width: 100%;
    }

    .section07 .panel_text .text01 {
        font-size: 4.6vw;
    }

    .section07 .panel_text .text02 {
        font-size: 3.2vw;
        margin-bottom: 6.8vw;
    }

    .section07 .feature_list {
        grid-template-columns: 1fr;
        margin-bottom: 6.8vw;
    }

    .section07 .feature_item {
        font-size: 3.2vw;
    }

    .section07 .feature_item::before {
        width: 4.1vw;
        height: 4.1vw;
    }

    .section07 .detail_list li {
        font-size: 3vw;
    }

    /* --- Section 08 mobile --- */
    .section08 {
        padding: 13.7vw 0 0;
    }

    .section08 .zone_bg {
        max-height: 50vw;
    }

    .section08 .zone_inner {
        flex-direction: column;
        gap: 6.8vw;
        max-width: 100%;
        padding: 0 4%;
        min-height: auto;
    }

    .section08 .zone_left {
        width: 100%;
        padding-top: 0;
    }

    .section08 .zone_title .title {
        font-size: 5.5vw;
    }

    .section08 .zone_title .title_sub {
        font-size: 3.2vw;
    }

    .section08 .zone_tabs {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2.3vw;
        justify-content: center;
        padding-left: 0;
    }

    .section08 .zone_tabs .tab_btn {
        border: 1px solid transparent;
        padding: 2.3vw 4.1vw;
        font-size: 3vw;
        border-radius: 6vw;
        width: auto;
        max-width: unset;
        height: auto;
    }

    .section08 .zone_right {
        width: 100%;
        align-self: auto;
        justify-content: center;
    }

    .section08 .slide_viewport {
        max-width: 100%;
        height: 115vw;
    }

    .section08 .slide_viewport .swiper-slide {
        height: 105vw;
    }

    .section08 .panel_card {
        height: 100vw;
        border-radius: 3.56vw;
    }

    .section08 .panel_visual video {
        width: 125%;
        height: auto;
        max-width: unset;
    }

    .section08 .panel_text {
        width: 80%;
        bottom: 5.5vw;
    }

    .section08 .panel_text .text02 {
        font-size: 3.2vw;
    }

    /* 슬라이드별 layer_deco 위치 개별 조정 */
    .section08 [data-slide="tab8_1"] .panel_visual .layer_deco {
        width: 67%;
    }

    .section08 [data-slide="tab8_2"] .panel_visual .layer_deco {
        width: 72%;
    }

    .section08 [data-slide="tab8_3"] .panel_visual .layer_deco {
        width: 67%;
    }

    /* --- Section 09 mobile --- */
    .section09 {
        padding: 0;
    }

    .section09 .zone_tabs {
        flex-wrap: wrap;
        gap: 2.3vw;
        padding: 0 4%;
    }

    .section09 .tab_btn {
        padding: 2.0vw 2.4vw;
        font-size: 2.8vw;
        border-radius: 6vw;
    }

    .section09 .area_cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3.4vw;
    }

    .section09 .card_item {
        flex: none;
        width: 100%;
        height: 68.4vw;
        border-radius: 2.83vw;
    }

    .section09 .card_item.active,
    .section09 .card_item:hover {
        transform: none;
    }

    .section09 .card_bg {
        filter: grayscale(0%) brightness(0.4);
    }

    .section09 .card_text {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        width: 40vw;
        padding: 0 0 3vw;
        height: 26vw;
    }

    .section09 .card_text .text01 {
        font-size: 4.1vw;
    }

    .section09 .card_text .text02 {
        font-size: 3vw;
    }

    /* --- Section 10 mobile --- */
    .section10 {
        padding: 0;
    }

    .section10 .zone_content {
        flex-direction: column;
        gap: 3.4vw;
    }

    .section10 .area_main_view {
        width: 100%;
        height: auto;
        flex: 0 0 77.96vw;
        border-radius: 4.0vw;
    }

    .section10 .area_thumbs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 1.8vw;
        padding-bottom: 2.3vw;
    }

    .section10 .thumb_item {
        flex: 0 0 13.7vw;
        height: 13.7vw;
        aspect-ratio: auto;
    }

    /* --- Section 11 mobile --- */
    .section11 {
        padding: 0;
        margin-bottom: 0;
    }

    .section11 .area_info_grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2vw;
        height: auto;
    }

    .section11 .info_box {
        width: 100%;
        padding: 3.8vw;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
    }

    .section11 .info_box.hours      { width: 45vw; }
    .section11 .info_box.contact    { width: 45vw; }
    .section11 .info_box.parking    { width: 45vw; }
    .section11 .info_box.reservation{ width: 45vw; }

    .section11 .box_title {
        font-size: 4.1vw;
        margin-bottom: 3.2vw;
    }

    .section11 .info_box.contact .box_title,
    .section11 .info_box.reservation .box_title  { margin-bottom: 10vw; }

    .section11 .box_desc {
        font-size: 3.2vw;
    }

    .section11 .info_box.reservation .box_desc {
        margin-bottom: 4.6vw;
    }

    .section11 .hours_list {
        margin-bottom: 4.3vw;
    }

    .section11 .hours_list li {
        font-size: 2.3vw;
        padding: 0.7vw 0;
    }

    .section11 .hours_list li .day {
        width: 10.7vw;
    }

    .section11 .caution {
        font-size: 2.4vw;
        margin-top: 1.1vw;
    }

    .section11 .phone_number {
        font-size: 4.8vw;
        margin-top: 6vw;
    }

    .section11 .parking_title {
        font-size: 2.7vw;
        margin-top: 1.3vw;
        margin-bottom: 1.6vw;
        padding: 0.5vw 2.7vw;
        border-radius: 2.7vw;
    }

    .section11 .parking_desc {
        font-size: 2.4vw;
    }

    .section11 .parking_warning {
        font-size: 2.4vw;
        gap: 0.7vw;
    }

    .section11 .parking_warning::before {
        font-size: 2.4vw;
        align-self: flex-start;
    }

    .section11 .parking_item {
        margin-bottom: 6vw;
    }

    .section11 .btn_reserve {
        width: 6vw;
        margin-top: 2vw;
    }

    .section11 .area_address {
        font-size: 3.0vw;
        padding: 2.6vw;
    }

    .section11 .zone_map {
        height: 57vw;
    }

    .section11 #map {
        height: 57vw;
        border-radius: 0;
    }

    /* --- Footer mobile --- */
    .footer {
        min-height: auto;
    }

    .footer .footer_inner {
        flex-direction: column;
        padding: 6.8vw 4.6vw 10vw;
        gap: 4.6vw;
        max-width: 100vw;
    }

    .footer .area_company_info {
        margin-left: 0;
    }

    .footer .area_logo img {
        height: 12vw;
    }

    .footer .box_info {
        font-size: 2.7vw;
    }

    .footer .area_copyright {
        font-size: 2.5vw;
    }

    .footer .area_links {
        margin-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 3.4vw;
    }

    .footer .area_links a {
        font-size: 3vw;
    }

    .footer .area_sns {
        margin-left: 0;
        gap: 2vw;
    }

    .footer .sns_link:first-child img {
        width: 8vw;
    }

    .footer .sns_link:last-child img {
        width: 7.7vw;
    }

    /* --- Quickmenu PC 전용: 모바일에서 숨김 --- */
    .quickmenu.pc { display: none !important; }

    /* --- Go to top mobile --- */
    .btn_go_top {
        bottom: 4.6vw;
        right: 4.6vw;
        width: 10.3vw;
        height: 10.3vw;
        background: rgba(26, 42, 58, 0.7);
        box-shadow: none;
    }

    .btn_go_top:hover {
        background: rgba(26, 42, 58, 0.7);
        transform: none;
        box-shadow: none;
    }

    .btn_go_top .zone_arrow {
        display: none;
    }

    .btn_go_top::before {
        content: '';
        position: absolute;
        left: 50%;
        top: calc(50% + 3.7px);
        transform: translate(-50%, -50%) rotate(45deg);
        width: 3.4vw;
        height: 3.4vw;
        border-top: 2px solid var(--color-white);
        border-left: 2px solid var(--color-white);
    }

    .btn_go_top::after {
        content: none;
    }
}
/* end @media max-width: 750px */


/* ============================================================
   RESPONSIVE : max-width 490px (Small Mobile)
   ============================================================ */
/* TODO:
@media screen and (max-width: 490px) {

    .section .zone_title .title {
        font-size: 3.9vw;
    }
}
end @media max-width: 490px */


/* ===== 팝업 전체 배경 ===== */
#main_modal {
  display: none; /* 처음에는 숨김, JS에서 쿠키 확인 후 노출 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(239,239,239,0.8);
  z-index: 9999;
}

/* ===== 팝업 박스 ===== */
#main_modal .list-pops {
  width: 600px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: visible; /* 위쪽 버튼이 잘리지 않도록 */
}

/* ===== 닫기 버튼 ===== */
#main_modal .close_btn {
  position: absolute;
  top: -45px;
  right: 0;
  width: 100px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  background-color: #2B201A;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  z-index: 2000;
}

/* ===== 오늘 하루 보지 않기 버튼 ===== */
#main_modal .btn_today_close {
  position: absolute;
  top: -45px;
  right: 110px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  background-color: #2B201A;
  padding: 0 15px;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  z-index: 2000;
}

/* ===== 버튼 hover 효과 ===== */
#main_modal .close_btn:hover,
#main_modal .btn_today_close:hover {
  background-color: #3a2f29;
}

/* ===== Swiper 영역 ===== */
.popupSwiper {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

/* ===== 팝업 이미지 ===== */
.popupSwiper .swiper-slide img {
  width: 100%;
  display: block;
}

/* ===== Swiper 화살표 ===== */
.popupSwiper .swiper-button-prev,
.popupSwiper .swiper-button-next {
  color: #fff;
  z-index: 1500;
}

/* ===== 하단 점 페이지네이션 ===== */
.popupSwiper .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.6;
}

.popupSwiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #2B201A;
}

/* ===== 모바일 대응 ===== */
@media (max-width: 768px) {
  #main_modal .list-pops {
    width: 90%;
  }

  #main_modal .close_btn {
    width: 80px;
    font-size: 14px;
  }

  #main_modal .btn_today_close {
    right: 90px;
    font-size: 12px;
    padding: 0 10px;
  }
}

/* 메인 비주얼 텍스트 강제 노출 */
.visual_slide .zone_text .text_sub,
.visual_slide .zone_text .text_main,
.visual_slide .zone_text .text_desc {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}