:root { 
	--bg: #f2f0ea; /* 첨부 이미지의 옅은 베이지색 */
	--dark: #111111; 
	--border: #ddd; 
	--primary: #A87F55; /* 갈색/황동색 */
}

html {/* 기본 16px * 62.5% = 10px */font-size: 62.5%; }

body {
	/* html에서 10px로 줄였으므로, 
	   실제 본문 폰트 크기는 다시 1.6rem(16px)이나 1.5rem(15px)로 잡아주는 것이 좋습니다. 
	*/
	font-size: 1.6rem; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow-x: hidden; }
section { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }

.fixed-quick-menu {position: fixed;right: 75px;bottom: 50px;z-index: 1100;display: flex;flex-direction: column;align-items: center;gap: 15px; }

/* 상단 SNS 다크 바 */
.sns-wrap {
	background: rgba(0,0,0,0.1); padding: 25px 15px 60px;border-radius: 10px;
	display: flex;flex-direction: column;gap: 30px; box-shadow: 0 4px 4px rgba(0,0,0,0.05);
	align-items:center;
	width:63px;
}
.item-sns {display: block;width: 24px;height: 24px;transition: transform 0.3s ease, opacity 0.3s;}
.item-sns img {width: 100%;height: 100%;object-fit: contain;filter: brightness(0) invert(1);opacity: 0.8;}
.item-sns:hover {transform: translateY(-3px);}
.item-sns:hover img {opacity: 1;}

/* 하단 원형 TOP 버튼 */
.btn-top {
	width: 63px;height: 63px;background: #fff;border-radius: 50%;border: none;
	cursor: pointer;display: flex;align-items: center;justify-content: center;
	box-shadow: 0 5px 15px rgba(0,0,0,0.15);transition: background 0.3s;
	position:relative; margin-top:-50px; z-index:2;
}
.btn-top .arrow {display: block;width: 18px;height: 12px;}
.btn-top .arrow img { max-width:100%; }

/* --- 퀵 메뉴 반응형 시작 --- */

/* 1. 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .fixed-quick-menu {
        right: 30px; /* 여백 축소 */
        bottom: 30px;
    }
}

/* 2. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .fixed-quick-menu {
        right: 15px; /* 여백 더 축소 */
        bottom: 20px;
        gap: 10px;
    }

    /* SNS 바 크기 조절 */
    .sns-wrap {
        width: 50px; /* 63px -> 50px */
        padding: 20px 10px 45px;
        gap: 20px;
    }

    .item-sns {
        width: 20px;
        height: 20px;
    }

    /* TOP 버튼 크기 조절 */
    .btn-top {
        width: 50px; /* 63px -> 50px */
        height: 50px;
        margin-top: -40px; /* 크기 축소에 따른 겹침 간격 조정 */
    }

    .btn-top .arrow {
        width: 12px;
        height: 8px;
    }
}

/* 3. 초소형 모바일 (320px 대응) */
@media screen and (max-width: 360px) {
    .fixed-quick-menu {
        right: 10px;
        bottom: 15px;
    }

    .sns-wrap {
        width: 44px; /* 터치 가능한 최소 범위 수준으로 축소 */
        padding: 15px 8px 35px;
    }

    .btn-top {
        width: 44px;
        height: 44px;
        margin-top: -30px;
    }
}

