@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

:root{
	--alt-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	--sub-font: "Montserrat", sans-serif;

	--text-main-color:rgba(25,25,25,1);
	--text-sub-color:rgba(34,34,34,1);
	--text-point-color:rgba(194,153,107,1);
	--text-white-color:rgba(255,255,255,1);
	--text-sub-gray-color:rgba(163,163,163,1);
	--text-point-alpha-footer-color:rgba(194,153,107,0.63);
	
	--border-main-color:var(--text-main-color);
	--border-sub-color:var(--text-sub-color);
	--border-point-color:var(--text-point-color);
	--border-point-alpha-footer-color:var(--text-point-alpha-footer-color);
	
	--all-point-color:rgba(23,46,87,1);
	--all-main-text-color:rgba(21,41,78,1);

	--bg-main-color:var(--text-main-color);
	--bg-point-color:var(--text-point-color);
	--bg-sub-color:var(--text-sub-color);

	--display-flex:flex;
	--display-block:block;
	--display-inline-flex:inline-flex;
	--display-inline-block:inline-block;
	--display-inline:inline;

	--justify-content-flex-start:flex-start;
	--justify-content-flex-end:flex-end;
	--justify-content-center:center;
	--justify-content-space-between:space-between;

	--align-items-flex-start:flex-start;
	--align-items-flex-end:flex-end;
	--align-items-center:center;

	--flex-direction-column:column;
	--flex-direction-row:row;

	--middle-width:1400px;
	--base-width:1500px;
	--wide-width:1650px;


	--hdH: 9rem;
    --hdIn:5rem;
    --inPd: 20px;
    --inpH: 3em;
    --inpsmH: 2.3em;
    --in: max(1440px, 184rem);
    --in2: max(1200px, 154rem);

    --tit2: 4rem;
    --tit3: 3rem;
    --tit4: 3.5rem;
    --tit5: max(2.5rem, 25px);

    --txt0: max(2.2rem, 22px);
    --txt1: max(2rem, 20px);
    --txt2: max(1.8rem, 18px); 
	--txt3: max(1.7rem, 17px); /* 본문 */
    --txt4: max(1.6rem, 16px);
    --txt5: max(1.5rem, 15px);
    --smTxt1: max(1.4rem, 14px);
    --smTxt2: max(1.3rem, 13px);

    --subH0: 5rem;
    --subH1: 4.8rem;
    --subH2: 3.8rem;
    --subH3: 3rem;

    --mainSectPd: 32rem; /* 400 */
    --mainSectSmPd: 24rem; /* 300-250 */
    --mainContMt: 8rem;

    --subVisPd: 15rem; /* 서브비쥬얼 여백 30 -> 15 조정*/ 
    --subPd: 30rem; /* 서브페이지 여백 */ 
    --sectPd: 15rem;
    --sectPd2: 20rem;
    --sectPd3: 25rem;

    --radius: 2.4rem;
    --radius2: 2rem; 
    --radius3: 3rem; 
    --radius4: 4rem; 

    --aniY:10rem;

	
}
.middle-width{width:var(--middle-width);margin:0 auto;}
.base-width{width:var(--base-width);margin:0 auto;}
.wide-width{width:var(--wide-width);margin:0 auto;}

.display-flex{display: var(--display-flex);}
.display-block{display: var(--display-block);}
.display-inline-flex{display: var(--display-inline-flex);}
.display-inline-block{display: var(--display-inline-block);}
.display-inline{display: var(--display-inline);}


.justify-content-flex-start{justify-content: var(--justify-content-flex-start);}
.justify-content-flex-end{justify-content: var(--justify-content-flex-end);}
.justify-content-center{justify-content: var(--justify-content-center);}
.justify-content-space-between{justify-content: var(--justify-content-space-between);}

.align-items-flex-start{justify-content: var(--align-items-flex-start);}
.align-items-flex-end{justify-content: var(--align-items-flex-end);}
.align-items-center{justify-content: var(--align-items-center);}


.mvVideo { 
	height:100%; overflow: hidden; position: absolute; left:0; top:0; width:100%;
	display: flex;
	justify-content: center; /* 가로 중앙 정렬 */
	align-items: center; /* 세로 중앙 정렬 */
	height: 100vh; /* 뷰포트 높이 100% 설정 */
	overflow: hidden; /* 컨테이너를 벗어나는 내용 숨김 */
}
video#videoMv {
	position: absolute; right: 0; bottom: 0;
	width:auto; height: auto;
	min-width: 100%; min-height: 100%;
	width: auto; height: auto; z-index: -1;
	/*  background: url(../images/main/mVisual.jpg) no-repeat; */
	background-size: cover;
	overflow:hidden;
	object-fit: cover;
}

.pcView { display: block;}
.mobileView {display: none;}


/* footer  */
.footer{background-color:var(--all-point-color);padding:95px 0; width:100%; box-sizing:border-box;}	
.footer-left{flex:0 0 191px;}
.footer-left ul{padding:5px 0 0;}
.footer-left ul li{text-align:right;margin-top:31.5px;}
.footer-left ul li a{ color:var(--text-sub-gray-color);font-size:18px;font-weight:600;display: var(--display-inline-block);}
.footer-left ul li a:hover{text-decoration: underline;}