/* 헤더 전체 설정 */
.main-header {
	position: absolute;top: 0; left: 0;width: calc(100% - 70px); margin:0 35px; z-index: 99999;padding: 20px 42px 20px 65px;
	/* background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); */
}
.header-inner {margin: 0 auto;display: flex;justify-content: space-between;align-items: center;position: relative;}
/* GNB 메뉴 */
.gnb .main-menu { display: flex; gap: 54px; }
.gnb .main-menu > li { position: relative; }
.gnb .main-menu > li > a {color: #fff;font-size: 18px;font-weight: 700;transition: color 0.3s; letter-spacing:-0.025em; display:block; padding:20px 0;}

/* 서브메뉴 스타일 (숨겨진 상태) */
.sub-menu {
	position: absolute;top: 100%;left: 50%; transform: translateX(-50%); width: 137px;background: rgba(255, 255, 255, 0.95);
	border-radius: 5px;padding: 0 0;box-shadow: 0 10px 30px rgba(0,0,0,0.1);	opacity: 1;
	/* 마스크 설정: inset(상 우 하 좌) -> 하단 100%를 깎아서 안보이게 설정 */
	clip-path: inset(0% 0% 100% 0%);border:1px solid #fff;overflow:hidden;
}
.sub-menu li a {display: block;padding: 10px 20px;font-size: 16px;color: rgba(38,40,40,1);transition: all 0.3s;text-align:center; height:50px; display:flex;justify-content: center;align-items: center;  border-top: 1px solid rgba(172, 172, 172, 1);}
.sub-menu li:nth-child(1) a { border-top:0; }
.sub-menu li a:hover {background: rgba(166,128,80,1);color: #fff; }

/* 중앙 로고 */
.logo { position: absolute; left: 50%; transform: translateX(-50%); }
.logo img { height: 40px; }

/* 오른쪽 연락처 */
.contact-box {
    padding: 8px 20px 10px 18px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3); 
    /* 2. 핵심: 배경이 보더 아래로 흘러나가지 않게 막음 */
    background-clip: padding-box; 
/*    background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(255,158,3,1) 100%);*/
	background: radial-gradient(19.71% 154.29% at 91.61% 51.43%, rgba(255, 158, 3, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
    display: inline-flex; 
}

.contact-box .tag { font-weight: 700; color: #eddcc6;font-size: 18px; line-height:1;}
.contact-box .divider { margin: 1px 10px 0; width:1px; background: rgba(237, 220, 198, 1);height:16px;display:inline-block;}
.contact-box .phone { font-weight: 700; color:#eddcc6; font-size:18px; line-height:1; }


/* 모바일 레이어 기본 숨김 */
.m-menu-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; visibility: hidden; }
.m-menu-layer.is-active { visibility: visible; }

/* 배경 딤드(Dim) 처리 */
.m-menu-dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); opacity: 0; transition: 0.3s; }
.m-menu-layer.is-active .m-menu-dim { opacity: 1; }

/* 메뉴 박스 (오른쪽에서 슬라이드) */
.m-menu-inner { 
    position: absolute; top: 0; right: -100%; width: 80%; max-width: 400px; height: 100%; 
    background: #fff; z-index: 1; transition: 0.4s ease; display: flex; flex-direction: column;
}
.m-menu-layer.is-active .m-menu-inner { right: 0; }

/* 상단 영역 */
.m-menu-top { padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
.m-logo img { height: 25px; }

/* 닫기 버튼 */
.m-close-btn { width: 30px; height: 30px; background: none; border: none; position: relative; cursor: pointer; }
.m-close-btn span { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #333; }
.m-close-btn span:nth-child(1) { transform: rotate(45deg); }
.m-close-btn span:nth-child(2) { transform: rotate(-45deg); }

/* 모바일 메뉴 리스트 */
.m-gnb { flex: 1; overflow-y: auto; padding: 20px 0; }
.m-main-menu > li > a { 
    display: block; padding: 15px 25px; font-size: 18px; font-weight: 700; color: #222; 
    border-bottom: 1px solid #f5f5f5; position: relative; 
}
/* 서브메뉴가 있는 항목에 화살표 표시 */
.m-has-sub > a::after { 
    content: '▼'; position: absolute; right: 25px; font-size: 12px; color: #999; transition: 0.3s; 
}
.m-has-sub.open > a::after { transform: rotate(180deg); }

/* 모바일 서브메뉴 */
.m-sub-menu { background: #f9f9f9; display: none; padding: 10px 0; }
.m-sub-menu li a { display: block; padding: 10px 40px; font-size: 15px; color: #666; }

/* 메뉴 하단 정보 */
.m-menu-footer { padding: 25px; background: #4a4a4a; }
a.m-tel { color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; }

/* 기존 헤더 햄버거 버튼 보이게 설정 */
@media screen and (max-width: 1024px) {
    .m-menu-btn { display: flex !important; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
    .m-menu-btn span { width: 25px; height: 2px; background: #fff; }
    .gnb { display: none; } /* 기존 PC용 GNB는 숨김 */
}


/* 모바일/태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    /* 1. 헤더 전체 설정 변경 */
    .main-header {
        position: fixed; /* 상단 고정 */
        width: 100%;
        margin: 0;
        padding: 15px 20px;
        background: rgba(0, 0, 0, 0.35); /* 배경색 부여 */
        backdrop-filter: blur(5px);
        height: 70px;
        display: flex;
        align-items: center;
    }

    .header-inner {
        width: 100%;
        justify-content: space-between; /* 양 끝 정렬 */
    }

    /* 2. 로고 위치 초기화 (왼쪽 정렬) */
    .logo {
        position: static;
        transform: none;
        left: 0;
        z-index: 1001;
    }

    .logo img {
        height: 30px; /* 로고 크기 축소 */
    }

    /* 3. PC용 GNB 숨기기 및 사이드바 설정 */
    .gnb {
        position: fixed;
        top: 0;
        right: -100%; /* 오른쪽 밖으로 숨김 */
        width: 80%; /* 화면의 80% 차지 */
        max-width: 320px;
        height: 100vh;
        background: #fff;
        z-index: 1005;
        padding: 80px 30px 40px;
        transition: all 0.4s ease;
        box-shadow: -5px 0 20px rgba(0,0,0,0.2);
    }

    /* 메뉴 활성화 시 (JS 필요) */
    .gnb.is-active {
        right: 0;
    }

    .gnb .main-menu {
        flex-direction: column; /* 세로 정렬 */
        gap: 0;
    }

    .gnb .main-menu > li {
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .gnb .main-menu > li > a {
        color: #333;
        font-size: 18px;
        padding: 15px 0;
    }

    /* 모바일 서브메뉴 (아코디언 형태) */
    .sub-menu {
        position: static;
        transform: none;
        width: 100%;
        opacity: 1;
        clip-path: none; /* 클립패스 해제 */
        background: #f8f8f8;
        border: none;
        box-shadow: none;
        display: none; /* 필요시 클릭으로 노출 */
    }
    
    .gnb.is-active .sub-menu {
        display: block; /* 여기선 일단 펼침 상태로 설정 */
    }

    .sub-menu li a {
        color: #666;
        font-size: 15px;
        justify-content: flex-start;
        padding: 8px 15px;
        height: auto;
    }

    /* 4. 오른쪽 연락처 박스 숨김 (공간 부족) */
    .header-right {
        display: none;
    }

    /* 5. 햄버거 버튼 스타일링 */
    .m-menu-btn {
        display: flex !important; /* 보이게 설정 */
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1010;
        position: relative;
    }

    .m-menu-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #eddcc6; /* 로고 포인트 컬러 계열 */
        transition: all 0.3s;
    }

    /* 햄버거 버튼 X 변형 (활성화 시) */
    .m-menu-btn.is-active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .m-menu-btn.is-active span:nth-child(2) { opacity: 0; }
    .m-menu-btn.is-active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

/* 초소형 스마트폰 (320px) */
@media screen and (max-width: 360px) {
    .logo img {
        height: 25px;
    }
    .m-menu-btn {
        width: 26px;
    }
}


.video-mv-youtube {
    position: absolute;
    width: 100%;
    height: 100vh; /* 화면 전체 높이 */
    overflow: hidden;
    background-color: #000; /* 영상 로딩 전 배경색 */
}

/* 추가할 코드 (검은색 투명 오버레이) */
.video-mv-youtube::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* 0.5는 투명도입니다 (0~1 사이로 조절 가능) */
    pointer-events: none; /* 오버레이 때문에 유튜브 영상 클릭이 막히는 것을 방지 */
    z-index: 1; /* 영상보다 위에 오도록 설정 */
}

/* iframe 셋팅 (오버레이 아래에 위치하도록 보장) */
.video-mv-youtube iframe {
    position: relative;
    z-index: 0;
    /* 유튜브 iframe이 화면에 꽉 차게 하려면 필요에 따라 width/height 조절 */
    width: 100%;
    height: 100%;
}

.video-mv-youtube #videobcg1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 비율 (100 / 16 * 9) */
    min-height: 100vh;
    min-width: 177.77vh; /* 16:9 비율 (100 / 9 * 16) */
    transform: translate(-50%, -50%); /* 화면 중앙 정렬 */
    pointer-events: none; /* 영상 클릭 방지 (중요) */
}
/* 태블릿 및 모바일 대응 */
@media screen and (max-width: 1024px) {
    .video-mv-youtube #videobcg1 {
        /* 하드코딩된 값 대신 비율 기반으로 유지 */
        /* 만약 특정 지점을 보여주고 싶다면 아래 left 값을 조절하세요 */
        width: 100vw; 
        min-height: 100vh;
        min-width: 177.77vh; 
        
        /* 
           모바일에서 인물의 위치 등 특정 부분을 강조하고 싶다면 
           left: 50% 대신 % 단위를 조정하여 '팬(Pan)' 효과를 줄 수 있습니다.
        */
        left: 50%; 
        transform: translate(-50%, -50%);
    }

	/* 추가할 코드 (검은색 투명 오버레이) */
	.video-mv-youtube::after {
		background-color: rgba(0, 0, 0, 0.3); /* 0.5는 투명도입니다 (0~1 사이로 조절 가능) */
	}

}




/* Section 1: Swiper */
.sec1 { position: relative; width: calc(100%); height: calc(100vh); overflow: hidden; padding:0 35px 35px; background:var(--bg);}
.mainSwiper { width: 100%; height: 100%; position:relative; border-radius:0 0 40px 40px;}
.mainSwiper .swiper-slide {background-size: cover; background-position: center; display: flex; align-items: flex-end; padding-left: 65px; padding-bottom:60px; }
.mainSwiper .swiper-slide::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;background: rgba(0,0,0,0.05);}
.slide-content { position: relative; z-index: 10; color: #fff; display:flex; align-items:flex-end;  height:100%;}

.badge { background: rgba(166,128,80,1); padding: 12px 50px; border-radius: 10px; display: inline-block; font-size: 20px; font-weight: 600; letter-spacing:-0.025em;}
.main-title { margin:12px 0 30px; overflow: hidden; }
.main-title h2 { font-size: 54px; font-weight: 700; line-height: 1.35; letter-spacing:-0.025em; overflow: hidden;}
.sub-title p { font-size: 22px; color: rgba(255,255,255,0.8); line-height: 1.35; font-weight:400; letter-spacing:-0.025em;}

/* 마스크 모션 설정 */
.mask { overflow: hidden; margin-bottom: 5px; }
.mask > * { transform: translateY(110%); } /* 초기 상태: 아래 숨김 */

/* mask 안의 요소들이 사라질 때 영역 밖으로 나가는 것을 완벽히 차단 */
.mask {
    overflow: hidden;
    display: block;
}

/* 페이드 효과 시 이전 슬라이드가 너무 오래 남아있지 않도록 강제 설정 */
.mainSwiper .swiper-slide:not(.swiper-slide-active) {
    pointer-events: none;
    z-index: 0;
}
.mainSwiper .swiper-slide-active {
    z-index: 1;
}


/* 우측 페이징 */
.right-indicator {position: absolute;right: 65px;top: 150px;z-index: 100;display: flex;flex-direction: column;align-items: center;gap: 15px;}
.num-top, .num-bottom {font-size: 16px;font-weight: 700;color: #fff;letter-spacing:-0.025em;}
.num-bottom {color: rgba(255, 255, 255, 0.4); /* 하단 숫자는 연하게 */}
.indicator-content {display: flex;align-items: center;gap: 20px; position:relative; padding:20px 6px 20px 0;}

.num-top { position:absolute; right:0; top:0; }
.num-bottom { position:absolute; right:0; bottom:0; }


/* 텍스트 아이템들 */
.ind-items {display: flex;flex-direction: column;align-items: flex-end;gap: 32px; padding-right:5px;}
.ind-item {font-size: 16px;color: rgba(255, 255, 255, 0.4);transition: all 0.4s ease;font-weight: 700;cursor: pointer; letter-spacing:-0.025em;}
.ind-item.active {color: #fff;font-size: 25px; font-weight: 700; letter-spacing:-0.025em;}

.ind-item {
    cursor: pointer; /* 마우스 포인터 변경 */
    transition: color 0.3s ease;
    opacity: 0.5; /* 평소엔 흐리게 */
}

.ind-item.active {
    opacity: 1; /* 활성화 시 진하게 */
    font-weight: bold;
}


/* 세로 바 영역 */
.progress-wrap {position: relative;width: 2px;height: 105px; /* 라인 전체 높이 */}
.progress-bg {position: absolute;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.2);}
.progress-bar {position: absolute;width: 100%;height: 33.333%; /* 초기 1/3 */background: #fff;top: 0;transition: height 0.5s ease;}


/* --- 반응형 레이아웃 시작 --- */

/* 1. 태블릿 & 작은 모니터 (최대 1200px) */
@media (max-width: 1200px) {
    .mainSwiper .swiper-slide { padding-left: 40px; }
    .main-title h2 { font-size: 44px; }
    .right-indicator { right: 40px; }
}

/* 2. 태블릿 (최대 1024px) */
@media (max-width: 1024px) {
    .sec1 { padding: 0 20px 20px; }
    .main-title h2 { font-size: 38px; }
    .badge { padding: 8px 35px; font-size: 16px; }
    .sub-title p { font-size: 18px; }
    
    .right-indicator { top: 90px; right: 50px; }
    .ind-items { gap: 20px; }
    .ind-item { font-size: 14px; }
    .ind-item.active { font-size: 20px; }
    .progress-wrap { height: 80px; }
}

/* 3. 모바일 전체 (최대 768px) */
@media (max-width: 768px) {
    .sec1 { height: 100dvh; padding: 0; } /* 모바일은 꽉 차게 변경 가능 */
    .mainSwiper { border-radius: 0; } /* 모바일에서 하단 라운드 제거 (취향에 따라 유지 가능) */
    
    .mainSwiper .swiper-slide { 
        padding-left: 20px; 
        padding-right: 70px; /* 우측 인디케이터 공간 확보 */
        padding-bottom: 50px; 
    }

    .main-title h2 { font-size: 32px; word-break: keep-all; }
    .sub-title p { font-size: 16px; line-height: 1.5; }
    .badge { padding: 6px 20px; font-size: 14px; margin-bottom: 10px; }


    
    .ind-items { display: none; } /* 모바일에서 텍스트 리스트가 너무 길면 숨기거나 간소화 */
    /* 텍스트를 꼭 보여줘야 한다면 아래 주석 해제 */
    /* .ind-items { gap: 15px; } .ind-item { font-size: 12px; } .ind-item.active { font-size: 14px; } */

    .indicator-content { padding: 15px 4px 15px 0; gap: 10px; }
    .num-top, .num-bottom { font-size: 12px; }
    .progress-wrap { height: 60px; }
}

/* 4. 최소 사이즈 대응 (320px ~ 480px) */
@media (max-width: 480px) {
    .mainSwiper .swiper-slide { padding-left: 15px; padding-bottom: 40px; }
    .main-title h2 { font-size: 28px; }
    .sub-title p { font-size: 14px; padding-right: 20px; }
    
    /* 매우 작은 화면에서는 인디케이터 숫자를 강조하고 바를 작게 */
    .right-indicator { right: 20px; }
    .progress-wrap { height: 40px; }
}

/* 초단기 높이 대응 (가로 모드 등) */
@media (max-height: 500px) {
    .right-indicator { top: 20px; transform: none; }
    .main-title { margin-bottom: 10px; }
    .main-title h2 { font-size: 24px; }
}



/* Section2 */
.sec2 { background: var(--bg); width: 100%; position: relative; height: auto; overflow: hidden; display:block;}
.sec2-container { position: relative; width: 100%; height:100vh;}
.article { width: 100%; height: 100vh; }
.article-content { width: 100%; height: 100%; padding:8rem 0 8rem; position: relative; display: flex; }
.left-col {flex: 0 0 45%;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;height: 100%;padding-left: 5%;position: relative;}
.right-col { flex:1; height: 100%; display: flex; align-items: center; justify-content: center; }

.left-top-text-wrap, .bottom-top-text, .bottom-bottom-text {position: relative;width: 100%;overflow: hidden;}
.left-top-text-wrap { height: 200px; margin-bottom:22rem; padding-top:12rem; } /* 텍스트가 잘리지 않게 넉넉히 설정 */
.bottom-top-text, .bottom-bottom-text { height: 1.5em; line-height: 1.5; }
.left-bottom-text-wrap { margin-top: 8rem; margin-bottom:0; }

.top-text, .mask-line {position: absolute;top: 0; left: 0;width: 100%;transform: translateY(100%); will-change: transform;}
.top-text { font-size:28px; line-height:180%; letter-spacing:-0.025em; color:#a68050; font-weight:700; }

.article-img-frame { position: relative; width: 100%; height: 672px; overflow: hidden; }
.article-img-frame > div {position: absolute;top: 0; left: 0;width: 100%; height: 100%;clip-path: inset(0 0 0 100%);z-index: 1; border-radius:20px 0 0 20px; overflow:hidden;}
.article-img-frame img {width: 100%; height: 100%;object-fit: cover;transform: scale(1.2);will-change: transform;}

.bottom-top-text,
.bottom-bottom-text { height: 95px; position: relative; overflow: hidden; width:830px;}
.bb-text { font-size:70px; line-height:135%; letter-spacing:-0.025em; color:#000; font-weight:700;}

/* 텍스트 개별 요소 초기화 */
.top-text, .bb-text {position: absolute;top: 0; left: 0;width: 100%;transform: translateY(100%); opacity: 0;visibility: hidden;will-change: transform, opacity;}

/* 인디케이터 (기존 유지) */
.fixed-indicator { position: absolute; left: 5%; top: 50%; transform: translateY(-50%); z-index: 100; margin-top:0; pointer-events: none; }
.paging-indicator { display: flex; flex-direction: column; gap: 5px; }
.num-wrapper { height: 1.6rem; overflow: hidden; line-height: 1.6rem; font-size: 1.6rem; font-weight: 600; }
.num-rolling { display: flex; flex-direction: column; }
.vertical-line { width: 2px; height: 104px; background: rgba(0,0,0,0.4);; margin: 5px 0 3px; position: relative; overflow: hidden; left:9px;}
.line-active { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: #000; }
.indicator-text { font-size: 2.4rem; font-weight: 500; }

.num-rolling span { font-weight:700; font-size:16px; letter-spacing:-0.025em; }
.page-num-bottom { font-weight:700; color:rgba(0,0,0,0.4); font-size:16px; letter-spacing:-0.025em; }
.change-txt { font-size:24px; letter-spacing:-0.025em; color:#a68050; font-weight:700; margin-top:13px}
.change-txt-wrap {height: 30px;overflow: hidden;position: relative;margin-top: 13px;}
.change-txt-list {display: flex;flex-direction: column;will-change: transform;}
.change-txt-list span {height: 30px; line-height: 30px;font-size: 24px;color: #a68050;font-weight: 700;white-space: nowrap;}
.top-text, .bb-text {position: absolute;top: 0; left: 0;width: 100%;transform: translateY(0);opacity: 0;visibility: hidden;will-change: transform, opacity;}
.top-text:first-child, .bb-text:first-child {opacity: 1;visibility: visible;}
.article-img-frame > div {position: absolute;top: 0; left: 0;width: 100%; height: 100%;clip-path: inset(0 0 0 100%);z-index: 1; border-radius: 20px 0 0 20px; overflow: hidden;}
.article-img-frame > div:first-child {clip-path: inset(0 0 0 0);z-index: 2;}
.indicator-text { transition: opacity 0.3s; } 


@media (max-width: 1024px) {
 
   .article-content { width: 100%; height: 100%; padding:8rem 0 8rem; position: relative; display: flex; flex-direction:column; }
	.left-col {flex: 0 0 60%; padding-left: 5%;justify-content: flex-start;}
	.right-col { flex:0 0 40%; }


	.left-top-text-wrap, .bottom-top-text, .bottom-bottom-text {position: relative;width: 100%;overflow: hidden;}
	.left-top-text-wrap { height: 150px; margin-bottom:6rem; padding-top:12rem; } /* 텍스트가 잘리지 않게 넉넉히 설정 */
	.bottom-top-text, .bottom-bottom-text { height: 1.5em; line-height: 1.5; }
	.left-bottom-text-wrap { margin-top: 8rem; margin-bottom:0; }

	.top-text, .mask-line {position: absolute;top: 0; left: 0;width: 100%;transform: translateY(100%); will-change: transform;}
	.top-text { font-size:18px; line-height:150%; }

	.article-img-frame { position: relative; width: 100%; height: 472px; overflow: hidden; }
	.article-img-frame > div {position: absolute;top: 0; left: 0;width: 100%; height: 100%;clip-path: inset(0 0 0 100%);z-index: 1; border-radius:20px 0 0 20px; overflow:hidden;}
	.article-img-frame img {width: 100%; height: 100%;object-fit: cover;transform: scale(1.2);will-change: transform;}

	.bottom-top-text,
	.bottom-bottom-text { height: 50px; width:450px;}
	.bb-text { font-size:35px; line-height:135%; }


	.fixed-indicator { position: absolute; left: 5%; top: 0; transform: translateY(0); margin-top:210px;}
	.paging-indicator { display: flex; flex-direction: column; gap: 5px; }
	.num-wrapper { height: 1.4rem; overflow: hidden; line-height: 1.4rem; font-size: 1.4rem; font-weight: 600; }
	.num-rolling { display: flex; flex-direction: column; }
	.vertical-line { width: 2px; height: 50px; background: rgba(0,0,0,0.4);; margin: 2px 0 1px; position: relative; overflow: hidden; left:7px;}
	.line-active { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: #000; }
	.indicator-text { font-size: 1.4rem; font-weight: 500; }

	.num-rolling span { font-size:16px; }
	.page-num-bottom { font-size:16px; }
	.change-txt { font-size:14px; margin-top:5px}
	.change-txt-wrap {height: 30px;overflow: hidden;position: relative;margin-top: 5px;}
	.change-txt-list {display: flex;flex-direction: column;will-change: transform;}
	.change-txt-list span {height: 30px; line-height: 30px;font-size: 16px;color: #a68050;font-weight: 700;white-space: nowrap;}

	.top-text, .bb-text {position: absolute;top: 0; left: 0;width: 100%;transform: translateY(0);opacity: 0;visibility: hidden;will-change: transform, opacity;}
	.top-text:first-child, .bb-text:first-child {opacity: 1;visibility: visible;}
	.article-img-frame > div {position: absolute;top: 0; left: 0;width: 100%; height: 100%;clip-path: inset(0 0 0 100%);z-index: 1; border-radius: 20px 0 0 20px; overflow: hidden;}
	.article-img-frame > div:first-child {clip-path: inset(0 0 0 0);z-index: 2;}
	.indicator-text { transition: opacity 0.3s; } 
}

/* 7. 더 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
  	.bottom-top-text,
	.bottom-bottom-text { height: 40px; width:430px;}
	.bb-text { font-size:30px; line-height:135%; }
	.left-top-text-wrap { margin-bottom:4rem;  } 
	.right-col { margin-top:3%; }
}


/* Section 3*/
.sec3 { background: rgba(38,40,40,1); display: block; height: auto; width: 100%; overflow: hidden; font-size: 3rem; font-weight: bold; padding-bottom:16rem}

.comm-title { display:flex; flex-direction:column; align-items:center;  text-align:Center; padding:16rem 0 6rem;}
.comm-title em { color: rgba(115, 104, 90, 1); font-size:20px; line-height:1; font-weight:700; margin-bottom:2.6rem;}
.comm-title h2 { 
	letter-spacing:-0.025em;
    /* 1. 폰트 스타일 (예시) */
    font-size: 50px;
    font-weight: 700;
    line-height: 135%;
    
    /* 2. 그라데이션 적용 */
    background: radial-gradient(94.78% 741.98% at 120.89% 51.43%, #FF9E03 0%, #C5C5C5 100%);
    
    /* 3. 텍스트 마스킹 처리 (핵심) */
    -webkit-background-clip: text; /* 사파리 및 크롬 지원 */
    background-clip: text;         /* 표준 속성 */
    -webkit-text-fill-color: transparent; /* 텍스트 내부를 투명하게 */
    
    /* 4. 영역 확보 (인라인 요소일 경우 필수) */
    display: inline-block; 
	margin-top:10px;
}
.comm-title-d { display:flex; flex-direction:column; align-items:center;  text-align:Center; padding:14rem 0 0;}
.comm-title-d em { color: rgba(115, 104, 90, 1); font-size:20px; line-height:1; font-weight:700; margin-bottom:2.6rem; transform:translateY(100px);}
.comm-title-d h2 { 
	letter-spacing:-0.025em;
    /* 1. 폰트 스타일 (예시) */
    font-size: 50px;
    font-weight: 700;
    line-height: 135%;
    
    /* 2. 그라데이션 적용 */
    background: radial-gradient(94.78% 741.98% at 120.89% 51.43%, #FF9E03 0%, #000000 100%);
    
    /* 3. 텍스트 마스킹 처리 (핵심) */
    -webkit-background-clip: text; /* 사파리 및 크롬 지원 */
    background-clip: text;         /* 표준 속성 */
    -webkit-text-fill-color: transparent; /* 텍스트 내부를 투명하게 */
    
    /* 4. 영역 확보 (인라인 요소일 경우 필수) */
    display: inline-block; 
	margin-top:10px;

}

/* 타이틀 영역 반응형 스타일 */

/* 1. 테블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .comm-title { padding: 10rem 0 5rem; }
    .comm-title-d { padding: 8rem 0 0; }
    .comm-title h2, 
    .comm-title-d h2 { font-size: 42px; text-align:center;} /* 50px -> 42px */
    .comm-title-d em { transform: translateY(60px); } /* 이동 거리 축소 */
	.secCom .comm-title h2, .secCom .comm-title-d h2 { margin-top:-5px;}
}

/* 2. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    /* rem 단위를 모바일 비율에 맞춰 대폭 축소 */
    .comm-title { padding: 60px 0 40px; }
    .comm-title-d { padding: 8rem 0 0; }

    .comm-title em,
    .comm-title-d em { font-size: 16px; margin-bottom: 1.5rem; }

    .comm-title h2, 
    .comm-title-d h2 { font-size: 32px; }

    .comm-title-d em { transform: translateY(30px); } /* 이동 거리 더 축소 */
}

/* 3. 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .comm-title { padding: 50px 20px 30px; }
    .comm-title-d { padding: 8rem 20px 0; }

    .comm-title em,
    .comm-title-d em { font-size: 14px; margin-bottom: 1rem; }

    .comm-title h2, 
    .comm-title-d h2 { font-size: 32px; }

    .comm-title-d em { transform: translateY(20px); }
}

/* 4. 최소 사이즈 (320px 대응) */
@media screen and (max-width: 360px) {
    .comm-title h2, 
    .comm-title-d h2 { 
        font-size: 32px; 
        line-height: 1.3; /* 좁은 폭에서 줄바꿈 시 가독성 확보 */
    }
    
    .comm-title-d em { transform: translateY(10px); }
}



.re03_container .swiper-slide .sw_con_bg.bg-animate {animation: sub_top_view_bg 5s ease-in-out forwards;}
.sw_wr{width:100%;height:100%;display: flex;align-items: flex-end;justify-content: space-between;}
.sw_left_title{display:flex;flex-direction: column;gap: 25px;position: relative;}
.sw_left_title em{font-size:70px;color:#a68050;font-weight:800;line-height:1;letter-spacing:-0.025em;}
.sw_left_title h3{font-size:54px;color:#fff;font-weight:700;line-height:135%;letter-spacing:-0.025em;margin-top:-20px;}
.sw_right_title {display:flex;gap:10px;padding-top:20px;width:440px;flex-direction:column;position:relative;}
.sw_right_title li{font-size:24px;color:#fff;border-radius:30px;padding:10px 30px;border:1px solid rgba(255,255,255,0.3);background-color:rgba(0,0,0,0.2);text-align:center;width:100%;}


.re03_container .swiper-slide.re02_slide04 .sw_right_title ul li{
background:rgba(255,255,255,.2);}
.swiper-navigation { position: absolute;top:50%; left: 50%; width: 1490px;transform: translate(-50%, 0px);}
.swiper-button-next.re02_next{
    right: 0; width:61px; height:61px; background: url(../images/sw-next.png) 50% 50%/100% no-repeat; transition: background 0.3s;
}
.swiper-button-prev.re02_prev{
    left: 0; width:61px; height:61px; background: url(../images/sw-prev.png) 50% 50%/100% no-repeat; transition: background 0.3s;
}
.swiper-button-next.re02_next::after,
.swiper-button-prev.re02_prev::after {display: none;}
.rection03 .main_btn{margin:63px auto 0}

.rection03.con_inner{padding:1.0753vw 0 8.0645vw;}
.re03_container{padding-top:1.6129vw;}

/* rection03 */
.rection03.con_inner{padding:20px 0 150px;}
.re03_container{padding-top:30px;position: relative;}
.re03_container .swiper-slide {
    width: 1322px;
    height: 623px;
    padding: 55px 55px;
    overflow: hidden;
    border-radius: 60px;

    /* 다중 그라데이션 레이어 적용 */
    background: 
        /* 1. 상단 블루톤 틴트 (레이어 최상단) */
        linear-gradient(116.73deg, rgba(3, 34, 76, 0.35) 30.84%, rgba(145, 172, 225, 0.35) 83.09%),
        /* 2. 하단 어두운 쉐도우 (레이어 중간) */
        linear-gradient(180deg, rgba(72, 72, 72, 0) 42.86%, rgba(10, 10, 10, 0.6) 98.08%),
        /* 3. 기본 베이스 회색 (레이어 최하단) */
        linear-gradient(0deg, #D9D9D9, #D9D9D9);
    
    /* 배경이 겹치는 방식 설정 (필요시 추가) */
    background-blend-mode: normal;
}

.re03_container .swiper-slide .sw_con_bg{position: absolute;left:0;top:0;transform: perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);}
.re03_container .swiper-slide.re02_slide01 .sw_con_bg{background: url(../images/section3-img1.png) 50% 50% / cover no-repeat;width:1322px;height:100%;}
.re03_container .swiper-slide.re02_slide02 .sw_con_bg{background: url(../images/section3-img2.png) 50% 50% / cover no-repeat;width:1322px;height:100%;}
.re03_container .swiper-slide.re02_slide03 .sw_con_bg{background: url(../images/section3-img3.png) 50% 50% / cover no-repeat;width:1322px;height:100%;}

.re03_container .swiper-slide .sw_wr .sw_left_title,
.re03_container .swiper-slide .sw_wr .sw_right_title { opacity:0; transition:all 0.5s ease-out; top:50px; }

.re03_container .swiper-slide.swiper-slide-active .sw_wr .sw_left_title,
.re03_container .swiper-slide.swiper-slide-active .sw_wr .sw_right_title { opacity:1; top:0px; }

.re03_container .swiper-slide .sw_con_bg{
    position:absolute; top:0px; left:0; width:100%; height:100%; overflow:hidden;
    transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); 
    -webkit-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);  
    -moz-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);  
    -ms-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);  
    -o-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0);
}

.main-btn-area { display:flex; justify-content:center; margin:50px auto 0; }
.main_btn {
    /* 1. 레이아웃 및 정렬 (기존 유지) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px 15px 40px;
    padding: 10px 15px 12px 30px;
    text-decoration: none;
    transition: all 0.3s ease;

    /* 2. 타이포그래피 (기존 유지) */
    font-weight: 300;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: -0.0025em;
    color: #ffffff;
    text-align: center;

    /* 3. 보더 이미지 대신 투명 보더 설정 */
    border: 1px solid transparent; /* 1px 두께 확보 */
    border-radius: 30px;           /* 이제 정상 작동합니다 */

    /* 4. 핵심: 이중 배경 설정 */
    background-image: 
        /* 첫 번째: 실제 버튼 내부 배경 (Radial Gradient) */
        radial-gradient(19.71% 154.29% at 91.61% 51.43%, rgba(255, 158, 3, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%),
        /* 두 번째: 보더 역할을 할 배경 (Linear Gradient) */
        linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));

    /* 5. 배경이 그려질 영역 지정 */
    background-origin: border-box;
    background-clip: padding-box, border-box; /* 첫 번째는 패딩까지, 두 번째는 보더까지 */
}
.main_btn em { font-style: normal;color:rgba(237, 220, 198, 1);font-size:18px;font-weight:300; letter-spacing:-0.025em;margin-right:10px;}
.main_btn i {font-style: normal;font-size: 18px;display: inline-block;transition: transform 0.3s ease;color:rgba(237, 220, 198, 1);}
.main_btn:hover {
	color: #FF9E03;
}
.main_btn:hover i {transform: translateX(5px);}


.main-btn-area-d { display:flex; margin:50px 0 0; }
.main_btn_d {
    /* 1. 레이아웃 및 정렬 (기존 유지) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 30px 12px 40px;
    padding: 10px 15px 12px 30px;
    text-decoration: none;
    transition: all 0.3s ease;

    /* 2. 타이포그래피 (기존 유지) */
    font-weight: 300;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: -0.0025em;
    color: rgba(65,65,65,1);
    text-align: center;

    /* 3. 보더 이미지 대신 투명 보더 설정 */

	border:1px solid #000;
    border-radius: 30px;           /* 이제 정상 작동합니다 */

    /* 4. 핵심: 이중 배경 설정 */
	background-image: 
		radial-gradient(19.71% 154.29% at 91.61% 51.43%, rgba(255, 158, 3, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%),
		linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));

    /* 5. 배경이 그려질 영역 지정 */
    background-origin: border-box;
    background-clip: padding-box, border-box; /* 첫 번째는 패딩까지, 두 번째는 보더까지 */
}
.main_btn_d em { font-style: normal; color: rgba(65,65,65,1);font-size:18px;font-weight:300; letter-spacing:-0.025em;margin-right:10px;}
.main_btn_d i {font-style: normal;font-size: 18px;display: inline-block;transition: transform 0.3s ease; color: rgba(65,65,65,1);}
.main_btn_d:hover i {transform: translateX(5px);}


/* --- Section 3 반응형 시작 --- */

@media (max-width: 1490px) {
    .swiper-navigation { width: 100% !important; z-index:100; } /* 네비게이션 너비 제한 해제 */
	.swiper-navigation { position: absolute;top:50%; left: 0; transform: translate(0, 0px);}
	.swiper-button-next.re02_next{
		right: 10px; width:45px; height:45px; 
	}
	.swiper-button-prev.re02_prev{
		left: 10px; width:45px; height:45px; 
	}

}

@media (max-width: 1024px) {
    .re03_container .swiper-slide { width: 90%; height: 500px; padding: 40px; border-radius: 40px; }

    .sw_left_title em { font-size: 50px; }
    .sw_left_title h3 { font-size: 38px; }
    .sw_right_title { width: 350px; }
    .sw_right_title li { font-size: 18px; }
}

@media (max-width: 768px) {
    .sec3 { padding-bottom: 8rem; }
    .re03_container { padding-top: 10px; }

    /* 슬라이드 크기 및 레이아웃 조정 */
    .re03_container .swiper-slide { 
        width: 85%; /* 모바일에서는 양옆 슬라이드가 살짝 보이도록 */
        height: auto; 
        min-height: 480px; 
        padding: 30px 25px; 
        border-radius: 30px; 
    }

    /* 배경 이미지 크기 강제 조정 */
    .re03_container .swiper-slide .sw_con_bg,
    .re03_container .swiper-slide.re02_slide01 .sw_con_bg,
    .re03_container .swiper-slide.re02_slide02 .sw_con_bg,
    .re03_container .swiper-slide.re02_slide03 .sw_con_bg {
        width: 100% !important;
    }

    /* 상하 배치로 변경 */
    .sw_wr { 
        flex-direction: column; 
        align-items: flex-start; 
        justify-content: flex-end; 
        gap: 30px;
    }

    .sw_left_title { gap: 10px; }
    .sw_left_title em { font-size: 40px; }
    .sw_left_title h3 { font-size: 28px; margin-top: 0; }

    .sw_right_title { width: 100%; padding-top: 0; }
    .sw_right_title li { 
        font-size: 15px; 
        padding: 8px 20px; 
        text-align: left; /* 모바일은 왼쪽 정렬이 더 안정적 */
    }

    
    .main-btn-area { margin-top: 30px; }
    .main_btn { font-size: 16px; padding: 10px 25px; }
}

@media (max-width: 480px) {
    .re03_container .swiper-slide { width: 90%; min-height: 420px; }
    .sw_left_title em { font-size: 32px; }
    .sw_left_title h3 { font-size: 24px; }
    .sw_right_title li { font-size: 14px; }
}


/* Section 4 */
.sec4 { }
.clinical-exp { width: 100%; position: relative; overflow: hidden; }
.exp-container { padding: 0 0; }
.sec4-sub-title { color: rgba(115,104,90,1); font-size: 20px; font-weight: 700; display: block; margin-bottom: 25px; }
.sec4-main-title {
	font-size: 50px;
	font-weight: 700;
	background: radial-gradient(94.78% 741.98% at 120.89% 51.43%, #FF9E03 0%, #000000 100%);
	-webkit-background-clip: text;  /* 배경을 텍스트 영역으로 자름 (크롬, 사파리 등) */
	background-clip: text;          /* 표준 속성 */
	-webkit-text-fill-color: transparent; /* 텍스트 내부 색상을 투명하게 처리 */
	letter-spacing:-0.025em;
	/* 인라인 요소일 경우 그라데이션 영역 확보를 위해 추가 (권장) */
	display: inline-block; 
	line-height:1.2;
}

.exp-top { height: 848px; border-radius: 0 0 0 200px;position: relative;overflow: hidden; }
.bg-target {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('../images/main-doctor.png') no-repeat center / cover;z-index: -1;will-change: transform;}
.baseWidth1500 { max-width:1500px; margin:0 auto; }
.exp-top-inner{display:flex;flex-direction:column;justify-content:center; height:100%; }
.staff-visual-area { position: relative; display:flex; flex-direction:column; margin-top:18.6rem}
.staff-slogan { font-size: 55px; font-weight: 700; line-height: 1.35; color: rgba(115,104,90,1); text-align: left;	font-family: "Nanum Myeongjo", serif; margin-bottom:30px;}
.exp-stats-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 7rem 0 16rem; }
.stats-left p { font-size: 24px; line-height: 1.6; color: rgba(38,40,40,1); letter-spacing:-0.025em; font-weight:500;}
.stats-right { display: flex; gap: 100px; }
.stat-item { text-align: left; position:relative; border-left:1px solid rgba(0,0,0,0.3); padding:10px 0 14px 20px;}
.count-num { 
	font-size: 70px; font-weight: 700; color: #000; letter-spacing: -1px; display: inline-block;
	font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
    font-variant-numeric: tabular-nums;
    -webkit-text-fill-color: initial;
}
.count-num::after { content: '건'; font-size: 70px; margin-left: 5px; color:#000;}
.label { display: block; font-size: 24px; color: rgba(166,128,80,1); margin-top: 25px; font-weight: 600; line-height:145%; letter-spacing:-0.025em;}
.base-date { text-align: right; font-size: 14px; color: #999; margin-top: 40px; }


/* section5 */
.medical-system {width: 100%;height: 900px;background: #1a1a1a;overflow: hidden;}
.ms-container {display: flex;width: 100%;height: 100%;}
/* 왼쪽 타이틀 섹션 */
.ms-title-side {flex: 0 0 35%; display: flex;align-items: center;justify-content: center;background: #222;text-align: center;}
.ms-title-side .comm-title { padding:0; }
.title-wrap em {display: block;font-size: 18px;color: #666;margin-bottom: 20px;}
.title-wrap h2 {font-size: 50px;font-weight: 700;color: #fff;}
.title-wrap h2 span { color: #FF9E03; }


/* --- Section 4 & 5 반응형 시작 --- */

/* 1. 데스크탑 소형 & 태블릿 (1024px ~ 1400px) */
@media (max-width: 1400px) {
    .baseWidth1500 { padding: 0 40px; }
    .stats-right { gap: 50px; } /* 통계 아이템 간격 축소 */

}

@media (max-width: 1200px) {
    .sec4-main-title { font-size: 40px; }
    .staff-slogan { font-size: 44px; }
    .exp-top { height: 620px; border-radius: 0 0 0 120px; } /* 라운드 축소 */

	.clinical-exp { padding-top:80px; padding-bottom:50px; }
	.main-btn-area-d { margin-top:20px; }
	.exp-top-inner{justify-content:flex-start; }

}

/* 2. 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    /* Section 4 */

    .staff-visual-area { margin-top: 5rem; }
    .exp-stats-row { padding: 5rem 0 10rem; }
    .stats-left p { font-size: 20px; }
    .count-num, .count-num::after { font-size: 50px; }
    .label { font-size: 18px; }

    /* Section 5 */
    .medical-system { height: auto; } /* 고정 높이 해제 */
    .ms-container { flex-direction: column; } /* 세로 배치 */
    .ms-title-side { flex: 0 0 auto; padding: 60px 20px; width: 100%; }
    .title-wrap h2 { font-size: 40px; }
}

/* 3. 모바일 전체 (768px 이하) */
@media (max-width: 768px) {
    /* Section 4 상단 비주얼 */
    .exp-top { 
        border-radius: 0 0 0 60px; /* 모바일용 작은 라운드 */
        padding-bottom: 50px;
    }
    .staff-visual-area { margin-top: 6rem; }
    .sec4-sub-title { font-size: 16px; margin-bottom: 15px; }
    .sec4-main-title { font-size: 32px; }
    .staff-slogan { font-size: 30px; line-height: 1.4; word-break: keep-all; }
	.bg-target {
		background-position:right bottom;
		background-size:140%;
	}

    /* Section 4 통계 영역 */
    .exp-stats-row { 
        flex-direction: column; 
        gap: 40px; 
        padding: 4rem 0 8rem; 
    }
    .stats-left { width: 100%; }
    .stats-right { 
        width: 100%; 
        flex-direction: column; /* 통계 숫자 세로 정렬 */
        gap: 30px; 
    }
    .stat-item { 
        border-left: 2px solid rgba(166,128,80,0.5); 
        padding-left: 15px; 
    }
    .count-num, .count-num::after { font-size: 44px; }
    .base-date { text-align: right; margin-top: 0; padding-right:20px; }

    /* Section 5 타이틀 */
    .title-wrap h2 { font-size: 32px; }
    .title-wrap em { font-size: 15px; }
}

/* 4. 최소 모바일 (480px 이하) */
@media (max-width: 480px) {
    .exp-top { min-height: 400px; }
    .staff-slogan { font-size: 26px; }
    .stats-left p { font-size: 17px; }
    .count-num, .count-num::after { font-size: 38px; }
    .label { font-size: 16px; margin-top: 15px; }
    
    .ms-title-side { padding: 50px 15px; }
    .title-wrap h2 { font-size: 28px; }
}



/* 오른쪽 리스트 섹션 */
.ms-content-side {flex: 1;display: flex;flex-direction: column;}
.ms-item {position: relative;height: 33.3333%;overflow: hidden;transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);cursor: pointer;background-size: cover;background-position: center;}
.item01 { border-bottom: 1px solid rgba(255,255,255,0.1); }
.item02 {border-bottom: 1px solid rgba(255,255,255,0.1); }
.ms-item::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;transition: transform 0.6s ease-out; z-index: 0;}

/* 3. 각 아이템별 개별 이미지 설정 (가상 요소에 적용) */
.item01::before { background-image: url('../images/section5-img1-w.png'); }
.item02::before { background-image: url('../images/section5-img2-w.png'); }
.item03::before { background-image: url('../images/section5-img3-w.png'); }

/* 4. 마우스 오버 시 가상 요소(배경)만 확대 */
.ms-item:hover::before {transform: scale(1.15);}
.bg-overlay {position: absolute;top: 0; left: 0;width: 100%; height: 100%;background: rgba(0, 0, 0, 0.4); /* 기본 어둡게 */transition: background 0.5s;}
.item-inner {position: relative;z-index: 2;height: 100%;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;gap: 30px;padding-left:10%;}
.item-inner h3 {color: #fff;font-size: 40px;font-weight: 700;transition: all 0.4s ease;margin-bottom:-70px;}
.ms-item:hover .item-inner h3 { 	margin-bottom:0; }

/* 숨겨진 버튼 스타일 */
.view-btn {
 /* 1. 레이아웃 및 정렬 (기존 유지) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 30px 12px 40px;
    padding: 10px 15px 12px 30px;
    text-decoration: none;
    transition: all 0.3s ease;

    border: 1px solid transparent;
    border-radius: 30px;      

	background: radial-gradient(19.71% 154.29% at 91.61% 51.43%, rgba(255, 158, 3, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box; /* 첫 번째는 패딩까지, 두 번째는 보더까지 */
    
    /* 초기 상태: 숨김 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.view-btn em { font-style: normal;color:rgba(237, 220, 198, 1);font-size:18px;font-weight:300; letter-spacing:-0.025em;margin-right:10px;}
.view-btn i {font-style: normal;font-size: 18px;display: inline-block;transition: transform 0.3s ease;color:rgba(237, 220, 198, 1);}
.view-btn:hover { color: #FF9E03; }
.view-btn:hover i {transform: translateX(5px);}

/* 마우스 오버 시 변화 */
.ms-content-side:hover .ms-item { height: 250px; } /* 전체 호버 시 일단 모두 축소 */
.ms-content-side .ms-item:hover { height: 400px; } /* 마우스 올라간 놈만 확대 */
.ms-item:hover .bg-overlay { background: rgba(0, 0, 0, 0.1); }
.ms-item:hover .view-btn {opacity: 1;visibility: visible;transform: translateY(0);}


/* --- Section 5 우측 리스트 반응형 시작 --- */

/* 1. 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    .ms-item { 
        height: 250px; /* 고정 높이로 변경 (부모 높이가 auto로 변했기 때문) */
    }
    
    /* 태블릿/모바일에서는 호버 시 높이 변화를 제거하거나 완화 (레이아웃 흔들림 방지) */
    .ms-content-side:hover .ms-item,
    .ms-content-side .ms-item:hover { 
        height: 250px; 
    }

    .item-inner h3 { 
        font-size: 30px; 
        margin-bottom: 0; /* 항상 가독성 있게 배치 */
    }

    .view-btn { 
        opacity: 1; 
        visibility: visible; 
        transform: translateY(0); 
        margin-top: 10px;
    }
}

/* 2. 모바일 (768px 이하) */
@media (max-width: 768px) {


    .item-inner {
        padding-left: 20px; /* 여백 축소 */
        gap: 15px;
    }

    .item-inner h3 {
        font-size: 24px;
    }

    /* 배경 오버레이를 모바일에서는 조금 더 어둡게 하여 글자 가독성 확보 */
    .bg-overlay {
        background: rgba(0, 0, 0, 0.5);
    }

    /* 버튼 크기 및 폰트 조정 */
    .view-btn {
        padding: 8px 20px;
    }
    .view-btn em, .view-btn i {
        font-size: 15px;
    }

    /* 호버 효과 대신 터치 시 배경 확대 효과만 유지 */
    .ms-item:active::before {
        transform: scale(1.1);
    }
}

/* 3. 최소 모바일 (480px 이하) */
@media (max-width: 480px) {


    .item-inner h3 {
        font-size: 20px;
    }

    .view-btn {
        padding: 6px 15px;
        gap: 5px;
    }
    
    .view-btn em {
        font-size: 14px;
        margin-right: 5px;
    }
}


/* section6 */
.section6-swiper-wrap {background-color: #f4f2ee;padding: 16rem 0 16rem 10rem;overflow: hidden;}
.section6-container {width: 100%;padding: 0 50px; /* 양옆 여백 */}
.section6-slide {
	position: relative;height: 420px;border-radius: 20px;background-size: cover;background-position: center;
	overflow: hidden;cursor: pointer;will-change: transform, opacity;
}

/* 배경 이미지를 담당하는 가상 요소 */
.section6-slide::before {content: "";position: absolute;top: 0; left: 0;width: 100%; height: 100%;background-image: inherit; background-size: cover;background-position: center;
	transition: transform 0.6s ease-out;z-index: 0;
}
.section6-slide:hover::before {transform: scale(1.1); }
.section6-overlay {position: absolute;top: 0; left: 0;width: 100%; height: 100%;background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 100%);z-index: 1;}
.section6-content {position: relative;z-index: 2;padding: 40px;height:420px;display: flex;flex-direction: column;justify-content: flex-end;color: #fff;text-align: left;align-items:flex-start;box-sizing:border-box;}
.section6-title {font-size: 50px;font-weight: 700;margin-bottom: 20px;color:rgba(237, 220, 198, 1);letter-spacing:-0.025em;}
.section6-desc {font-size: 22px;line-height: 135%;color:rgba(242, 240, 234, 1);font-weight:400;margin-bottom:-50px;transition: all 0.4s ease;}
.section6-slide:hover .section6-desc { margin-bottom:30px; }
.section6-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 30px 12px 40px;
    padding: 10px 15px 12px 30px;
    text-decoration: none;
    transition: all 0.3s ease;

    border: 1px solid transparent;
    border-radius: 30px;

	background: radial-gradient(19.71% 154.29% at 91.61% 51.43%, rgba(255, 158, 3, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);

    /* 5. 배경이 그려질 영역 지정 */
    background-origin: border-box;
    background-clip: padding-box, border-box; /* 첫 번째는 패딩까지, 두 번째는 보더까지 */
    
    /* 초기 상태: 숨김 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* 슬라이드 호버 시 버튼 나타남 */
.section6-slide:hover .section6-btn {opacity: 1;visibility: visible;transform: translateY(0);}

.section6-btn em { font-style: normal;color:rgba(237, 220, 198, 1);font-size:18px;font-weight:300; letter-spacing:-0.025em;margin-right:10px;}
.section6-btn i {font-style: normal;font-size: 18px;display: inline-block;transition: transform 0.3s ease;color:rgba(237, 220, 198, 1);}
.section6-btn:hover { color: #FF9E03; }
.section6-btn:hover i {transform: translateX(5px);}

/* --- Section 6 반응형 시작 --- */

/* 1. 데스크탑 소형 & 태블릿 (1024px ~ 1400px) */
@media (max-width: 1400px) {
    .section6-swiper-wrap { padding-left: 5rem; padding-top: 10rem; padding-bottom: 10rem; }
    .section6-title { font-size: 40px; }
}

/* 2. 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    .section6-swiper-wrap { padding: 8rem 0 8rem 2rem; } /* 왼쪽 치우침 완화 */
    .section6-container { padding: 0 20px; }
    
    .section6-slide, .section6-content { height: 380px; }
    .section6-title { font-size: 34px; }
    .section6-desc { font-size: 18px; }

    /* 태블릿부터는 버튼과 설명을 항상 보이게 설정 (사용자 경험 고려) */
    .section6-desc { margin-bottom: 20px !important; }
    .section6-btn { 
        opacity: 1; 
        visibility: visible; 
        transform: translateY(0); 
    }
}

/* 3. 모바일 전체 (768px 이하) */
@media (max-width: 768px) {
    .section6-swiper-wrap { padding: 6rem 0 6rem 10px; } /* 상하 패딩 축소 및 중앙 정렬 기반 */
    .section6-container { padding: 0 15px; }
    .section6-slide, .section6-content { height: 320px; } /* 높이 축소 */
    .section6-content { padding: 25px; } /* 내부 여백 축소 */
    .section6-title { 
        font-size: 28px; 
        margin-bottom: 10px; 
        word-break: keep-all; 
    }
    .section6-desc { 
        font-size: 16px; 
        line-height: 1.4;
        margin-bottom: 15px !important;
    }

    /* 버튼 사이즈 조정 */
    .section6-btn { 
        padding: 8px 20px; 
        gap: 8px;
    }
    .section6-btn em, .section6-btn i { font-size: 14px; }

    /* 호버 시 배경 확대 효과는 모바일에서 어색할 수 있으므로 강도를 낮춤 */
    .section6-slide:hover::before { transform: scale(1.05); }
}

/* 4. 최소 모바일 (480px 이하) */
@media (max-width: 480px) {
    .section6-swiper-wrap { padding: 5rem 0; }
    
    .section6-slide, .section6-content { height: 280px; }

    .section6-title { font-size: 24px; }
    
    .section6-desc { 
        font-size: 14px; 
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 너무 길면 두 줄만 노출 */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .section6-btn { 
        padding: 6px 15px; 
    }
    .section6-btn em { margin-right: 5px; }
}



/* section7 */
.grad-txt {background: linear-gradient(to right, #c6c3be, #e0b36b);-webkit-background-clip: text;background-clip: text;color: transparent;}
.gray-txt {background: rgba(242, 240, 234, 1);-webkit-background-clip: text;background-clip: text;color: transparent;}
.grad-btn {display: inline-block;color: #fff;background: linear-gradient(to right, #fdb927, #f7d292);border-radius: 25px;text-decoration: none;text-align: center;transition: all 0.3s ease;}
.grad-btn:hover {box-shadow: 0 5px 15px rgba(253, 185, 39, 0.4);}
.info-wrap {display: flex;width: 100%;height: 900px; overflow: hidden;}
.info-box {position: relative;flex: 1;display: flex;align-items: center;justify-content: center;color: #fff;text-align: center;cursor: pointer;overflow:hidden;}
.info-box::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;transition: transform 0.5s ease; z-index: 1;}
.info-box .content {position: relative;z-index: 2;padding: 0 50px;}
.info-box.doctor::before {background-image: url('../images/section7-bg1.png');}
.info-box.facility::before {background-image: url('../images/section7-bg2.png');}

.info-box:hover::before {transform: scale(1.1); }
.info-box .overview {font-size: 20px;font-weight: 700;margin-bottom: 120px;transform:rotate(-90deg);}
.info-box .tit {font-size: 50px;font-weight: 700;margin-bottom: 40px;text-align:center;}
.info-box p {font-size: 22px;line-height: 1.6;margin-bottom: 40px;font-weight: 400;letter-spacing:-0.025em;}

/* 자세히 보기 버튼 그라데이션 */
.info-box .btn-more {
 /* 1. 레이아웃 및 정렬 (기존 유지) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 15px 12px 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* 1px 두께 확보 */
    border-radius: 30px;           /* 이제 정상 작동합니다 */
	background: radial-gradient(19.71% 154.29% at 91.61% 51.43%, rgba(255, 158, 3, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);

    /* 5. 배경이 그려질 영역 지정 */
    background-origin: border-box;
    background-clip: padding-box, border-box; /* 첫 번째는 패딩까지, 두 번째는 보더까지 */
    
    /* 초기 상태: 숨김 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;

}

/* 슬라이드 호버 시 버튼 나타남 */
.info-box:hover .btn-more {opacity: 1;visibility: visible;transform: translateY(0);}
.info-box .btn-more em { font-style: normal;color:rgba(237, 220, 198, 1);font-size:18px;font-weight:300; letter-spacing:-0.025em;margin-right:10px;}
.info-box .btn-more i {font-style: normal;font-size: 18px;display: inline-block;transition: transform 0.3s ease;color:rgba(237, 220, 198, 1);}
.info-box .btn-more:hover { color: #FF9E03; }
.info-box .btn-more:hover i {transform: translateX(5px);}
.sec7 .content h2, 
.sec7 .content p { opacity: 0; transform: translateY(100%); overflow:hidden;}


/* --- Section 7 반응형 시작 --- */

/* 1. 태블릿 (최대 1200px) */
@media (max-width: 1200px) {
    .info-wrap { height: 700px; } /* 전체 높이 축소 */
    .info-box .tit { font-size: 40px; }
    .info-box p { font-size: 18px; padding: 0 20px; }
    .info-box .overview { margin-bottom: 80px; font-size: 16px; }
}

/* 2. 모바일/태블릿 전환 (최대 1024px) */
@media (max-width: 1024px) {
    .info-wrap { 
        flex-direction: column; /* 가로 -> 세로 배치 */
        height: auto; /* 고정 높이 해제 */
    }

    .info-box {
        flex: none;
        width: 100%;
        height: 500px; /* 각 박스의 높이 지정 */
    }

    .info-box .content { padding: 0 30px; }

    /* 회전된 텍스트 정방향으로 복구 */
    .info-box .overview { 
        transform: rotate(0); 
        margin-bottom: 20px; 
        font-size: 15px;
        opacity: 0.8;
    }

    .info-box .tit { font-size: 32px; margin-bottom: 20px; }
    .info-box p { font-size: 16px; margin-bottom: 30px; }

    /* 모바일에서는 호버 없이도 버튼이 보이도록 설정 */
    .info-box .btn-more {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* 3. 모바일 (최대 768px) */
@media (max-width: 768px) {
    .info-box { height: 450px; } /* 높이 약간 축소 */
    
    .info-box .tit { font-size: 28px; }
    .info-box p { font-size: 15px; word-break: keep-all; }

    .info-box .btn-more em, 
    .info-box .btn-more i { font-size: 15px; }
    .info-box .btn-more { padding: 8px 20px; }
}

/* 4. 최소 사이즈 대응 (최대 480px) */
@media (max-width: 480px) {
    .info-box { height: 400px; }
    .info-box .tit { font-size: 24px; }
    .info-box p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* 텍스트가 너무 길면 생략 */
}



/* footer */
footer {padding: 15.4rem 10.5rem 10rem; color:#fff;background:#4a4a4a;}
.ft-top {display: flex;justify-content: space-between;align-items: center;align-items:center;}
.ft-top .ft-logo { padding-bottom:34px; }
.ft-top .ft-logo img {height: 44px;}
.ft-top .ft-menu-wrap {display:flex; align-items:flex-end;}
.ft-top .ft-menu-wrap ul {display: flex;gap: 40px;margin-bottom: 36px;list-style: none;justify-content: flex-end;margin-right:52px;}
.ft-top .ft-menu-wrap ul li a {color: #fff;text-decoration: none;font-size: 20px;font-weight: 700;transition: color 0.3s ease;}
.ft-top .ft-menu-wrap .btn-cost {width: 281px;height: 66px;line-height: 50px;font-size: 22px;display:inline-flex;align-items:center;justify-content: center;border: 1px solid rgba(237, 220, 198, 1);color:rgba(237, 220, 198, 1);background:none;border-radius:33px;margin-bottom:23px;}
.ft-middle {display: flex;justify-content: space-between;align-items: center;border-top:1px solid  rgba(172, 172, 172, 1);border-bottom:1px solid  rgba(172, 172, 172, 1); height:100%;}
.ft-hours{flex:0 0 50%;}
.ft-map{flex:0 0 50%;}
.ft-map img{width:100%;}
.ft-hours .ft-big-tit {font-size: 47px;font-weight: 700;}
.ft-hours .ft-phone {font-size: 32px;font-weight: 700;}
.ft-hours dl {margin-bottom: 15px;display: flex;font-size: 15px;}
.ft-hours dl dt {width: 120px;color: #ccc;font-weight: 500;}
.ft-hours dl dd {font-weight: 500;}
.ft-hours .ft-desc {color: #999;margin-top: 20px;font-size: 14px;}
.ft-hours-top {display:flex; font-size:47px; margin-bottom:60px; }
.ft-big-tit { font-size:inherit; font-weight:300 !important; color:rgba(237, 220, 198, 1);}
.ft-big-tit strong { font-weight:800; font-size:inherit; }
.ft-telephone { display:flex; align-items:flex-end; margin-left:27px; }
.ft-telephone span { font-size:22px;font-weight:400;margin-right:22px; padding-bottom:3px;}
.ft-telephone strong {  font-size:inherit;}

.ft-hours-middle { display:flex; }
.ft-hours-middle article { flex:0 0 315px; }
.ft-hours-middle article dl { display:flex; align-items:center; margin-top:31px;}
.ft-hours-middle article dl dt { flex:0 0 105px; font-size:22px; font-weight:400;  }
.ft-hours-middle article dl dd { flex:1; font-size:22px; font-weight:700; color: rgba(237, 220, 198, 1); }
.ft-hours-middle article dl:nth-child(1) { margin-top:0; }

.ft-hours-middle div { flex:1; }
.ft-hours-middle div h5 { font-size:22px; color:rgba(166, 128, 80, 1); font-weight:700; padding-left:12px; position:relative; }
.ft-hours-middle div h5::before { content:"";display:block;width:4px; height:16px; background:rgba(166, 128, 80, 1); position:absolute; left:0; top:4px; }
.ft-hours-middle div p { font-size:18px; font-weight:400; line-height:1.6; margin:12px 0; }
.ft-hours-middle div .ft-desc { font-size:18px; font-weight:400; line-height:1.6; color:#fff;}
.ft-address {margin-top: 30px;display: flex; align-items: center;}
.ft-address span {display: inline-block;font-size: 22px;font-weight:400; line-height:1.3;margin-left:10px;}
.ft-bottom {padding:46px 0 0;}
.ft-bottom .ft-info {display:flex;justify-content:flex-end; align-items:center; }
.ft-bottom .ft-info ul {display:flex;justify-content:flex-end; align-items:center; }
.ft-bottom .ft-info ul li{font-size:18px;line-height: 1.4;color: rgba(255, 255, 255, 0.5);position:relative;margin-left:15px;padding-left:14px;}
.ft-bottom .ft-info ul li::before{content:"";display:block;width:1px;height:15px;background:rgba(255,255,255,0.5);position:absolute;left:0;top:5px;}
.ft-bottom .ft-info ul li:nth-child(1){margin-left:0;padding-left:0;}
.ft-bottom .ft-info ul li:nth-child(1)::before{display:none;}
.ft-bottom .ft-info .copy {font-size:18px;line-height: 1.4;color: rgba(255, 255, 255, 0.5);margin-left:26px;}


/* 반응형 스타일 추가 */

/* 태블릿 및 작은 화면용 (1024px 이하) */
@media screen and (max-width: 1024px) {
    footer {
        padding: 8rem 4rem 6rem; /* 패딩 축소 */
    }

    .ft-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .ft-top .ft-menu-wrap {
        width: 100%;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }

    .ft-top .ft-menu-wrap ul {
        margin-right: 0;
        margin-bottom: 30px;
        gap: 20px;
		justify-content:center;
    }

    .ft-middle {
        flex-direction: column;
        height: auto;
		padding-top:4rem;
    }

    .ft-hours, .ft-map {
        flex: 0 0 100%;
        width: 100%;
    }

    .ft-map {
        margin-top: 20px;
    }

    .ft-hours-top {
        flex-direction: column;
        font-size: 36px;
        margin-bottom: 40px;
		align-items:Center;
    }
	.ft-hours .ft-big-tit { font-size:inherit; }
	.ft-telephone span { margin-right:12px; }
    .ft-telephone {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* 모바일용 (768px 이하) */
@media screen and (max-width: 768px) {

    footer {
        padding: 60px 20px 40px;
    }
	.ft-logo { text-align:center !important; width:100%; }
    /* 상단 영역 */
    .ft-top .ft-menu-wrap ul {
        flex-wrap: wrap;
        gap: 15px 25px;
    }
    
    .ft-top .ft-menu-wrap ul li a {
        font-size: 16px;
    }

    .ft-top .ft-menu-wrap .btn-cost {
        width: 100%; /* 버튼 가로 꽉 차게 */
        height: 54px;
        font-size: 18px;
    }

    /* 중간 진료 시간 영역 */
    .ft-hours-top {
        font-size: 28px;
    }

    .ft-telephone span {
        font-size: 16px;
    }

    .ft-hours-middle {
        flex-direction: column;
		align-items:center;
    }

    .ft-hours-middle article {
        flex: 0 0 auto;
        margin-bottom: 30px;
    }

    .ft-hours-middle article dl dt,
    .ft-hours-middle article dl dd {
        font-size: 18px;
    }

    .ft-hours-middle div h5 {
        font-size: 18px;
    }

    .ft-hours-middle div p, 
    .ft-hours-middle div .ft-desc {
        font-size: 15px;
    }
	.ft-address { justify-content:flex-start; margin-top:50px; }
    .ft-address span {
        font-size: 16px;
    }

    /* 하단 정보 영역 */
    .ft-bottom .ft-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .ft-bottom .ft-info ul {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 15px;
    }

    .ft-bottom .ft-info ul li {
        margin-left: 0;
        padding-left: 0;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .ft-bottom .ft-info ul li::before {
        display: none;
    }

    .ft-bottom .ft-info .copy {
        margin-left: 0;
        font-size: 14px;
    }
}

/* 최소 사이즈 (320px) 대응을 위한 추가 조정 */
@media screen and (max-width: 360px) {
    .ft-hours-top {
        font-size: 24px;
    }
    
    .ft-top .ft-menu-wrap ul li {
        width: 45%; /* 메뉴가 너무 좁으면 두 줄로 */
    }
}


.secCom .mask {
  overflow: hidden;
  display: block; /* 또는 inline-block */
}

.secCom .mask em, .secCom .mask h2 {
  display: block;
  transform: translateY(100%); /* 처음에 아래로 내려놓음 */
  opacity: 0; /* 선택사항: 더 부드러운 효과를 위해 */
}


/* s101 */
.sub-visual-wrap { background: #F2F0EA; padding:0 35px;  }
.sub-visual { border-radius:0 0 50px 50px; overflow:hidden; height:518px; }
.sv { height:100%; display:flex; align-items:center; justify-content:center; padding:50px 0 0 }
.sv h2 { font-size:7rem; line-height:135%; letter-spacing:-0.025em; color:#fff; text-align:center; font-weight:700;}
.sv101 { background:url(../images/sub/sv101.png) no-repeat center / cover; }
.sv201 { background:url(../images/sub/sv201.png) no-repeat center / cover; }
.sv301 { background:url(../images/sub/sv301.png) no-repeat center / cover; }
.sv401 { background:url(../images/sub/sv401.png) no-repeat center / cover; }

.st-h3 { text-align:center; position:relative; margin-top:-24px; z-index:3;}
.st-h3 h3 { display:inline-flex; padding:14px 50px; background:#a68050; border-radius:10px; font-size:2rem; font-weight:600; letter-spacing:-0.025em; color:#fff; }


/* 서브 비주얼 및 타이틀 반응형 스타일 */

/* 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .sub-visual-wrap { padding: 0 15px; } /* 양옆 여백 축소 */
    .sub-visual { 
        height: 400px; /* 높이 축소 */
        border-radius: 0 0 40px 40px; 
    }
    .sv h2 { 
        font-size: 5rem; /* 7rem -> 5rem */
    }
    .st-h3 h3 { 
        padding: 12px 40px; 
        font-size: 1.8rem; 
    }
}

/* 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .sub-visual-wrap { padding: 0 10px; }
    .sub-visual { 
        height: 300px; /* 모바일 높이 */
        border-radius: 0 0 30px 30px; 
    }
    .sv { padding: 60px 0 0; }
    .sv h2 { 
        font-size: 3.5rem; /* 모바일 폰트 크기 */
        line-height: 1.2;
    }
    .st-h3 { margin-top: -20px; } /* 겹치는 부분 소폭 조정 */
    .st-h3 h3 { 
        padding: 10px 30px; 
        font-size: 1.6rem; 
        border-radius: 8px;
    }
}

/* 초소형 모바일 (320px 대응) */
@media screen and (max-width: 480px) {
    .sub-visual { 
        height: 220px; /* 더 낮은 높이 */
    }
    .sv h2 { 
        font-size: 2.5rem; /* 텍스트가 깨지지 않게 더 축소 */
    }
    .st-h3 { margin-top: -18px; }
    .st-h3 h3 { 
        padding: 8px 20px; 
        font-size: 1.4rem; 
    }
}


.subSection1 { background: #F2F0EA; margin-top:-24px}
.section-box-1{ width:100%; position:relative; padding-bottom:16rem; }
.sub-flex-box-1 { display:flex; height:675px; width:100%; margin-top:8rem;}
/* --- CSS 수정 시작 --- */
.sub-flex-box-1 .sw_con_bg { 
    height: 675px;
    flex: 0 0 50%;
    border-radius: 0 20px 20px 0;
    overflow: hidden;
    position: relative;
    /* 애니메이션을 위해 초기 scale 설정 유지 */
    transform: scale(1.1); 
}

.sub-flex-box-1 .sw_con_bg > div {
    background: url(../images/sub/s101-img1.png) no-repeat center / cover;
    height: 100%;
    position: relative;
    z-index: 2;
    width: 100%;
    /* CSS 변수 초기값 유지 */
    --after-width: 100%; 
    /* [추가] 초기 상태는 투명하게 */
    opacity: 0; 
}

.sub-flex-box-1 .sw_con_bg > div::after {
    content: "";
    display: block;
    /* 너비를 변수로 지정 */
    width: var(--after-width); 
    height: 100%;
    position: absolute;
    /* [수정] 우측에서 사라지게 하려면 좌측(left:0) 고정 */
    left: 0; 
    top: 0;
    z-index: 3;
    background: #F2F0EA;
    /* [수정] 사라질 때 왼쪽을 기준으로 너비가 줄어들게 함 */
    transform-origin: left center; 
}
/* --- CSS 수정 끝 --- */


.sub-flex-box-1 .sw_wr { flex:1; height:100%; display:flex; justify-content:space-between; align-items:flex-start; flex-direction:column;  padding-left:90px;}
.sub-flex-box-1 .sw_wr .sw_top_title { font-size:2.8rem; font-weight:700; color:#a68050; letter-spacing:-0.025em; line-height:180%;}
.sub-flex-box-1 .sw_wr .sw_bottom_title { font-size:7rem; font-weight:700; color:#000; letter-spacing:-0.025em; line-height:135%;}

.section-box-2 {padding:16rem 0; width:100%;}
.sub-flex-box-2 { display:flex; height:900px; }
.sbox_left { flex:0 0 45%; padding-left:10rem; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; }
.sbox_left .sb_top_title em { font-size:2.4rem; color:#a68050; font-weight:700; letter-spacing:-0.025em; }
.sbox_left .sb_top_title h3 { font-size:7rem; color:#000; font-weight:700; letter-spacing:-0.025em; margin-top:15px; line-height:135%;}
.sbox_left .sb_bottom_title p { margin-top:25px; font-size:2.4rem; line-height:160%; letter-spacing:-0.025em; font-weight:500; color:#73685a; }

.sb_accordion { flex:1; display:flex; flex-direction:column; }
.sb_accordion article { flex:1; display:flex; align-items:center; padding-left:12rem; transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer;}
.sb_accordion article.sba1 { background:url(../images/sub/s101-img201.png) no-repeat center / cover; }
.sb_accordion article.sba2 { background:url(../images/sub/s101-img202.png) no-repeat center / cover;}
.sb_accordion article.sba3 { background:url(../images/sub/s101-img203.png) no-repeat center / cover;}
.sb_accordion article span {
    font-size: 5rem; 
    font-weight: 700; 
    letter-spacing: -0.025em; 
    display: inline-block;
    margin-left: 7px;

    /* 1. 요청하신 그라데이션 적용 */
    background: radial-gradient(19.71% 154.29% at 91.61% 51.43%, #FF9E03 0%, #FFFFFF 100%);

    /* 2. 배경을 글자 모양으로 자르기 */
    -webkit-background-clip: text;
    background-clip: text;

    /* 3. 기존 글자색을 투명하게 설정 */
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.sb_accordion article:hover { flex: 1.7 !important; }

.subSection3 { padding:16rem 3.5rem 24rem; background:#f2f0ea; }
.section-box-3 { display:flex; flex-direction:column; width:100%; align-items:center; justify-content:center; }
.base-p { font-size:5.5rem; color:#73685a; font-weight:800; letter-spacing:-0.025em; margin-top:15px; line-height:135%; text-align:center;}
.sub-intro-flex { display:flex; justify-content:center; width:100%; margin:8rem 0 16rem; gap:34px;}

.mbr { display:none; }

/* --- 반응형 대응 시작 --- */

/* 1. 테블릿 및 소형 모니터 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .section-box-1, .section-box-2, .subSection3 { padding-top: 10rem; padding-bottom: 10rem; }
    
    /* 섹션 1 */
    .sub-flex-box-1 { height: auto; flex-direction: column-reverse; margin-top: 5rem; padding:0 30px;}
    .sub-flex-box-1 .sw_con_bg { flex: 0 0 400px; width: 100%; border-radius: 20px; }
    .sub-flex-box-1 .sw_wr { padding-left: 0; padding-bottom: 4rem; }
    .sub-flex-box-1 .sw_wr .sw_bottom_title { font-size: 4rem; margin-top:25px; }
	.sub-flex-box-1 .sw_wr .sw_bottom_title br { display:none; }

    /* 섹션 2 */
    .sub-flex-box-2 { height: auto; flex-direction: column; padding:0 30px; }
    .sbox_left { flex: 0 0 auto; padding-left: 0; margin-bottom: 5rem; }
    .sbox_left .sb_top_title h3 { font-size: 5rem; }
    .sb_accordion { height: 600px; display:block;} /* 아코디언 높이 고정으로 가독성 유지 */
    .sb_accordion article { padding-left: 5rem; height:200px; }
}

/* 2. 일반 테블릿 (768px 이하) */
@media screen and (max-width: 768px) {
    /* 공통 폰트 축소 */
    .sub-flex-box-1 .sw_wr .sw_bottom_title,
    .sbox_left .sb_top_title h3,
    .base-p { font-size: 3.4rem; }
	.mbr { display:block; }

    .sub-flex-box-1 .sw_wr .sw_top_title,
    .sbox_left .sb_top_title em,
    .sbox_left .sb_bottom_title p { font-size: 1.8rem; word-break:keep-all; }
	.sbox_left .sb_bottom_title p br { display:none; }

    /* 아코디언 텍스트 */
    .sb_accordion article span { font-size: 3.5rem; }

    /* 섹션 3 */
    .sub-intro-flex { flex-direction: column; gap: 20px; margin: 4rem 0 8rem; }
    .subSection3 { padding: 8rem 20px; }
	.intro-img3 {text-align:center; }
	.intro-img3 img { max-width:100%; }
}

/* 3. 모바일 및 최소 사이즈 (480px 이하) */
@media screen and (max-width: 480px) {
    .section-box-1, .section-box-2, .subSection3 { padding-top: 6rem; padding-bottom: 6rem; }

    /* 섹션 1 이미지 높이 조정 */
    .sub-flex-box-1 .sw_con_bg { flex: 0 0 300px; }
    .sub-flex-box-1 .sw_wr .sw_bottom_title,
    .sbox_left .sb_top_title h3,
    .base-p { font-size: 3.4rem; }


    /* 아코디언 모바일 최적화 */
    .sb_accordion { height: 500px; }
    .sb_accordion article { padding-left: 20px; }
    .sb_accordion article span { font-size: 2.4rem; }

    /* 섹션 3 텍스트 */
    .base-p { font-size: 3.4rem; word-break:keep-all;}
}

/* 4. 초소형 기기 (320px 대응) */
@media screen and (max-width: 360px) {
    .sub-flex-box-1 .sw_wr .sw_bottom_title,
    .sbox_left .sb_top_title h3 { font-size: 2.4rem; }
    .sb_accordion article span { font-size: 2rem; }
}



/* 배경 이미지 초기 스케일 */
.sv101, .sw_con_bg { overflow: hidden; }
.sv101 { transform: scale(1.2); transition: transform 1.5s ease-out; }
.st-h3 { opacity: 0; transform: translateY(100px); }
.sub-intro-flex > article { opacity: 0; transform: translateY(120px); }


.subSection401 {margin-top:-24px; padding-bottom:80px;}

@media (max-width:1024px){
	.subSection1,
	.subSection401 {margin-top:-18px; }
	.subSection401 {padding-bottom:20px;}
}
@media (max-width:768px){
	.subSection1,
	.subSection401 {margin-top:-16px; }
}
@media (max-width:480px){
	.subSection1,
	.subSection401 {margin-top:-12px; }
}

.subSection401, .subSection402, .subSection403 { display:block; background: #F2F0EA; position:relative;}
.sub-flex-column-box-1 { display:flex; flex-direction:column; align-items:center; }

.small-width { width:900px; margin:0 auto; position:relative; }
.middle-width { width:1500px; margin:0 auto; position:relative; }
.section-box-row-1 { display:flex; margin-top:80px; margin-bottom:80px; }
.row-left-title {flex:0 0 37%; white-space:nowrap; display:flex; justify-content:flex-end; }
.row-right-con { flex:1; padding-left:10rem; }
.row-right-con h4 { margin-bottom:40px; }
.base-div1 { padding:80px 0; }
.base-div2 { padding:50px 0; }
.base-div3 { padding:0 0 130px; }
.title-h3-1 { font-size:6rem; line-height:135%; letter-spacing:-0.025em; font-weight:700; color:#000;text-align:right;}
.title-h4-1 { font-size:2.8rem; line-height:160%; letter-spacing:-0.025em; font-weight:700; color:#A68050; }
.base-c1,
.base-list1 li { font-size:2.4rem; line-height:160%; letter-spacing:-0.025em; font-weight:500; color:#73685a;  }
.base-list1 li { padding-left:15px; position:relative; }
.base-list1 li::before { content:"";display:block;width:5px;height:5px;border-radius:3px;background:#73685a;position:absolute; left:0; top:50%;transform:translateY(-50%); }
.bg-white { background:#fff !important; }
.text-center { text-align:center !important; }
.section-con-1{ padding:11.2rem 0 16rem;}
.treat-list { display:flex; justify-content:center; }
.treat-list._Three { flex-wrap:wrap; gap:40px 100px; }
.treat-list._Another{ gap:65px; }
.treat-list li {
	display:flex; justify-content:center; align-items:center; border-radius:50%; width:230px; height:230px; background: rgba(217, 217, 217, 0.45); 
	font-size:2.8rem;font-weight:700;line-height:140%;letter-spacing:-0.025em; color:rgba(166, 128, 80, 1);
	text-align:Center;
}
.treat-list li.blank{ background:none;}

.key-wrap { max-width:1700px; margin:0 auto; padding:2.4rem 0 16rem;}
.key-wrap > article { padding:8.6rem 14.4rem; border-bottom: 1px solid rgba(172, 172, 172, 1); display:flex; align-items:center; justify-content:space-between;}
.key-wrap > article .key-left p { margin:24px 0 30px; }
.key-wrap > article .key-right { display:flex; gap:60px;}

.title-h5-1 { font-size:5rem; line-height:135%; letter-spacing:-0.025em; font-weight:700; color:#73685a;  }
.base-c3, .base-c3 strong { font-size:2.2rem; line-height:160%; letter-spacing:-0.025em; font-weight:500; color:#414141;  }
.base-c3 strong { font-weight:700; }

.sub-img-top .inner { position:relative; overflow:hidden; z-index:1;}
.sub-img-top .inner img{ position:relative; z-index:2; }
.sub-img-top .inner .moving{ position:absolute; left:0; top:0;width:100%;height:100%; background:#f2f0ea; z-index:3; }

.treat-wrap { max-width:1700px; margin:0 auto; padding:2.4rem 0 16rem;}
.treat-wrap > article { padding:4.8rem 20rem; border-bottom: 1px solid rgba(172, 172, 172, 1); display:flex; align-items:center; justify-content:space-between;}
.treat-wrap > article .treat-left p { margin:24px 0 0; }
.treat-wrap > article .treat-right ul { display:flex; gap:30px;}


/* --- 반응형 대응 시작 --- */

/* 1. 태블릿 및 데스크탑 소형 (1500px 이하) */
@media screen and (max-width: 1550px) {
    .middle-width { width: 95%; }
    .key-wrap, .treat-wrap { max-width: 95%; }
    .key-wrap > article { padding: 6rem 5%; }
    .treat-wrap > article { padding: 4.8rem 5%; }
}

/* 2. 일반 태블릿 (1024px 이하) */
@media screen and (max-width: 1224px) {
    .small-width { width: 90%; }
    
    /* 폰트 크기 축소 */
    .title-h3-1 { font-size: 4.5rem; }
    .title-h5-1 { font-size: 3.5rem; }
    .title-h4-1 { font-size: 2.2rem; }
    .base-c1, .base-list1 li { font-size: 1.8rem; word-break:keep-all;}
    
    /* 레이아웃 조정 */
    .row-right-con { padding-left: 4rem; }
    .treat-list._Three { gap: 30px; }
    .treat-list li { width: 180px; height: 180px; font-size: 2rem; }
    .treat-list li.blank{ display:none;}

    .key-wrap > article .key-right { gap: 30px; }
	.sub-img-top .inner img{ width:100%;}
	.treat-wrap > article { flex-wrap:wrap; }
	.treat-wrap > article .treat-right { margin-top:30px; }
}

/* 3. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    /* 여백 및 패딩 대폭 축소 */
    .section-con-1 { padding: 6rem 0 8rem; }
	.treat-wrap { padding-bottom:7rem;}
    .base-div1 { padding: 40px 30px; }
    .base-div3 { padding: 0 30px 60px; }
	.base-div1 br,
	.base-c1 br  { display:none; }

    /* 가로 배치를 세로 배치로 전환 (핵심) */
    .section-box-row-1, 
    .key-wrap > article, 
    .treat-wrap > article { 
        flex-direction: column; 
        align-items: flex-start; 
        text-align: left;
    }
	.section-box-row-1 { padding-left:30px; padding-right:30px; }

    .row-left-title { 
        flex: 0 0 auto; 
        width: 100%; 
        justify-content: flex-start; 
        margin-bottom: 20px; 
    }
    
    .title-h3-1 { text-align: left; font-size: 3.5rem; }
    
    .row-right-con { 
        width: 100%; 
        padding-left: 0; 
    }

    /* 원형 리스트 조정 */
    .treat-list { flex-wrap: wrap; gap: 15px !important; justify-content: center; }
    .treat-list li { width: 140px; height: 140px; font-size: 1.6rem; }

    .key-wrap > article .key-right,
    .treat-wrap > article .treat-right ul { 
        flex-direction: column; 
        gap: 20px; 
        margin-top: 30px;
    }
	.base-c3 br { display:none; }
}

/* 4. 소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .title-h3-1 { font-size: 2.8rem; }
    .title-h5-1 { font-size: 2.4rem; }
    .title-h4-1 { font-size: 1.8rem; }
    .base-c3, .base-c3 strong { font-size: 1.6rem; }

    .key-wrap > article, 
    .treat-wrap > article { padding: 30px 15px; }

    /* 이미지 박스 등 너비 100% 강제 */
    .key-wrap > article .key-right img,
    .treat-wrap > article .treat-right img {
        width: 100%;
        height: auto;
    }
}

/* 5. 최소 사이즈 (320px 대응) */
@media screen and (max-width: 360px) {
    .title-h3-1 { font-size: 2.4rem; }
    .treat-list li { width: 120px; height: 120px; font-size: 1.4rem; }
}



.sb-blank { margin-top:6rem; }

.clinic-list { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center;z-index:5; opacity:0;}
.clinic-list li { flex:1; display:flex; flex-direction:column; border-left:1px solid #fffdfd; padding-left:95px;}
.clinic-list li:nth-child(1) { border-left:0; padding-left:70px; }
.clinic-list li strong { font-size:7rem; font-weight:700; letter-spacing:-0.025em; color:#fff9f9; }
.clinic-list li span { font-size:2.4rem; font-weight:600; letter-spacing:-0.025em; color:#f2f0ea; margin-top:20px;}

.subSection301 { padding-bottom:25rem; }

.subSection303 { padding-bottom:15rem; position:relative;}
.subSection304 { padding-bottom:15rem; position:relative; z-index:3;}
.img303-1 { 
	display:block;width:447px; height:577px;
	background:url(../images/sub/s301-img201.png) no-repeat center / 100%;
	position:absolute; right:0; top:4900px; z-index:10;
}
.img303-2 { 
	display:block;width:475px; height:588px;
	background:url(../images/sub/s301-img301.png) no-repeat center / 100%;
	position:absolute; left:0; top:7500px; z-index:10;
}
.subMenu-div { position:relative; margin-top:-66px; }
.sm-nav { display:flex; justify-content:center; gap:32px; }
.sm-nav li { flex:0 0 304px; }
.sm-nav li a { display:flex; border-radius:10px 10px 0 0; background:#73685a; height:66px; width:304px; color:#eddcc6; font-weight:700; font-size:32px; line-height:1; text-align:center; justify-content:center; align-items:center; transition:all 0.4s;}
.sm-nav li a:hover { background:#a68050; }

.sub-flex-wrap-1 > div { border-bottom:1px solid #acacac; }
.sub-flex-wrap-1 > div:nth-child(1) { padding-top:10rem; }
.sub-flex-column-box-2 { max-width:1500px; margin:0 auto; position:relative; padding:10rem 0 15rem;}
.sub-title-div { display:flex; align-items:flex-end; padding-left:70px; padding-bottom:60px;}
.sub-title-div h3 { font-size:6rem; font-weight:700; color:#000; letter-spacing:-0.025em; line-height:135%;}
.sub-title-div p { font-size:2.8rem; line-height:140%; color:#a68050; letter-spacing:-0.025em; margin-left:44px; }

.sub-con-div { display:flex; flex-wrap:wrap; gap:63px; justify-content:center;}
.sub-con-div article { border:1px solid #d5d5d5; padding:33px 57px 50px; flex:0 0 680px;}
.sub-con-div article h4 { font-size:4rem; font-weight:700; letter-spacing:-0.025em; color:#73685a;  margin-bottom:30px;}
.sub-con-div article ul { margin-top:20px;}
.sub-con-div article ul li { font-size:2.2rem; font-weight:500; letter-spacing:-0.025em; display:flex; align-items:center; line-height:160%; color:#414141;}
.sub-con-div article ul li::before { content:"ㆍ"; font-size:2.4rem; font-weight:600; olor:#f2f0ea; margin-right:5px; }
.sub-con-div article p { font-size:2.2rem; font-weight:500; letter-spacing:-0.025em; display:flex; align-items:center; line-height:160%; color:#414141;}

.base-list-c { display:flex; align-items:Center; gap:31px; }
.base-list-c li {
	display:flex; justify-content:center; align-items:center; border-radius:50%; width:230px; height:230px; background: rgba(217, 217, 217, 0.45); 
	font-size:2.8rem;font-weight:700;line-height:140%;letter-spacing:-0.025em; color:rgba(166, 128, 80, 1);
	text-align:Center;
}

.base-c4 { font-size:4rem; line-height:135%; letter-spacing:-0.025em; font-weight:700; color:#73685a;  }
.list-div-row { max-width:1700px; margin:0 auto; }
.list-div-row > article { padding:5rem 27.8rem; border-bottom:1px solid #acacac; display:flex;}
.list-div-row > article h3 { font-size:6rem; font-weight:700; letter-spacing:-0.025em; color:#000;  flex:0 0 40%; padding:8px 0 0;}
.list-div-row > article div { flex:1; }
.list-div-row > article div h4 { font-size:5rem; font-weight:700; letter-spacing:-0.025em; color:#73685a; line-height:130%; margin-bottom:30px;}
.list-div-row > article div p { font-size:2.2rem; font-weight:500; letter-spacing:-0.025em; color:#414141; line-height:160%;  }

.list-div-row2 { max-width:1700px; margin:0 auto; }
.list-div-row2 > article { padding:8.6rem 27.8rem; border-bottom:1px solid #acacac; display:flex;}
.list-div-row2 > article h3 {  flex:0 0 40%; padding:8px 0 0; display:flex; flex-direction:column;}
.list-div-row2 > article h3 span { font-size:6rem; font-weight:700; letter-spacing:-0.025em; color:#000;}
.list-div-row2 > article h3 strong { font-size:5rem; font-weight:700; letter-spacing:-0.025em; color:#73685a; margin-top:10px;}
.list-div-row2 > article div { flex:1; }
.list-div-row2 > article div h4 { font-size:2.2rem; font-weight:500; letter-spacing:-0.025em; color:#414141; line-height:160%; margin-bottom:30px;}


/* --- 반응형 대응 시작 --- */

/* 1. 테블릿 및 저해상도 PC (1200px ~ 1025px) */
@media screen and (max-width: 1200px) {
    .sub-con-div article { flex: 0 0 calc(50% - 32px); } /* 2열 유지하되 너비 가변 */
    .list-div-row > article, .list-div-row2 > article { padding: 5rem 5%; }
}

/* 2. 일반 테블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    /* 폰트 및 여백 축소 */
    .clinic-list li strong { font-size: 4rem; }
    .sub-title-div h3, .list-div-row > article h3, .list-div-row2 > article h3 span { font-size: 4rem; }
    .sub-con-div article h4, .list-div-row > article div h4, .list-div-row2 > article h3 strong { font-size: 3.5rem; }
    
    /* 네비게이션 조정 */
    .sm-nav { gap: 10px; }
    .sm-nav li { flex: 1; }
    .sm-nav li a { width: 100%; font-size: 20px; }

    /* 절대 위치 이미지 숨김 혹은 조정 (반응형에서 위치 이탈 방지) */
    .img303-1, .img303-2 { display: none; } 

    .sub-flex-column-box-2 { padding: 6rem 20px 10rem; }
    .sub-title-div { padding-left: 0; }
}

/* 3. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    /* 레이아웃을 세로형으로 전환 */
    .clinic-list { position: static; opacity: 1; height: auto; flex-direction: column; }
    .clinic-list li { border-left: 0; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
    .clinic-list li:nth-child(1) { padding-left: 0; border-left:auto !important; }

    .subSection301, .subSection303, .subSection304 { padding-bottom: 80px; }

    .sm-nav { flex-wrap: wrap; }
    .sm-nav li { flex:1; }

    .sub-title-div { flex-direction: column; align-items: flex-start; }
    .sub-title-div p { margin-left: 0; margin-top: 15px; font-size: 1.8rem; }
	.sub-title-div p br { display:none; }

    .sub-con-div article { flex: 0 0 100%; padding: 30px 20px; }

    .list-div-row > article, .list-div-row2 > article { flex-direction: column; }
    .list-div-row > article h3, .list-div-row2 > article h3 { flex: 0 0 auto; margin-bottom: 20px; }
    
    /* 원형 리스트 크기 조정 */
    .base-list-c { flex-wrap: wrap; justify-content: center; }
    .base-list-c li { width: 160px; height: 160px; font-size: 1.8rem; }

    .clinic-list { position: static; opacity: 1; height: auto; flex-direction: column; gap:20px; padding:30px 30px 20px; width:100% !important; display:flex !important; }

	.clinic-list li { flex:1; display:flex; flex-direction:column; border-left:0; padding-left:0; border:1px solid rgba(0,0,0,0.3); border-radius:150px; width:100%; justify-content:center; align-items:center;}
	.clinic-list li:nth-child(1) { border-left:1px solid rgba(0,0,0,0.3); padding-left:0; }

	.clinic-list li strong { font-size:3.4rem; font-weight:700; letter-spacing:-0.025em; color:#000; }
	.clinic-list li span { font-size:1.8rem; font-weight:600; letter-spacing:-0.025em; color:rgba(0,0,0,0.5);margin-top:10px;}

	.sub-con-div { gap:30px; }
	.sub-con-div article h4 { font-size:2.6rem; margin-bottom:20px;}
	.sub-con-div article ul { margin-top:20px;}
	.sub-con-div article ul li { font-size:1.8rem; }
	.sub-con-div article ul li::before {font-size:2rem; }
	.sub-con-div article p { font-size:1.8rem;}
	.sub-con-div article p br {display:none; }

	.list-div-row > article div p { font-size:1.8rem;  }
	.list-div-row > article div p br { display:none; }
	.list-div-row2 > article div h4 { font-size:1.8rem; }
}

/* 4. 소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .clinic-list li strong { font-size: 3rem; }
    .sub-title-div h3, .list-div-row > article h3, .list-div-row2 > article h3 span { font-size: 2.8rem; }
    .list-div-row > article div h4 { font-size: 2.4rem; }
    .sub-con-div article h4 { font-size: 2.2rem; }
    
    .sm-nav li { flex: 0 0 100%; } /* 메뉴 세로로 꽉 차게 */
    
    .list-div-row2 > article h3 strong { font-size: 2.6rem; }
    .base-c4 { font-size: 2.4rem; }
}

/* 5. 최소 사이즈 (320px 대응) */
@media screen and (max-width: 360px) {
    .sub-title-div h3 { font-size: 2.4rem; }
    .base-list-c li { width: 140px; height: 140px; font-size: 1.6rem; }
}




:root {
    --bg-color: #f9f7f2;
    --accent-color: #A68050;
    --text-dark: #000;
    --tag-bg: #414141;
}

/* 대표원장 섹션 */
.profile-lead {display: flex;align-items: flex-end;gap: 40px;height:100%;position:relative;z-index:3;}
.profile-lead .profile-image {display:flex;height:auto;align-items:flex-end;height:100%;}
.profile-lead .profile-image img {width: 100%;}
.profile-info {flex: 1;padding:100px 0 0; margin-left:-100px;}
.prof-info-2 { margin-left:-120px;}
.prof-info-3 { margin-left:-120px;}
.prof-info-4 { margin-left:-220px;}

/* 공통 타이틀 스타일 */
.profile-title-sub {color: var(--accent-color);font-weight:700;font-size: 2.4rem;letter-spacing: -0.025em;}
.profile-name {font-size: 7rem;color:var(--text-dark);font-weight:700;letter-spacing: -0.025em;white-space:nowrap;line-height:1;margin:1rem 0 5.8rem;}
.profile-tag {
	display: inline-flex;align-items: center;justify-content: center;gap: 10px;padding: 5px 30px 6px 30px;
	text-decoration: none;
	transition: all 0.3s ease;
	font-weight: 300;
	font-size: 2.5rem;
	font-weight:300;
	line-height: 2.5rem;
	letter-spacing: -0.0025em;
	color: rgba(65, 65, 65, 1);
	text-align: center;
	border: 1px solid #000;
	border-radius: 30px;
	background-image: radial-gradient(19.71% 154.29% at 91.61% 51.43%, rgba(255, 158, 3, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	margin-bottom:2.3rem;

}
.profile-info-column ul {list-style: none;padding: 0;margin: 0 0 20px 0;}
.profile-info-column ul li {font-size: 2.2rem;color:#414141;font-weight:500;;letter-spacing:-0.025em;margin-bottom: 8px;position: relative;line-height:1.4;padding-left: 16px;white-space:nowrap;}
.profile-info-column ul li::before {content: "•";position: absolute;left: 0;color: var(--tag-bg);}
.profile-info-column ul li.none::before { content:""; }

.activity-text {font-size: 2.2rem;color:#414141;font-weight:500;;letter-spacing:-0.025em;margin-bottom: 8px;position: relative;line-height:1.4;padding-left: 16px;}
.activity-text::before {content: "•";position: absolute;left: 0;color: var(--tag-bg);}
.doc-img101 { 
	position:absolute; left:50%; bottom:0; width:659px; height:642px;
	margin-left:-1090px;
	background:url(../images/intro/doc-img101.png) no-repeat center / 100%;
	display:block;
	z-index:1;
}
.profile-info-grid {display: flex;gap: 43px;}

/* 일반 수의사 그리드 */
.profile-grid {display: flex;justify-content:center;gap: 60px 40px;}
.profile-item { display:flex; align-items:flex-start; height:100%; }
.profile-item .profile-item-image {width: 600px;display:flex; height:100%; align-items:flex-end;padding-top:200px;}
.profile-item .profile-item-image img {width: 100%;}
.profile-item .profile-item-image.last-doc-img {width: 747px;}

.profile-item-con { padding:130px 0 0; }
.d-row { position:relative; width:100%; }
.d-width { position:relative; max-width:1600px; margin:0 auto; }
.profile-item-last { margin-left:-200px; }
.moving-text-container {width: 100%;overflow: hidden;padding: 50px 0;display: flex;align-items: flex-end;position:absolute; left:0; bottom:0;line-height:1;z-index:0;height:100%;}
.moving-mirea-wrapper {display: flex;white-space: nowrap;animation: marquee 20s linear infinite;}
.moving-mirea {font-size: 20rem;font-weight: 900;color: rgba(177, 144, 102, 0.1);-webkit-text-stroke: 1px rgba(0, 0, 0, 0.05);padding-right: 20px;}

/* --- 프로필 섹션 반응형 시작 --- */

/* 1. 데스크탑 소형 & 태블릿 (최대 1400px) */
@media (max-width: 1400px) {
    .d-width { max-width: 100%; padding: 0 40px; }
    .profile-info, .prof-info-2, .prof-info-3, .prof-info-4, .profile-item-last { 
        margin-left: 0; /* 겹침 효과 제거 */
    }
    .profile-lead { gap: 20px; }
    .profile-name { font-size: 5rem;}
    .doc-img101 { display: none; } /* 장식용 배경 이미지는 해상도가 낮아지면 가림 */
}

/* 2. 태블릿 (최대 1024px) */
@media (max-width: 1024px) {
    .profile-lead { flex-direction: column; align-items: center; text-align: center; }
    .profile-info { padding-top: 40px; }
    .profile-info-grid { justify-content: center; }
    
    .profile-grid { flex-direction: column; align-items: center; gap: 20px; }
    .profile-item { flex-direction: column; align-items: center; text-align: center; padding-bottom:50px;}
    .profile-item .profile-item-image { width: 100% !important; max-width: 500px; padding-top: 50px; }
    .profile-item-con { padding-top: 30px; }

    .profile-info-column ul li { white-space: normal; text-align: left; } /* 리스트 줄바꿈 허용 */
    
    .moving-mirea { font-size: 12rem; } /* 배경 흐르는 글자 축소 */

	.img-doc1 { margin-left:20px; }
	.img-doc2 { margin-left:50px; width:80%; max-width:80%;}
	.img-doc3 { margin-left:50px; width:80%; max-width:80%; }
	.img-doc4 { margin-left:40px; }
	.img-doc5 { margin-left:40px; }
}

/* 3. 모바일 (최대 768px) */
@media (max-width: 768px) {
    .profile-name { font-size: 4rem; margin-bottom: 3rem;  text-align:Center;}
    .profile-title-sub { font-size: 1.8rem; }
    .profile-tag { font-size: 1.8rem; padding: 5px 20px; }
    
    .profile-info-column ul li, .activity-text { font-size: 1.6rem; }
    
    .profile-info-grid { flex-direction: column; gap: 20px; align-items: center; }
    
    .moving-text-container { padding: 20px 0; }
    .moving-mirea { font-size: 8rem; }
}

/* 4. 최소 사이즈 대응 (최대 480px) */
@media (max-width: 480px) {
    .profile-lead .profile-image img { width: 100%; }
    .profile-name { font-size: 3.2rem; }
    
    .profile-item .profile-item-image { padding-top: 30px; }
    
    .profile-info-column ul li { font-size: 1.5rem; padding-left: 12px; }
    
    .profile-tag { font-size: 1.6rem; }

    /* 모바일에서 텍스트가 너무 길어지는 것을 방지 */
    .profile-info-column ul { margin-bottom: 10px; }
}


/* 핵심: 0에서 -50%까지만 이동하고 다시 0으로 리셋 */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .moving-mirea {
        font-size: 4rem;
        padding-right: 30px;
    }
}

.z-indx-up { position:relative; z-index:5; }
.d-row-color { background:#f2f0ea; }

.equipment-section {
    max-width: 1420px; /* (424*3) + (70*2) + 여유분 */
	padding:0 0 100px;
    margin: 0 auto ;
    text-align: center;
    font-family: 'Noto Sans KR', sans-serif;
	display:block;
	position:relative;
	z-index:1000;
}

/* 제목 부분 */
.main-title-d {
    font-size: 7rem;
    font-weight: 700;
    margin-bottom: 14rem;
    position: relative;
    display: inline-block;
	padding-top:40px;
}

/* 제목 상단 갈색 선 */
.main-title-d::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 430px;
    height: 14px;
    background-color: #A68050;
}

/* 플렉스 컨테이너 */
.row-eq {
    display: flex;
    flex-wrap: wrap; /* 너비가 차면 다음 줄로 */
    justify-content: flex-start; /* 가운데 정렬 */
    gap: 80px 70px; /* 상하 80px, 좌우 70px 간격 */
}

/* 장비 개별 카드 */
.eq-card {
    width: 424px;
    text-align: center;
}

/* 흰색 이미지 박스 영역 */
.eq-image-box {
    width: 100%;
    height: 488px; /* 정사각형 느낌 */
    border: 1px solid #dedede;
    border-radius: 12px;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
	position:relative;
}
.eq-image-box::after { 
	content:"";
	position:absolute; left:10%; bottom:0; width:80%;
	height:3px;
	background:rgba(166, 128, 80, 1);
	display:block;
}

.eq-image-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.eq-image-box img {
    max-width: 90%;
    max-height: 250px;
    object-fit: contain;
}

/* 장비 모델명 (금색) */
.model-name {
    display: block;
    color: #A68050;
    font-weight: 700;
    font-size: 2.8rem;
    margin-bottom: 50px;
}

/* 장비 카테고리명 */
.eq-name {
    font-size: 3.5rem;
    font-weight: 700;
    color: #73685a;
    margin-bottom: 15px;
	text-align:center;
}

/* 설명 텍스트 */
.eq-desc {
    font-size: 2.2rem;
    line-height: 1.6;
    color: #414141;
    word-break: keep-all; /* 단어 단위로 줄바꿈 */
    padding: 0 10px;
	letter-spacing:-0.025em;
}

/* 반응형: 화면이 좁아지면 자동으로 줄바꿈 됨 */
@media (max-width: 1300px) {
    .eq-card {
        width: calc(50% - 35px); /* 2열 배치 */
    }
}

@media (max-width: 850px) {
    .eq-card {
        width: 100%; /* 1열 배치 */
    }
}

/* 2. 태블릿 구간 (1200px 이하) */
@media (max-width: 1200px) {
    .main-title-d {
        font-size: 5rem; /* 제목 크기 축소 */
        margin-bottom: 8rem;
    }

    .main-title-d::before {
        width: 300px; /* 상단 선 너비 조절 */
        height: 10px;
    }

    .eq-card {
        width: calc(50% - 35px); /* 2열 배치 */
    }

    .eq-image-box {
        height: 400px; /* 박스 높이 조절 */
    }
}

/* 3. 모바일 L 구간 (992px 이하) */
@media (max-width: 992px) {
    .row-eq {
        gap: 50px 30px; /* 간격 축소 */
		justify-content:center;
		padding:0 30px;
    }
    
    .model-name { font-size: 2.2rem; margin-bottom: 30px; }
    .eq-name { font-size: 2.8rem; }
    .eq-desc { font-size: 1.8rem; }
}

/* 4. 모바일 구간 (768px 이하) */
@media (max-width: 768px) {
    .main-title-d {
        font-size: 3.5rem;
        margin-bottom: 6rem;
    }

    .main-title-d::before {
        width: 150px;
        height: 6px;
    }

    .eq-card {
        width: 100%; /* 1열 배치 */
        max-width: 450px; /* 너무 커지지 않게 제한 */
    }

    .eq-image-box {
        height: auto; /* 높이를 유동적으로 변경 */
        aspect-ratio: 1 / 1; /* 가로세로 1:1 비율 유지 */
        padding: 20px;
    }

    .eq-image-box img {
        max-height: 200px;
    }

    .model-name { font-size: 1.8rem; margin-bottom: 20px; }
    .eq-name { font-size: 2.4rem; }
    .eq-desc { font-size: 1.6rem; padding: 0; }
}

/* 5. 초소형 모바일 (480px 이하) */
@media (max-width: 480px) {
    .main-title-d { font-size: 2.8rem; }
    .eq-name { font-size: 2rem; }
    .eq-desc { font-size: 1.5rem; }
}


.hgc-wrap {   position:relative; z-index:999; margin-bottom:20rem;}
.hospital-gallery-container {
  margin: 0 auto;
  background-color: #f2f0ea;
  text-align: center;

}

.tsc-wrap { padding:0 0 40px;   background-color: #f2f0ea; }
/* 탭 스와이퍼 감싸는 컨테이너 */
.tab-swiper-container {
	position: relative;
	padding: 0 40px 0; /* 화살표 공간 */
	max-width:1400px;
	margin:0 auto;
}

.tab-swiper {
  width: 100%;
}

.tab-swiper .swiper-slide {
  display: flex;
  justify-content: center;
}

/* 탭 버튼 스타일 */
.tab-btn {
  width: 95%; /* 간격 조정 */
  padding: 12px 0;
  height:76px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid #a68050;
  background: #f2f0ea;
  color: #a68050;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
  font-size:2.8rem;
  line-height:1;
  letter-spacing:-0.025em;
  font-weight:700;
}

.tab-btn.active {
  background-color: #a68050;
  color: #fff;
  border-color: #a68050;
}

/* 탭 화살표 */
.tab-prev, .tab-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 37px;
  height: 52px;
  background: #a68050;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.tab-prev { left: 0; }
.tab-next { right: 0; }

.tab-prev::after { content:"";display:block;width:14px;height:28px;background:url(../images/intro/i-small-prev.svg) no-repeat center / 100%; }
.tab-next::after { content:"";display:block;width:14px;height:28px;background:url(../images/intro/i-small-next.svg) no-repeat center / 100%; }


/* 메인/썸네일 스와이퍼는 이전과 동일 (생략 가능) */
.main-swiper { height: 747px; border-radius: 20px; }
.thumb-swiper { height: 130px; margin-top: 10px; }
.thumb-swiper .swiper-slide { width: 20%; opacity: 0.4; }
.thumb-swiper .swiper-slide-thumb-active { opacity: 1; border: 2px solid #a68b6a; }


.mt-swiper-wrap { background:#fff; }

/* 제목 */
#currentTabTitle {
  font-size: 7rem;
  font-weight:700;
  color:#000;
  padding: 6rem 0;
  text-align:center;
}

/* 메인 스와이퍼 */
.main-swiper {
  width: 100%;
  height: 747px;
  border-radius: 20px;
  margin-bottom: 15px;
  max-width:1120px;
  margin:0 auto;
}
.main-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 썸네일 스와이퍼 */
.thumb-swiper {
  width: 100%;
  height: 130px;
  box-sizing: border-box;
  max-width:1120px;
  margin:43px auto;
}
.thumb-swiper .swiper-slide {
  width: 20%; /* 5개씩 보이기 위함 */
  height: 100%;
  opacity: 1;
  cursor: pointer;
  border-radius: 15px;
  overflow:hidden;
  border: 2px solid #fff;
}
.thumb-swiper .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid #a68050;

}
.thumb-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

/* 갤러리 전체 래퍼 */
.gallery-outer-wrapper {
  position: relative;
  max-width: 800px; /* 메인 이미지 너비에 맞춤 */
  margin: 0 auto;
  padding: 0 60px; /* 버튼이 들어갈 좌우 여유 공간 확보 */
}



/* 좌우 커스텀 버튼 배치 */
.custom-prev, .custom-next {
  position: absolute;
  top: 460px; /* 위아래 가운데 */
  width: 83px !important;
  height: 224px !important;
  border:1px solid #a68050;
  background-color: #fff; 
  border-radius: 45px; 
  z-index: 20;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* 버튼 위치: 래퍼 밖으로 밀어내기 */
.custom-prev {
  left: 50% !important; 
  margin-left:-680px !important;
}
.custom-next {
  left: 50% !important; 
  margin-left:600px !important;
}

/* Swiper 기본 화살표 크기 조정 (선택사항) */
.custom-prev::after, .custom-next::after {
  font-size: 20px !important;
  font-weight: bold;
}


.custom-prev::after { content:"";display:block;width:14px;height:28px;background:url(../images/intro/i-big-prev.svg) no-repeat center / 100%; color:transparent;}
.custom-next::after { content:"";display:block;width:14px;height:28px;background:url(../images/intro/i-big-next.svg) no-repeat center / 100%; color:transparent; }


/* 2. 태블릿 구간 (1200px 이하) */
@media (max-width: 1200px) {
    #currentTabTitle { font-size: 4.5rem; padding: 4rem 0; }
    
    .main-swiper { height: 500px; } /* 높이 축소 */
    
    /* 큰 화살표 버튼 위치 조정 (화면 안쪽으로) */
    .custom-prev { margin-left: -48%; left: 0 !important; }
    .custom-next { margin-left: 40%; left: auto !important; right: 0 !important; }
    
    .custom-prev, .custom-next {
        width: 60px !important;
        height: 160px !important;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* 3. 모바일 L 구간 (992px 이하) */
@media (max-width: 992px) {
    .hgc-wrap { margin-bottom: 6rem; }
    
    #currentTabTitle { font-size: 3.5rem; }
    
    .tab-btn { font-size: 1.8rem; height: 60px; }
    
    .main-swiper { height: 400px; }
    .thumb-swiper { height: 100px; margin: 20px auto; }

    /* 큰 화살표가 화면을 너무 많이 가리므로 디자인 변경 */
    .custom-prev, .custom-next {
        width: 45px !important;
        height: 100px !important;
        border-radius: 25px;
    }
    .custom-prev { margin-left: 0 !important; left: 10px !important; }
    .custom-next { margin-left: 0 !important; right: 10px !important; }
}

/* 4. 모바일 구간 (768px 이하) */
@media (max-width: 768px) {
    .tab-swiper-container { padding: 0 35px; margin:0 20px; }
    .tab-prev, .tab-next { width: 30px; height: 45px; border-radius: 5px; }

    #currentTabTitle { font-size: 2.8rem; padding: 3rem 0; }

    .main-swiper { 
        height: auto; 
        aspect-ratio: 4 / 3; /* 가로세로 비율로 높이 제어 */
    }

    .thumb-swiper { height: 80px; }
    .thumb-swiper .swiper-slide { width: 25%; } /* 모바일에서 썸네일 크게 */

    /* 모바일에서는 큰 화살표를 메인 이미지 내부 또는 하단으로 조정하거나 숨김 */
    .custom-prev, .custom-next {
        top: 40%; /* 이미지 영역 중앙쯤 배치 */
        background-color: rgba(255, 255, 255, 0.8); /* 투명도 부여 */
    }

	.mt-swiper-wrap { padding:0 10px; }

    .custom-prev, .custom-next {
        width: 40px !important;
        height: 60px !important;
        top: 50%;
        transform: translateY(0%);
		margin-top:5px !important;
    }
}

/* 5. 초소형 모바일 (480px 이하) */
@media (max-width: 480px) {
    .tab-btn { font-size: 1.5rem; height: 50px; }
    
    #currentTabTitle { font-size: 2.2rem; }

    /* 모바일에서 양옆 화살표가 이미지를 너무 가리면 숨기는 것이 좋습니다 */
    /* .custom-prev, .custom-next { display: none; } */
    
    .thumb-swiper { margin: 15px auto; }
}



.subSection105 { padding-bottom:450px; }
.location-section {margin: -350px auto 0;padding: 0 20px 150px;position:relative;z-index:100;}
.map-wrapper {width: 100%;margin-bottom: 40px;}
.map-content { height:700px; max-width:1400px; margin:0 auto; border-radius: 15px;overflow: hidden;border:1px solid #a68050;}
.contact-info {text-align: center;margin-bottom: 60px;padding:50px 0 0;}
.main-phone {font-size: 7rem;color: #a68050;font-weight: 700;margin-bottom: 10px;text-align:center;letter-spacing:-0.025em;}
.main-phone span {font-size: 7rem;font-weight: 300;margin: 0 10px;}
.address-text {font-size: 2.8rem;color: #414141;font-weight:500;margin-top:40px;letter-spacing:-0.025em;}
.directions-container {max-width: 1060px;margin:150px auto 0;}
.direction-row {display: flex;padding: 40px 0;align-items: flex-start;}
.dir-title {flex: 0 0 44%; /* 왼쪽 제목 영역 비율 */text-align: center;}
.dir-title h3 {font-size: 6rem;font-weight: 700;margin: 0;letter-spacing:-0.025em;}
.dir-content {flex:1;}
.highlight-text {font-size: 2.8rem;font-weight:700;color: #a68050;margin-bottom: 40px;}
.bullet-list {list-style: none;padding: 0;}
.bullet-list li {position: relative;padding-left: 15px;font-size: 2.4rem;color: #73685a;margin-bottom: 12px;letter-spacing:-0.025em;}
.bullet-list li::before {content: "";position: absolute;left: 0;top: 10px;width: 5px;height: 5px;background-color: #73685a;border-radius: 50%;}
.divider {border: 0;height: 1px;background: transparent; margin: 0;}

/* 2. 태블릿 구간 (1200px 이하) */
@media (max-width: 1200px) {
    .main-phone, .main-phone span { font-size: 4rem; }
    .address-text { font-size: 2.2rem; }
    
	.subSection105 { padding-bottom:280px; }
	.location-section {margin: -250px auto 0;padding: 0 20px 50px;}

    .map-content { height: 500px; } /* 지도 높이 축소 */

    .dir-title { flex: 0 0 100%; text-align:Center; justify-content:center; } /* 제목 비중 조절 */
    .dir-title h3 { font-size: 4.5rem; }
}

/* 4. 모바일 구간 (768px 이하) */
@media (max-width: 768px) {
	.directions-container {margin:100px auto 50px;}
	.main-phone, .main-phone span { font-size:3rem; }
	.dir-title { display:flex; width:100%; justify-content:flex-start;}
	.dir-title h3 {font-size: 3.8rem;}
	.dir-content {flex:1;}
	.highlight-text {font-size: 2.4rem;margin-bottom: 40px;text-align:left; word-break:keep-all;line-height:1.4;}
	.bullet-list {list-style: none;padding: 0;display:flex;flex-direction:column; justify-content:center; align-items:flex-start; gap:15px;}
	.bullet-list li {padding-left: 15px;font-size: 2rem;margin-bottom: 12px;}
	.bullet-list li::before {top: 8px;}

	.main-phone { display:flex; flex-direction:column; align-items:center; font-size:4rem; }
	.main-phone span { color:#fff; display:block; }
	.direction-row { margin-bottom:50px; }
	.address-text { line-height:1.4; word-break:keep-all;}
}

/* 5. 초소형 모바일 (480px 이하) */
@media (max-width: 480px) {


}



/* 반응형 대응 (모바일) */
@media (max-width: 768px) {
  .direction-row {
    flex-direction: column;
    text-align: center;
    padding: 30px 0;
  }
  .dir-title {
    margin-bottom: 20px;
  }
  .dir-content {
    text-align: center;
  }
  .bullet-list li {
    display: inline-block;
    margin: 0 5px;
  }

}



:root {
    --primary-gold: #a68153;
    --bg-light: #f7f5f2;
    --text-dark: #333;
    --border-color: #c0c0c0;
}


.hospital-info-wrap { }

/* 공통 타이틀 */
.section-title { text-align: center; margin-bottom: 50px; }
.section-title .sub { font-size: 14px; color: var(--primary-gold); font-weight: 600; margin-bottom: 10px; }
.section-title .desc { color: #73685a; font-size: 2.4rem; margin:8rem 20px; font-weight:500;  line-height:140%;word-break:keep-all;}

/* 섹션 1: 상단 바 */
.top-info-bar { max-width: 1280px; margin:0 auto; padding:100px 0 0;}
.info-row { background: transparent; border-radius: 50px; padding: 30px 42px; margin-bottom: 33px; display: inline-flex; align-items: center; border: 1px solid var(--border-color); width:100%;}
.info-item { display:flex;align-items:center !important; }
.info-item .label { display:flex !important; align-items:center !important; margin:0 30px 0 0 !important}
.info-item .label em { background: var(--primary-gold); color: #fff; padding: 6px 15px; border-radius: 24px; font-size: 24px;  display:inline-flex; width:260px; height:43px; align-items:center; justify-content:center;}
.info-item .value ,
.info-item .value strong  { font-size: 40px; font-weight: 700; color: #000; letter-spacing:-0.025em;}
.info-item .divider { margin: 0 15px; color: #fff; font-size: 40px; font-weight: 300; color: #000; letter-spacing:-0.025em;}
.info-item .divider_2 { margin:0 15px 0 0; }

.lunch-time { display:flex;align-items:center; flex:0 0 50%; }
.lunch-time .label { margin-right: 15px; display:flex;margin:0 30px 0 0 !important}
.lunch-time .label em { background: var(--primary-gold); color: #fff; padding: 6px 15px; border-radius: 24px; font-size: 24px; display:inline-flex; width:260px; height:43px; align-items:center; justify-content:center; justify-content:center;}

.lunch-time .value ,
.lunch-time .value strong  { font-size: 40px; font-weight: 700; color: #000; letter-spacing:-0.025em;}

.info-item > div {display:flex; align-items:center;}


.info-footer { display: flex; justify-content: center; gap: 29px; align-items: flex-start; }
.lunch-time { background: transparent; border-radius: 50px; padding: 30px 42px; border: 1px solid var(--border-color); display: inline-flex; align-items: center;  }
.time-tel { flex:1; }
a.btn-tel { background: var(--primary-gold); color: #fff; padding: 30px 42px; border-radius: 50px; text-decoration: none; font-size: 40px; font-weight: bold; width:100%;text-align:center; letter-spacing:-0.025em; color:#f2f0ea; display:inline-flex; justify-content:center;}
.notice { font-size: 24px; color: #73685a; margin-top: 33px; font-weight:500; letter-spacing:-0.025em; text-align:center; line-height:140%;}

/* 섹션 2: 그리드 */
.guidelines { padding: 0 0 150px; max-width:1400px; margin:0 auto; }
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }
.grid-card { border: 1px solid #d5d5d5; padding: 33px 37px; }
.grid-card h3 { font-size: 40px; color: #73685a; margin-bottom: 40px; font-weight:700; letter-spacing:-0.025em;}
.grid-card p { font-size: 22px; color: #414141; line-height: 1.6; letter-spacing:-0.025em; word-break:keep-all;}

/* 섹션 3: 히어로 배너 */
.hero-banner { background: url('../images/sub/s201-img101.png') center/cover no-repeat; height: 507px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; position: relative; }
.hero-banner::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.3); }
.banner-content { position: relative; z-index: 1; padding:0 30px;text-align:center; }
.banner-content h2 { margin-bottom: 20px; display:flex; justify-content:center;}
.banner-content h2 span { 
	font-size: 5rem; 
    font-weight: 700; 
    letter-spacing: -0.025em; 
    display: inline-block;

    /* 1. 요청하신 그라데이션 적용 */
    background: radial-gradient(19.71% 154.29% at 91.61% 51.43%, #FF9E03 0%, #FFFFFF 100%);

    /* 2. 배경을 글자 모양으로 자르기 */
    -webkit-background-clip: text;
    background-clip: text;

    /* 3. 기존 글자색을 투명하게 설정 */
    -webkit-text-fill-color: transparent;
    color: transparent;	
}
.banner-content p { font-size: 24px; line-height: 160%; opacity: 1; color:#fffdfa; margin-top:40px;}

/* 섹션 4: 프로세스 */
.process-guide { padding: 100px 0; background: var(--bg-light); }
/* 내부 정렬을 위한 래퍼 (실제 구현시 가로너비 제한 필요) */
.process-guide .section-title, .process-guide .step-list {margin: 0 auto; }

.step-list { margin-top: 60px; display:flex; flex-direction:column; align-items:center; padding:0 5%}
.step-item { display: flex; padding: 50px 0; border-bottom: 1px solid #acacac; align-items: flex-start; margin:0 5%; justify-content:center; width:100%;position:relative;}

.step-list .step-item::after { content:"";display:block;background:#73685a;height:5px;position:absolute; left:50%; bottom:0; transform:translateX(-620px); }
.step-list .step-item:nth-child(1)::after { width:180px; }
.step-list .step-item:nth-child(2)::after { width:370px; }
.step-list .step-item:nth-child(3)::after { width:580px; }
.step-list .step-item:nth-child(4)::after { width:776px; }
.step-list .step-item:nth-child(5)::after { width:958px; }
.step-list .step-item:nth-child(6)::after { width:1200px; }

.step-num { font-size: 6rem; font-weight: 700; width: 750px; color:#000; letter-spacing:-0.025em; }
.step-text { flex:0 0 490px; }
.step-text h3 { font-size: 5rem; margin: 0 0 30px; color:#73685a; letter-spacing:-0.025em; font-weight:700;}
.step-text p { font-size: 22px;  line-height: 160%; color:#414141; letter-spacing:-0.025em; font-weight:500; }



/* 태블릿 및 작은 화면 (1200px 이하) */
@media (max-width: 1200px) {
    .info-row, .lunch-time {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 20px;
    }
    
    .info-item .label em, .lunch-time .label em {
        width: 180px; /* 라벨 너비 축소 */
        font-size: 18px;
    }

    .info-item .value, .info-item .value strong,
    .lunch-time .value, .lunch-time .value strong,
    a.btn-tel {
        font-size: 28px; /* 폰트 크기 축소 */
    }

	.subSection301 { padding-bottom:12rem; }
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2열로 변경 */
        gap: 30px;
		padding:0 25px;
    }

    .step-list .step-item::after { display: none; } /* 복잡한 라인 제거 */
    
    .step-num { font-size: 4rem; }
    .step-text h3 { font-size: 3rem; }

	.top-info-bar { padding:0 20px; }
	.info-row { padding: 20px 30px; margin-bottom: 20px; display: inline-flex; align-items: center; justify-content:center; }
	.info-item {  justify-content:center;flex-direction:column;display:flex;}
	.info-item .label { margin:0 0 20px 0 !important}
	.info-item .label em { padding: 6px 15px; font-size: 18px;}
	.info-item .value ,
	.info-item .value strong  { font-size: 30px;}
	.info-item .divider { margin: 0 10px;  font-size: 30px; }
	.info-item .divider_2 { margin:0 10px 0 0; }

	.info-footer { flex-direction:column; width:100%; }
	.lunch-time { display:flex;align-items:center; flex:0 0 100%; width:100%; }
	.lunch-time .label { margin-right: 0; display:flex;margin:0 0 20px 0 !important}
	.lunch-time .label em { padding: 6px 15px; font-size: 18px; }
	.lunch-time .value ,
	.lunch-time .value strong  { font-size: 30px; }

	.time-tel { flex:1; width:100%; }
	a.btn-tel { padding: 25px 35px;  font-size: 30px; }
	.notice { font-size: 18px; color: #73685a; margin-top: 25px; }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {

	.process-guide { padding: 40px 0;}
	.guidelines { padding: 0 0 80px;}

	.info-item .value ,
	.info-item .value strong  { font-size: 24px;}
	.info-item .divider { margin: 0 10px;  font-size: 30px; }
	.info-item .divider_2 { margin:0 0 0 0; display:none;}
	.info-item .div-hide { display:none; }
	.info-item .value { width:100%; text-align:center; }
	.info-item .value.phone { font-size:34px;margin-bottom:10px; display:block; }

	.info-item > div {display:flex; align-items:center; flex-direction:column;}
	.info-item > div .second-article { height:10px; }
	.section-title .desc { font-size:1.8rem; }

    /* 섹션 3: 히어로 배너 */
    .hero-banner { height: 350px; }
    .banner-content h2 span { font-size: 3rem; } /* 메인 타이틀 축소 */
    .banner-content p { font-size: 18px; margin-top: 40px; word-break:keep-all;}
	.banner-content p br { display:none; }

    /* 섹션 4: 프로세스 */
    .step-item {
        flex-direction: column; /* 세로 배치 */
        align-items: center;
        text-align: center;
        padding: 40px 0;
    }
    .step-num { 
        font-size: 3rem; 
        margin-bottom: 10px; 
        width: 100%; 
    }
    .step-text { 
        flex: 0 0 auto; 
        width: 100%; 
    }
    .step-text h3 { font-size: 2.6rem; margin-bottom: 25px; text-align:center;}
    .step-text p { font-size: 18px; word-break:keep-all;}
	.step-text p br { display:none; }

    /* 하단 버튼 및 공지 */
    a.btn-tel { font-size: 24px; padding: 20px; }
    .notice { font-size: 16px; }

    .grid-container {
        grid-template-columns: repeat(1, 1fr); /* 2열로 변경 */
        gap: 30px;
		padding:0 25px;
    }
	.grid-card h3 {
		font-size: 30px;
		margin-bottom: 30px;
	}
	.grid-card p {
		font-size: 18px;
	}
	.grid-card p br { display:none; }
	.banner-content h2  { flex-direction:column; align-items:center; gap:10px; }

}


@media (max-width: 375px) {
    .info-item .value, .info-item .value strong,
    .lunch-time .value, .lunch-time .value strong,
    a.btn-tel {
        font-size: 20px; 
    }
	.info-item .divider { font-size: 20px; }
}


#popLayerBox { 
    display:none; 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%; /* vh 대신 %가 모바일 환경에서 더 안정적일 수 있습니다 */
    overflow-y: auto; 
    background:#4a4a4a;
    padding:50px 0 100px;
    z-index:99999;
    
    /* 터치 스크롤 최적화 */
    -webkit-overflow-scrolling: touch; 
}

/* 팝업이 열렸을 때 뒷배경(body)이 움직이는 것을 원천 차단하려면 아래 클래스를 활용할 수 있습니다 */
body.has-pop {
    overflow: hidden;
}
#popLayerBox section {
	text-align:center; display:flex; flex-direction:column; justify-content:flex-start;
	padding:0 !important; 
	max-width:1140px; margin:0 auto !important;
}
#popLayerBox section div { display:flex; justify-content:space-between; margin-bottom:10px; width:100%;}
#popLayerBox h1 { 
	position:relative; z-index:2; text-align:center; color:#fff; font-size:70px; 
	font-family: Pretendard Variable;
	font-weight: 700;
	font-style: Bold;
	font-size: 70px;
	leading-trim: NONE;
	line-height: 135%;
	letter-spacing: -2.5%;
	text-align: center;
}
#popLayerBox article { position:relative; display:flex; align-items:flex-start;	padding:0 !important; margin:0 !important; }

#popClose {
	position:fixed; right:40px; top:20px;
	display:flex; justify-content:center; align-items:center;
	width:48px; height:48px; cursor:pointer;
	z-index:10;
}
#popClose img { width:100%; height:100%; }

/* --- 팝업 레이어 반응형 시작 --- */

/* 1. 태블릿 및 작은 모니터 (최대 1200px) */
@media (max-width: 1200px) {
    #popLayerBox section {
        max-width: 100%; /* 화면 너비에 맞춰 유동적으로 변경 */
        padding: 0 10px !important;
    }
    #popLayerBox h1 {
        font-size: 50px; /* 제목 축소 */
    }
	 #popLayerBox section div img { width:40%; }
}

/* 2. 일반 태블릿 (최대 1024px) */
@media (max-width: 1024px) {
    #popLayerBox {
        padding: 40px 0 80px; /* 상하 여백 조정 */
    }
    #popLayerBox h1 {
        font-size: 50px;
    }
    #popLayerBox article img {
        width: 100%; /* 이미지가 화면보다 커지지 않게 */
        height: auto;
    }
    
    /* 상단 헤더 영역(div) 가로 배치 유지 혹은 간격 조정 */
    #popLayerBox section div {
        flex-wrap: wrap; 
        gap: 10px;
    }
}

/* 3. 모바일 (최대 768px) */
@media (max-width: 768px) {
    #popLayerBox {
        padding: 60px 0 60px; /* 닫기 버튼 공간 확보를 위해 상단 패딩 조절 */
    }

    #popLayerBox h1 {
        font-size: 32px; /* 모바일 가독성 사이즈 */
        line-height: 1.2;
        margin-bottom: 20px;
    }

    /* 닫기 버튼 위치 및 크기 조정 */
    #popClose {
        right: 20px;
        top: 15px;
        width: 36px;
        height: 36px;
    }

    /* 제목과 나란히 있던 요소가 있다면 세로 정렬 고려 */
    #popLayerBox section div {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* 4. 최소 사이즈 대응 (최대 480px) */
@media (max-width: 480px) {
    #popLayerBox h1 {
        font-size: 26px;
        letter-spacing: -1.5%; /* 자간 소폭 조정 */
    }

    #popLayerBox article {
        margin-top: 10px !important; /* 모바일에서는 겹침 효과 제거 */
    }

    /* 텍스트가 너무 길면 줄바꿈 허용 */
    #popLayerBox section {
        word-break: keep-all;
    }
}