.footer-middle{flex:0 0 460px;display: var(--display-flex);flex-direction: var(--flex-direction-column);align-items: var(--align-items-flex-end);margin-top:-15px}
.footer-middle * {text-align:right;color:var(--text-sub-gray-color);}
.footer-middle div strong{display: var(--display-block);font-size:36px;font-weight:700;color:#fff;line-height:1.6;}
.footer-middle div strong:nth-child(1) { font-size:35px; font-family:'NanumSquareNeo'; font-weight:900;}

.footer-middle ul{display: var(--display-flex);align-items: var(--align-items-flex-end);flex-direction: var(--flex-direction-column);margin-top:8px;}
.footer-middle ul li{display: var(--display-inline-flex);margin-top:12px;}
.footer-middle ul li em{font-size:20px;font-weight:600;}
.footer-middle ul li span{font-size:20px;font-weight:600;margin-left:14px;padding-left:12px;position: relative; }
.footer-middle ul li span::before{ content:"";display:block;width:1px;height: 11px;background-color: rgba(163,163,163,0.5); position: absolute; left:2px; top:5px;}
.footer-middle ul li:nth-child(1) span:before { left:0;}
.footer-middle ul li:nth-child(2) span:before { left:2px;}
.footer-middle ul li:nth-child(3) span:before { left:2px;}


/* 1. 아이폰의 자동 링크 스타일 초기화 */
.footer-middle a[href^="tel"] {
    color: inherit;           /* 부모의 글자색 상속 */
    text-decoration: none;    /* 밑줄 제거 */
    font-size: inherit;       /* 부모의 폰트 크기 상속 */
    font-weight: inherit;     /* 부모의 굵기 상속 */
}

.footer-middle p{text-align:right;margin:39px 0;}
.footer-middle p span{font-size:16px;line-height:1.45;display: var(--display-block);font-weight:300;}

a.btn-treat-pay{width:274px;height: 55px;border:1px solid #fff;display: var(--display-flex);justify-content: var(--justify-content-center);align-items: var(--align-items-center);transition: all 0.5s;}
a.btn-treat-pay span{font-size:18px;font-weight:700;line-height:1;margin-right:10px;color:#fff;padding-bottom:1px;padding-left:10px;display: var(--display-inline-block);}
a.btn-treat-pay i{display: var(--display-block);width:19px;height: 19px;background: url(../images/foot-light_arrow-up.svg) no-repeat center / 100%;}
a.btn-treat-pay:hover{background-color: rgba(255,255,255,0.05);}

.footer-right{flex:1;margin-left:45px;padding-left:46px;border-left:1px solid rgba(197,197,197,0.3);}
.footer-right p{text-align:right;font-size:16px;margin:20px 0 25px;color:#fff9f9;font-weight:300;}
.footer-right ul{display: var(--display-flex);justify-content: var(--justify-content-space-between);}
.footer-right ul li{color:#a3a3a3;font-size:14px;font-weight:300;}
.footer-right ul li a{font-size:14px;font-weight:600;color:#a3a3a3;}
.footer-right ul li a:hover{text-decoration: underline;}
.footer-right .footer-map img { width: 100%; }

/* --- 푸터 반응형 가이드 --- */
@media screen and (max-width: 1650px) {
    .wide-width { width: 100%; padding: 0 5%; } 
}
/* 1. 테블릿 및 일반 해상도 (1550px 이하) */
@media screen and (max-width: 1550px) {
    .base-width { width: 100%; padding: 0 5%; } 
    .footer-inner { gap: 20px; flex-wrap:wrap; } /* 섹션 간 간격 확보 */
    .footer-left { flex: 0 0 160px; }
    .footer-middle { flex: 1; }
    .footer-right { margin-left: 0; padding-left: 40px; flex:0 0 100%; margin-top:40px;}
}
@media screen and (max-width: 1400px) {
    .middle-width { width: 100%; padding: 0 5%; } 
}

/* 2. 소형 테블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .footer { padding: 80px 0; }
    .footer-inner { flex-direction: column; align-items: center; } /* 세로 배치 시작 */

    .footer-left, .footer-middle, .footer-right {
        flex: 0 0 100%;
        width: 100%;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        align-items: center !important; /* 모든 요소 중앙 정렬 */
    }

    .footer-left h2 { margin-bottom: 50px; text-align:center; }
    .footer-left ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
    .footer-left ul li { margin-top: 0; text-align: center; }

    .footer-middle { margin-top: 30px !important; }
    .footer-middle * { text-align: center !important; }
}

/* 3. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .footer { padding: 60px var(--inPd) 100px; }

    /* 메뉴 글자 크기 조정 */
    .footer-left ul li a { font-size: 15px; }

    /* 전화번호 및 진료시간 */
    .footer-middle div strong { font-size: 28px; line-height: 1.4; }
    .footer-middle div strong:nth-child(1) { font-size: 26px; }

    .footer-middle ul { align-items: center; margin-top: 10px; }
    .footer-middle ul li { flex-direction: column; margin-top: 15px; }
    .footer-middle ul li span { margin-left: 0; padding-left: 0; margin-top: 5px; font-size: 18px; }
    .footer-middle ul li span::before { display: none; } /* 모바일 세로구분선 제거 */

    .footer-middle p { text-align: center; margin: 30px 0; }
    .footer-middle p span { font-size: 14px; }

    /* 진료비 버튼 */
    a.btn-treat-pay { margin: 0 auto; width: 100%; max-width: 300px; }

    /* 지도 및 하단 정보 */
    .footer-right { margin-top: 15px !important; }
    .footer-right .footer-map { width: 100%; max-width: 100%; margin-bottom: 20px; }
    .footer-right .footer-map img { width: 100%; }
    
    .footer-right p { text-align: center; font-size: 14px; word-break: keep-all; line-height:1.3;}
    
    .footer-right ul { flex-direction: column; align-items: center; gap: 10px; }
    .footer-right ul li { font-size: 12px; line-height:1.3;}
    .footer-right ul li:last-child { margin-top:12px; }
}

/* 4. 초소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .footer-middle div strong { font-size: 22px; }
    .footer-middle ul li em, .footer-middle ul li span { font-size: 16px; }
    .footer-left ul { gap: 10px 15px; }
}


/* quick */
.quick-menu{
	position: fixed;right:0;top:50%;
	border:2px solid rgba(105, 105, 113, 0.2); 
	border-right:0;
	border-radius:20px 0 0 20px;
	background-color:rgba(242,241,241,1);
	z-index:99999;
	width:81px; 
	padding:10px 8px 18px;
	transform: translateY(-50%);

}
.quick-menu a {text-align: center;display: var(--display-block);padding:15px 0;}
.quick-menu a strong{font-size:13px;font-weight:400;color:var(--text-main-color);display: var(--display-inline-block);margin-top:8px;}
.quick-menu a.go-top{border-top:1px solid #9da9be;padding:24px 0 0;margin-top:10px;}
.quick-menu ul li:nth-child(2){margin-bottom:5px;}
.i-qk {background-position: center; background-repeat: no-repeat;background-size: 100%;display: var(--display-block);margin:0 auto;}
.i-qk1{ background-image: url(../images/qk-1.svg);width:50px;height:50px;}
.i-qk2{ background-image: url(../images/qk-2.svg);width:45px;height:45px;}
.i-qk3{ background-image: url(../images/qk-3.svg);width:38px;height:38px;}
.i-qk4{ background-image: url(../images/qk-4.svg);width:57px;height:57px;}


/* --- 퀵 메뉴 모바일 하단바 전환 --- */
@media screen and (max-width: 768px) {
    .quick-menu {
        /* 위치 및 크기: 하단 고정 가로 100% */
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto;
        transform: none !important;
        
        /* 디자인: 상단 라운드 처리 */
        padding: 6px 10px env(safe-area-inset-bottom); /* 아이폰 하단 바 영역 고려 */
        border: 1px solid rgba(105, 105, 113, 0.1);
        border-bottom: 0;
        border-radius: 20px 20px 0 0 !important; /* 상단만 라운드 */
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08); /* 그림자 방향 위로 */
        z-index: 100001 !important;
    }

    /* 리스트 가로 정렬 */
    .quick-menu ul {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
    }

    .quick-menu ul li {
        flex: 1; /* 3개 버튼 균등 분할 */
        max-width: 100px; /* 너무 퍼지지 않게 제한 */
        text-align: center;
    }

    /* TOP 버튼 숨기기 */
    .quick-menu ul li:last-child {
        display: none !important;
    }

    .quick-menu a {
        display: flex;
        flex-direction: column;
        align-items: center;
		justify-content:flex-start;
        padding: 5px 0;
    }

    /* 기존 수치 유지 */
    .quick-menu a strong {
        font-size: 11px;
        margin-top: 4px;
        color: #333;
        font-weight: 500;
        letter-spacing: -0.03em;
    }

    /* 아이콘 크기 (기존 768px 수치 유지) */
    .i-qk1 { width: 36px !important; height: 36px !important; }
    .i-qk2 { width: 32px !important; height: 32px !important; }
    .i-qk3 { width: 28px !important; height: 28px !important; }

	.quick-menu ul li:nth-child(2) i { margin-top:2px; margin-bottom:2px; }
	.quick-menu ul li:nth-child(3) i { margin-top:4px; margin-bottom:4px; }

}

/* 450px 이하 초소형 모바일 */
@media screen and (max-width: 450px) {
    .quick-menu {
        padding: 5px 30px env(safe-area-inset-bottom);
    }

    .quick-menu a strong {
        display: block; /* 글자 다시 보이게 하거나, 원하시면 none 처리 가능 */
        font-size: 10px;
    }

    /* 기존 450px 아이콘 수치 유지 */
    .i-qk1 { width: 29px !important; height: 29px !important; }
    .i-qk2 { width: 26px !important; height: 26px !important; }
    .i-qk3 { width: 22px !important; height: 22px !important; }

	.quick-menu ul li:nth-child(2) i { margin-top:1.5px;margin-bottom:1.5px; }
	.quick-menu ul li:nth-child(3) i { margin-top:3px;margin-bottom:3px; }

}



/* header */
.header{background-color:var(--all-point-color);position:absolute;left:0;top:0;z-index:99999;width:100%;height:90px; }
.header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%;padding:0 7rem 0 8rem; margin: 0 auto; height: 100%; }
.header .logo { width: max(25rem, 255px);  }
.header .logo img { max-width:100%;}
.header .gnb{
	position: absolute;
	left:50%; top:0;
	transform: translateX(-50%);
	/* height:90px; */
	height:100%;
}
/* 1차 메뉴 */
.depth1 { display: flex; height:100%; padding-left:14px;}
.depth1 > li {position: relative; height:100%;}
.depth1 > li > a { 
	display: block; margin-right: 70px; display: inline-flex; align-items: center;white-space: nowrap;
	font-weight: 400; color: #fff; transition: all 0.2s;position: relative;height:100%;
	font-size: max(1.1rem, 17px); 
	font-size:17px;
}
/* 2차 메뉴 (초기 숨김) */
.depth2 { display: none; position: absolute; top: 90px; padding: 32px 0 0;  z-index: 100;right:0; left:22px; width:100%;}
.depth2 li a { 
	display: block; padding: 0 0; 
	font-size: max(1.1rem, 17px); 
	font-size:17px;
	font-weight:400; 
	line-height:2.55;
	color: #fff; transition: color 0.2s; text-align:right; 
	white-space: nowrap;
	text-align:left;
}
.depth2 li a:hover { font-weight:700; } 
.top-tel{display: var(--display-inline-flex);align-items: var(--align-items-center);border-radius:10px;background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(231,231,231,1));height:47px;padding:0 12px 0 16px; border:1px solid rgba(197,197,197,1)}
.top-tel dt{ font-size:14px;font-weight:400;color:var(--all-point-color);margin-right:14px;padding-top:1px; }
.top-tel dd{font-size:21px;font-weight:900;color:var(--all-point-color);font-weight:900;font-family:'NanumSquareNeo';}
.header.on .depth1 > li > a { margin-left:22px; margin-right:94px; }

.depth1 > li > a::before{content:"";display: block;width:0;transition: width 0.3s ease-out;height:3px;background:rgba(105,105,113,1);position: absolute;	left:0; bottom:0;}
.depth1 > li > a.on::before{width:100%;}
.depth1 > li > a.on {font-weight:700;}

/* 전체 배경 박스 (핵심 소스) */
.gnb_bg { display: none; position: absolute; top: 90px; left: 0; width: 100%; height: 312px; background:var(--all-point-color); z-index: 9999;
	border-top:1px solid rgba(197,197,197,0.3);
}
.all-logo{display: block;width:295px;height: 116px;background: url(../images/logo-big.svg) no-repeat center / 100%; position: absolute;right:7rem; bottom:32px;}




/* --- [1] PC 상태: 모바일 요소 숨김 --- */
.m-nav-trigger, 
.m-menu-wrap { 
    display: none; 
}

/* --- [2] PC 헤더 반응형 보정 (1440px 이하) --- */
@media screen and (max-width: 1440px) {
    .header-inner { padding: 0 3rem; }
    .depth1 > li > a { margin-right: 40px; }
    .top-tel { display: none; } /* 전화번호는 모바일 메뉴 안으로 대체 준비 */
	.header .gnb{position: absolute;left:auto; right:10px; top:0;transform: translateX(0); height:100%;}
}

/* --- [3] 모바일/테블릿 전환 (1024px 이하) --- */
@media screen and (max-width: 1024px) {
    /* PC 전용 요소 숨김 */
    .header .gnb, 
    .gnb_bg, 
    .top-tel { 
        display: none !important; 
    }

    /* 헤더 높이 조절 및 요소 배치 */
    .header { height: 70px; }
    .header-inner { padding: 0 20px; }
    .header .logo { width: 280px !important; }

    /* 햄버거 버튼 활성화 */
    .m-nav-trigger {
        display: flex; 
        flex-direction: column; 
        justify-content: space-between;
        width: 30px; 
        height: 20px; 
        background: none; 
        border: none; 
        cursor: pointer;
        padding: 0;
    }
    .m-nav-trigger span { 
        display: block; 
        width: 100%; 
        height: 2px; 
        background: #fff; 
        transition: 0.3s; 
    }

    /* 모바일 메뉴 레이어 활성화 */
    .m-menu-wrap {
        display: block; /* PC 숨김 해제 */
        position: fixed; 
        top: 0; 
        right: -100%; 
        width: 100%; 
        height: 100%;
        z-index: 100000; 
        transition: 0.4s ease-in-out; 
        visibility: hidden;
    }
    .m-menu-wrap.is-active { 
        right: 0; 
        visibility: visible; 
    }
    
    /* 메뉴 흰색 판넬 */
    .m-menu-inner {
        position: absolute; 
        top: 0; 
        right: 0; 
        width: 80%; 
        height: 100%;
        background: #fff; 
        z-index: 10; 
        display: flex; 
        flex-direction: column;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    
    /* 배경 어둡게 처리 */
    .m-menu-dim { 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background: rgba(0,0,0,0.6); 
    }

    /* 모바일 메뉴 상단 (로고 & 닫기버튼) */
    .m-menu-header { 
        padding: 20px; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        border-bottom: 1px solid #eee; 
    }
    .m-logo img { height: 22px; filter: invert(1); } /* 어두운 로고로 반전 혹은 교체 */
    
    /* 모바일 메뉴 리스트 영역 */
    .m-gnb-area { 
        flex: 1; 
        overflow-y: auto; 
        padding: 10px 0 40px; 
    }
    .m-depth1 > li { border-bottom: 1px solid #f5f5f5; }
    .m-depth1 > li > a { 
        display: block; 
        padding: 18px 25px; 
        font-size: 18px; 
        font-weight: 700; 
        color: #222;
        position: relative; 
    }
    
    /* 아코디언 아이콘 (+) */
    .m-depth1 > li > a::after { 
        content: '+'; 
        position: absolute; 
        right: 25px; 
        top: 50%; 
        transform: translateY(-50%); 
        font-size: 20px; 
        color: #bbb;
        font-weight: 400;
    }
    .m-depth1 > li.on > a::after { 
        content: '-'; 
    }

    /* 2차 서브 메뉴 */
    .m-depth2 { 
        display: none; 
        background: #f9f9f9; 
        padding: 10px 0 10px; 
    }
    .m-depth2 li a { 
        display: block; 
        padding: 10px 40px; 
        font-size: 16px; 
		line-height:1;
        color: #333; 
        font-weight: 400;
    }

    /* 모바일 메뉴 하단 고정 (전화버튼) */
    .m-menu-footer { 
        padding: 20px; 
        background: var(--all-point-color); 

    }
    a.m-tel-btn { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        color: #fff; 
        font-size: 16px; 
        font-weight: 700; 
        height: auto;
		line-height:1.4;
        text-decoration: none;

    }
    a.m-tel-btn i { 
        display: inline-block; 
        width: 20px; 
        height: 20px; 
        background: url(../images/icon-tel-white.svg) no-repeat center / contain; 
        margin-right: 10px;
		display:none;
    }
}

@media screen and (max-width: 768px) {
    .header .logo { width: 200px !important; }
}




/* main visual */
.main-visual-wrap{position: relative; height: calc(100vh); background-color:rgba(0,0,0,0.5);border-radius:0 0 389px 0; overflow: hidden;background:#1d3b70;}
.mvboxWrap {position: absolute;left:0;top:0;width:100%;height:100%;display: flex;justify-content: center;align-items: center;z-index:10;}
.mvboxSlider{position: relative;width:100%;height:100%;}

.mvbox{position: relative;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:flex-start;text-align:left;padding-bottom: clamp(160px, 24.07vh, 260px);z-index:10;}
.mvbox article { margin:0 auto; padding:0 clamp(160px, 11.2vw, 215px); width:100%;}

.mvbox em{
	display: var(--display-inline-flex); border-radius:0 clamp(1rem, 1.04vw, 1.25rem) 0 clamp(1rem, 1.04vw, 1.25rem); padding: 0.72rem 1.88rem;align-items: var(--align-items-center);
	background-color:rgba(255,255,255,0.8);color:var(--all-point-color);
	background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(231,231,231,1));

}
.mvbox em *{display: var(--display-inline-block);font-size: clamp(1.5rem, 2.5vw, 2.0625rem);font-weight:600;line-height:1.18}
.mvbox em span{color:var(--all-point-color); margin-right:10px;}
.mvbox div{margin:23px 0 37px;}
.mvbox div span{font-size: clamp(2.5rem, 4.5vw, 4.375rem);font-weight:700;color:var(--text-white-color);line-height:1.4;display: var(--display-block);}
.mvbox p{ font-size: clamp(1.125rem, 1.8vw, 1.375rem);font-weight:400;color:var(--text-white-color);line-height:1.41;}

.mySwiper1 .swiper-slide{height:100%;align-items:center;display:flex;justify-content:flex-start;text-align:left;}
.mySwiper1 {width: 100%;height: 100%;}
.mySwiper1 .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.mySwiper1 .swiper-slide::after { content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:0;z-index:2;
/*	background-color:rgba(0,0,0,0.4); background-color:rgba(29,59,112,0.4); */
	background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(29,59,112,0.4));
}

.mvbox em, 
.mvbox div, 
.mvbox p {
    opacity: 0;
    transform: translateY(50px); /* 아래에서 시작 */
    transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); /* 부드러운 움직임 */
}

/* 슬라이드가 활성화(Active) 되었을 때 순차 노출 */
.swiper-slide-active .mvbox em { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.swiper-slide-active .mvbox div { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.swiper-slide-active .mvbox p { opacity: 1; transform: translateY(0);  transition-delay: 0.9s; }

.mySwiper2 .swiper-slide { position: relative; cursor: pointer; color: var(--all-point-color); padding: 20px 0; overflow: hidden;  transition: color 0.3s;}
.mySwiper2 .swiper-slide::before { content: '';  position: absolute; top: 0; left: 0;  width: 100%; height: 1px;  background: var(--all-point-color);}

.mySwiper2 .swiper-slide::after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 1px; background: #fff; /* 포인트 컬러 */}
.mySwiper2 .swiper-slide-thumb-active { color: #fff; font-weight: bold;}
.mySwiper2 .swiper-slide-thumb-active::after { animation: slideProgress 4s linear forwards;}

@keyframes slideProgress {
    0% { width: 0; }
    100% { width: 100%; }
}
/* --- mySwiper2 버튼 슬라이더 스타일 --- */
.mySwiper2 { position: absolute; left:0; bottom: clamp(5.625rem, 11.85vh, 8rem); display: flex; justify-content: space-between; width:100%; padding:0 clamp(160px, 11.2vw, 215px); }
.mySwiper2 .swiper-wrapper { justify-content: space-between;}
.mySwiper2 .swiper-slide {
    cursor: pointer;
    opacity: 1;
    transition: all 0.3s;
    text-align: center;
    padding: 11px 0;
    font-weight: 600;
	text-align: left;
	line-height:1;
	font-size:18px;
	color: var(--all-point-color);
	flex:0 0 24%;
}
.mySwiper2 .swiper-slide b { 
    font-weight: 600;
	text-align: left;
	line-height:1;
	font-size:18px;
	color: var(--all-point-color);
}

/* 활성화된 버튼 강조 */
.mySwiper2 .swiper-slide-thumb-active {
    opacity: 1;
	color:rgba(255,255,255,1);
    font-weight: 700;
}
.mySwiper2 .swiper-slide-thumb-active b { 
	text-transform:uppercase; 
	color:rgba(255,255,255,1);
    font-weight: 700;
}

/* --- 메인 슬라이더 텍스트 애니메이션 (기존 유지) --- */
.mvbox em, .mvbox div, .mvbox p {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.swiper-slide-active .mvbox em { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.swiper-slide-active .mvbox div { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.swiper-slide-active .mvbox p { opacity: 1; transform: translateY(0); transition-delay: 0.9s; }

.video-mv{position: relative;z-index:1;width:100%;height:100%;overflow:hidden;}
.video-mv video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1;}
.video-mv video#videobcg {
	position: absolute; right: 0; bottom: 0;
	min-width: 100%; min-height: 100%;
	width: auto; height: auto; z-index: -1;
	/*  background: url(../images/main/mVisual.jpg) no-repeat; */
	background-size: cover;
	overflow:hidden;
}

@media (max-width:1024px){
	.video-mv video#videobcg { left:-500px; top:-150px; }
}


/* --- 반응형 최적화 시작 --- */

/* 1. 태블릿 구간 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .main-visual-wrap { border-radius: 0 0 60px 0; height:568px; height:80vh;}
    .mvbox article { padding: 0 40px; }
    .mySwiper2 { padding: 0 40px; bottom: 15vh; display:none;}
    .mvbox {padding-bottom: 13vh !important; }
}
@media screen and (max-width: 768px) {
	.main-visual-wrap { border-radius: 0 0 80px 0; }
	.mvbox em {padding: 0.5rem 1.2rem;}
	.mvbox em * {font-size: 1.2rem; }
	.mvbox div {margin: 15px 0 20px;}
	.mvbox div span {font-size: 2.2rem; line-height: 1.3;}
	.mvbox p {font-size: 1rem; word-break: keep-all; }
	/* 하단 탭 메뉴 조정 */
	.mySwiper2 {bottom: 50px;padding: 0 20px;}
	.mySwiper2 .swiper-slide {font-size: 14px; letter-spacing: -0.05em;}
}

/* 3. 초소형 모바일 (450px ~ 375px 이하) */
@media screen and (max-width: 640px) {
	.mvbox article { padding: 0 20px; }
	.mvbox {padding-bottom: 180px;}
	.mvbox div span {font-size: 1.8rem;}
	.mySwiper2 .swiper-slide {font-size: 11px;white-space: nowrap; flex: 0 0 auto; width: 48% !important; margin-top:5px;}
	.mySwiper2 .swiper-wrapper {justify-content: space-around;flex-wrap:wrap;}
}

/* --- 애니메이션 성능 최적화 (모바일 배터리 고려) --- */
.mvbox em, .mvbox div, .mvbox p {	will-change: transform, opacity;}






/* #section1 */
.section1{position: relative;height:100vh;overflow: hidden;z-index: 4;}
.sec0-box{height:100vh;display: var(--display-flex);justify-content: var(--justify-content-center);align-items: var(--align-items-center);position: absolute;left:0; top:0;width:100%;height:100vh;top:70%;}
.sec0-logo{display: var(--display-flex);width:487px;height: 487px;border-radius:250px;justify-content: var(--justify-content-center);align-items: var(--align-items-center);margin:0 auto;background-color:var(--all-point-color);transition: all 1s;}





.section1-wrap{position: absolute;opacity:0;left:0;top:0;width:100%;height:100vh;}
.section-comm1{position: relative; display: var(--display-flex);justify-content: var(--justify-content-center);align-items: var(--justify-content-center);height:100vh;}
.section1-nav {flex:0 0 456px;position: relative;padding-bottom:50px;}
.section1-img {flex:0 0 500px;margin:0 65px;position: relative;height:664px;}
.section1-con {flex:0 0 456px;position: relative;height:664px;z-index:100;}
.section1-nav{display: var(--display-flex);flex-direction: var(--flex-direction-column);align-items: flex-end;justify-content: var(--justify-content-center);position: relative;z-index:100;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease-out;
  padding-top:32px;
  margin-top:20px;
}
.section1-nav li{margin:17px 0;pointer-events: auto;cursor: pointer;transition: all 1s;}
.section1-nav li div{position: relative;display:var(--display-inline-flex);justify-content: var(--justify-content-flex-end);padding-left:20px;}
.section1-nav li div i{opacity: 0;position: absolute;left:0;top:-19px;background: url(../images/main-icon-plus.svg) no-repeat center / 100%;width:19px;height: 19px;display:block;}
.section1-nav li div span{color:#fff;font-size:35px;font-weight:400;line-height:1.05;}
.section1-nav li.on div i{opacity: 1;position: absolute;left:0;top:-19px;background: url(../images/main-icon-plus.svg) no-repeat center / 100%;width:19px;height: 19px;}
.section1-nav li.on div span{font-size:48px;font-weight:700;}
.section1-con-inner {position: relative; padding-top:7px;}
.section1-con-inner em{display: var(--display-block);font-size:18px;line-height: 1.4;font-weight:600;color:#fff;}
.section1-con-inner div{padding-top:20px;}
.section1-con-inner div span{display: var(--display-block);font-size:46px;line-height: 1.4;font-weight:700;color:#fff;}
.section1-con-inner p{margin:40px 0 80px;}
.section1-con-inner p span{display: var(--display-block);font-size:23px;line-height: 1.4;font-weight:400;color:#fff;}

.section1-bg {position: absolute;left:0;top:0;width:100%;height:100vh;z-index:1;}
.section1-bg > div {background-position: center;background-repeat: no-repeat;background-size: cover;height:100vh;width:100%;opacity: 0;}
.s101-bg{background-image: url(../images/main-bg101.png);}
.s102-bg{background-image: url(../images/main-bg102.png);}
.s103-bg{background-image: url(../images/main-bg103.png);}
.section1-content{position: relative;z-index:10;display: var(--display-flex);justify-content: var(--justify-content-center);align-items: var(--justify-content-center);}
.section1-bg > div {opacity: 0; height: 100vh;width:100%;overflow: hidden;position: absolute;left:0;top:0;transition: all 1s;}
.section1-img > div {opacity: 0; height: 100%;overflow: hidden;position: absolute;left:0;top:0;width:100%;transition: all 1s;}
.section1-con > div {opacity: 0; height: 100%; overflow: hidden;position: absolute;left:0;top:50%;transform:translateY(-50%);width:100%;display:flex;flex-direction: column;justify-content: center;transition: all 1s; display: none;}

a.btn-more-view{width:150px; height:56px; border:1px solid #fff;display: var(--display-flex);justify-content: space-between;align-items: var(--align-items-center);transition: all 0.5s;border-radius:30px;transition: all 0.5s; padding-left:15px; padding-right:15px; background-color:rgba(255,255,255,0.29);}
a.btn-more-view span{font-size:16px;font-weight:700;line-height:1;margin-right:2px;color:#fff;padding-bottom:1px;padding-left:15px;display: var(--display-inline-block);transition: all 0.5s;}
a.btn-more-view i{display: var(--display-block);width:24px;height: 24px;background: url(../images/mdi-light_arrow-up.svg) no-repeat center / 100%;transition: all 1s;position: relative;}

/*
a.btn-more-view:hover { background:#bd986f;border:1px solid #bd986f; width:170px;}
a.btn-more-view:hover span {color:#fff;  }
*/

a.btn-more-view-dark{width:150px; height:56px; border:1px solid rgba(25,25,25,1);display: var(--display-flex);justify-content: space-between;align-items: var(--align-items-center);transition: all 0.5s;border-radius:30px;transition: all 0.5s; padding-left:15px; padding-right:15px; background-color:rgba(255,255,255,0.29);}
a.btn-more-view-dark span{font-size:16px;font-weight:700;line-height:1;margin-right:2px;color:rgba(25,25,25,1);padding-bottom:1px;padding-left:15px;display: var(--display-inline-block);transition: all 0.5s;}
a.btn-more-view-dark i{display: var(--display-block);width:24px;height: 24px;background: url(../images/mdi-light_arrow-up-dark.svg) no-repeat center / 100%;transition: all 1s;position: relative;}



.section1-nav > li.on{opacity: 1;}
.section1-bg > div.on{opacity: 1;}
.section1-img > div.on{opacity: 1;}
.section1-con > div.on{opacity: 1; height:100%; display: flex;}
.flow-wrap{position:absolute;left:0;bottom:-27px;width:100%;overflow:hidden;z-index:10;}
.flow-track{display:flex;align-items:center;white-space:nowrap;will-change:transform;}
.flow-text{font-size:300px;font-weight:900;font-family:'NanumSquareNeo';/* text-transform:uppercase; */padding-right:160px; /* 간격 */flex-shrink:0;color:rgba(255,255,255,0.03);}

/*
.flow-wrap1{position:absolute;right:100vw;bottom:0;width:100%;overflow:hidden;z-index:10;}
.flow-track1{display:flex;align-items:center;white-space:nowrap;will-change:transform;}
.flow-text1{font-size:300px;font-weight:900;font-family:'NanumSquareNeo';/* text-transform:uppercase; */padding-right:160px; /* 간격 */flex-shrink:0;color:rgba(34,55,91,0.08);}
*/

.section-transition-bg {
    position: absolute;
    top: 100%; /* 아래 대기 */
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #f6f4f3;
    z-index: 100;
    overflow: hidden;
	opacity:0;
	z-index:4;
}


.flow-wrap1 {
    position: absolute;
    left: 50%; /* 오른쪽 대기 */
    bottom: 50%;
    white-space: nowrap;
	display:none;
}

.flow-track1 {
    display: flex;
    align-items: center;
    will-change: transform;
	justify-content:center;
}

.flow-text1 {
    font-size: 300px;
    font-weight: 900;
    font-family: 'NanumSquareNeo';
    line-height: 1;
    color: rgba(34, 55, 91, 1); /* 🌟 배경에 녹아드는 은은한 색 */

}




/* #section2 */
.section2{position: relative;height:100vh;overflow: hidden;background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(246,244,243,1));z-index: 1}
.section2-div{height:100vh;position: relative;}
.comm-h2{display: var(--display-flex);flex-direction: column;}
.comm-h2 span{font-size:34px;font-weight:500;color:var(--text-main-color);display: block;position: relative;opacity: 0;}
.comm-h2 strong{font-size:65px;font-weight:700;color:var(--text-sub-color);display: block;margin-top:24px;position: relative;opacity: 0;}
.center-h2 {align-items: center;}

.pos-ab1{
	position: absolute;left:0; top:clamp(4.375rem, 9.26vh, 6.25rem);z-index:10;
	width:500px;
	margin-left:clamp(10rem, 10.57vw, 12.6875rem);
}
.section2-equip-wrap{
	position: relative;height:100%;
	will-change: transform, opacity;
    /* 하드웨어 가속을 강제하여 리사이즈나 스크롤 시 떨림을 방지합니다. */
    backface-visibility: hidden;
}

.equip-text{position: absolute;left:0;top:clamp(13.75rem, 29.63vh, 20rem);width:550px;margin-left:clamp(10rem, 10.57vw, 12.6875rem);}
.equip-text div{opacity: 0;transition: all 1s;position: absolute;left:0;top:0;}
.equip-text div p span {font-size:19px;font-weight:400;color:var(--text-sub-color);display: block;line-height:1.4;}
.equip-text div.on{opacity: 1 !important; visibility: visible !important;}


.equip-con{position: absolute;left:50%;bottom:-40px;width:1350px;transform: translateX(-540px);height:880px;display: flex;justify-content: center;align-items: flex-end;}
.equip-con-img{position: relative;width:816px;height: 657px;}
.equip-con-img::after{content:"";position: absolute;left:2px; top:-2px; width:100%;height:100%;z-index:11;width:816px;height: 657px;background:url(../images/outline-circle.png) no-repeat center / 100%;}
.equip-con-img>div{position: absolute;left:50%;top:50%;opacity: 0;display:flex;justify-content: center;align-items: center;transform: translate(-50%,-50%);z-index:3;transition: all 1s;}
.equip-con-img>div.on{opacity: 1;}

.equip-point{position: absolute;left:0;top:0;}
.equip-con-text{position: absolute;left:0;top:0;width:1350px; height:880px;z-index:30;}
.equip-con-text div{position: absolute;left:50%;top:50%;border-radius:10px;display: flex;justify-content: center;align-items: center;overflow: hidden;transition: all 1s;background-color:#fff}
.equip-con-text div span{width:100%;height:100%;display: flex;justify-content: center;align-items: center;font-size:26px;font-weight:600;color:var(--text-main-color);line-height:1.1;text-align: center;}
.equip-con-text div:nth-child(1) {width:265px;height: 92px;transform: translate(-705px,190px); }
.equip-con-text div:nth-child(2) {width:257px;height: 61px;transform: translate(-640px,-46px); }
.equip-con-text div:nth-child(3) {width:237px;height: 61px;transform: translate(-410px,-250px);}
.equip-con-text div:nth-child(4) {width:396px;height: 61px;transform: translate(170px,-250px); }
.equip-con-text div:nth-child(5) {width:276px;height: 92px;transform: translate(378px,-62px); }
.equip-con-text div:nth-child(6) {width:202px;height: 92px;transform: translate(435px,190px); }
.equip-con-text div.on { background-color:var(--all-point-color); box-shadow: 0 4px 20px rgba(0,0,0,0.35); }
.equip-con-text div.on span{color:#fff; }

.equip-point{position: absolute;left:0;top:0;width:1350px; height:880px;z-index:20;}
.equip-point div{position: absolute;left:50%;top:50%;width:65px;height: 65px;border-radius:33px;display: flex;justify-content: center;align-items: center;transition: all 0.2s;}
.equip-point div span {width:32px;height: 32px;border-radius:16px;background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(231,231,231,1));display: flex;justify-content: center;align-items: center;box-shadow: 0 4px 4px rgba(0,0,0,0.25);transition: all 0.2s;}
.equip-point div span em{width:10px;height:10px;border-radius:5px;background-color:var(--all-point-color);display: block;transition: all 0.2s;}

.equip-point div:nth-child(1){transform: translate(-430px, 200px);	}
.equip-point div:nth-child(2){transform: translate(-374px, -50px);	}
.equip-point div:nth-child(3){transform: translate(-165px, -217px);	}
.equip-point div:nth-child(4){transform: translate(105px, -217px);	}
.equip-point div:nth-child(5){transform: translate(302px, -50px);	}
.equip-point div:nth-child(6){transform: translate(360px, 200px);	}

.equip-point div.on span{width:65px;height: 65px;border-radius:33px;}
.equip-point div.on span em{width:40px;height:40px;border-radius:20px;}
.equip-point > div,.equip-con-text > div {cursor: pointer;}


/* #section3 */
.section3 {	background: url(../images/icon-text-my1.svg) no-repeat right center ; padding:clamp(6.25rem, 13.89vh, 9.375rem) 0 0;}
.section3 h2 {margin-top:100px;}
.section3-spec > div { display: flex;justify-content: center;margin-bottom:clamp(11.25rem, 23.52vh, 15.875rem);}
.section3-spec > div.sec3-first{margin-top:clamp(11.25rem, 23.52vh, 15.875rem);justify-content: flex-start;}
.section3-spec > div.sec3-second{justify-content: flex-end;}
.section3-spec > div.sec3-third{justify-content: flex-start;}
.spec-text{display: flex;flex-direction: column; justify-content: flex-end;padding-left:65px; padding-bottom:9px;}
.spec-text em {display: inline-flex; }
.spec-text em span { padding:0 13px; height:31px; display: flex; justify-content: center; align-items: center; border-radius:16px;font-size:18px;font-weight:600;color:#fff;background-color: var(--all-point-color); line-height:1;}
.spec-text p {margin-top:26px;}
.spec-text p span {font-size:48px;font-weight:700;color:var(--text-main-color);line-height:1.4;display: block;}

.section3-spec .inverse .spec-img{order:1;}
.section3-spec .inverse .spec-text {order:0;text-align:right; align-items: flex-end; padding-right: 65px;}

.section3 h2 {display: flex;flex-direction: column;}
.section3 h2 span {font-size:34px;color:var(--text-main-color);font-weight:500;opacity: 0;transition: all 0.5s;display: block;}
.section3 h2 strong{font-size:65px;color:var(--text-main-color);font-weight:700;margin-top:20px;margin-bottom:40px;opacity: 0;transition: all 0.5s;display: block;}
.section3 > a {opacity: 0;transition: all 0.5s;}





/* #section4 */
.section4{ padding:clamp(2.5rem, 3.125vw, 3.75rem);position: relative;}
.section4-inner{
	border:1px solid #bcbcbc;background:#f7f7f7;position: relative;border-radius:60px; overflow: hidden;
	background-image: linear-gradient(to bottom, rgba(210,210,210,1) 0% , rgba(231,231,231,1) 100% );
	display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom:0;width:100%;
	transform: scale(0.4);
	opacity: 1;
	top:40%;
}
.section4-top{padding:clamp(80px, 10.93vh, 118px) clamp(3.125rem, 6.48vh, 4.375rem) 0 clamp(100px, 7.81vw, 150px);display: flex;justify-content: space-between;width:100%;}
.doctor-txt h3 {position: relative;transition: all 0.1s;opacity: 1;top:0;padding-bottom:30px;}
.doctor-txt h3 span{font-size:65px;font-weight:700;line-height:1.4;color:var(--text-main-color);display: block;}
.doctor-txt p{position: relative;margin:40px 0 40px;transition: all 0.1s;opacity: 1;top:1; }
.doctor-txt p span{font-size:19px;font-weight:400;line-height:1.4;color:var(--text-main-color);display: block;}
.doctor-txt a {opacity: 1; transition: all 0.1s;}


.doctor-logo{text-align: center;position: relative;transition: all 0.1s;opacity: 1;top:clamp(1rem, 2.31vh, 1.5625rem);}
.doctor-logo i{display: inline-block;width: 743px;}
.doctor-logo i img{width:100%;}


.section4-bottom{height:617px; background:url(../images/main-img401.png) no-repeat center bottom; width:100%; position:relative;}
.section4-bottom .doctor-bg{ height:617px; }
.ourText { position:absolute; right:70px; top:-50px; font-size:16px; font-weight:500; z-index:3;}
@media (max-width:1024px){
	.ourText { top:auto; right:30px; bottom:20px; color:#fff; font-size:14px; }
}

.section4-data{height:226px;position: absolute;left:0;bottom:0;width:100%; display: flex; justify-content: space-between; align-items: center;padding:0 130px;z-index:10;background:var(--all-point-color)}
.section4-data > article{display: flex; justify-content: center; flex:0 0 33.333333%;}
.dc-inner{ display: flex;}
.dc-inner > em { font-size: clamp(1.4rem, 1.46vw, 1.75rem); font-weight:400;flex:0 0 auto; margin-right:30px;color:#b8b8b8;}
.dc-inner > div em {width:233px;position: relative;height:3px;display:block;margin-top:5px;}
.dc-inner > div em i {position: absolute;left:0;top:1px;width:100%;height:1px;background:#b8b8b8;display: block;}
.dc-inner > div em span {position: absolute;left:0;top:0;height:3px;display:block;width:0;background:#b8b8b8;}
.dc-inner > div div {display: flex; align-items: flex-end;padding:20px 0 0;}
.dc-inner > div div strong { font-size: clamp(4rem, 4.17vw, 5rem); font-weight:700;color:#e1e0e0;font-family: var(--sub-font);}
.dc-inner > div div span { font-size: clamp(1.5rem, 1.56vw, 1.875rem); font-weight:500;color:#e1e0e0;padding-bottom:15px;padding-left:5px;}

.mblock { display:none; }



/* #section5 */
.treatment_sect {height: 100vh; overflow: hidden; width:100%; position: relative;}
.treatment_sect .cont_in {display: flex; justify-content: space-between; align-items: flex-start; padding-left:clamp(10rem, 10.57vw, 12.6875rem); padding-right:clamp(10rem, 10.57vw, 12.6875rem);}
.treatment_sect .treatment_list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 65%; gap: 3rem; transform: translateY(30rem);}
.treatment_sect .treatment_list .item {
	position: relative; transform: translateY(50%); filter: blur(10px); opacity: 0; transition-property: transform , filter , opacity; transition-timing-function: ease-in-out; transition-duration: 0s; 
	overflow: hidden; border-radius:25px 0 25px 25px; display: block; box-shadow: 0 4px 4px rgba(0,0,0,0.25) ;
}
/*.treatment_sect .treatment_list .item:nth-child(1) {transition-delay: 0s;}*/
/*.treatment_sect .treatment_list .item:nth-child(2) {transition-delay: 0.15s;}*/
/*.treatment_sect .treatment_list .item:nth-child(3) {transition-delay: 0.3s;}*/
/*.treatment_sect .treatment_list .item:nth-child(4) {transition-delay: 0.45s;}*/
/*.treatment_sect .treatment_list .item:nth-child(5) {transition-delay: 0.6s;}*/
.treatment_sect .treatment_list .item:nth-child(2n) {transform: translateY(70%);}
.treatment_sect .treatment_list .item .img_box {position: relative; padding-top: 120%; }
.treatment_sect .treatment_list .item .img_box img {position: absolute; left: 0; top: 0; width: 100%; height: 110%; object-position: center; object-fit: cover; transition: all 0.6s; max-width:100%; max-height:110%;}
.treatment_sect .treatment_list .item .txt_box {position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; padding: 3.2rem 2.6rem; transition: padding 0.5s ease-in-out; z-index: 3;}
.treatment_sect .treatment_list .item .txt_box span {display: flex; flex-wrap: wrap; width: 100%; font-size:150px;font-weight:700; -webkit-text-stroke: 1px rgba(29,59,112,1);color: transparent;}
.treatment_sect .treatment_list .item .txt_box .tit {font-size: 40px; font-weight: 500; line-height: 1.4; transition: 0.5s ease-in-out;color:#fff;margin-top:10px;}
.treatment_sect .treatment_list .item:hover a .img_box img { transform: scale(1.2); }

.represent-fixed {padding-top:clamp(6.25rem, 13.89vh, 9.375rem); }
.represent-fixed h2 {display: flex;flex-direction: column;}
.represent-fixed h2 span {font-size:clamp(1.75rem, 1.77vw, 2.125rem);color:var(--text-main-color);font-weight:500;opacity: 1;transition: all 0.5s;display: block;}
.represent-fixed h2 strong{font-size:clamp(3.2rem, 3.39vw, 4.0625rem);color:var(--text-main-color);font-weight:700;margin-top:28px;margin-bottom:50px;opacity: 1;transition: all 0.5s;display: block;}
.represent-fixed > a {opacity: 0;transition: all 0.5s;}


/* #section6 */
.section6{height:600px;}
.section6-inner {display: flex; width: 100%; align-items: flex-start; overflow: hidden;height: 100%;border-bottom:3px solid #fff;}
.section6-inner article {width: 16.666%; height: 600px;padding: 2% 3%; box-sizing: border-box; cursor: pointer;position: relative;background-position: center;background-repeat: no-repeat;background-size: cover;transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);  overflow: hidden; }
.section6-inner article:nth-child(1){background-image:url(../images/main-bg601.png);}
.section6-inner article:nth-child(2){background-image:url(../images/main-bg602.png);border-left:3px solid rgba(255,255,255,1);}
.section6-inner article:nth-child(3){background-image:url(../images/main-bg603.png);border-left:3px solid rgba(255,255,255,1);}
.section6-inner article:nth-child(4){background-image:url(../images/main-bg604.png);border-left:3px solid rgba(255,255,255,1);}
.section6-inner article.on {width: 50%; }

.section6-inner article i{font-style: normal;color:rgba(105,105,113,1);font-size:22px;font-weight:600;position: absolute;transform: rotate(90deg);letter-spacing:0.05em;display: block;z-index:11;transition: all 1s;}
.section6-inner article:nth-child(1) i{left:-126px;top:190px;}
.section6-inner article:nth-child(2) i{left:-84px;top:145px;}
.section6-inner article:nth-child(3) i{left:-70px;top:120px;}
.section6-inner article:nth-child(4) i{left:-105px;top:162px;}

.section6-inner article::before{content:"";display:block;width:100%;height:100%;background-color:rgba(255,255,255,0.7);position: absolute;left:0;top:0;}
.section6-inner article h3{position: relative;z-index:10;position: absolute;left:30px;bottom:100px;transition: all 0.5s;}
.section6-inner article h3 span{display: block;font-size:36px;line-height:1.3;font-weight:600;color:var(--text-main-color);}
.section6-inner article ul {opacity: 0; visibility: hidden; margin-top: 10px; transform: translateY(30px); transition: opacity 1s ease, transform 0.4s ease; transition-delay: 0.5s; }

.section6-inner article.on h3 {bottom:140px;left:50px;}
.section6-inner article.on h3 span{display: inline;}
.section6-inner article.on::before{display: none;}
.section6-inner article.on ul {opacity: 1;visibility: visible;transform: translateY(0);position: absolute;left:50px; bottom:80px;display: flex;}
.section6-inner article.on ul li {border:1px solid var(--border-main-color); padding:10px; border-radius:10px;display: flex;align-items: center;justify-content: center; font-size:20px; font-weight:600;margin-right:10px}

.section6-inner article:nth-child(1).on i{left:-104px;}
.section6-inner article:nth-child(2).on i{left:-62px;}
.section6-inner article:nth-child(3).on i{left:-48px;}
.section6-inner article:nth-child(4).on i{left:-83px;}



/* #section7 */
.section7{ padding: clamp(100px, 13.89vh, 150px) 0 ;background-color:rgba(242,241,241,1);}
.section7-inner { margin-left:clamp(10rem, 10.57vw, 12.6875rem);}
.section7-inner p span {display: block;font-size:30px;font-weight:400;line-height:1.4;color:var(--text-main-color);}
.section7-inner h2 strong {display: block;font-size:60px;font-weight:700;line-height:1.4;color:var(--text-main-color);margin-top:30px;}
.section7-inner .comm-h2-7{display: var(--display-flex);}
.section7-inner .comm-h2-7 strong{font-size:65px;font-weight:700;color:var(--text-sub-color);display: block;margin-top:20px;position: relative;}


.section7-slide-wrap{ padding: clamp(100px, 13.89vh, 150px) 0 clamp(70px, 9.26vh, 100px); height:700px}
.s7-thumnail {position: relative; width:100%;}
.s7-thumnail div{position: relative;width:100%;}
.s7-thumnail div img{width:100%;object-fit: cover;}
.s7-thumnail article{position: absolute;left:0;top:0;width:100%;height:100%;display: flex;flex-direction: column;padding:50px 35px;z-index:2;}
.s7-thumnail article em{color:#c5c5c5;font-size:18px;font-weight:700;line-height:1;text-decoration: underline;}
.s7-thumnail article h3{color:var(--text-main-color);font-size:36px;font-weight:700;line-height:1;margin-top:54px;color:#fff;}

.swiper-wrap { position: relative; width: 100%; padding-top: 150px;margin-top:-190px;}
.swiper-wrap .mySwiper { overflow: visible; margin-left:-240px; width:calc(100% + 240px);}
.swiper-wrap .mySwiper .swiper-slide { width: 325px; height: 400px; border-radius: 16px; transition: all 1s ease; opacity: 1;transform: scale(1);}
.swiper-wrap .mySwiper .swiper-slide-active { width: 411px; height:506px; opacity: 1;}
.swiper-wrap .mySwiper .swiper-slide { width: 325px !important; height: 400px; transition: all 1s ease;position: relative;overflow: visible;} 
.swiper-wrap .mySwiper .swiper-slide .s7-thumnail { display:block; width: 100%; height: 100%; transition: all 1s ease; position: absolute;
  top: 0; left: 50%; transform: translateX(-50%); /* 중앙 정렬 */ transform-origin: top; /* 위쪽 고정 */ border-radius:0 40px 0 40px; overflow: hidden;
}
.swiper-wrap .mySwiper .swiper-slide-active{margin-left: 43px !important; margin-right: 73px !important;}
.swiper-wrap .mySwiper .swiper-slide-active .s7-thumnail { width: 411px; height: 506px; z-index: 10;border-radius:0 40px 0 40px;overflow: hidden;}
.swiper-wrap .swiper-nav { position: absolute; top: 0; right: 100px; display: flex; gap: 10px;}
.swiper-wrap .swiper-nav .swiper-button-prev,
.swiper-wrap .swiper-nav .swiper-button-next { position: relative; width: 53px; height: 45px; display:block; color:transparent;}
.swiper-wrap .swiper-nav .swiper-button-prev { background:url(../images/p-prev.svg) no-repeat center / 53px 45px !important; }
.swiper-wrap .swiper-nav .swiper-button-next { background:url(../images/p-next.svg) no-repeat center / 53px 45px !important; }
.swiper-wrap .swiper-nav .swiper-button-prev::after,
.swiper-wrap .swiper-nav .swiper-button-next::after { display: none;}


/* --- 태블릿 (1200px 이하) --- */
@media screen and (max-width: 1200px) {

}

/* --- 모바일 일반 (1024px ~ 768px) --- */
@media screen and (max-width: 1024px) {

	.section7{ padding: 80px 0 50px !important;}
	.section7-inner { margin-left:0 !important; padding:0 16px;}
	.section7-inner p { text-align:left; }
	.section7-inner p span { font-size:20px; display:block; text-align:left; word-break:keep-all;}
	.section7-inner h2 strong {font-size:36px;margin-top:20px; text-align:left; word-break:keep-all;}
	.section7-inner .comm-h2-7 strong{font-size:36px; line-height:1.2; text-align:left; word-break:keep-all;}


	.s7-thumnail article{padding:40px 25px;}
	.s7-thumnail article em{font-size:14px;}
	.s7-thumnail article h3{font-size:26px;margin-top:40px;}

	.section7-slide-wrap{ padding: 40px 0 80px 0; height:auto}
	
	.swiper-wrap { padding-top: 0;margin-top:0;}
	.swiper-wrap .mySwiper { overflow: visible; margin-left:0; width:100%; margin-left:-100px;}
	/* 1. 모든 슬라이드의 기본 크기 고정 */
	/* 1. 슬라이드 자체 (Swiper가 계산하는 영역) */
	.swiper-wrap .mySwiper .swiper-slide { 
		width: 221px !important; 
		height: 343px; /* 넉넉하게 활성 높이만큼 설정 */
		display: flex;
		align-items: center; /* 세로 중앙 정렬 */
		justify-content: center; /* 가로 중앙 정렬 */
		transition: opacity 0.6s ease;
		opacity: 1;
		overflow: visible; /* scale 시 안 잘리게 */
	}

	/* 2. 안쪽 실제 콘텐츠 박스 (우리가 scale 할 대상) */
	.swiper-wrap .mySwiper .swiper-slide .s7-thumnail {
		width: 100%; /* 부모 너비(221px)를 꽉 채움 */
		height: 271px; /* 기본 높이 */
		transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
		transform: scale(1); /* 기본 상태 */
		border-radius: 0 40px 0 40px;
		overflow: hidden;

	}

	/* 3. 활성화된 슬라이드 애니메이션 */
	.swiper-wrap .mySwiper .swiper-slide-active { 
		opacity: 1; 
		z-index: 10;
		margin-left: 40px !important; margin-right: 50px !important;
	}
	.swiper-wrap .mySwiper .swiper-slide-active .s7-thumnail { 
		/* 📌 scale을 키워도 부모 .swiper-slide의 너비는 그대로라 위치가 안 틀어짐 */
		transform: scale(1.26); 
	}

	.swiper-wrap .swiper-nav { top: 390px; right: auto; left:50%; transform:translateX(-50%); display: flex; gap: 10px; display:none;} 
}

/* --- 스마트폰 (480px ~ 375px) --- */
@media screen and (max-width: 375px) {
	.section7-inner p span { font-size:16px; }
	.section7-inner h2 strong {font-size:32px;}
}





[data-aos="fade-left-custom"] {
  opacity: 0;
  transform: translateX(-50px);
}

/* AOS 활성화 상태 */
[data-aos="fade-left-custom"].aos-animate {
  opacity: 1;
  transform: translateX(0);
}

[data-aos="fade-right-custom"] {
  opacity: 0;
  transform: translateX(50px);
}

/* AOS 활성화 상태 */
[data-aos="fade-right-custom"].aos-animate {
  opacity: 1;
  transform: translateX(0);
}


/* sub visual */
.sub-visual-wrap{
	position: relative; height: 500px;background-color:rgba(0,0,0,0.5);border-radius:0 0 389px 0; overflow: hidden;background:#929ba0;
	display: flex; flex-direction: column;justify-content: flex-end;align-items: flex-start;
	margin-top:90px;
}
.sub-visual-wrap .sv {
	position: absolute;left:0;top:0;width:100%;height:100%;z-index:2;
	background-position: center; background-repeat: no-repeat; background-size: cover;
}
.sv101{ background-image:url(../images/sub/sv101.png);}
.sv201{ background-image:url(../images/sub/sv201.png);}
.sv301{ background-image:url(../images/sub/sv301.png);}
.sv401{ background-image:url(../images/sub/sv401.png);}
.sv501{ background-image:url(../images/sub/sv501.png);}
.svTitleArea{width:1490px;margin:0 auto;padding-bottom:100px;position: relative;z-index:5;}
.svTitleArea .path{display: flex; align-items: center; padding-left:5px;}
.svTitleArea .path i.i-home { display: inline-block; width: 12px;height: 12.5px; background: url(../images/sub/icon-path-home.svg) no-repeat center / 100%;}
.svTitleArea .path span { position: relative; width: 30px; margin-left:30px;}
.svTitleArea .path span::before { content:"";display: block; width: 1px; height: 11px; transform: rotate(45deg);background-color: rgba(255,255,255,0.7);}
.svTitleArea .path em {font-size:14px;color:#fff;font-weight:500; padding-right:50px; position: relative;display: inline-flex;align-items: center;cursor: pointer;}
.svTitleArea .path em::after{
	content:"";display: block;width: 9.63px;height: 5.25px; position: absolute; right: 0; top:50%; transform: translateY(-50%);
	background: url(../images/sub/icon-path-arrow.svg) no-repeat center / 100%;
}
.svTitleArea h2{font-size:34px;color:rgba(255,255,255,0.5); font-weight: 400;line-height:1; margin:62px 0 15px;}
.svTitleArea h3{font-size:65px;color:rgba(255,255,255,1); font-weight: 700;line-height:1;}
.svTitleArea .path, .svTitleArea h2, .svTitleArea h3 {position: relative; opacity: 0; }

/* sub */
.smenuWrap{ padding:80px 0 0; margin-bottom:80px; border-bottom:1px solid rgba(238,238,238,1); }
.smenuWrap ul {display: flex; justify-content: center; align-items: center;}
.smenuWrap ul li { flex:0 0 auto;overflow: hidden;}
.smenuWrap ul li a {display: inline-flex; padding:15px 25px; height: 60px; align-items: center; justify-content: center; font-size:20px;font-weight:600;color:var(--all-main-text-color); transition: all 0.3s; letter-spacing: -0.02em; color:rgba(178,178,178,1);position:relative;} 
.smenuWrap ul li.on a{ color:var(--all-main-text-color);}
.smenuWrap ul li a::after{content:"";display:block;position:absolute;left:50%;bottom:0;height:2px;width:0;background:var(--all-main-text-color);transition:all 0.3s ease-out;transform:translateX(-50%)}
.smenuWrap ul li a:hover{color:var(--all-main-text-color);}
/*.smenuWrap ul li a:hover::after { width:100%;}*/
.smenuWrap ul li.on a::after { width:100%;}
.subComTitle {display: flex; flex-direction: column;align-items: center;padding-bottom:20px;}
.subComTitle em{display: block;text-align: center;font-size:27px;font-weight:700;color:var(--all-main-text-color);letter-spacing: -0.02em;line-height:1.2;}
.subComTitle h2{text-align: center;font-size:65px;font-weight:700;color:var(--text-main-color); letter-spacing: -0.02em;line-height:1.2;margin-top:10px;}
.subComTitle.colorWhite h2 { color:rgba(255,255,255,1);}

/* 반응형 추가 가이드 */
@media screen and (max-width: 1520px) {
    .svTitleArea {
        width: 100%;
        padding: 0 5%; /* 좌우 여백 확보 */
        padding-bottom: 60px;
    }
}

@media screen and (max-width: 1024px) {
    .sub-visual-wrap {
        height: 400px;
        border-radius: 0 0 150px 0; /* 곡률 조정 */
		margin-top:70px;
    }
    .svTitleArea h3 {
        font-size: 45px;
    }
    .smenuWrap {
        padding: 40px 0 0;
        margin-bottom: 50px;
    }
    .subComTitle h2 {
        font-size: 45px;
    }
}

@media screen and (max-width: 768px) {
    .sub-visual-wrap {
        height: 300px;
        margin-top: 60px; 
        border-radius: 0 0 80px 0;
    }
    .svTitleArea {
        padding-bottom: 40px;
    }
    .svTitleArea .path {
        display: none; 
    }
    .svTitleArea h2 {
        font-size: 20px;
        margin: 0 0 10px;
    }
    .svTitleArea h3 {
        font-size: 32px;
    }
    .smenuWrap {
        padding-top: 20px;
        margin-bottom: 40px;
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
    }
    .smenuWrap ul {
        justify-content: flex-start;
        padding: 0 20px;
        width: max-content;
    }
    .smenuWrap ul li a {
        font-size: 16px;
        padding: 10px 15px;
        height: 50px;
    }
    .smenuWrap::-webkit-scrollbar {
        display: none;
    }
    .subComTitle {
        padding-bottom: 50px;
    }
    .subComTitle em {
        font-size: 18px;
    }
    .subComTitle h2 {
        font-size: 32px;
        margin-top: 5px;
    }
}

@media screen and (max-width: 420px) {
    .subComTitle h2 {
		padding-left:20px; padding-right:20px;
		word-break:keep-all;
    }
}

.baseWidth{width:1490px;margin:0 auto;}
.sub101 { padding:80px 0 0; }
.introSquare {
	position: relative;overflow: hidden;height: 500px;background:url(../images/sub/sub101-img1.png) no-repeat center / cover; 
	width:410px; margin:0 auto; border-radius:0 90px 0 90px; overflow: hidden;
}
.introMy{padding:150px 0 100px; position: relative; text-align: center; }
.mask-img {
    position: relative;
    display: block;
    overflow: hidden;
	width:246px;
	height:134px;
	margin:0 auto;
	background-image: url("../images/sub/sub101-my1.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;	
}

/* 그라데이션 레이어 */
.gradient-mask {
	position: absolute;
	left:0;top:0;
	inset: 0;
	overflow: hidden;
	z-index:5;
	width:0;
	height:134px;
	background-image: url("../images/sub/sub101-my1-ov.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	pointer-events: none;
}

.my-text-trigger { width: 100%; padding:30px 0 30px; display: flex; justify-content: center; align-items: center; background-color: #fff;flex-direction: column;}
.over-text { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px;}
.reveal-text { position: relative; display: inline-block; font-size: 30px; font-weight: 700; color: rgba(222,222,222,1); white-space: nowrap; line-height: 1.2;letter-spacing:-0.02em;}
.reveal-text::after {content: attr(data-text); position: absolute; top: 0; left: 0; width: var(--progress, 0%); height: 100%; color:rgba(25,25,25,1); overflow: hidden; white-space: nowrap; z-index: 1;pointer-events: none; }


.introMiddleArea {width:1250px;margin:0 auto; position: relative; padding-bottom:150px;}
.imt{display: flex;justify-content: space-between; align-items: center;position: relative; z-index:10;}
.imt .img{position: relative; padding-left:57px; flex:0 0 517px;}
.imt .img .imt-img201{ position: relative;}
.imt .img .imt-img202{ position: absolute; left:0; bottom:0;z-index:2;}

.imt .con{ flex:1; padding-left:164px;}  
.imt .con .txt-t1 strong{font-size:34px;font-weight:700;initial-letter: -0.02em;color:rgba(25,25,25,1);line-height:1.2; }
.imt .con .txt-p1 span{font-size:18px;font-weight:400;initial-letter: -0.02em;color:rgba(25,25,25,1);line-height:1.5;display: block;}
.imt .con p:nth-child(2){ margin:30px 0;}

.imt.inverse { margin-top:100px;}
.imt.inverse .img{order:1;}
.imt.inverse .con{order:0; padding-left:0;}
.imt.inverse .img { flex: 0 0 612px;text-align:right;}
.imt .img .imt-img301{ position: relative;}
.imt .img .imt-img302{ position: absolute; left:0; bottom:0;z-index:2;}

.intro-con-logo-my {position: absolute;left:50%;top:50%;background: url(../images/sub/sub101-my2.png) no-repeat center / 100%; width:748px;height:400px;transform: translate(-50%,-50%); opacity:0.1;}




/* --- 공통 수정: 고정 너비 해제 --- */
.introSquare {
    max-width: 100%; /* 너비가 화면을 넘지 않도록 */
}

.introMiddleArea {
    width: 100%; /* 고정 1250px 해제 */
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px 100px; /* 좌우 여백 확보 */
    box-sizing: border-box;
}

/* --- 모바일/태블릿 대응 (1024px 이하) --- */
@media screen and (max-width: 1024px) {
	.sub101 { padding-top:40px; }
    .imt {
        flex-direction: column; /* 세로 정렬 */
        text-align: center;
    }

    .imt .img {
        flex: 0 0 auto;
        width: 100%;
        max-width: 500px;
        padding-left: 0;
        margin-bottom: 40px;
    }

    .imt .con {
        padding-left: 0;
        width: 100%;
    }

    .imt.inverse {
        flex-direction: column; /* 반전 레이아웃도 세로로 */
		margin-top:200px;
    }

    .imt.inverse .img {
        order: 0; /* 이미지가 위로 */
        text-align: center;
        width: 100%;
        max-width: 500px;
        margin-bottom: 10px;
		flex:0 0 auto;
    }

    .imt.inverse .con {
        order: 1; /* 텍스트가 아래로 */
		margin-top:40px;
    }

    .intro-con-logo-my {
        width: 100%; /* 배경 로고 크기 조정 */
        background-size: contain;
    }
	
	.imt .img .imt-img201 img,
	.imt .img .imt-img301 img{ max-width:100%; }
	.imt .img .imt-img202,
	.imt .img .imt-img302{ display:none; }

	.introMiddleArea .txt-t1 span { display:inline; word-break:keep-all;}
	.introMiddleArea .txt-p1 span { display:inline !important; word-break:keep-all;}
}

/* --- 모바일 (768px 이하) --- */
@media screen and (max-width: 768px) {
    .introMy { padding: 80px 0 60px; }
    
    .mask-img, .gradient-mask {
        width: 180px; /* 로고 크기 축소 */
        height: 98px;
    }

    .reveal-text {
        font-size: 20px; /* 텍스트 크기 축소 */
    }

    .imt .con .txt-t1 strong { font-size: 26px; }
    .imt .con .txt-p1 span { font-size: 16px; }

    .introSquare {
        height: 350px; /* 높이 축소 */
    }
}

/* --- 초소형 모바일 (375px 이하) --- */
@media screen and (max-width: 375px) {
    .reveal-text {
        font-size: 17px;
    }
    .imt .con .txt-t1 strong { font-size: 22px; }
}



.sign_sect { position: relative; opacity: 0; transform: translateY(200px) scale(0.8); transition: 1.5s cubic-bezier(0.33, 1, 0.68, 1); will-change: transform}
.sign_sect.active {opacity: 1; transform: unset;}
.sign_sect .bg_img { 
	position: sticky; left: 0; top:0; right:0; height: 100lvh; padding:100px 0 0;
	background:url(../images/sub/intro101-mbg1.png) no-repeat center / cover;
	/* background-color: #000;  */
}
.sign_sect .bg_img:before{content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 70%; 
	background: linear-gradient(180deg, rgba(250,209,164,1) 58.5%, rgba(169,114,53,1) 78.59%, rgb(0 0 0) 98%, #000 30%); 
	z-index: 2; background:#000;
	display: none;
}
.sign_sect .bg_img img { width:100%; height: 100%; object-fit: cover; transition: 0.6s ease-in-out}
.sign_sect .txt_box { padding-bottom: 30vh}
.sign_sect .txt_box .txt { font-size:var(--tit35); color:#fff; opacity:0.1; font-weight: 700}
.sign_sect .txt_box .txt + .txt { margin-top:10rem; }
.sign_sect .txt_box .txt strong { font-weight:700;}
.sign_sect .bg_img img.active {opacity: 0.25}

.core_sect {  position:relative; height: 100vh;}
.core_sect .box { position: relative; text-align: center; height:100%; display:flex ;align-items: center; justify-content: center; overflow: hidden;}
.core_sect .box .circle { width:50vw; margin:0 auto; border-radius:50%; will-change: clip-path, transform; clip-path:circle(0% at 100% 0%);}
.core_sect .box svg { width:100%; height:auto; }
.core_sect .box .txt { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); text-align: center; color:#fff;}
.core_sect .box .txt strong { font-size:9rem; line-height:1.3;  font-weight:700;}
.core_sect .box .txt p { font-size:var(--txt22); font-weight:600; margin-top:4rem;}

.value_sect {  padding: 0 0 150px; color:#fff;margin-top: -55vh; display: flex; justify-content: center; align-items: center;}
/* .value_sect .in{ max-width:180rem;} */
.value_sect ul { 
	/* display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:2rem;  place-items: center; */
	display: flex; justify-content: flex-start; align-items: center; gap:20px;
	width:1400px; margin-left:-80px;
}

.value_sect ul li { position: relative; transition-property: opacity ,  transform; transition-duration: 0.8s; transition-timing-function: ease-in-out; z-index: 3; width:453px; height:453px;}
.value_sect ul li.copy {z-index: 2; }
.value_sect ul li:nth-child(2) { transition-delay: 0.55s; z-index: 6; opacity: 0}


.value_sect ul li .item { position: absolute; left: 0; top:0; width:100%; height: 100%; border-radius:50%; background-color: rgba(188,188,188,1); background:rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; text-align:center; overflow: hidden; z-index: 3}
.value_sect.active ul li .item {transition: transform 0.8s ease-in-out}
.value_sect.active ul li .item.copy.num1 {transform: unset !important; }
.value_sect.active ul li .item.active.num1 {z-index: 6; transition: transform 0.8s ease-in-out , opacity 0.8s ease-in-out 0.2s}
.value_sect.active ul li .item.active.num2 {z-index: 5; transition: transform 0.8s ease-in-out }
.value_sect.active ul li .item.active.num3 {z-index: 4; transition: transform 0.8s ease-in-out }

.value_sect.active ul li .item.active.num1 {transform: translateX(calc(100% + 4rem)); opacity: 0}
.value_sect.active ul li .item.active.num2 {transform: translateX(calc(100% + 4rem));}
.value_sect.active ul li .item.active.num3 {transform: translateX(calc(100% + 4rem));}
.value_sect.active ul li .item.copy.num2,
.value_sect.active ul li .item.copy.num1 {transform: translateX(calc(100% + 4rem))}


.value_sect.active.on ul li .item.active.num2 {transform: translateX(calc(200% + 8rem)); opacity: 0; transition: transform 0.8s ease-in-out , opacity 0.8s ease-in-out 0.2s}
.value_sect.active.on ul li .item.active.num3 {transform: translateX(calc(200% + 8rem)); transition: transform 0.8s ease-in-out }

.value_sect.active.on.all ul li .item:before {  opacity: 1; }
.value_sect.active.on.all ul li .item svg .fill1 { fill: #fff;}
.value_sect.active.on.all ul li .item svg .fill2 { fill: #fff;}
.value_sect.active.on.all ul li .item svg .stroke { stroke: #fff;}

.value_sect ul li .item:before { content: ''; position: absolute; left: 0; top:0; width:100%; height: 100%; 
	background: linear-gradient(180deg, rgba(250,209,164,1) 0%, rgba(169,114,53,1) 100%); 
	background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 100%); 
	opacity:0; transition: all 0.8s ease-in-out;
}
.value_sect ul li .item .cont { position: relative;}

.value_sect ul li .item dl { margin-top:30px;}
.value_sect ul li .item dl dt { font-size:var(--tit70); font-weight:700; margin-bottom: 3rem;line-height: 1; margin-top:2rem;}
.value_sect ul li .item dl dd { font-size:36px; font-weight:700; letter-spacing: -0,02em; line-height:1.5; color:#fff;}
.value_sect ul li .item.active:before {  opacity: 1; }
.value_sect ul li .item.active svg .fill1 { fill: #fff;}
.value_sect ul li .item.active svg .fill2 { fill: #fff;}
.value_sect ul li .item.active svg .stroke { stroke: #fff;}

.m_sign_sect { display:none; }
.m_value_sect { display:none; }
@media screen and (max-width:1024px){
	.sign_sect .bg_img { padding:80px 0 0; }
	
	.sign_sect { display:none; }
	.value_sect { display:none; }

	.m_sign_sect { position: relative; opacity: 1; display:flex;flex-direction:column; align-items:center; width:100%;}
	.m_sign_sect.active {opacity: 1; transform: unset;}
	.m_sign_sect .bg_img { 
		padding:100px 0 0; width:100%;
		background:url(../images/sub/intro101-mbg1.png) no-repeat center / cover;
        position: relative;
        z-index: 1;
		padding:100px 0 50px;
	}
	.m_sign_sect .bg_img:before{content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 70%; 
		background: linear-gradient(180deg, rgba(250,209,164,1) 58.5%, rgba(169,114,53,1) 78.59%, rgb(0 0 0) 98%, #000 30%); 
		z-index: 2; background:#000;
		display: none;
	}
	.m_sign_sect .bg_img img { width:100%; height: 100%; object-fit: cover; transition: 0.6s ease-in-out}
	.m_sign_sect .txt_box { padding-bottom: 30vh}
	.m_sign_sect .txt_box .txt { font-size:var(--tit35); color:#fff; opacity:1; font-weight: 700}
	.m_sign_sect .txt_box .txt + .txt { margin-top:10rem; }
	.m_sign_sect .txt_box .txt strong { font-weight:700;}
	.m_sign_sect .bg_img img.active {opacity: 1}

    .m_value_sect { 
        position: relative; 
        width: 100%;
        z-index: 10;
        display: flex !important;
        justify-content: center;
        align-items: center; 
        pointer-events: none;
		flex-direction: column; 
		gap:20px;

    }

    .m_value_sect .m_item { 
        position: relative; 
        width: 250px; 
        height: 250px; 
        border-radius: 50%; 
        will-change: transform, opacity;
		opacity:1;
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center;
    }

    .m_value_sect .m_item .m_cont { 
        background: rgba(255, 255, 255, 0.1); 
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.2);
        width: 100%; 
        height: 100%;
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center;
        border-radius: 50%;
    }

    .m_value_sect .m_item .m_cont { 
        display: flex; flex-direction: column; justify-content: center; align-items: center; 
        background: rgba(255, 255, 255, 0.05); 
        width: 100%; height: 100%;
        border: 1px solid rgba(255,255,255,0.1);
    }
    
    .m_value_sect .m_item .m_cont i { display: block; width: 65px; }
    .m_value_sect .m_item .m_cont i img { width: 100%; }
    .m_value_sect .m_item .m_cont dl { padding: 30px 0 0; }
    .m_value_sect .m_item .m_cont dd { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.5; text-align: center; }

}



@keyframes fadeInOut {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}
.point_wrap { padding:70px 50px 0; }
.point_sect2 { display: flex; justify-content: space-between;}
.point_sect2 .left { flex:0 0 47%; position: sticky; top: 70px; height: 100dvh; display: flex; align-items: center}
.point_sect2 .left .img_box { width: 100%; padding-top: 100%; overflow: hidden; position: relative;}
.point_sect2 .left .img_box .img { position: absolute; left: 0; bottom:0; width:100%; height: 100%; }
.point_sect2 .left .img_box .img:nth-child(1) {clip-path: unset !important}
.point_sect2 .left .img_box .img:nth-child(n+2) {clip-path: inset( 100% 0 0 0); }
.point_sect2 .left .img_box .img img { position: absolute; left: 0; top: 0; object-position: center; object-fit: cover; border-radius:0 90px 0 0 90px; overflow: hidden; width: 100%;}

.point_sect2 .right {flex:0 0 47%;}
.point_sect2 .right .img { display: none;}
.point_sect2 .right .txt_box { padding:25rem 0 25rem 0; color:rgba(25,25,25,1);  position: relative; display: flex; align-items: center;}
.point_sect2 .right .txt_box .num { position: absolute;left:0; top:20vh; top:15vh;}
.point_sect2 .right .txt_box .num ul { display: flex; align-items: center; gap:15px; }
.point_sect2 .right .txt_box .num ul li { font-size:18px; border-radius:30px; width:60px; height:60px; display: inline-flex; justify-content: center; align-items: center; line-height: 1; color:rgba(194,153,107,1); color:#172e57; font-weight:600;border:1px solid rgba(194,153,107,1); border:1px solid #172e57;}
.point_sect2 .right .txt_box .num ul li.on{ color:#fff;  background-color:rgba(194,153,107,1); border:1px solid rgba(194,153,107,1); border:1px solid #172e57; background:#172e57;}

.point_sect2 .right .txt_box .txt1 { margin-bottom: 2rem;}
.point_sect2 .right .txt_box .txt1 em { font-size:18px; font-weight:600; color:#fff;display:inline-flex;justify-content: center;align-items: center;height:37px;border-radius:16px; padding-left:50px;padding-right:50px; background-color:rgba(25,25,25,1);}
.point_sect2 .right .txt_box .txt2 { margin-bottom: 45px;margin-top:45px;}
.point_sect2 .right .txt_box .txt2 span { font-size:48px; font-weight:700; letter-spacing: -0.02em; line-height:1.2; display: block;}
.point_sect2 .right .txt_box .txt4 p span { font-size:18px; font-weight:400; letter-spacing: -0.02em; line-height:1.5; display: block;}

.point_sect2 .right .txt_box .txt5 { margin-bottom: 3rem;}
.point_sect2 .right .txt_box .txt5 strong { font-size:4rem; font-weight:700; }
.point_sect2 .right .txt_box .txt5 p { font-size:var(--txt22); font-weight:600; }
.point_sect2 .right .txt_box .crc{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.point_sect2 .right .txt_box .crc div { padding-top:100%; position: relative;}
.point_sect2 .right .txt_box .crc div dl { position: absolute; left: 0; top:0; width:100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: rgba(255,255,255,0.1); text-align: center; ; border-radius:100%;}
.point_sect2 .right .txt_box .crc div dl dt { font-size:var(--txt16); font-weight:700; color:var(--gold); margin-bottom: 1em}
.point_sect2 .right .txt_box .crc div dl dt img {width: 4em}
.point_sect2 .right .txt_box .crc div dl dd { font-size:var(--txt20); font-weight:700; }
.point_sect2 .right .cont {position: relative;}


/* --- 모바일 대응 (1024px 이하) --- */
@media screen and (max-width: 1024px) {

    /* [Point 섹션] 상단 이미지 고정 + 하단 텍스트 */
    .point_sect2 {
        flex-direction: column; /* 세로 배치 */
    }

    .point_sect2 .left {
        flex: 0 0 30vh; /* 화면 높이의 30% 고정 */
        width: 100%;
        position: sticky;
        top: 70px; /* 헤더 높이 고려 */
        z-index: 10;
        background: #fff; /* 배경색을 주어 아래 텍스트가 가려지게 함 */
    }

    .point_sect2 .left .img_box {
        padding-top: 0;
        height: 100%; /* 30vh 안에서 꽉 차게 */
        border-radius: 0 0 40px 40px; /* 하단 둥글게 */
    }

    .point_sect2 .right {
        flex: 0 0 auto;
        width: 100%;
    }

    .point_sect2 .right .txt_box {
        padding: 80px 20px; /* 여백 축소 */
        min-height: 50vh; /* 스크롤감을 위해 최소 높이 설정 */
    }

    .point_sect2 .right .txt_box .num {
        top: 20px; /* 숫자 위치 조정 */
    }

    .point_sect2 .right .txt_box .txt2 span {
        font-size: 28px; /* 폰트 축소 */
    }

}



/* --- 기본 PC 스타일 (기존 코드 유지 및 일부 보정) --- */

.point_sect2 .right { flex: 0 0 47%; }
.point_sect2 .right .txt_box { padding: 25rem 0; }

/* --- 모바일 및 태블릿 반응형 (1039px 이하) --- */
@media screen and (max-width: 1039px) {


    /* 2. Point 섹션 (.point_wrap) 상단 30% 고정 레이아웃 */
    .point_wrap { padding: 0; }
    .point_sect2 { flex-direction: column; } /* 세로 배치 */

    .point_sect2 .left {
        flex: 0 0 35vh; /* 화면 높이의 35% 정도 차지 */
        width: 100%;
        height: 35vh;
        position: sticky;
        top: 0; /* 상단 고정 */
        z-index: 20;
        background: #fff; /* 아래 텍스트가 가려지도록 배경색 필수 */
        padding: 10px;
        box-sizing: border-box;
    }

    .point_sect2 .left .img_box {
        padding-top: 0;
        height: 100%;
        border-radius: 20px; /* 모바일은 라운드 축소 */
    }

    .point_sect2 .right {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        z-index: 10;
    }

    .point_sect2 .right .txt_box {
        padding: 100px 0; /* 모바일은 스크롤 간격 축소 */
        min-height: 40vh; /* 텍스트 박스마다 충분한 높이 확보 */
        display: block; /* 세로 정렬 시 블록이 자연스러움 */
    }

    .point_sect2 .right .txt_box .num {
        position: relative;
        top: 0;
        margin-bottom: 20px;
    }

    .point_sect2 .right .txt_box .txt2 span {
        font-size: 28px; /* 폰트 크기 모바일 최적화 */
    }

    .point_sect2 .right .txt_box .txt4 p span {
        font-size: 16px;
    }
}

@media screen and (max-width:768px){
	.point_sect2 .right .txt_box .num ul li { 
		font-size:14px; width:40px; height:40px;
	}

}
@media screen and (max-width: 450px) {
    .value_sect ul li { width: 260px; height: 260px; }
    .point_sect2 .left { flex: 0 0 30vh; height: 30vh; }
    .point_sect2 .right .txt_box .txt2 span { font-size: 24px; }
	.circle-even::after{	display:none;}
	.point_sect2 .right .txt_box .txt4 p span { display:inline; word-break:keep-all; }
}





.subComTitle-2 { padding-bottom:0;}
.sub-con-top {padding-bottom:120px; position: relative;}
.sub-con-top p { margin-top:50px; }
.mtxt-t1 span{ font-size:48px;letter-spacing: -0.02em;line-height:1.4;font-weight:700;display: block;}
.mtxt-m1 span { font-size:34px;letter-spacing: -0.02em;line-height:1.4;font-weight:700;display: block; }
.mtxt-p1 span{ font-size:18px;letter-spacing: -0.02em;line-height:1.5;font-weight:400;display: block;}
.colorWhite-p span { color:#fff !important; }
.mTitle-h3 span { font-size:48px;font-weight:400;line-height:1.4;letter-spacing: -0.02em; display: block;}
.mTitle-h3 span strong {font-weight:700; font-size: inherit; line-height: inherit; letter-spacing: inherit;}
.mTitle-h3.white span { font-size:48px;font-weight:400;line-height:1.4;letter-spacing: -0.02em; display: block; color:#fff;}
.mTitle-h3.white span strong {font-weight:700; font-size: inherit; line-height: inherit; letter-spacing: inherit; color:#fff; }
.line-point{ height:150px; margin:0 auto 30px; width:13px; position: relative;}
.line-point span { width:1px; height:140px; background-image: linear-gradient(to top, rgba(23,46,87,1) 0% , rgba(23,46,87,0) 100% ); display: block; margin:0 auto;}
.line-point i { width:13px; height:13px;border-radius:7px;background:rgba(23,46,87,1);display: block;}
.line-point.white { margin-top:20px; }
.line-point.white span { background-image: linear-gradient(to top, rgba(255,255,255,1) 0% , rgba(255,255,255,0) 100% ); }
.line-point.white i { background:rgba(255,255,255,1);}
.sub-con-top .mtxt-t1{ margin-top:100px}


/* 반응형 추가 가이드 */

/* 1. 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .sub-con-top { padding-bottom: 80px; }
    .line-point { height: 100px; }
    .line-point span { height: 90px; }
    .mtxt-t1 span, 
    .mTitle-h3 span, 
    .mTitle-h3.white span { font-size: 36px; }
    .sub-con-top .mtxt-t1 { margin-top: 60px; }
}

/* 2. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .sub-con-top { padding-bottom: 60px; }
    .line-point { height: 80px; margin-bottom: 20px; }
    .line-point span { height: 70px; }
    .line-point.white { margin-top: 40px; }
    .mtxt-t1 span, 
    .mTitle-h3 span, 
    .mTitle-h3.white span { 
        font-size: 28px; 
        line-height: 1.3;
    }
    .sub-con-top .mtxt-t1 { margin-top: 40px; }

    .mtxt-m1 span { font-size: 22px; }
    .mtxt-p1 span { 
        font-size: 15px; 
        line-height: 1.6;
        word-break: keep-all; 
        padding: 0 0; 
    }
    .sub-con-top .mtxt-t1  { padding:0 20px; }
	.sub-con-top .mtxt-t1 span { word-break: keep-all; }
	.sub-con-top .mtxt-p1 { padding:0 20px; }
	.sub-con-top .mtxt-p1 span { display:inline; }
    .sub-con-top p { margin-top: 30px;  }
}

/* 3. 초소형 모바일 (375px 이하) */
@media screen and (max-width: 375px) {
    .mtxt-t1 span, 
    .mTitle-h3 span { font-size: 24px; }
}


.width1250{max-width:1250px; margin:0 auto; position: relative;}
.width1280{max-width:1280px; margin:0 auto; position: relative;}
.width1400{max-width:1400px; margin:0 auto; position: relative;}
.width1490{max-width:1490px; margin:0 auto; position: relative;}
.width1550{max-width:1550px; margin:0 auto; position: relative;}


.grayBg { background:rgba(249,248,248,1); }
.sub-con-gray {padding:150px 0; position: relative;}

.sub-bg201-1 { background:url(../images/sub/sub-bg201-1.png) no-repeat center / cover}
.sub-bg201-2 { background:url(../images/sub/sub-bg201-2.png) no-repeat center / cover}
.sub-bg202-1 { background:url(../images/sub/sub-bg202-1.png) no-repeat center / cover}
.sub-bg202-2 { background:url(../images/sub/sub-bg202-2.png) no-repeat center / cover}
.sub-bg203-1 { background:url(../images/sub/sub-bg203-1.png) no-repeat center / cover}
.sub-bg203-2 { background:url(../images/sub/sub-bg203-2.png) no-repeat center / cover}
.sub-bg203-3 { background:url(../images/sub/sub-bg203-3.png) no-repeat center / cover}
.sub-bg204-1 { background:#082253 url(../images/sub/sub-bg204-1.png) no-repeat center / cover}


.ta-center{text-align:center !important}
.ta-left{text-align:left !important}
.ta-right{text-align:right !important}


.mCon-div{display: flex; justify-content: space-between; padding:90px 0 0;}
.mCon-div article.txt { flex:1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.mCon-div article.img{ flex:0 0 700px; position: relative; display: flex; justify-content: flex-end;}
.mCon-div.inverse article.txt { flex:1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; order:1; padding-left:0;}
.mCon-div.inverse article.img{ flex:0 0 700px; position: relative; display: flex; justify-content: flex-start; order:0; padding-left:20px;}
.mcon-t1 em{font-size:18px;font-weight:700;line-height:1.5;letter-spacing: -0.02em; color:rgba(194,153,107,1); color:#bebebe;}
.mcon-t1 p { margin-top:10px;}
.mcon-t1 p span { font-size:34px;letter-spacing: -0.02em;line-height:1.3;font-weight:700;display: block; color:#fff;word-break:keep-all;}

.point-c { display: flex;  }
.point-c i { width:15px;height:15px;border-radius:8px;display:block; }
.point-c i:nth-child(1) { background:#fff; }
.point-c i:nth-child(2) { background:#bebebe; position: relative; margin-left:-3px;}
.mcon-c1 p:nth-of-type(1){ margin-bottom:30px; margin-top:10px;}
.mcon-c1 p span { font-size:18px;letter-spacing: -0.02em;line-height:1.5;font-weight:400;display: block; color:#fff; word-break:keep-all;}
.mcon-c1 p span strong {font-weight:700; font-size: inherit; line-height: inherit; letter-spacing: inherit; color:#fff; word-break:keep-all;}
.mCon-div article.img .pimg{position: relative;z-index:7;}
.point-round{display: block;position: absolute;right:20px;top:20px;border-radius:0 90px 0 90px;}
.mCon-div.inverse .point-round{display: block;border-radius:0 90px 0 90px;position: absolute;right:auto;left:0;top:20px;}






.img-my-point { 
	width:748px; height: 400px; background:url(../images/sub/sub101-my2.png) no-repeat center / 100%; display: block;
	position: absolute; left:50%; top:120px; transform: translateX(300px);z-index:2;
	display:none;
}
.sub-con-system{ padding:0 0 150px;}
.sub-con-system h3{margin-bottom:30px;}
.another-system { padding-top:150px;}

.sub-text-white .mTitle-h3 span {color:#fff;}
.sub-text-white .mTitle-h3 span strong { color:#fff;}
.sub-text-white .mcon-t1 em{ color:#fff;}
.sub-text-white .mcon-t1 p span { color:#fff;}
.sub-text-white .point-c i:nth-child(1) { background:rgba(255,255,255,1); }
.sub-text-white .point-c i:nth-child(2) { background:rgba(190,190,190,1); }
.sub-text-white .mcon-c1 p span { color:#fff;}
.sub-text-white .mcon-c1 p span strong {color:#fff;}
.sub-text-white .mCon-div article.img .pimg{position: relative;z-index:7;}
.sub-text-white .point-round{ background:rgba(91,104,128,1); }
.sub-text-white .mCon-div.inverse .point-round{background:rgba(91,104,128,1);}
.sub-text-white .img-my-point { display:none; }

.thum-list-article {display: flex; justify-content: space-between; align-items: center; padding:100px 0; margin-top:80px; border-radius:30px;overflow: hidden;}
.thum-list-article article { flex:0 0 25%; display: flex; justify-content: center; align-items: center; flex-direction: column;border-left:1px solid rgba(255,255,255,0.3); height: 100%;}
.thum-list-article article:nth-child(1){ border-left:0;}
.thum-list-article article i { display: block; width: 32px; height: 32px; background:url(../images/sub/check-list1.svg) no-repeat center / 100%; margin: 0 auto;}
.thum-list-article article p { margin-top:20px;text-align: center;}
.thum-list-article article p span { font-size:26px;letter-spacing: -0.02em;line-height:1.5;font-weight:700;display: block; color:#fff;word-break:keep-all;}
.thum-list-article article p span strong { font-size:26px;letter-spacing: -0.02em;line-height:1.5;font-weight:700; color:#fff;word-break:keep-all; }
.thum-list-article.fx20per article { flex:0 0 20%; }

/* --- 반응형 구간 시작 --- */
@media screen and (max-width: 1500px) {
	.sub-con-system { padding-left:20px; padding-right:20px; padding-bottom:20px;}
	.sub-con-system .mTxt-p1 span { line-height:1.4; word-break:keep-all;}

}
@media screen and (max-width: 1200px) {
	
}
@media screen and (max-width: 1024px) {
	.thum-list-article {padding:60px 0; margin-top:50px; flex-wrap:wrap;}
	.thum-list-article article { flex:0 0 50%; height:50%; }
	.thum-list-article article:nth-child(3) { border-left:0; border-top:1px solid rgba(255,255,255,0.3);}
	.thum-list-article article:nth-child(4) { border-top:1px solid rgba(255,255,255,0.3);}
	.thum-list-article article p { margin-top:20px;text-align: center;}
	.thum-list-article article p span { font-size:26px;}
	.thum-list-article article p span strong { font-size:26px;}

	.another-system { padding-top:70px;}
}
@media screen and (max-width: 768px) {
	.thum-list-article {padding:0 0; margin-top:50px; flex-wrap:wrap;}
	.thum-list-article article { flex:0 0 50%; height:auto; padding:30px 0; }
	.thum-list-article article:nth-child(3) { border-left:0; border-top:1px solid rgba(255,255,255,0.3);}
	.thum-list-article article:nth-child(4) { border-top:1px solid rgba(255,255,255,0.3); }
	.thum-list-article article:nth-child(5) { border-top:1px solid rgba(255,255,255,0.3); border-right:1px solid rgba(255,255,255,0.3);}
	.thum-list-article article p { margin-top:20px;text-align: center;}
	.thum-list-article article p span { font-size:20px;}
	.thum-list-article article p span strong { font-size:20px;}

	.thum-list-article.fx20per article { flex:0 0 50%; }

	.sub-bg201-1,
	.sub-bg201-2,
	.sub-bg202-1,
	.sub-bg202-2,
	.sub-bg202-3,
	.sub-bg203-1,
	.sub-bg203-2,
	.sub-bg203-3,
	.sub-bg204-1 { padding:80px 0 10px !important; }

	.sub-bg201-2 .mTitle-h3 { padding-left:20px; padding-right:20px; }
	.sub-bg201-2 .mTitle-h3 span { word-break:keep-all; }
	.sub-bg201-2 .point-round img { top:0 !important; }
	.pbCase204 { padding-bottom:20px !important; }

	.sub-con-system .mTitle-h3 span { word-break:keep-all; display:inline !important  }

	.sub201-div1,
	.sub201-div2,
	.sub202-div1,
	.sub202-div2,
	.sub203-div1,
	.sub203-div2,
	.sub203-div3,
	.sub204-div1 { height:auto !important; padding:50px 0 !important; }
}
@media screen and (max-width: 480px) {

	.thum-list-article {padding:0 0; margin-top:50px; }
	.thum-list-article article { flex:0 0 100%; height:auto; padding:30px 0; }

	.thum-list-article article:nth-child(2) { border-top:1px solid rgba(255,255,255,0.3); }
	.thum-list-article article:nth-child(3) { border-left:0; border-top:1px solid rgba(255,255,255,0.3);}
	.thum-list-article article:nth-child(4) { border-top:1px solid rgba(255,255,255,0.3);}
	.thum-list-article article:nth-child(5)  { border-top:1px solid rgba(255,255,255,0.3);}
	.thum-list-article article { border-left:0; }
	.thum-list-article article p span { font-size:18px;}
	.thum-list-article article p span strong { font-size:18px;}
	.thum-list-article.fx20per article { flex:0 0 100%; }
}



/* --- 1. 대화면/태블릿 대응 (1440px ~ 1024px) --- */
@media screen and (max-width: 1440px) {
    .mCon-div article.img, 
    .mCon-div.inverse article.img { 
        flex: 0 0 50%; /* 고정 700px 해제하고 절반 비율로 변경 */
    }
    .mCon-div article.img img { width: 100%; height: auto; }
    .mCon-div.inverse article.img img { width: 100%; height: auto; }
}

/* --- 2. 테블릿 구간 (1024px 이하) --- */
@media screen and (max-width: 1024px) {
    .mCon-div, .mCon-div.inverse { 
        flex-direction: column; /* 세로 적층 */
        padding: 60px 20px;
    }
    
    .mCon-div article.txt, 
    .mCon-div.inverse article.txt { 
        width: 100%; 
        padding: 0 20px 40px; 
        order: 1 !important; /* 글자가 아래로 */
        align-items: center; /* 중앙 정렬 */
    }
    
    .mcon-t1 p span { font-size: 28px; text-align: center; }
    .mcon-c1 p { text-align: center; }
    .point-c { justify-content: center; width: 100%; }

    .mCon-div article.img, 
    .mCon-div.inverse article.img { 
        flex: 0 0 auto; 
        width: 100%; 
        order: 0 !important; /* 이미지가 위로 */
        justify-content: center;
        padding: 0 20px;
		margin-bottom:50px;
    }

	.mCon-div .mcon-t1 em { display:block; text-align:center; }
	.mCon-div .mcon-t1 { margin-bottom:25px; }
	.mCon-div .mcon-c1 { margin-top:25px; }

    .point-round { right:10px; top: 10px; width:90%; }
    .mCon-div.inverse .point-round { left: 5px; top:10px; right: auto; width:90%;}

}



.sub201-div1 { background:url(../images/sub/sub201-img102.png) no-repeat center / cover;height:600px; background-attachment: fixed; }
.sub201-div2 { background:url(../images/sub/sub201-img202.png) no-repeat center / cover;height:600px; background-attachment: fixed; }
.sub202-div1 { background:url(../images/sub/sub202-img102.png) no-repeat center / cover;height:600px; background-attachment: fixed; }
.sub202-div2 { background:url(../images/sub/sub202-img202.png) no-repeat center / cover;height:600px; background-attachment: fixed; }
.sub203-div1 { background:url(../images/sub/sub203-img102.png) no-repeat center / cover;height:600px; background-attachment: fixed; }
.sub203-div2 { background:url(../images/sub/sub203-img202.png) no-repeat center / cover;height:600px; background-attachment: fixed; }
.sub203-div3 { background:url(../images/sub/sub203-img302.png) no-repeat center / cover;height:600px; background-attachment: fixed; }
.sub204-div1 { background:url(../images/sub/sub204-img101.png) no-repeat center / cover;height:600px; background-attachment: fixed; }



.last-img { padding:30px;  }
.last-img > div { 
	height:500px; border-radius:25px;overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height:500px; border-radius:25px;overflow: hidden;
}
.last-img article {height:100%;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;}
.last-img article em { display: block; font-size:26px;color:rgba(234,234,234,1);letter-spacing: -0.02em;line-height:1.5;}
.last-img article p {margin-top:15px;}
.last-img article p span { display: block; font-size:48px;color:rgba(255,255,255,1);letter-spacing: -0.02em;line-height:1.4;font-weight:700;}





/* --- 엔딩 배너 반응형 추가 --- */
@media screen and (max-width: 1550px) {
    .width1550 {
        width: 100% !important;
        padding: 0 50px; /* 좌우 여백 부여 */
    }
	.sub-con-gray {padding:100px 0;}
}
@media screen and (max-width: 1024px) {
    .last-img { padding: 20px; }
    .last-img > div { height: 400px; } 
    
    .last-img article em { font-size: 20px; }
    .last-img article p span { font-size: 34px; }
	.sub-con-gray {padding:70px 0;}
}
@media screen and (max-width: 768px) {
	.grayBg { padding-top:0 !important; }
    .last-img { padding: 15px; }
    .last-img > div { 
        height: 350px; 
        border-radius: 15px; 
    }
    .width1550 { padding: 0 30px; }
    .last-img article { align-items: center; text-align: center; }
    .last-img article em { 
        font-size: 16px; 
        word-break: keep-all; 
    }
    .last-img article p { margin-top: 10px; }
    .last-img article p span { 
        font-size: 24px; 
        line-height: 1.4; 
        word-break: keep-all;
    }
	.sub-con-gray {padding:50px 0 80px;}
	.pdt-0 { padding-top:0 !important; }
}
@media screen and (max-width: 420px) {
    .last-img article p span { display:inline; }
}

@media screen and (max-width: 375px) {
    .last-img > div { height: 300px; }
    .last-img article p span { font-size: 22px; }
	.sub-con-gray {padding:30px 0;}
}



.swiper-button-next svg, .swiper-button-prev svg { display: none; }

.last-img-201 > div { background-image:url(../images/sub/sub201-img301.png); }
.last-img-301 > div { background-image:url(../images/sub/sub301-img301.png); }
.last-img-401 > div { background-image:url(../images/sub/sub401-img301.png); }
.last-img-402 > div { background-image:url(../images/sub/sub402-img-last.png); }
.last-img-403 > div { background-image:url(../images/sub/sub403-img-last.png); }

.last-img-501 > div { background-image:url(../images/sub/sub501-img-last.png); }
.last-img-502 > div { background-image:url(../images/sub/sub502-img-last.png); }
.last-img-503 > div { background-image:url(../images/sub/sub503-img-last.png); }
.last-img-504 > div { background-image:url(../images/sub/sub504-img-last.png); }


.last-img-202 > div { background-image:url(../images/sub/sub202-img301.png); }
.last-img-203 > div { background-image:url(../images/sub/sub203-img401.png); }
.last-img-204 > div { background-image:url(../images/sub/sub204-img201.png); }

.last-img-302 > div { background-image:url(../images/sub/sub302-img401.png); }
.last-img-303 > div { background-image:url(../images/sub/sub303-img401.png); }
.last-img-304 > div { background-image:url(../images/sub/sub304-img301.png); }



.sub-bg-301 { background:#082458 url(../images/sub/sub-bg-301.png) no-repeat center / cover; }
.sub-bg-302 { background:#082458 url(../images/sub/sub-bg-302.png) no-repeat center / cover; }
.sub-bg-303 { background:#082458 url(../images/sub/sub-bg-303.png) no-repeat center / cover; }
.sub-bg-304 { background:#082458 url(../images/sub/sub-bg-304.png) no-repeat center / cover; }

.sub-bg-401 { background:#082458 url(../images/sub/sub-bg-401.png) no-repeat center / cover; }
.sub-bg-402 { background:#082458 url(../images/sub/sub-bg-402.png) no-repeat center / cover; }
.sub-bg-403 { background:#082458 url(../images/sub/sub-bg-403.png) no-repeat center / cover; }

.sub-bg-501 { background:#082458 url(../images/sub/sub-bg-501.png) no-repeat center / cover; }
.sub-bg-502 { background:#082458 url(../images/sub/sub-bg-502.png) no-repeat center / cover; }
.sub-bg-503 { background:#082458 url(../images/sub/sub-bg-503.png) no-repeat center / cover; }
.sub-bg-504 { background:#082458 url(../images/sub/sub-bg-504.png) no-repeat center / cover; }



.sub-con-301 { display: flex; justify-content: space-between; flex-wrap:wrap; gap:50px; padding-bottom:350px;}
.sub-con-301 article { flex:0 0 594px; height: 700px; position: relative; overflow:hidden; border-radius:20px;}
.sub-con-301 article:nth-child(2n){ top:180px;}
.sub-con-301 article .img { position: relative; width: 100%; height: 100%;}
.sub-con-301 article .img img { width: 100%; height: 100%; object-fit: cover; transition:all 1s ease-out; transform:scale(1);}
.sub-con-301 article .txt{ position: absolute; left:0; bottom:0; padding:50px; width: 100%;}
.sub-con-301 article .txt p { margin-top:20px;}
.sub-con-301 article:hover .img img {transform:scale(1.1); }
.sub-con-301.three-302 { padding-bottom:150px; }
.sub-con-301.three-302 article:nth-child(2n){ top:370px;}


/* 1. 데스크탑 소형 & 태블릿 (1400px 이하) */
@media screen and (max-width: 1400px) {
    .sub-con-301 { 
        padding-bottom: 200px; 
        gap: 30px; 
        padding-left: 20px; 
        padding-right: 20px; 
    }
    /* 너비를 고정 px에서 %로 변경 */
    .sub-con-301 article { 
        flex: 0 0 calc(50% - 15px); 
        height: 550px; 
    }
    /* 지그재그 간격 축소 */
    .sub-con-301 article:nth-child(2n) { top: 100px; }
    .sub-con-301.three-302 article:nth-child(2n) { top: 150px; }
}

/* 2. 테블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .sub-con-301 { padding-bottom: 100px; }
    .sub-con-301 article { height: 450px; }
    .sub-con-301 article .txt { padding: 30px; }
	.sub-bg-502,
	.sub-bg-503,
	.sub-bg-504 { padding-left:20px !important; padding-right:20px !important; }
}

/* 3. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .sub-con-301 { 
        padding-bottom: 60px; 
        gap: 20px; 
    }
    /* 1열 배치로 변경 */
    .sub-con-301 article { 
        flex: 0 0 100%; 
        height: 450px; 
        /* 중요: 모바일에서는 지그재그 해제 */
        top: 0 !important; 
    }
    
    .sub-con-301 article .txt { padding: 25px; }
    
    /* 모바일 가독성을 위해 텍스트 그림자나 배경 농도 조절 (선택사항) */
    .sub-con-301 article .txt::before {
        content: "";
        position: absolute;
        left: 0; bottom: 0; width: 100%; height: 90%;
        background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
        z-index: -1;
    }
	.sub-bg-304 { padding-top:50px !important; }
}

/* 4. 초소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .sub-con-301 article { height: 400px; }
    .sub-con-301 article .txt p span { font-size: 15px; } /* 글자 크기 조정 */
}


.scImgBox .mtxt-p1 { opacity:1; height:1px; transition:all 0.6s ease; line-height:0; margin-top:0; overflow:hidden;}
.scImgBox1 .mtxt-p1 { opacity:1; height:1px; transition:all 0.7s ease; line-height:0; margin-top:0; overflow:hidden;}
.scImgBox2 .mtxt-p1 { opacity:1; height:1px; transition:all 0.7s ease; line-height:0; margin-top:0; overflow:hidden;}
.scImgBox:hover .mtxt-p1 { opacity:1; height:85px; line-height:auto; margin-top:20px;}
.scImgBox1:hover .mtxt-p1 { opacity:1; height:115px; line-height:auto; margin-top:20px;}
.scImgBox2:hover .mtxt-p1 { opacity:1; height:60px; line-height:auto; margin-top:20px;}

@media screen and (max-width: 1024px) {
    /* 1. 기본 상태를 '열린 상태'로 고정 */
    .scImgBox .mtxt-p1, 
    .scImgBox1 .mtxt-p1, 
    .scImgBox2 .mtxt-p1 {
        opacity: 1 !important;
        height: auto !important; /* 고정 px 대신 auto로 내용만큼 늘림 */
        line-height: 1.5 !important;
        margin-top: 15px !important;
        overflow: visible !important;
        transition: none !important; /* 애니메이션 제거 */
    }

    /* 2. 호버 시 발생하는 스타일 변화를 무력화 */
    .scImgBox:hover .mtxt-p1,
    .scImgBox1:hover .mtxt-p1,
    .scImgBox2:hover .mtxt-p1 {
        /* 이미 위에서 auto로 고정했으므로 추가 설정 불필요 */
        height: auto !important; 
    }
}

.care-con { padding:150px 0 120px;}
.care-con .care-header .mtxt-p1 { margin-top:50px;}
.care-con .care-img { margin-top:120px; display: flex; justify-content: center; border-radius:20px; overflow: hidden;}
.care-con .care-img div { flex:0 0 624px; }
.care-con .care-img div img { width:100%; }

.mCon-emergency {padding:100px 0 0; position: relative; z-index:11;}
.mCaseEmergency ul { display: flex; justify-content: space-between; gap: 20px; flex-wrap:wrap;}
.mCaseEmergency ul li { flex:0 0 calc(50% - 10px); display: flex; align-items: center; padding:35px 60px; border-radius:20px; background:rgba(255,255,255,0.13);}
.mCaseEmergency ul li .i-emergency-chk { width:24px; height: 24px; display: block; background: url(../images/sub/sub304-icon-chk.svg) no-repeat center / 100%;}
.mCaseEmergency ul li span { font-size:20px; font-weight:700; letter-spacing: -0.02em; padding-left:15px; display: inline-block;color:#fff;}

/* --- 1. 관리/케어 섹션 및 응급 리스트 반응형 추가 --- */

/* 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .care-con { padding: 100px 20px 80px; }
    .care-con .care-img { margin-top: 80px; }
    .care-con .care-img div { flex: 0 0 100%; } /* 너비를 비율로 변경 */

    .mCon-emergency { padding: 40px 20px 0; }
	.mCaseEmergency { padding-left:20px; padding-right:20px; }
    .mCaseEmergency ul li { padding: 30px 40px; } /* 내부 여백 축소 */
}

/* 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    /* 케어 섹션 */
    .care-con { padding: 60px 20px; }
    .care-con .care-header .mtxt-p1 { margin-top: 30px; }
    .care-con .care-img { margin-top: 50px; flex-wrap:wrap;}
    .care-con .care-img div { flex: 0 0 100%; overflow:hidden; border-radius:20px} /* 모바일은 꽉 차게 */



    /* 응급 상황 리스트 */
    .mCon-emergency { padding: 40px 0 0; }
    .mCaseEmergency ul { gap: 10px; } /* 간격 좁히기 */
    .mCaseEmergency ul li { 
        flex: 0 0 100%; /* 1열 배치로 전환 */
        padding: 20px; /* 터치 영역은 유지하되 패딩 축소 */
        border-radius: 15px;
    }
    
    .mCaseEmergency ul li span { 
        font-size: 17px; /* 폰트 크기 살짝 축소 */
        padding-left: 12px;
        line-height: 1.4;
        word-break: keep-all; /* 단어 단위 줄바꿈으로 깔끔하게 */
    }

    .mCaseEmergency ul li .i-emergency-chk { 
        width: 20px; 
        height: 20px; 
        flex-shrink: 0; /* 아이콘 크기 고정 */
    }
}

/* 초소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .care-con .care-img { margin-top: 40px; }
    .mCaseEmergency ul li span { font-size: 15px; }
}


.mCon-case { position: relative; z-index: 10;}
.mCaseBox { display: flex; justify-content: space-between; align-items: center; margin-top:80px;}
.mCaseBox .list { flex:0 0 508px; height: auto; position: relative; padding:60px 40px 60px 40px; border-radius:20px; background-color: rgba(255,255,255,0.13); display: flex; flex-direction: column; justify-content: center;}
.mCaseBox .h-line { flex:0 0 30px; position: relative; z-index: 10;}
.h-line::before { content:"";display: block; width: 6px; height: 6px; border-radius:3px; background:rgba(255,255,255,1); position: absolute; left:0; top:50%; transform: translateY(-50%); margin-left:-5.5px;}
.h-line::after { content:"";display: block; width: 6px; height: 6px; border-radius:3px; background:rgba(255,255,255,1); position: absolute; right:0; top:50%; transform: translateY(-50%); margin-right:-4.5px; }
.h-line i { width:100%; height:1px; border-bottom:1px dashed rgba(255,255,255,1); border-bottom:1px dashed rgba(255,255,255,1); position: absolute; left:0; top:50%; }


.mCaseBox .img {width:466px;height:466px; display: flex; justify-content: center; align-items: center; background:rgba(255,255,255,0.2); border-radius:233px; position: relative;}
.title-class { display: inline-block; color:#fff; font-size:34px; letter-spacing: -0.02em; font-weight:700; position: absolute; left:50%; bottom:94px; transform: translateX(-50%);z-index:20; }


.mCaseBox .list h5 { font-size:26px; font-weight:700; letter-spacing:-0.02em; margin-bottom:10px; color:#fff;}
.mCaseBox .list ul li { 
	font-size:18px; font-weight:400; letter-spacing:-0.02em; line-height: 1.5; position: relative; padding-left:24px;
	background: url(../images/sub/icon301-chk.svg) no-repeat left top; margin-top:5px; color:#fff;
}
.mCaseBox .list ul li em { color:rgba(255,255,255,0.7); font-size:14px; }

.mCaseBox .list i {
	width:131px; height: 131px; display: block;
	position: absolute; right:20px; top:20px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}


/* --- 서브 섹션 301 & 케이스 섹션 반응형 추가 --- */

/* 1. 테블릿 및 일반 해상도 (1250px 이하) */
@media screen and (max-width: 1250px) {
    /* 지그재그 레이아웃 간격 조정 */
    .sub-con-301 { padding-bottom: 150px; gap: 30px; justify-content: center; }
    .sub-con-301 article { flex: 0 0 calc(50% - 15px); height: 500px; }
    .sub-con-301 article:nth-child(2n),
    .sub-con-301.three-302 article:nth-child(2n) { top: 60px; } /* 편차 축소 */
	.sub-con-301.three-302 { padding-bottom:20px; }

    .care-con .care-img div { flex: 0 0 100%; } /* 너비 유연화 */

    .mCaseBox { flex-direction: column; gap: 0; margin-top:30px; }
    .mCaseBox .list { flex: 0 0 auto; width: 100%; }

	.mCaseBox .h-line { flex:0 0 30px; position: relative; z-index: 10;}
	.h-line::before { content:"";display: block; width: 6px; height: 6px; border-radius:3px; background:rgba(255,255,255,1); position: absolute; left:50%; top:0; transform: translate(-50%,0); margin-left:0;}
	.h-line::after { content:"";display: block; width: 6px; height: 6px; border-radius:3px; background:rgba(255,255,255,1); position: absolute; right:auto; left:50%; top:auto; bottom:0; transform: translate(-50%,0); margin-right:0; }
	.h-line i { width:1px; height:100%; border-bottom:none; border-left:1px dashed rgba(255,255,255,1);  position: absolute; left:50%; top:0; }
	 .mCaseBox .img img { width:100%; }
}

/* 2. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    /* --- 지그재그 섹션 해제 --- */
    .sub-con-301 { padding-bottom: 60px; gap: 20px; }
    .sub-con-301 article { 
        flex: 0 0 100%; 
        height: 420px; 
        top: 0 !important; /* 지그재그 완전 해제 */
    }
    
    /* 모바일에서는 호버 효과 대신 텍스트가 보이도록 설정 (사용성 고려) */
    .scImgBox .mtxt-p1, 
    .scImgBox1 .mtxt-p1, 
    .scImgBox2 .mtxt-p1 { 
        height: auto; 
        opacity: 1; 
        margin-top: 15px; 
        line-height: 1.5;
        overflow: visible;
    }
    .sub-con-301 article .txt { padding: 30px 20px; }

	.sub-con-301 article .txt p span { display:inline; }


    /* --- 응급 케이스 리스트 --- */
    .mCaseEmergency ul li { 
        flex: 0 0 100%; 
        padding: 20px 30px; 
    }
    .mCaseEmergency ul li span { font-size: 17px; }

    /* --- 케이스 박스 (원형 이미지 영역) --- */
    .mCaseBox .img { 
        width: 300px; 
        height: 300px; 
        border-radius: 150px; 
    }
    .title-class { font-size: 24px; bottom: 50px; width: 100%; text-align: center; }
    
    .mCaseBox .list { padding: 40px 30px; height: auto; }
    .mCaseBox .list i { width: 80px; height: 80px; right: 20px; top: 20px; }
    .mCaseBox .list h5 { font-size: 22px; }
    .mCaseBox .list ul li { font-size: 16px; padding-left: 25px; }
    
}

/* 3. 초소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .sub-con-301 article { height: 400px; }
    .mCaseBox .img { width: 300px; height: 300px; }

    .title-class { font-size: 20px; }
}





.icon-stethoscope {background-image: url(../images/sub/icon301-1.svg);}
.icon-medical-board {background-image: url(../images/sub/icon301-2.svg);}

.mCon-dia{display: flex; justify-content: space-between;  gap:40px; flex-wrap:wrap;}
.mCon-dia article.dia { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.mCon-dia article.dia .txt { margin-bottom:20px; }
.mCon-dia article.dia .img { position: relative; display: flex; justify-content: flex-end; }
.mCon-dia article.dia .img img { max-width:100%; }
.mCon-dia article.dia .img .pimg{ z-index:11;left:20px; position: relative;}
.mCon-dia article.dia .mcon-c1 { margin-top:50px; }
.mCon-dia article.dia .point-round{position: absolute;right:auto;top:20px;left:0;}
.mCon-dia article.dia.inverse .txt { order:1; margin-bottom:0; padding-top:40px; }
.mCon-dia article.dia.inverse .img { order:0; margin-bottom:20px; }
.mCon-dia article.dia:nth-child(1), .mCon-dia article.dia:nth-child(2) { margin-bottom:80px;}

/* 기본 상태에 부드러운 전환 효과 추가 */
.mCon-dia article.dia,
.mCon-dia article.dia .img,
.mCon-dia article.dia .img .pimg {
    transition: all 0.3s ease-in-out;
}

/* 1. 1500px 이하: 해상도에 맞춰 너비 유연하게 조절 */
@media screen and (max-width: 1500px) {
	.mCon-dia{  gap:30px; }
	.mCon-dia article.dia { justify-content: center; align-items: center; width:auto; margin:0 10px; position:relative;}
	.mCon-dia article.dia .txt { margin-bottom:20px; text-align:center; padding-top:40px; }
	.mCon-dia article.dia .img { position: relative; display: flex; justify-content: flex-end; max-width:100%;}
	.mCon-dia article.dia .mcon-c1 { margin-top:50px; display:inline-flex; justify-content:center; position:relative; text-align:center; flex-direction:column;}
	.mCon-dia article.dia .mcon-c1 .point-c { text-align:center; display:inline-flex; justify-content:center; }
	.mCon-dia article.dia .point-round{position: absolute;right:auto;top:20px;left:0; }
	.mCon-dia article.dia.inverse .txt { order:0; margin-bottom:20px; padding-top:40px; }
	.mCon-dia article.dia.inverse .img { order:1; margin-bottom:0; padding-top:0; }
	.mCon-dia article.dia:nth-child(1), .mCon-dia article.dia:nth-child(2) { margin-bottom:auto;}
}

/* 2. 1024px 이하 (테블릿): 1열 배치로 전환 준비 */
@media screen and (max-width: 1024px) {
    /* 다이어그램 섹션 조정 */
    .mCon-dia article.dia .img {
        justify-content: center; /* 이미지 중앙 정렬 */
        width: 100%;
    }
    .mCon-dia article.dia .img .pimg {
        left: 0; /* 겹침 효과 제거하거나 줄임 */
        max-width: 80%;
    }
    .mCon-dia article.dia .point-round {
        top: 0;
        left: 50%;
		transform:translateX(-50%);
		text-align:center;
		width:80%;
    }
	.mCon-dia article.dia .point-round img { 	width:100%; position:relative; left:-5%; top:15px;}
	.mCon-dia article.dia.inverse .point-round img { width:100%; position:relative; left:-5%; top:15px;}
	
	.mcon-t1 em { font-size:14px; }
	.mcon-t1 p span { font-size: 28px; padding:0 20px; word-break:keep-all;}
	.mcon-c1 p:nth-of-type(1){ margin-bottom:30px; margin-top:10px; padding:0 20px;}
	.mcon-c1 p span { font-size:18px;letter-spacing: -0.02em;line-height:1.5;font-weight:400;display: block; color:#fff;}
	.mcon-c1 p span strong {font-weight:700; font-size: inherit; line-height: inherit; letter-spacing: inherit; color:#fff;}

	.sub-bg201-2 .mcon-t1 p,
	.sub-bg203-1 .mcon-t1 p,
	.sub-bg203-2 .mcon-t1 p { text-align:center; }

	.sub-bg201-2 .mcon-t1 p span,
	.sub-bg203-1 .mcon-t1 p span,
	.sub-bg203-2 .mcon-t1 p span { display:inline; padding-left:0; padding-right:0; }
	

}

/* 3. 768px 이하 (모바일): 요소 크기 최적화 */
@media screen and (max-width: 768px) {
	.mcon-c1 p span { font-size:16px;display: inline; }
	.mcon-c1 p span strong {  font-size:16px;display: inline; }
}



.list-comm-program{padding:90px 0 0; display: flex; justify-content: center; gap:20px; flex-wrap:wrap;position: relative; z-index:11;}
.list-comm-program article {
	border-radius:20px;
	height:300px;
	display: flex;
	flex-direction: column; 
	align-items: center; 
	flex:0 0 calc(50% - 20px);
	background:rgba(255,255,255,0.13);
	overflow:hidden;
}
.list-comm-program article em.point-top { 
	height:69px; background:#15294e; width:100%; 
	display:flex; justify-content:center; align-items:center; 
	font-size:26px; font-weight:700; color:#fff; letter-spacing:-0.02em; 
}

.list-comm-program article ul.point-in-list { height:100%; display:flex; flex-direction:column; flex:1; justify-content:center; }
.list-comm-program article ul.point-in-list li { display:flex; align-items:center; margin:0 0;}
.list-comm-program article ul.point-in-list li strong { flex:0 0 75px; font-size:18px; color:#fff; letter-spacing:-0.02em; font-weight:700; line-height:1.5;}
.list-comm-program article ul.point-in-list li span { flex:1; font-size:18px; color:#efefef; letter-spacing:-0.02em; font-weight:400; line-height:1.5;}


.list-comm-program article .point-text { height:100%; display:flex; flex-direction:row; flex:1; justify-content:center; align-items:center;}
.list-comm-program article .point-text div {  }
.list-comm-program article .point-text div em { 
	display:flex; align-items:center; justify-content:center; width:150px; height:150px; border-radius:75px;  
	font-size:18px; font-weight:700; color:#fff; line-height:150%; letter-spacing:-0.02em;
	background-image: linear-gradient(to bottom, #647189, #8a96ae); text-align:center;
}
.list-comm-program article .point-text i { width:26px; height:26px; display:block; margin:0 27px; background:url(../images/sub/im-plus.png) no-repeat center / 100%; }
.list-comm-program article .point-text ul { }
.list-comm-program article .point-text ul li { font-size:18px; font-weight:400; line-height:1.5; letter-spacing:-0.02em; color:#fff;}

.list-comm.fx25 article {flex:0 0 calc(25% - 20px)}
.list-comm.fx33 article {flex:0 0 calc(33.33333% - 20px)}

.list-comm-white.fx25 article {flex:0 0 calc(25% - 20px)}
.list-comm-2 .list-p1 {margin-top:20px; margin-bottom:20px; }

/* --- 다이어그램 및 프로그램 섹션 반응형 추가 --- */





/* 1. 테블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {

    
    /* 프로그램 리스트 */
	.list-comm-program { margin-top:30px; }
    .list-comm-program article {
        height: auto; /* 고정 높이 해제하여 내용에 맞게 조절 */
        min-height: 280px;
        padding-bottom: 30px;
    }
    
    /* 4열, 3열 구조를 2열로 변경 */
    .list-comm.fx25 article, 
    .list-comm.fx33 article,
    .list-comm-white.fx25 article {
        flex: 0 0 calc(50% - 15px);
    }
	
	.list-comm-full.fx33 article {
		flex: 0 0 calc(100%);
	}

}

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


    /* 프로그램 리스트 1열로 변경 */
    .list-comm-program article {
        flex: 0 0 100%;
    }

    /* 플러스(+) 아이콘이 있는 포인트 텍스트 영역 조정 */
    .list-comm-program article .point-text {
        flex-direction: column; /* 가로 나열을 세로로 변경 */
        padding: 30px 0;
    }
    .list-comm-program article .point-text div em {
        width: 120px; /* 원형 크기 축소 */
        height: 120px;
        font-size: 16px;
    }
    .list-comm-program article .point-text i {
        margin: 15px 0; /* 플러스 아이콘 간격 조정 */
        transform: rotate(90deg); /* 가로 플러스에서 세로 느낌으로 변경(선택) */
    }
    .list-comm-program article .point-text ul li {
        text-align: center;
        font-size: 16px;
    }

    /* 인 리스트(Point-in-list) 조정 */
    .list-comm-program article ul.point-in-list {
        padding: 20px;
    }
    .list-comm-program article ul.point-in-list li strong {
        flex: 0 0 60px; /* 라벨 너비 축소 */
        font-size: 15px; 
    }
    .list-comm-program article ul.point-in-list li span {
        font-size: 15px; word-break:keep-all;
    }
}

/* 3. 초소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .list-comm-program article em.point-top {
        font-size: 20px;
        height: 55px;
    }
    .list-comm.fx25 article, 
    .list-comm.fx33 article,
    .list-comm-white.fx25 article {
        flex: 0 0 100%; /* 아주 작은 화면에선 무조건 1열 */
    }

	.list-comm-program article ul.point-in-list li { flex-wrap:wrap; margin-top:15px;  }
	.list-comm-program article ul.point-in-list li  strong { margin-bottom:5px; }
	.list-comm-program article ul.point-in-list li  span { flex:0 0 100%;  }
}


.sub-con-period{ padding:150px 0;}
.list-comm{padding:90px 0 0; display: flex; justify-content: center; gap:20px; flex-wrap:wrap;position: relative; z-index:11;}
.list-comm article {border-radius:20px;height:300px;display: flex;flex-direction: column; justify-content: center; align-items: center; 
	background-image: linear-gradient(to top, rgba(233,233,233,1), rgba(242,242,242,1)); overflow:hidden;
	flex:0 0 calc(33.33333% - 20px);
/*	background:rgba(255,255,255,0.3); */
}
.list-comm-new { padding-top:10px; }
.middle-h4 { font-size:35px; text-align:center; font-weight:700; padding:70px 20px 30px; line-height:1.2}
.middle-h4 em { display:block; margin-top:5px; font-size:18px; color:rgba(0,0,0,0.5); line-height:1.2; font-weight:400; letter-spacing:0.025em;}

@media (max-width:1024px){
	.middle-h4 { font-size:26px; padding:40px 20px 0 !important; }
	.middle-h4 em { font-size:14px; }
}

.point-circle{ 
	border-radius:30px;width:60px;height: 60px;display: flex;justify-content: center;align-items: center;font-size:18px; letter-spacing: -0.02em;
	color:#fff;font-weight:600; line-height: 1;background: rgba(255,255,255,0.3); background:#15294e; margin:0 auto;border:1px solid rgba(255,255,255,0.3);
}
.list-p1 {margin-top:40px;text-align: center; color:#191919;}
.list-p1 span { font-size:26px;letter-spacing: -0.02em;line-height:1.5;font-weight:700;display: block; color:#191919;}
.list-p1 strong { display:block; text-align:center; padding:20px 0 0; }
.list-p1 strong em { font-size:18px;letter-spacing: -0.02em;line-height:1.5;font-weight:400;display: block; color:#191919; text-align:center; }
.list-comm-white{padding:90px 0 0; display: flex; justify-content: center; gap:20px; flex-wrap:wrap;position: relative; z-index:11;}
.list-comm-white article {border-radius:20px;height:300px;display: flex;flex-direction: column; justify-content: center; align-items: center; 
	/* background-image: linear-gradient(to top, rgba(233,233,233,1), rgba(242,242,242,1)); */
	flex:0 0 calc(33.33333% - 20px);
	background:rgba(255,255,255,0.13);
}
.list-comm-white .point-circle{ border-radius:30px;width:60px;height: 60px;display: flex;justify-content: center;align-items: center;font-size:18px;
letter-spacing: -0.02em;color:#fff;font-weight:600; line-height: 1;background: rgba(255,255,255,0.3); margin:0 auto;border:1px solid rgba(255,255,255,0.3);}

.sub-bg204-1 .list-comm-white .point-circle {
	color:#15294e; background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(166,166,166,1));
	border:none;
}

.list-p1-white {margin-top:40px;text-align: center; color:#fff;}
.list-p1-white span { font-size:26px;letter-spacing: -0.02em;line-height:1.5;font-weight:700;display: block; color:#fff;}
.list-p1-white strong { display:block; text-align:center; padding:20px 0 0; }
.list-p1-white strong em { font-size:18px;letter-spacing: -0.02em;line-height:1.5;font-weight:400;display: block; color:#ebebeb; text-align:center; }

.list-comm .list-p2 { margin-top:40px;text-align:center;}
.list-comm .list-p2 span { font-size:26px; letter-spacing: -0.02em;line-height:1.5;font-weight:400; display:block;}
.list-comm .list-p2 span strong { font-size:26px; letter-spacing: -0.02em;line-height:1.5;font-weight:700; }



/* 반응형 추가 가이드 */
@media screen and (max-width: 1520px) {
    .width1490 {
        width: 100% !important;
        padding: 0 20px;
    }
}
@media screen and (max-width: 1024px) {
    .sub-con-period { padding: 100px 10px; }
    .list-comm-white, .list-comm {
        padding-top: 60px;
        gap: 15px;
    }
    .list-comm-white article, .list-comm article {
        flex: 0 0 calc(50% - 10px); 
        height: 250px; 
    }
    .list-p1-white span, .list-p1 span {
        font-size: 22px;
    }
	.list-comm-four.width1400 { padding-left:20px; padding-right:20px; }
}
@media screen and (max-width: 768px) {
    .sub-con-period { padding: 70px 0; }
	.new-pd { padding-left:20px !important; padding-right:20px !important; }
    .mTitle-h3 span { font-size: 28px; } 
    .list-comm-white, .list-comm {
        padding-top: 40px;
        gap: 10px;
		flex-wrap:wrap;
    }
    .list-comm-white article, .list-comm article {
        flex: 0 0 calc(50% - 5px); 
        height: auto;
        border-radius: 15px;
		padding:25px 20px;
    }
	.list-comm-full, .list-comm-full.fx33 {
		flex: 0 0 calc(100%) !important;
		with:100%;
	}

    .point-circle, .list-comm-white .point-circle {
        width: 45px;
        height: 45px;
        font-size: 15px;
    }

    .list-p1-white, .list-p1 {
        margin-top: 25px;
    }

	.list-comm .list-p2 { margin-top:25px;}
	.list-comm .list-p2 span { font-size:18px; }
	.list-comm .list-p2 span strong { font-size:18px; }

    .list-p1-white span, .list-p1 span {
        font-size: 18px; /* 폰트 크기 축소 */
        padding: 0 10px;
        word-break: keep-all;
		display:inline;
    }

    .list-p1-white strong em, .list-p1 strong em {
        font-size: 14px; display:inline;
		word-break:keep-all;
    }

	.list-comm-four article, 
	.list-comm-four.fx25 article, 
	.list-comm-four.fx33 article { flex:0 0 100%; }

	.list-comm-four article p, 
	.list-comm-four.fx25 article p, 
	.list-comm-four.fx33 article p { margin-top:20px;}

	.list-comm-four article p span, 
	.list-comm-four.fx25 article p span, 
	.list-comm-four.fx33 article p span { display:block; line-height:1.3; text-align:center;}

}
@media screen and (max-width: 375px) {
    .list-comm-white article, .list-comm article {
        flex: 0 0 100%;
        height: auto;
    }
}





.conCheckList { height: 807px; width:100%; display: flex; justify-content: space-between; align-items:center;}
.conCheckList article.img { flex:0 0 50%; height:100%; border-radius:0 60px 60px 0; overflow: hidden;}
.conCheckList article.txt { flex:0 0 50%; padding-left:100px;}
.conCheckList.inverse { height: 807px; width:100%; display: flex; justify-content: space-between; align-items: center;}
.conCheckList.inverse article.img { flex:0 0 50%; height:100%; border-radius:60px 0 0 60px; overflow: hidden; order:1;}
.conCheckList.inverse article.txt { flex:0 0 50%; padding-left:8vw; order:0; }

.my-second h5 {font-size:48px; line-height:1.4; letter-spacing: -0.02em; font-weight:700; padding-top:20px;}
.my-second p { margin:30px 0 25px;}
.my-second p span { font-size:18px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.5; display: block;}
.my-second p span strong { font-size:inherit; font-weight:700; letter-spacing: inherit; line-height: inherit;}
.my-second div dl { display: inline-flex; align-items: center; padding:30px 45px; border-radius:12px; background-color:rgba(249,248,248,1); }
.my-second div dl dt { display: inline-flex; align-items: center; }
.my-second div dl dt i.i-etel { display: block; width: 38px; height: 38px; background: url(../images/sub/sub304-icon-tel.svg) no-repeat center / 100%;} 
.my-second div dl dt span { font-size:22px; font-weight:400; padding-left:10px; display: inline-block; } 
.my-second div dl dd { padding-left:25px; font-size:28px; font-weight:700; color:rgba(186,99,0,0.8); color:#172e57}

.point-em{color:rgba(194,153,107,1); color:#172e57; font-size:20px; line-height: 1; font-weight:800;}
.inner-title-h4 { font-size:48px;font-weight:700;letter-spacing: -0.02em;line-height:1.4; color:rgba(34,34,34,1);}

.conCheckList article.txt h4 { margin-top:10px; margin-bottom:60px;} 

.chk-list-type1 { width: 754px;}
.chk-list-type1 li { border-radius:12px; background:#fff; padding:25px 45px; display: flex; align-items: center; margin-bottom:12px;}
.chk-list-type1 li:nth-child(2n) { background:rgba(246,240,232,1); background:#e6e8eb;}
.chk-list-type1 li i { font-size:22px; font-weight:700; line-height:1.5; font-style:normal; margin-right:20px;}
.chk-list-type1 li span { font-size:22px; font-weight:400; line-height:1.5; color:rgba(51,51,51,1); }
.chk-list-type1.light-bg-color li { background:rgba(249,248,248,1); background:#f9f8f8;}
.chk-list-type1.light-bg-color li:nth-child(2n) { background:rgba(246,240,232,1); background:#e6e8eb;}

.chk-list-type2 { width: 754px;}
.chk-list-type2 li { border-radius:12px; background:rgba(249,248,248,1); background:#f9f8f8;padding:25px 45px; display: flex; align-items: flex-start; margin-bottom:12px; flex-direction: column; width: 100%;}
.chk-list-type2 li:nth-child(2n) { background:rgba(246,240,232,1); background:#e6e8eb; }
.chk-list-type2 li i { font-size:22px; font-weight:700; line-height:1.5; font-style:normal; margin-right:20px;}
.chk-list-type2 li span { font-size:22px; font-weight:700; line-height:1.5; color:rgba(51,51,51,0.8); }
.chk-list-type2 li p { font-size:22px; font-weight:400; line-height:1.5; padding:10px 0 0; margin-top:10px; border-top:1px solid rgba(200,200,200,1); width:100%;}

.chk-list-type2.light-bg-color li { background:rgba(249,248,248,1); }
.chk-list-type2.light-bg-color li:nth-child(2n) { background:rgba(246,240,232,1); }

@media screen and (max-width: 1500px) {
	.conCheckList article.txt, 
    .conCheckList.inverse article.txt {
        flex: 0 0 auto;
        width: 100%;
        padding: 60px 50px;
        order: 1;
    }
}

/* --- 체크리스트 반응형 추가 --- */
@media screen and (max-width: 1200px) {
    .conCheckList, .conCheckList.inverse {
        height: auto; 
        flex-direction: column;
    }

    .conCheckList article.img, 
    .conCheckList.inverse article.img {
        flex: 0 0 auto;
        width: 100%;
        height: 400px; 
        border-radius: 0 0 40px 40px; 
        order: 0;
    }

    .conCheckList article.txt, 
    .conCheckList.inverse article.txt {
        flex: 0 0 auto;
        width: 100%;
        padding: 60px 20px 0;
        order: 1;
    }

    .chk-list-type1, .chk-list-type2 {
        width: 100%; 
    }
}
@media screen and (max-width: 768px) {
    .conCheckList article.img {
        height: 300px; 
    }
    .inner-title-h4 {
        font-size: 32px;
    }
    .conCheckList article.txt h4 {
        margin-bottom: 30px; 
    }
    .chk-list-type1 li, .chk-list-type2 li {
        padding: 18px 25px; 
    }
    .chk-list-type1 li i, .chk-list-type1 li span,
    .chk-list-type2 li i, .chk-list-type2 li span {
        font-size: 17px;
    }
    .chk-list-type1 li i {
        margin-right: 15px;
    }
    .my-second h5 { font-size: 32px; text-align:Center;}
	.my-second i{margin:0 auto; text-align:center;display:block;}
	.my-second p { text-align:center; }
	.my-second p span { display:inline; }
	.my-second p span:nth-child(1) { display:block; text-align:center; }
    .my-second div dl {
        display: flex;
        flex-direction: column;
        padding: 20px;
		align-items:center;
    }
    .my-second div dl dd {
        padding-left: 0;
        margin-top: 10px;
        font-size: 22px;
    }
	.chk-list-type2 li p { font-size:15px; }
}


@media screen and (max-width: 480px) {
    .conCheckList article.img {
        height: 250px;
    }
    .inner-title-h4 {
        font-size: 26px;
    }
    .chk-list-type1 li span {
        font-size: 15px;
    }
}

/* PC에서는 숨김 */
.m-break { display: none; }

/* 모바일에서만 줄바꿈 활성화 */
@media screen and (max-width: 768px) {
    .m-break { display: block; }
}


.sub304-chk-img1 { background:url(../images/sub/sub304-img201.png) no-repeat center / cover;}
.sub304-chk-img2 { background:url(../images/sub/sub304-img202.png) no-repeat center / cover;}
.sub401-chk-img1 { background:url(../images/sub/sub401-img201.png) no-repeat center / cover;}
.sub501-chk-img1 { background:url(../images/sub/sub501-img301.png) no-repeat center / cover;}
.sub502-chk-img1 { background:url(../images/sub/sub502-chk-img1.png) no-repeat center / cover;}
.sub503-chk-img1 { background:url(../images/sub/sub503-chk-img1.png) no-repeat center / cover;}
.sub504-chk-img1 { background:url(../images/sub/sub504-chk-img1.png) no-repeat center / cover;}
.sub504-chk-img2 { background:url(../images/sub/sub504-chk-img2.png) no-repeat center / cover;}


.sub-con-501 { display: flex; justify-content: center; flex-wrap:wrap; gap:50px; padding-bottom:350px;}
.sub-con-501 article { flex:0 0 594px; height: 700px; position: relative; top:180px; overflow:hidden; border-radius:20px;}
.sub-con-501 article:nth-child(2n){ top:0;}
.sub-con-501 article .img { position: relative; width: 100%; height: 100%;}
.sub-con-501 article .img img { width: 100%; height: 100%; object-fit: cover; transition:all 1s ease-out; transform:scale(1);}
.sub-con-501 article .txt{ position: absolute; left:0; bottom:0; padding:50px; width: 100%;}
.sub-con-501 article .txt p { margin-top:20px;}
.sub-con-501 article:hover .img img {transform:scale(1.1); }

/* 반응형 추가 가이드 */
@media screen and (max-width: 1250px) {
    .sub-con-501.width1250 {
        width: 100%;
        padding: 0 20px 20px; 
        gap: 30px;
    }
    .sub-con-501 article {
        flex: 0 0 calc(50% - 15px); 
        height: 550px; 
        top: 100px; 
    }
    .sub-con-501 article:nth-child(2n) {
        top: 0;
    }
}
@media screen and (max-width: 768px) {
    .sub-con-501 {
        padding-bottom: 80px; 
        gap: 20px;
    }
    .sub-con-501 article {
        flex: 0 0 100%;
        height: 500px;
        top: 0 !important; 
        border-radius: 15px;
    }
    .sub-con-501 article .txt {
        padding: 30px 20px; 
    }
    .sub-con-501 article .txt p.mtxt-m1 {
        margin-top: 10px;
    }
	.sub-con-501 article .txt p.mtxt-m1 span { 
		display:block; font-size:22px;
	}
	.sub-con-301 article .txt p.mtxt-m1 span { 
		display:block; font-size:22px;
	}


    .sub-con-501 article .txt p.mtxt-p1 span {
        font-size: 14px; 
        line-height: 1.5;
    }
    .sub-con-501 article .img img {
        transform: scale(1.05);
    }
}
@media screen and (max-width: 480px) {
    .sub-con-501 article {
        height: 450px;
    }

	/* 이미지 위에 어두운 그라데이션 오버레이 추가 */
    .sub-con-501 article::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 90%; /* 아래에서부터 60% 영역 */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 1; /* 이미지보다는 위, 글자보다는 아래 */
        pointer-events: none; /* 오버레이가 클릭을 방해하지 않도록 설정 */
    }

    /* 기존 글자 영역(.txt)을 그라데이션보다 위로 올림 */
    .sub-con-501 article em, .sub-con-501 article p  {
		position:relative;
        z-index: 2;
    }

    .sub-con-501 article .txt p.mtxt-m1 span {
        font-size: 22px; 
    }
}




.pet-bg-left-right { position: relative; overflow: hidden;}
.pet-bg-left-right h3 { position: relative; z-index: 10;}
.pet-bg-left-right .white-box { position: relative; z-index: 10; }

.pet-bg-left-right::before { content:"";display:block; width: 690px; height: 770px; background:url(../images/sub/sub501-img201.png) no-repeat center / 100%; position: absolute; left:0; bottom:0;}
.pet-bg-left-right::after { content:"";display:block; width: 609px; height: 715px; background:url(../images/sub/sub501-img202.png) no-repeat center / 100%; position: absolute; right:0; bottom:0;}

.list-comm.white-box article { background: rgba(255,255,255,0.13); }



.sbg102{background:url(../images/sub/s102-2.jpg) no-repeat center top;width:100%;height:4497px;}
.sbg102-2{background:url(../images/sub/s102-3.jpg) no-repeat center top;width:100%;height:4497px;}
.sbg102-3{background:url(../images/sub/s102-1.jpg) no-repeat center top;width:100%;height:1577px;}
.sbg103{background:url(../images/sub/s103.jpg) no-repeat center top;width:100%;height:1000px;}
.sbg104{background:url(../images/sub/s104.jpg) no-repeat center top;width:100%;height:1200px;}
.sbg105{background:url(../images/sub/s105.jpg) no-repeat center top;width:100%;height:2900px;}
.sbg106{background:url(../images/sub/s106.jpg) no-repeat center top;width:100%;height:2000px;}
.sbg402{background:url(../images/sub/s402.jpg) no-repeat center top;width:100%;height:3500px;}
.sbg403{background:url(../images/sub/s403.jpg) no-repeat center top;width:100%;height:3500px;}
.sbg502{background:url(../images/sub/s502.jpg) no-repeat center top;width:100%;height:5442px;}
.sbg503{background:url(../images/sub/s503.jpg) no-repeat center top;width:100%;height:5442px;}
.sbg504{background:url(../images/sub/s504.jpg) no-repeat center top;width:100%;height:6261px;}


@media (max-width:1800px){
/*	.header-inner { padding:0 1rem 0 2rem; }
	.header .logo { width: max(20rem, 225px);  }*/
	.depth1 > li > a { margin-right: 40px; }

	.depth2 li a { font-size:15px; }

	.top-tel dt{ font-size:13px;}
	.top-tel dd{font-size:18px;}
	.header.on .depth1 > li > a { margin-left:22px; margin-right:60px; }


	.doctor-txt h3 span{font-size:55px;}
	.doctor-txt p{margin:40px 0 40px;}
	.doctor-txt p span{font-size:17px;}

	.doctor-logo{top:clamp(1rem, 2.31vh, 1.5625rem);}
	.doctor-logo i{width: 540px;}

	.equip-text{margin-left:clamp(7rem, 7.40vw, 8.88rem);}
	.treatment_sect .cont_in {padding-left:clamp(7rem, 7.40vw, 8.88rem); padding-right:clamp(7rem, 7.40vw, 8.88rem);}
	.section7-inner { margin-left:clamp(7rem, 7.40vw, 8.88rem);}
	.pos-ab1{ margin-left:clamp(7rem, 7.40vw, 8.88rem); }

	.spec-img{ width:50% !important;overflow: hidden;}
	.spec-text{ width:40% !important;white-space: nowrap;}

}

.load-map { width:calc(100% - 98px); height:800px; margin:0 49px; border-radius:20px; overflow:hidden; }
.comm-title-box { max-width:1080px; margin:149px auto 200px; position:relative; z-index:3;}
.comm-title-box h3 { text-align:center; font-size:48px; font-weight:700; color:#191919; letter-spacing:-0.02em; margin:0 0 80px;}

ul.comm-info { display:flex; justify-content:center; align-items:center;  flex-direction:column; width:100%;}
ul.comm-info li { margin-bottom:20px; display:flex; justify-content:center; align-items:center; height:79px; width:100%; }
ul.comm-info li strong { 
	flex:0 0 250px; display:flex; justify-content:center; align-items:center;  border-radius:0 0 0 10px; 
	background:rgba(23,46,87,1); height:100%; font-size:30px; font-weight:500; color:#fff; letter-spacing:-0.02em;
	padding:10 20px;
}
ul.comm-info li span { 
	flex:1; display:flex; justify-content:center; align-items:center; 
	border-radius:0 10px 0 0; border:1px solid #cecece; border-left:none; height:100%;
	font-size:27px; font-weight:400; color:#6e6e6e; letter-spacing:-0.02em;
	padding:0 20px; background:#fff; line-height:1.3; text-align:center;
}
ul.loc-info li:nth-child(1) { height:110px;}

ul.comm-info li.last strong { display:none; }
ul.comm-info li.last span { border-left:1px solid #cecece; border-radius:0 10px 0 10px;}
ul.comm-info li.last span em { font-size:27px; font-weight:400; color:#6e6e6e; letter-spacing:-0.02em;}
ul.comm-info li.last span i { font-size:27px; font-weight:400; color:#6e6e6e; letter-spacing:-0.02em; font-style:normal; margin-left:5px;}


/* --- 오시는 길/지도 섹션 반응형 추가 --- */

/* 1. 테블릿 및 일반 해상도 (1200px 이하) */
@media screen and (max-width: 1200px) {
    .load-map { 
        width: calc(100% - 40px); 
        margin: 0 20px; 
        height: 500px; /* 지도 높이 축소 */
    }
    .comm-title-box { 
        margin: 80px auto 100px; 
        padding: 0 20px; 
    }
    .comm-title-box h3 { 
        font-size: 36px; 
        margin-bottom: 50px; 
    }
    ul.comm-info li strong { 
        flex: 0 0 180px; /* 라벨 너비 축소 */
        font-size: 22px; 
    }
    ul.comm-info li span { 
        font-size: 20px; 
    }
}

/* 2. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .load-map { 
        height: 350px; /* 모바일 지도 높이 */
        border-radius: 15px;
    }

    .comm-title-box { margin: 60px auto; }
    .comm-title-box h3 { font-size: 28px; margin-bottom: 30px; }

	.time-bottom { margin-top:-10px; }

    /* 리스트 형태를 가로에서 세로로 변경 */
    ul.comm-info li { 
        flex-direction: column; 
        height: auto; /* 고정 높이 해제 */
        margin-bottom: 15px;
        align-items: stretch; /* 자식 요소들이 꽉 차게 */
    }

    ul.comm-info li strong { 
        flex: none; 
        width: 100%; 
        height: 45px; /* 라벨 높이 따로 지정 */
        font-size: 18px; 
        border-radius: 10px 10px 0 0; /* 위쪽만 둥글게 */
        justify-content: center; /* 왼쪽 정렬 */
        padding: 0 15px;
		text-align:center;
    }

    ul.comm-info li span { 
        flex: none; 
        width: 100%; 
        min-height: 55px; /* 내용에 따라 늘어나도록 최소 높이만 지정 */
        height: auto;
        font-size: 18px; 
        border-radius: 0 0 10px 10px; /* 아래쪽만 둥글게 */
        border-left: 1px solid #cecece; /* 가로 모드에서 제거했던 테두리 복구 */
        padding: 12px 15px;
        line-height: 1.4;
        justify-content: center; /* 왼쪽 정렬 */
        text-align: left;
        word-break: keep-all; /* 단어 단위 줄바꿈 */
		text-align:center;
    }
	ul.comm-info li.rot span:nth-of-type(1) { margin-bottom:15px; }
}

/* 3. 초소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .load-map { height: 280px; }
    .comm-title-box h3 { font-size: 24px; }
    ul.comm-info li strong { font-size: 16px; height: 40px; }
    ul.comm-info li span { font-size: 18px; }
}




.gray-bg-box { position:relative; background:#f9f8f8; padding:10px 20px 100px; }
.treat-sub { margin-bottom:60px; }
.treat-sub span { display:block; text-align:center; font-size:18px; font-weight:400; color:rgba(34,34,34,1); letter-spacing:-0.02em; line-height:1.5; }
.treat-sub span.s-txt{ line-height:1.8}

.time-detail { display:flex; justify-content:center; gap:64px; margin-bottom:70px; }
.time-detail li { overflow:hidden; flex:0 0 305px;}
.time-detail li strong { display:flex; justify-content:center; align-items:center; font-size:30px; font-weight:500; color:#fff; height:79px; border-radius:10px 10px 0 0; background:rgba(23,46,87,1);}
.time-detail li div { display:flex; justify-content:center; align-items:center; flex-direction:column; border-bottom:0 0 10px 10px; background:#fff; border:1px solid rgba(206,206,206,1); border-top:none; padding:37px 20px; }
.time-detail li div span { font-size:30px; font-weight:400; letter-spacing:-0.02em; color:rgba(110,110,110,1); line-height:150%; margin:2px 0; }

.time-bottom { margin-top:-60px; }
.my-icon-img { 
	width:748px; height: 400px; background:url(../images/sub/my-icon-img.png) no-repeat center / 100%; display: block;
	position: absolute; left:50%; bottom:120px; transform: translateX(300px);z-index:2;
}
.tip-sub { font-size:18px; font-weight:400; color:rgba(34,34,34,1); text-align:center; line-height:1.4;}

.treat-order { padding-top:60px; }
.treat-order article { display:flex; align-items:center; justify-content:center; padding-bottom:87px; position:relative; gap:57px;}
.treat-order article::after { content:"";display:block;width:1px; height:100%; background:rgba(23,46,87,1); position:absolute; left:50%;top:0; }
.treat-order article:nth-child(1)::after { top:50%; }
.treat-order article:nth-child(6)::after { top:0%; height:50%; }
.treat-order article dl { flex:0 0 410px; display:flex justify-content:flex-end; align-items:center;}
.treat-order article dl dt { font-size: 30px; font-weight:700; letter-spacing:-0.02em; text-align:right;}
.treat-order article dl dd { margin-top:20px; }
.treat-order article dl dd span { display:block; text-align:right; font-size:18px; color:rgba(34,34,34,1); line-height:150%; letter-spacing:-0.02em;  }
.treat-order article div { flex:0 0 278px; background-repeat:no-repeat; background-size:cover; background-position:center; width:278px; height:278px; display:flex; justify-content:center; align-items:center; border-radius:250px; }
.treat-order article div em { width:92px; height:92px;  display:flex; justify-content:center; align-items:center; border-radius:50%; background:rgba(23,46,87,1); color:#fff; font-size:45px; font-weight:700; letter-spacing:-0.02em; line-height:1;}

.treat-order article:nth-child(1) div { background-image:url(../images/sub/tp-img1.png)  }
.treat-order article:nth-child(2) div { background-image:url(../images/sub/tp-img2.png)  }
.treat-order article:nth-child(3) div { background-image:url(../images/sub/tp-img3.png)  }
.treat-order article:nth-child(4) div { background-image:url(../images/sub/tp-img4.png)  }
.treat-order article:nth-child(5) div { background-image:url(../images/sub/tp-img5.png)  }
.treat-order article:nth-child(6) div { background-image:url(../images/sub/tp-img6.png)  }
.treat-order article p { flex:0 0 410px; }

.treat-order article:nth-child(2n) dl { order:2; }
.treat-order article:nth-child(2n) dl dt { text-align:left; }
.treat-order article:nth-child(2n) dl dd span { text-align:left; }
.treat-order article:nth-child(2n) div { order:1; }
.treat-order article:nth-child(2n) p { order:0; }


/* --- [1] 진료 시간 안내 & 이미지 오버플로우 방지 --- */
/* 1. 테블릿 및 일반 해상도 (1200px 이하) */
@media screen and (max-width: 1200px) {
    .time-detail { gap: 30px; }
    .time-detail li { flex: 0 0 280px; }
    
    /* 지도 섹션 강점(22px) / 본문(20px) 체계 적용 */
    .time-detail li strong { font-size: 22px; }
    .time-detail li div span { font-size: 20px; }
}

/* 2. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .time-detail { flex-direction: column; align-items: center; gap: 20px; margin-bottom: 40px; }
    .time-detail li { flex: 0 0 auto; width: 100%; max-width: 350px; }
    
    /* 지도 섹션 강점(18px) / 본문(17px) 체계 적용 */
    .time-detail li strong { height: 60px; font-size: 18px; }
    .time-detail li div { padding: 20px 20px; display:flex; flex-direction:row;}
    .time-detail li div span { font-size: 20px; margin:0 3px;}

    /* 가로스크롤 방지 및 아이콘 중앙 정렬 */
    .my-icon-img {
        position: relative; left: 0; bottom: 0; transform: none;
        width: 100%; max-width: 300px; height: 180px; 
        margin: 30px auto 0; background-size: contain;
    }
    .time-bottom { margin-top: -10px; } /* 요청하신 수치 반영 */
	.treat-sub { margin-bottom:40px; }
	.treat-sub span { font-size:16px; }
}

/* 3. 초소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    /* 지도 섹션 강점(16px) / 본문(15px) 체계 적용 */
    .time-detail li strong { font-size: 16px; height: 50px; }
    .time-detail li div span { font-size: 18px; }

    .my-icon-img { max-width: 240px; height: 140px; }
}

/* --- [2] 진료 절차 (treat-order) 반응형 --- */

/* 태블릿 (1200px 이하) */
@media screen and (max-width: 1200px) {

    .treat-order article { gap: 30px; }
    .treat-order article dl, .treat-order article p { flex: 0 0 350px; }
    .treat-order article div { flex: 0 0 220px; width: 220px; height: 220px; }
}

/* 모바일 전환 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .treat-order { padding-top: 10px; }
    .treat-order article::after { display: none; } /* 중앙 수직선 제거 */

    .treat-order article { 
        flex-direction: column !important; /* 세로 적층 */
        gap: 25px; 
        padding-bottom: 60px; 
        text-align: center;
    }

    /* 모든 요소 너비 해제 및 순서 제어를 위한 설정 */
    .treat-order article dl, 
    .treat-order article div { 
        flex: 0 0 auto; 
        width: 100%; 
        max-width: 100%; 
    }
    .treat-order article p { display: none; } /* 빈 공간 p태그 숨김 */

    /* [중요] 이미지 우선 배치 (order 설정) */
    .treat-order article div { order: 1; margin: 0 auto; } /* 이미지가 위로 */
    .treat-order article dl { order: 2; } /* 텍스트가 아래로 */

    /* 짝수번째(inverse) PC용 정렬 강제 초기화 및 모바일 순서 재부여 */
    .treat-order article:nth-child(2n) dl,
    .treat-order article:nth-child(2n) p,
    .treat-order article:nth-child(2n) div { 
        order: unset; /* PC의 order 초기화 */
    }
    /* 모바일 공통 순서 재정의 */
    .treat-order article:nth-child(2n) div { order: 1; }
    .treat-order article:nth-child(2n) dl { order: 2; }

    /* 텍스트 정렬 중앙 통일 */
    .treat-order article dl dt, 
    .treat-order article:nth-child(2n) dl dt { 
        text-align: center; 
        font-size: 26px;
    }

    /* [요청사항] span 태그 inline 처리 */
    .treat-order article dl dd { margin-top: 10px; }
    .treat-order article dl dd span,
    .treat-order article:nth-child(2n) dl dd span { 
        display: inline !important; /* block 해제 */
        text-align: center; 
        font-size: 16px;
        line-height: 1.6;
        word-break: keep-all; /* 단어 단위 줄바꿈으로 가독성 확보 */
    }

    /* 이미지 원형 크기 조절 */
    .treat-order article div { 
        width: 200px; height: 200px; 
        border-radius: 100px; 
    }
    .treat-order article div em { 
        width: 60px; height: 60px; font-size: 30px; 
    }
}

/* 초소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .treat-order article dl dt { font-size: 22px; }
    .treat-order article dl dd span { font-size: 15px; }
    .treat-order article div { width: 160px; height: 160px; }
	.sub-con-501 .mtxt-p1 span { display:inline; }
}


.medical-container {max-width: 1280px;margin: 80px auto 150px;padding: 0 20px;}
.tab-menu {display: flex;justify-content: center;gap: 10px;padding-bottom: 80px;}
.tab-menu li {width: 232px;height: 60px;cursor: pointer;transition: 0.3s;padding: 0; border: 1px solid #cecece;}
.tab-menu li a {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;text-decoration: none; color: #6e6e6e; font-size: 20px;transition: 0.3s; letter-spacing:-0.02em; overflow:hidden; height:100%; }
.tab-menu li:hover { background:#f6f6f6; }
.tab-menu li.active {background: #172e57;border-color: #172e57;}
.tab-menu li.active a {color: #fff; font-weight: 500;}
.tab-menu li.active:hover a { background:transparent; }
.tab-menu li:nth-child(1) { border-radius:0 0 0 10px; }
.tab-menu li:nth-child(3) { border-radius:0 10px 0 0; }

@media (max-width: 1024px) {
	.tab-menu li { width: 140px; }
	.tab-menu li a { font-size: 14px; }
}
.staff-row {display: flex;justify-content: center; gap: 100px;margin-bottom: 92px; }
.staff-card {flex: 0 0 325px;}
.img-box {width: 100%;border-radius: 20px;overflow: hidden;}
.img-box img {width: 100%;height: 100%;object-fit: cover;}
.info-box {display: flex;justify-content: space-between;align-items: center;margin-top: 30px;padding: 0 5px; }
.info-box .text article { display:flex; align-items:center; padding-bottom: 7px;border-bottom: 1px solid #ccc; }
.info-box .text article .pos {display: block;font-size: 18px;color: #494949;margin-right:29px;}
.info-box .text article .name {display: inline-block;font-size: 30px;font-weight: 700;color:#2a2829;}

.info-box-b {display: flex;justify-content: center;align-items: center;margin-top: 30px;padding: 0 5px; }
.info-box-b .text-b article { display:flex; align-items:center; padding-bottom: 7px; justify-content:center; width:100%;}
.info-box-b .text-b article .pos {display: block;font-size: 18px;color: #494949;margin-right:15px;}
.info-box-b .text-b article .name {display: inline-block;font-size: 30px;font-weight: 700;color:#2a2829;}



.info-box .text .desc {display: block;font-size: 18px;color: #494949;font-weight: 500;margin-top:15px;display:none;}
.btn-more {width: 70px;height: 70px;background: #172e57;border: none;border-radius: 50%;color: #fff;font-size: 24px;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: 0.3s;}
.btn-more:hover {background: #172e57;transform: scale(1.1);}
.btn-more i { position:relative; left:0; transition:all 0.5s; }
.btn-more:hover i { left:5px; }

/* 태블릿: 1024px 이하일 때 */
@media (max-width: 1024px) {
	.staff-row {flex-wrap: wrap; gap: 40px 20px;margin-bottom: 40px;}
	.staff-card {	flex: 0 0 calc(50% - 20px); 	max-width: 350px;}
	.tab-menu li { width: 140px; font-size: 14px; }
}

/* 모바일: 640px 이하일 때 */
@media (max-width: 640px) {
	.medical-container { padding: 10px 20px 10px; margin: 0 auto 50px;}
	.staff-row { margin-bottom: 0; }
	.staff-card {flex: 0 0 100%;max-width: 100%;	margin-bottom: 20px;}
	.info-box .text .name { font-size: 24px; }
	.btn-more { width: 45px; height: 45px; font-size: 20px; }
	.tab-menu { padding-bottom:40px; }
}


.title-staff { margin-bottom:55px; width:100%; padding-top:20px;}
.title-staff h3 { 
	border-radius:20px 20px 0 0; height:90px; display:flex; justify-content:center; align-items:center;  
	background-image: linear-gradient(to bottom, #e7e7e7 0% , rgba(255,255,255,1) 100% );
	overflow:hidden; width:100%;
}
.title-staff h3 i { display:block; width:46px; height:23px; background:url(../images/doctor/logo-doctor.svg) no-repeat center / 100%; }
.title-staff h3 strong { font-size:30px; font-weight:700; color:#172e57; line-height:1; letter-spacing:-0.02em; margin-left:16px; }



/* 모달 전체 오버레이 설정 */
.modal-overlay {
	position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);
	display: flex;align-items: center;justify-content: center;z-index: 999999;
	opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.is-active {opacity: 1;visibility: visible;}
.modal-window {
	background: #fff;width: 100%;height:100%;overflow: hidden;
	transform: translateY(30px);
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	position:relative;
}
.modal-window::after { 
	content:"";
	display:block;
	width:606px; height:324px;
	background:url(../images/doctor/my-img-doctor.svg) no-repeat center/ 100%;
	position:absolute; bottom:48px; right:39px;z-index:-1;
}
.modal-overlay.is-active .modal-window {transform: translateY(0);}
.info-scroll-area::-webkit-scrollbar {width: 6px;}
.info-scroll-area::-webkit-scrollbar-thumb {background: #ddd;border-radius: 10px;}

.modal-header {background: #172e57; padding: 15px 30px;display: flex;justify-content: space-between;align-items: center;}
.modal-header .logo img { height: 30px; }
.btn-close {background: none; border: none;font-size: 40px; color: #666;cursor: pointer;line-height: 1;}
.modal-content {flex: 1;overflow-y: auto;padding: 60px 50px;position: relative;height: calc(100vh - 70px);scroll-behavior: smooth; }
.modal-body-inner {display: flex;max-width: 1260px;margin: 0 auto;gap: 60px;position: relative;align-items: flex-start; }
.modal-photo {
	position: sticky;
	/* modal-content의 padding-top이 60px이므로, 
	그 위치에 딱 맞추려면 0으로 하거나 약간 띄우려면 20px 정도로 조절하세요. */
	top: 0; 
	flex: 0 0 375px; /* 너비 고정 */
	width: 375px;
	z-index: 10;
}
.modal-photo img {width: 100%;border-radius: 20px;background: #f2f2f2;display: block;}
.modal-info {flex: 1; padding-bottom: 100px; }
.info-header {display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #172e57;border-top: 1px solid #172e57;padding:21px 0;margin-bottom: 48px;}
.pos-tag { font-size: 18px; color: #494949; margin-right: 21px; letter-spacing:-0.02em; font-weight:500;}
.info-header .name { font-size: 40px; font-weight: 700; display: inline; letter-spacing:-0.02em;}
.badge { font-size: 18px; color: #494949; letter-spacing:-0.02em; font-weight:500;}

/* 섹션별 스타일 */
.info-section { margin-bottom: 40px; display:flex; }
.info-section h3 {position: relative;flex:0 0 150px;}
.info-section h3 span { 
	position:relative; padding-left:18px; padding-bottom:8px;
	font-size: 25px;font-weight:500;color: #2a2829;letter-spacing:-0.02em;
}
.info-section h3 span::after { content:""; position:absolute; left:0; bottom:0; display:inline; background:#172e57; height:3px; width:100%; }
.info-section h3 span::before {content: '';position: absolute;left: 0; top: 10px;width: 10px; height: 10px;background: #172e57;border-radius: 50%;}
.info-section ul li {font-size: 18px;color: #222;list-style: none;line-height:1.8;font-weight:400;letter-spacing:-0.02em;position:relative;padding-left:14px;margin-top:-2px;}
.info-section ul li strong { font-weight:400; font-size:18px; color:#222;	}
.info-section>ul>li::before{content:"";display:block;width:4px;height:4px;border-radius:3px;background:#222222;position:absolute;left:0;top:14px;}
.info-section>ul>li>ul>li{ padding-left:0;}
.title-group { display:flex; align-items:center; }
.pos-tag {display: flex;align-items: center;font-size: 18px; /* 예시 크기 */color: #666;}

/* 세로 라인 스타일 */
.split-line {display: inline-block;width: 1px;height: 14px;background-color: #494949;margin: 0 10px; vertical-align: middle;color: #494949;}
.i-more-arrow-white { display:block;width:21.88px; height:18.38px; background:url(../images/doctor/i-more-arrow-white.svg) no-repeat center / 100%; }
.i-close-x { display:block;width:36px; height:36px; background:url(../images/doctor/i-close-x.svg) no-repeat center / 100%; }

body.modal-open {
  overflow: hidden;
  /* (선택사항) 스크롤바가 사라지면서 화면이 덜컹거리는 걸 방지 */
  padding-right: 15px; 
}


/* 반응형 모바일 */
@media (max-width: 960px) {
	.modal-body-inner { flex-direction: column; align-items: center; gap:20px;}
	.modal-photo { flex: 0 0 auto; width: 250px; margin-bottom: 30px; }
	.modal-content { padding: 30px 20px; }
	.info-header { flex-direction: column; align-items: flex-start; gap: 10px; }

	.info-section{ flex-wrap:wrap; }
	.info-section h3 { flex:0 0 100%; }
	.info-section > ul { flex:0 0 100%; padding-top:30px; }
	.info-section > ul li,
	.info-section > ul li strong { font-size:16px; line-height:1.7; display:block; margin-bottom:5px; }
	.info-section > ul li { margin-bottom:5px; }

	.modal-window::after { 
		position:absolute; bottom:48px; right:-170px;z-index:-1;
		opacity:0.5
	}

	.info-header .name { font-size:30px; }
	.badge { font-size:14px; }
}

@media (max-width: 768px) {
	.modal-body-inner { flex-direction: column; /* 세로로 배치 */}
	.modal-photo {position: relative; /* 고정 해제 */width: 100%;top: 0;margin-bottom: 20px;}
}





/* 전체 레이아웃 가로 중앙 정렬 */
.fac-container {
  width: 100%;
  overflow: hidden;
  padding: 50px 0;
}

.fac-mySwiper {
  width: 100%;
  overflow: visible !important; /* 양옆 슬라이드 흐름을 위해 필수 */
}

/* 1. 기본 슬라이드 설정 (화면의 1/4 = 25%) */
.fac-mySwiper .swiper-slide {
  width: 25% !important; 
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0.5;
  filter: grayscale(1); /* 비활성 요소는 흑백 처리 (선택) */
}

/* 2. 센터(Active) 슬라이드 설정 (화면의 1/2 = 50%) */
.fac-mySwiper .swiper-slide-active {
  width: 50% !important;
  opacity: 1;
  filter: grayscale(0);
}

/* 이미지 박스 비율 유지 (가로:세로 비율 설정) */
.fac-mySwiper .img-box {
  width: 100%;
  padding-bottom: 60%; /* 이미지 높이 조절 (필요시 조정) */
  position: relative;
  border-radius: 40px;
  overflow: hidden;
}

.fac-mySwiper .img-box img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* 버튼 디자인 */
.fac-mySwiper .swiper-button-next,
.fac-mySwiper .swiper-button-prev {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #003366;
  color: #003366;
}

/* 하단 프로그레스 바 */
.fac-mySwiper .swiper-pagination-progressbar {
  width: 40% !important; /* 바 길이를 화면의 40%로 설정 */
  height: 2px !important;
  left: 30% !important; /* 가운데 정렬 */
  bottom: 0 !important;
  top: auto !important;
  background: rgba(0, 0, 0, 0.1);
}
.fac-mySwiper .swiper-pagination-progressbar-fill {
  background: #003366 !important;
}




/* 섹션 전체 설정 */
.fac-section {
  width: 100%;
  overflow: hidden;
  padding: 0 0 0;
  height: 950px;
  position:relative;
  margin-top:-90px;
}
.fac-mySwiper {
  width: 100%;
  /* 양 옆으로 슬라이드가 흐르는 것을 보여주기 위해 visible 설정 */
  overflow: visible !important; 
}

/* 1. 기본 슬라이드: 가로 너비 25% */
.fac-mySwiper .swiper-slide {
  width: 665px !important;
  height:460px !important;
  transition: all 0.6s ease; /* 크기 변화를 부드럽게 */
  opacity: 1;
  transform: scale(0.9); /* 비활성 상태는 살짝 작게 보일 수도 있음 (선택) */
  display: flex;
  align-items: center; 
  justify-content: center;
  margin:0 120px;
}

.fac-mySwiper .swiper-slide-active {
  /* 665px -> 939px이 되도록 약 1.41배 확대 */
  /* transform은 주변 슬라이드 위치에 영향을 주지 않아 루프가 깨지지 않습니다. */
  transform: scale(1.412); 
  margin-top:24px;
}

/* 이미지 박스 비율 (939:650 비율 유지) */
.fac-mySwiper .fac-img-box {
  width: 100%;
  aspect-ratio: 939 / 650; 
  border-radius: 0 90px 0 90px;
  overflow: hidden;
}

.fac-mySwiper .swiper-slide-active {
   transform-origin: center top;
   opacity: 1;
}
.fac-mySwiper .fac-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fac-section .swiper-button-next { 
	width:70px; height:70px; border-radius:35px; cursor:pointer;
	position:absolute; left:50%; top:230px; transform:translateX(-572px);
	background:url(../images/sub/swp-prev.svg) no-repeat center / 100%;
}
.fac-section .swiper-button-prev { 
	width:70px; height:70px; border-radius:35px; cursor:pointer;
	position:absolute; left:50%; top:230px; transform:translateX(500px);
	background:url(../images/sub/swp-next.svg) no-repeat center / 100%;
}

.fac-section .swiper-pagination { position:absolute; left:50%; top:739px; transform:translateX(-50%); z-index:111; height:1px; width:950px;  }
.fac-section .swiper-pagination .swiper-pagination-progressbar { background:#696971; height:1px; }
.fac-section .swiper-pagination .swiper-pagination-progressbar-fill { background:#172e57; height:3px; top:-1px;}


/* --- [반응형 추가] --- */

/* 1. 테블릿 (1440px 이하) */
@media screen and (max-width: 1440px) {
    .fac-section .swiper-button-next { transform: translateX(-48vw); }
    .fac-section .swiper-button-prev { transform: translateX(40vw); }
    .fac-section .swiper-pagination { width: 80%; }
}

/* 2. 일반 테블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .fac-section { height: 750px; margin-top: 0; }
    .fac-mySwiper .swiper-slide { width: 450px !important; height: 320px !important; margin: 0 30px; }
    .fac-mySwiper .swiper-slide-active { transform: scale(1.3); } /* 확대 비율 축소 */
    
    .fac-section .swiper-button-next, .fac-section .swiper-button-prev { top: 180px; width: 50px; height: 50px; }
    .fac-section .swiper-pagination { top: 600px; }

}

/* 3. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .fac-section { height: 550px; }
    
    .fac-mySwiper .swiper-slide { 
        width: 75vw !important; /* 화면 너비의 75% 차지 */
        height: auto !important; 
        margin: 0 10px; 
    }
    .fac-mySwiper .swiper-slide-active { transform: scale(1.15); margin-top: 10px; }
    .fac-mySwiper .fac-img-box { border-radius: 0 50px 0 50px; } /* 라운드 축소 */

    /* 모바일에서는 버튼을 하단 양옆으로 재배치 */
    .fac-section .swiper-button-next { left: 20px; transform: none; top: 450px; width: 40px; height: 40px; }
    .fac-section .swiper-button-prev { left: auto; right: 20px; transform: none; top: 450px; width: 40px; height: 40px; }

    .fac-section .swiper-pagination { top: 470px; width: calc(100% - 150px); }
}

/* 4. 초소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .fac-section { height: 450px; }
    .fac-mySwiper .swiper-slide-active { transform: scale(1.1); }
    .fac-section .swiper-pagination { top: 357px; }
    .fac-section .swiper-button-next, .fac-section .swiper-button-prev { top: 360px; }
}


.equp-section {
  width: 100%;
  overflow: hidden;
  height: 1300px; /* 텍스트 공간을 고려해 높이 상향 */
  position: relative;
  margin-top:-90px;
}

.equp-mySwiper {
  width: 100%;
  /* 양 옆으로 슬라이드가 흐르는 것을 보여주기 위해 visible 설정 */
  overflow: visible !important; 
}

/* 1. 기본 슬라이드: 가로 너비 25% */
.equp-mySwiper .swiper-slide {
  width: 665px !important;
  height:460px !important;
  transition: all 0.6s ease; /* 크기 변화를 부드럽게 */
  opacity: 1;
  transform: scale(0.9); /* 비활성 상태는 살짝 작게 보일 수도 있음 (선택) */
  display: flex;
  flex-direction:column;
  align-items: center; 
  justify-content: flex-start;
  margin:0 120px;

}

.equp-mySwiper .swiper-slide-active {
  /* 665px -> 939px이 되도록 약 1.41배 확대 */
  /* transform은 주변 슬라이드 위치에 영향을 주지 않아 루프가 깨지지 않습니다. */
  transform: scale(1.412); 
  height: 950px !important;
  opacity: 1;
  transform-origin: center top;
  display:flex;
  align-items:center
 }

.equp-mySwiper .swiper-slide-active .equp-img-box {
  width: 100%;
  aspect-ratio: 939 / 650;
  border-radius: 0 90px 0 90px;
  overflow: hidden;
  display:flex;
  align-items:flex-start;
  transform-origin: center top;
  margin-top:15px;
}
.equp-mySwiper .equp-img-box img { width: 100%; height: 100%; object-fit: cover; }

/* 텍스트 박스 기본 설정 (평소엔 숨김) */
.equp-mySwiper .equp-info {
  margin-top: 85px;
  text-align: center;
  opacity: 0;
  transition: all 0.5s ease;
  transform: translateY(20px);
}

/* 활성화된 슬라이드의 텍스트만 노출 */
.equp-mySwiper .swiper-slide-active .equp-info {
  opacity: 1;
  transform: translateY(0);
}

.equp-info .tit { display: block; font-size: 34px; color: #222; margin-bottom: 25px; font-weight: 700; letter-spacing:-0.02em;}
.equp-info .txt { display:block; letter-spacing:-0.02em; font-size: 18px; color: #222; line-height:150%; text-align:center;}

.equp-section .equp-button-next { 
	width:70px; height:70px; border-radius:35px; 
	position:absolute; left:50%; top:200px; transform:translateX(-572px);
	background:url(../images/sub/swp-prev.svg) no-repeat center / 100%;
	z-index:111;
	cursor:pointer;
}
.equp-section .equp-button-prev { 
	width:70px; height:70px; border-radius:35px; 
	position:absolute; left:50%; top:200px; transform:translateX(500px);
	background:url(../images/sub/swp-next.svg) no-repeat center / 100%;
	z-index:111;
	cursor:pointer;
}

.equp-section .equp-pagination { position:absolute; left:50%; top:739px; transform:translateX(-50%); z-index:111; height:1px; width:950px;  }
.equp-section .equp-pagination .swiper-pagination-progressbar { background:#696971; height:1px; }
.equp-section .equp-pagination .swiper-pagination-progressbar-fill { background:#172e57; height:3px; top:-1px;}


/* --- [반응형 구간] --- */

/* 1. 테블릿 (1200px 이하) */
@media screen and (max-width: 1200px) {
    .equp-section { height: 1100px; }
    .equp-mySwiper .swiper-slide { width: 450px !important; margin: 0 40px; }
    .equp-mySwiper .swiper-slide-active { transform: scale(1.25); height: 800px !important; }
    
    .equp-section .equp-button-next { transform: translateX(-45vw); }
    .equp-section .equp-button-prev { transform: translateX(38vw); }
    .equp-section .equp-pagination { width: 80%; }
}

/* 2. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .equp-section { height: 850px; margin-top: -50px; }
    
    .equp-mySwiper .swiper-slide { 
        width: 80vw !important; 
        height: auto !important; 
        margin: 0 10px; 
        transform: scale(0.9);
    }
    .equp-mySwiper .swiper-slide-active { 
        transform: scale(1.1); 
        height: auto !important; 
        margin-top: 10px;
    }

    .equp-mySwiper .fac-img-box { border-radius: 0 40px 0 40px; }

    /* 모바일 텍스트 줄바꿈 필수 설정 */
    .equp-info .txt span { 
        white-space: normal; /* 한 줄 제한 해제 */
        word-break: keep-all; 
        font-size: 16px;
        margin-bottom: 5px;
    }
    .equp-info .tit { font-size: 24px; margin-bottom: 15px; }
    .equp-mySwiper .equp-info { margin-top: 30px; padding: 0 10px; }

    /* 버튼 위치 조정 */
    .equp-section .equp-button-next { left: 20px; transform: none; top: 150px; width: 45px; height: 45px; }
    .equp-section .equp-button-prev { left: auto; right: 20px; transform: none; top: 150px; width: 45px; height: 45px; }

    .equp-section .equp-pagination { top: 750px; width: calc(100% - 40px);  display:none;}
}

/* 3. 초소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .equp-section { height: 750px; }
    .equp-info .tit { font-size: 20px; line-height:1.2; word-break:keep-all; }
    .equp-info .txt { font-size: 14px; word-break:keep-all; line-height:1.7;}
    .equp-section .equp-pagination { top: 680px;}
}

.block-inline { display:block; }
.br{ display:none; }
.equp-info .txt br {
    display: block; 
}

/* 화면 너비가 768px 이하일 때 (모바일/태블릿) */
@media screen and (max-width: 1024px) {
	.equp-info { width:100%; padding:0 30px; }
    .equp-info .txt br {
	   display:inline;
    }
    
    /* 줄바꿈이 사라졌을 때 글자가 너무 붙는다면 공백을 강제로 삽입 */
    .equp-info .txt br::after {
        content: " "; 
        display: inline;
    }

	.br { display:block;}
	.block-inline { display:inline; }
}




.m-sec0-wrap { display:none; }
.m-section0 { display:none; }
.m-section1 { display:none; }

 @media screen and (max-width: 1024px) {
    /* 1. 메인 섹션: 고정(Pin) 및 트리거 지점 */
	

	#m-section0 { 
		position: relative; 
		display: flex;
		justify-content: center;
		align-items: flex-start; /* 초기 위치: 바닥 */
		height: 100vh;
		width: 100vw;
		overflow: hidden;
	}

	.m-sec0-wrap {
		position: absolute;
		top:-75vh; 
		left:50%;
		width: 280px;
		height: 280px;
		border-radius: 50%;
		background-color: var(--all-point-color, #1d3b70);
		transform:translateX(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
		/* 성능 최적화 */
		will-change: transform, width, height, border-radius;
		z-index: 100;
	}

	.m-sec0-wrap i { width: 60%; position:relative; display:block; }
	.m-sec0-wrap i img { width: 100%; }

	.m-section1-swiper-wrap {
        position: relative;
        width: 100%;
        height: auto;
        z-index: 10; 
        opacity: 1;
		overflow:hidden;
    }


	.section1 { display:none; }
	#m-section1 {
        position: relative;
        width: 100%;
		display:block;
		height:auto;
		overflow: hidden;
    }
	.m-section1-bg-swiper {
		position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
		z-index: 1; /* 콘텐츠보다 뒤로 */
		
	}
	.m-section1-bg-slide .bg-img {
		width: 100%; height: 100%;
		background-size: cover;
		background-position: center;
	}

	/* 콘텐츠 Swiper 레이어 */
	.m-section1-wrap {
		position: relative;
		z-index: 2; /* 배경보다 앞으로 */
		padding: 70px 0 50px 0; /* 로고와 겹치지 않게 여백 조정 */
		width:100%;
		overflow-x:hidden;
	}


	/* (기존 스타일 유지) */
	.m-section1-swiper { padding-left: 20px; overflow: visible; }
	.m-section1-card { padding-right: 32px; color: #fff; }

	/* Swiper 여백 설정 (우측이 짤려 보이게 하기 위해) */
	.m-section1-swiper { padding-left: 20px; overflow: visible; }

	/* 상단 타이틀 */
	.m-section1-top-title { font-size: 24px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; color:#fff; padding-left:18px; position:relative;}
	.m-section1-top-title span { width:13px; height:13px; background:url(../images/i-m-plus.svg) no-repeat center / 100%; display:inline-block; position:absolute; left:0; top:-5px;}

	/* 이미지 박스 (이미지의 비정형 라운드 구현) */
	.m-section1-img-box { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 25px; }
	.m-section1-img-box img { width: 100%; height: 100%; object-fit: cover; }

	/* 텍스트 정보 */
	.m-section1-sub { font-size: 14px; color: #fff; margin-bottom: 10px; letter-spacing: 0.05em; }
	.m-section1-main-tit { font-size: 20px; line-height: 1.4; margin-bottom: 15px; font-weight: 600; color:#fff;}
	.m-section1-desc { font-size: 14px; color: #fff; line-height: 1.6; margin-bottom: 25px; word-break: keep-all; }

	/* 버튼 스타일 */
	a.m-section1-more-btn { 
		display: inline-flex; align-items: center; justify-content:center;
		border: 1px solid rgba(255,255,255,0.6); border-radius: 30px; 
		color: #fff; text-decoration: none; font-size: 16px; transition: 0.3s;
		height:56px;
		width:150px;
		background:rgba(255,255,255,1);
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(4px);           
		-webkit-backdrop-filter: blur(4px); 

	}
	a.m-section1-more-btn i { margin-left: 8px; width:13px; height:14px; background:url(../images/i-m-arrow.svg) no-repeat center / 100%; display:inline-block;}


	.m-section1-swiper .swiper-slide .m-section1-info { opacity:0; transition:all 0.3s; }
	.m-section1-swiper .swiper-slide.swiper-slide-active .m-section1-info { opacity:1;}
}


.m-section2 { display:none; }
@media (max-width:1024px){
	.section2 { display:none; }

	/* 섹션 배경 */
	.m-section2 { background: rgba(237,237,237,1); padding: 60px 0; overflow: hidden; display:block; }
	.m-section2 h2 { padding: 0 20px 30px;}
	.m-section2 h2 span { display:block; font-size:26px; font-weight:500; line-height:1; }
	.m-section2 h2 strong { display:block; font-size:30px; font-weight:700; line-height:1; margin-top:10px; }

	/* Swiper 설정 (우측 걸치기 효과용) */
	.m-section2-swiper { padding-left: 20px; overflow: visible; }

	.m-section2-card { padding-right: 20px; }

	/* 이미지 박스 (흰색 배경 + 비정형 라운드) */
	.m-section2-img-box { 
		width: 100%; 
		display: flex; 
		align-items: center; 
		justify-content: center; 
		box-sizing: border-box;
		overflow:hidden;
		border-radius:30px 0 30px 0;
	}
	.m-section2-img-box img { width: 100%; height: 100%; object-fit: cover; }

	.m-section2-info { 
		padding: 30px 0; 
		/* 애니메이션 설정 */
		opacity: 0;              /* 투명하게 */
		visibility: hidden;      /* 클릭 등 상호작용 방지 */
		transform: translateY(20px); /* 아래에서 위로 올라오는 효과용 */
		transition: all 0.5s ease;   /* 0.5초 동안 부드럽게 변경 */
	}
	/* 장비명 태그 (파란색 박스) */
	.m-section2-name-tag { 
		display: inline-block; 
		background: #2b3b56; 
		padding: 15px 25px; 
		border-radius: 10px; 
		font-size: 16px; 
		font-weight: 600; 
		margin-bottom: 15px; 
		color:#fff;
	}

	/* 설명글 */
	.m-section2-desc { 
		font-size: 14px; 
		line-height: 1.6; 
		color: #000; 
		word-break: keep-all; 
		font-weight: 400;
		transition:all 0.5s;
	}

	.swiper-slide-active .m-section2-info {
		opacity: 1;
		visibility: visible;
		transform: translateY(0); /* 제자리로 복귀 */
	}

	.swiper-slide-active .m-section2-name-tag {
		transition-delay: 0.1s;
	}
	.swiper-slide-active .m-section2-desc {
		transition-delay: 0.2s;
	}

}



/* ==========================================================
   Mobile Responsive (1024px 이하)
========================================================== */
@media screen and (max-width: 1024px) {
    /* 섹션 패딩 및 배경 조정 */
    .section3 { 
		background:#ededed;
        padding: 40px 20px 40px; 
    }
    
    .section3 h2 { margin-top: 0; text-align: center; padding-bottom:40px;}
    .section3 h2 span { font-size: 20px; }
    .section3 h2 strong { font-size: 40px; margin-top: 10px; margin-bottom: 20px; }

    /* 리스트 아이템 세로 정렬 */
    .section3-spec > div { 
        flex-direction: column; /* 세로로 나열 */
        align-items: center; 
        margin-bottom: 60px; 
		width:100%;
    }
    
    /* 개별 정렬 초기화 */
    .section3-spec > div.sec3-first,
    .section3-spec > div.sec3-second,
    .section3-spec > div.sec3-third { 
        margin-top: 0; 
        justify-content: center; 
    }

    /* 이미지 박스 */
    .spec-img { width: 100% !important; text-align: center; }
    .spec-img img { width: 100%; max-width: 100%; height: auto; }

    /* 텍스트 영역 조정 */
    .spec-text { 
        padding-left: 0 !important; 
        padding-right: 0 !important; 
        padding-top: 30px; 
        align-items: center !important; 
        text-align: center !important; 
        order: 2 !important; /* 항상 이미지 아래로 */
		width:100% !important;
    }

    /* 뱃지(MY special) */
    .spec-text em span { font-size: 14px; height: 26px; }

    /* 메인 설명 텍스트 */
    .spec-text p { margin-top: 15px; }
    .spec-text p span { 
        font-size: 24px; /* 48px에서 24px로 대폭 축소 */
        line-height: 1.3; 
        word-break: keep-all; /* 한글 단어 끊김 방지 */
    }

    /* Inverse 레이아웃 초기화 */
    .section3-spec .inverse .spec-img { order: 1; }
    .section3-spec .inverse .spec-text { order: 2; }
}


@media (max-width:1024px){
	.mblock { display:block; }
	.mblock img { width:100%; }
}

@media screen and (max-width: 1024px) {
    /* 전체 컨테이너 조정 */
    .section4 { padding: 0 13px; background:#ededed; }
    
    .section4-inner {
        transform: scale(1); /* PC의 축소 효과 제거 */
        top: 0;
        border-radius: 40px; /* 모바일에 맞는 곡률 */
        background-image: linear-gradient(to bottom, #eeeeee 0%, #ffffff 100%);
        padding-bottom: 0;
    }

    /* 상단 텍스트 및 버튼 영역 */
    .section4-top {
        flex-direction: column;
        align-items: center;
		justify-content:center;
        padding: 80px 20px 40px;
        text-align: center;
    }
	.doctor-txt { display:flex; flex-direction:column; align-items:center; }
	.doctor-txt h3 { text-align:center; }
    .doctor-txt h3 span {
        font-size: 26px; /* 모바일 가독성 사이즈 */
        line-height: 1.3;
        word-break: keep-all;

    }

    /* 자세히 보기 버튼 (디자인 반영) */
    a.btn-more-view-dark {
        margin-top: 30px;
        display: inline-flex;
        align-items: center;
		justify-content:center;
        padding: 12px 10px;
        border: 1px solid #333;
        border-radius: 50px;
        background: transparent;
        color: #333;
        text-decoration: none;
        font-size: 16px;
		width:170px;
    }
    a.btn-more-view-dark i { margin-left: 10px; }

    /* 로고 숨기기 (디자인에 없음) 및 이미지 배치 */
    .doctor-logo { display: none; }
    
    .section4-bottom {
        height: auto;
        background: none;
    }
    .section4-bottom img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* 하단 데이터 영역 (다크 블루) */
    .section4-data {
        position: relative;
        height: auto;
        flex-direction: column;
        padding: 40px 10px 60px;
        background: #1a2a4e; /* 디자인의 진한 남색 */
		width:100%;
    }

    .section4-data > article {
        width: 100%;
        margin-bottom: 30px;
        justify-content: flex-start;
		padding-left:40px;
    }
    .section4-data > article:last-child { margin-bottom: 0; }

    .dc-inner {
        width: 100%;
		flex-wrap:wrap;
		justify-content:flex-start;
    }

    .dc-inner > em {
        font-size: 16px;
        color: #c5c5c5;
        margin-bottom: 0;
		flex:0 0 70px;
		margin-right:0;
		margin-top:3px;
    }

    /* 프로그레스 바 */
    .dc-inner > div em.bar {
        width: 100%;
        height: 2px;
        background: rgba(255,255,255,0.2);
    }
    .dc-inner > div em.bar i { background: rgba(255,255,255,0.2); }
    .dc-inner > div em span { background: #fff; height: 2px; }

    /* 숫자 텍스트 */
    .dc-inner > div div {
        justify-content: flex-start;
        padding-top: 10px;
    }
    .dc-inner > div div strong {
        font-size: 45px;
        color: #fff;
    }
    .dc-inner > div div span {
        color: #fff;
        font-size: 18px;
        padding-bottom: 8px;
    }
}


/* ==========================================================
   Mobile Responsive (1000px 이하)
========================================================== */
@media screen and (max-width: 1024px) {


.represent-fixed {padding-top:clamp(6.25rem, 13.89vh, 9.375rem); }
.represent-fixed h2 {display: flex;flex-direction: column;}
.represent-fixed h2 span {font-size:clamp(1.75rem, 1.77vw, 2.125rem);color:var(--text-main-color);font-weight:500;opacity: 1;transition: all 0.5s;display: block;}
.represent-fixed h2 strong{font-size:clamp(3.2rem, 3.39vw, 4.0625rem);color:var(--text-main-color);font-weight:700;margin-top:28px;margin-bottom:50px;opacity: 1;transition: all 0.5s;display: block;}
.represent-fixed > a {opacity: 0;transition: all 0.5s;}


    /* 섹션 초기화: GSAP Pin 효과를 대비해 잡혔던 높이와 숨김 해제 */
    .treatment_sect { 
        height: auto !important; 
        overflow: visible !important; 
        padding: 100px 20px 60px; 
		background:#ededed;
    }

    /* 상단 타이틀 중앙 정렬 */
    .treatment_sect .cont_in { 
        flex-direction: column; 
        padding: 0; 
        align-items: center; 
    }

    .represent-fixed { 
        padding-top: 0; 
        text-align: center; 
        margin-bottom: 60px; 
    }
	.represent-fixed h2 { text-align:center; }
	.represent-fixed h2 span { font-size:26px; margin-bottom:10px;  }
    .represent-fixed h2 strong { font-size:30px; margin-bottom: 0 !important; margin-top:0; }
	.represent-fixed a.btn-more-view-dark { margin-top:25px; }

/* 리스트 레이아웃: 2열 그리드 */
    .treatment_sect .treatment_list { 
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
        width: 100%; 
        gap: 20px; /* 아이템 사이 상하좌우 간격 */
        align-items: start; /* 중요: 아이템이 위쪽 정렬되어야 마진이 정확히 먹힙니다 */
        transform: none !important;
    }

    /* 아이템 가시성 확보 (GSAP이 안 돌아가므로 직접 표시) */
    .treatment_sect .treatment_list .item { 
        opacity: 1 !important; 
        filter: blur(0) !important; 
        transform: none !important; 
        border-radius: 10px 0 10px 10px; /* 모바일 디자인에 맞게 곡률 조정 */
    }

	/* 우측 아이템(2, 4번) 위치 조정 */
    .treatment_sect .treatment_list .item:nth-child(2n) { 
        /* 이미지 박스 높이가 가로 대비 130%이므로, 
           그 절반인 65%를 상단 마진으로 주면 정확히 왼쪽 이미지의 중간에서 시작합니다.
        */
        margin-top: 65%; 
        margin-bottom: -65%; /* 다음 줄과의 간격을 일정하게 유지하기 위해 추가 */
    }



    /* 텍스트 박스 디자인 조정 */
    .treatment_sect .treatment_list .item .txt_box { 
        padding: 20px 15px; 
    }
    
    /* 배경 숫자 디자인: 디자인처럼 겹쳐 보이게 조정 */
    .treatment_sect .treatment_list .item .txt_box span { 
        font-size: 55px; 
        line-height: 0.8;
        opacity: 0.3; /* 디자인의 은은한 느낌 반영 */
        -webkit-text-stroke: 1px rgba(255,255,255,0.5); /* 숫자를 흰색 테두리로 변경 가능 */
    }

    .treatment_sect .treatment_list .item .txt_box .tit { 
        font-size: 20px; 
        margin-top: 0; 
        word-break: keep-all; 
    }

    /* 이미지 비율 조정 */
    .treatment_sect .treatment_list .item .img_box { padding-top: 130%; }
}



/* ==========================================================
   Mobile Responsive (1024px 이하)
========================================================== */
@media screen and (max-width: 1024px) {
    /* 섹션 높이 자동 조절 */
    .section6 { height: auto; }
    
    .section6-inner {
        flex-direction: column; /* 세로 나열 */
        height: auto;
        border-bottom: none;
    }

    /* 개별 카드 스타일 초기화 */
    .section6-inner article {
        width: 100% !important; /* PC의 너비 설정 무시 */
        height: 228px; /* 모바일 카드 높이 */
        padding: 0 16px 22px;
        border-left: none !important;
        border-bottom: 1px solid #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        text-align: left;
    }

    /* 영문 타이틀 (회전 복구) */
    .section6-inner article i {
        position: static;
        transform: rotate(0deg); /* 회전 제거 */
        font-size: 16px;
        margin-bottom: 5px;
        color: #696971;
    }

    /* 메인 타이틀 */
    .section6-inner article h3 {
        position: static;
        margin-bottom: 0;
		text-align:left;
    }
    .section6-inner article h3 span {
        display: inline-block; /* 한 줄로 나열 가능하게 */
        font-size: 26px;
        margin: 0 0;
		color:#000;
    }
	.section6-inner article::before{display:none;}

    /* 리스트(불렛) 표시 */
    .section6-inner article ul {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        position: static;
        display: flex;
        flex-wrap: wrap; /* 모바일 화면 폭에 맞춰 줄바꿈 */
        justify-content: flex-start;
        gap: 5px;
    }

    .section6-inner article ul li {
        margin-right: 0;
        padding: 5px 6px;
        font-size: 14px;
		border-radius:3px;
		border:1px solid #000;
		font-weight:700;
    }


}




/* 반응형일 때도 너비가 부모를 따라가므로 별도 width 지정 불필요 */
@media screen and (max-width: 1024px) {

	/* 부모 컨테이너가 이미지 크기에 딱 맞게 줄어들도록 설정 */
	article.img {
		position: relative !important;
		display: inline-block !important; /* 핵심: 컨테이너가 이미지 너비만큼만 차지함 */
		line-height: 0 !important; /* 하단 미세 여백 제거 */
	}

	article.img .pimg {
		position: relative !important;
		z-index: 7 !important;
	}

	article.img .pimg img {
		width: 100% !important; /* 부모 너비에 맞춤 */
		height: auto !important;
	}

	.point-round {
		display: block !important;
		position: absolute !important;
		right: -20px !important; /* 메인 이미지 밖으로 살짝 삐져나오게 하려면 조정 */
		top: 20px !important;
		width: 90% !important; /* 부모(article.img) 너비, 즉 메인 이미지 너비를 그대로 따라감 */
		z-index: 1 !important; /* pimg보다 뒤로 보냄 */
	}
	.point-round { right: 10px !important; top: 20px !important; }
	.mCon-div.inverse .point-round { right: -10px !important; }

	article.dia { padding:0 30px; text-align:center; position:relative; }
	article.dia .img {
		position: relative !important;
		display: inline-block !important; /* 핵심: 컨테이너가 이미지 너비만큼만 차지함 */
		line-height: 0 !important; /* 하단 미세 여백 제거 */
	}
    article.dia .img .pimg {
		position: relative !important;
		z-index: 7 !important;
        left: 0; /* 겹침 효과 제거하거나 줄임 */
        max-width: none !important;
		width:100% !important;
		height: auto !important;
    }
    article.dia .point-round {
		display: block !important;
		position: absolute !important;
		right: -10px !important; /* 메인 이미지 밖으로 살짝 삐져나오게 하려면 조정 */
		top: 0 !important;
		width: 100% !important; /* 부모(article.img) 너비, 즉 메인 이미지 너비를 그대로 따라감 */
		z-index: 1 !important; /* pimg보다 뒤로 보냄 */
    }

	article.dia .point-round { right: 10px !important; top: 0 !important; }
	article.dia.inverse .point-round { right: -10px !important; }

}

.hd_pops_footer strong { color:#fff !important; }
.hd_pops_close i { color:#fff !important; font-weight:300}

@media (max-width:1024px){
	#hd_pop  { width:100% !important; height:auto !important; }
	#hd_pop .hd_pops { top:70px !important; }
	#hd_pop .hd_pops .hd_pops_con { width:100% !important; height:auto !important; }
	#hd_pop .hd_pops .hd_pops_con img { max-width:100% !important; width:100% !important; }
}