@import url('https://fonts.googleapis.com/css2?family=Marcellus&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('/css/pretendard.css');
:root {
  --desktop-width: 1920; /* 시안 기준 너비 */
}

html {
  /* 1920px 기준 10px로 작동하며 최소 8px, 최대 12px로 제한 */
  font-size: clamp(8px, calc(100vw / var(--desktop-width) * 10), 12px);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Pretendard', sans-serif;}
html, body { overflow: hidden; height: 100%; font-family: 'Pretendard', sans-serif; background-color: #111; letter-spacing:-0.025em;}
em,i {font-style:normal;}
a,a:hover{text-decoration:none;color:#000;}

.blind {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;white-space: nowrap;clip: rect(0, 0, 0, 0);clip-path: inset(50%);border: 0;}


#main-wrapper {width: 100%; height: 100%;transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);will-change: transform;}
section {width: 100%; height: 100vh;display: flex; justify-content: center; align-items: center;color: white; text-align: center; position: relative;}

.section1 { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); }
.content > * {opacity: 0;transform: translateY(6rem);transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);}
section.active .content > * {opacity: 1;	transform: translateY(0);}

section.active .content h1 { transition-delay: 0.1s; }
section.active .content p  { transition-delay: 0.3s; }
section.active .content .counter-container { transition-delay: 0.5s; }

section.active .counter-container article:nth-child(1) { transition-delay: 0.6s; }
section.active .counter-container article:nth-child(2) { transition-delay: 0.8s; }
section.active .counter-container article:nth-child(3) { transition-delay: 1.0s; }


/* 내비게이션 점 디자인 */
.nav-dots {
	position: fixed; left: 4rem; top: 50%; transform: translateY(-50%);
	display: flex; flex-direction: column; align-items: center;
	gap: 0.5rem; width:12rem; z-index: 1000; justify-content:center;
}
.dot {
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; flex-direction:column; width:100%; padding:1rem 0;
}
.dot::after {
	content:""; width: 0.8rem; height: 0.8rem;
	border:1px solid #fff;
	margin:0 auto; 
	
	display:block;
}
.dot span {
	display: none; flex-direction:column; align-items: center;
	gap: 0.8rem; color: white; font-size: 1.4rem; font-weight: 500;
	opacity: 0; transform: translateY(1rem);

}
.dot span i {
	display: inline-block; width: 2rem; height: 2rem;
	background-size: cover; background-position: center;
	background-image: url('https://cdn-icons-png.flaticon.com/512/1077/1077114.png');
	filter: invert(1);
}
.dot.active span { display: flex; opacity: 1; transform: translateY(0); }
.dot.active::after { display:none; }


.mobile-block { display:none; }
@media (max-width:640px){
	.nav-dots { left:1.5rem; display:none; }
	.mobile-block { display:block; }
}

.section2-active .dot span { color: #fff; }
.section2-active .dot span i { filter: invert(0); }
.section2-active .dot::after { border:1px solid #fff; }
.section2-active .logo { color: #fff; }

.section3-active .dot span { color: #000; }
.section3-active .dot span i { filter: invert(0); }
.section3-active .dot::after { border:1px solid #000; }
.section3-active .logo { color: #000; }

.section4-active .dot span { color: #000; }
.section4-active .dot span i { filter: invert(0); }
.section4-active .dot::after { border:1px solid #000; }
.section4-active .logo { color: #000; }

.section5-active .dot span { color: #000; }
.section5-active .dot span i { filter: invert(0); }
.section5-active .dot::after { border:1px solid #000; }
.section5-active .logo { color: #000; }

.section6-active .dot span { color: #fff; }
.section6-active .dot span i { filter: invert(0); }
.section6-active .dot::after { border:1px solid #fff; }
.section6-active .logo { color: #fff; }

.section8-active .dot span { color: #fff; }
.section8-active .dot span i { filter: invert(0); }
.section8-active .dot::after { border:1px solid #fff; }
.section8-active .logo { color: #fff; }

.section8-active .dot span { color: #000; }
.section8-active .dot span i { filter: invert(0); }
.section8-active .dot::after { border:1px solid #000; }
.section8-active .logo { color: #000; }



/* ── 상단 네비게이션 ── */
.hero-nav {
	position: fixed;
	left:0; top:0;z-index: 10;width: 100%;display: flex;align-items: center;
	padding: 3.2rem 10.9rem; gap: 0; justify-content:center;
	height:94px;
}
.hero-logo { position:absolute; left:10.9rem; top:50%; transform:translateY(-50%);z-index:10;}
.hero-logo h1 .logo {transition: all 0.5s ease;width:20.9rem; height:4.4rem;background:url(../images/logo.svg) no-repeat center / 100%; display:block;}
.hero-menu { display: flex;  list-style: none;  gap: 2.2rem;}
.hero-menu li { padding:0 0; }
.hero-menu li a {
  color: rgba(255,255,255,1);
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 700;
  transition: color 0.5s ease-out 0.3s;
  font-family: 'Noto Sans KR', sans-serif;
}
.hero-menu a:hover { color: #fff; }

a.hero-tour-btn {
	position:absolute; right:10.9rem; top:50%; transform:translateY(-50%);
	display: flex;align-items: center;
	justify-content:center;
	width:12.9rem;height:3.5rem;
	border: 1px solid rgba(255,255,255,1);
	color: #fff;
	text-decoration: none;
	padding: 0.6rem 1.5rem;
	border-radius: 999px;
	font-size: 1.6rem;
	line-height:1;
	font-weight: 700;
	transition: background 0.25s, color 0.25s;
	z-index:10;
}
.hero-tour-btn:hover {background: rgba(255,255,255,0.15);}


.header.on .hero-logo h1 .logo {background-image:url(../images/logo-b.svg); }

.header.on a.hero-tour-btn {
	color: #fff;
	background-image:linear-gradient(to right, #232323 0%, #65a9df 100%);z-index:10;
}

.hero-menu { display:flex; justify-content: center; align-items:center; position:relative; z-index:102; }
.hero-menu > li { position: relative; text-align:center; }
.hero-menu > li > a { padding-bottom:45px; }
.hero-menu > li > a::after { 
	background: #5765c9; background:#437dea; bottom: -15px; content: ""; display: block; height: 4px; left: 50%;
	position: absolute; transition: all 0.5s ease-out 0.1s; width: 0; 
}
.hero-menu > li > a:hover::after { left: 0; width: 100%; }
.hero-menu > li > a.on::after { left: 0; width: 100%; }


.hero-menu .subMn { position:absolute; padding:0; top:-400px; left:0; overflow: hidden; height:1px; opacity:0; margin-top:10px;}
.hero-menu .subMn ul { padding:25px 0 20px 0; width:auto; }
.hero-menu .subMn ul li { text-align:center; }
.hero-menu .subMn ul li a { 
  color:#000; font-size:16px; padding:13px 0 30px; display:inline-flex; transition:all 0.2s ease; 
  position:relative; font-weight:600; line-height:1.3; 
  white-space:nowrap;
}
.hero-menu .subMn ul li a:hover { color:#5765c9; color:#437dea; }
.hero-menu .subMn ul li a:hover::before { width:100%; }
.hero-menu .subMn ul.sm1 { width:160px; }
.hero-menu .subMn ul.sm2 { width:135px; }
.hero-menu .subMn ul.sm3 { width:190px; }
.hero-menu .subMn ul.sm4 { width:140px; }
.hero-menu .subMn ul.sm5 { width:128px; }
.hero-menu .subMn ul.sm6 { width:130px; }

.header.on .hero-menu > li > a { color:#000; }


.gnbBg { position:absolute; left:0; top:-500px; background:rgba(255,255,255,1); width:100%; height:450px; border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea; z-index:5;}
.gnbBg::before { content:""; position:absolute; left:0; top:94px; border-bottom:1px solid #d1d1d1; width:100%; height:1px; display:block;}
.gnbBg::after { content:""; position:absolute; left:0; bottom:0; width:558px; height:483px; display:block; }

.gnbBg > div { display:flex; height:400px; align-items:flex-end; }

.gnbBg .logoOn { width:211px; height:43px; background:url(/images/logo-white1x.png) no-repeat center / 100%; 
display:block; position:absolute; left:50%; top:22px; margin-left:-650px; z-index:9999; 
}
.gnbBg .logoOn a { display:block; width:100%; height:100%; }

.gnbInner .gnbLeft { position:absolute; left:50%; top:120px; margin-left:-640px; width:220px; height:240px; text-align:left; }
.gnbInner .gnbLeft h3 { border-radius:30px; background-image:linear-gradient(to right, #5765c9, #099ba7); padding:8px 20px; display:inline-block; color:#fff; font-size:16px; line-height:1; font-weight:500; }
.gnbInner .gnbLeft dl { padding:25px 0 0; }
.gnbInner .gnbLeft dl dt { font-size:16px; font-weight:400; padding-bottom:5px; color:#000; }
.gnbInner .gnbLeft dl dd { font-size:25px; font-weight:700; padding-bottom:30px; color:#000; }

.gnbInner .gnbRight { position:absolute; left:50%; top:120px; margin-left:570px; width:360px; height:340px; text-align:left;}
.gnbInner .gnbRight h3 { color:#000; margin-bottom:10px; }
.gnbInner .gnbRight h3 span { font-size:17px; margin-right:5px; font-weight:400; }
.gnbInner .gnbRight h3 strong { font-size:19px; font-weight:700; }

.subLogo { 
	width:211px; height:43px; background:url(/images/logo-ws.png) no-repeat center / 100%; 
	display:block; position:absolute; left:50%; top:55px; margin-left:-650px; z-index:999;
}

.mapTab { display:flex; align-items:center;}
.mapTab li { color:#000; display:inline-flex; margin-right:15px; align-items:center; justify-content:center; height:25px; font-size:16px; line-height:1; font-weight:400; padding:5px 12px; position:relative; cursor: pointer;}
.mapTab li.on { border-radius:30px; background:#16304f; color:#fff;  }
.mapTab li:nth-child(2)::before { content:"";display:block;width:1px;height:10px;background:#000;position:absolute; left:-10px; top:7px; }
.mapTab li:nth-child(2) { margin-left:5px; }
.mapTab li:nth-child(3)::before { content:"";display:block;width:1px;height:10px;background:#000;position:absolute; left:-10px; top:7px; }
.mapTab li:nth-child(3) { margin-left:5px; }
.mapTab li:nth-child(4)::before { content:"";display:block;width:1px;height:10px;background:#000;position:absolute; left:-10px; top:7px; }
.mapTab li:nth-child(4) { margin-left:5px; }


.mapCon { padding:10px 0; position:relative; }
.mapCon > article { opacity:0;height:0; overflow:hidden; transition:all 0.5s ease-out; }
.mapCon > article p { font-size:16px; color:#000; padding:10px 0; }
.mapCon > article div img { width:100%; }
.mapCon > article.on { opacity:1;height:auto; }


/* 기존 CSS에서 오류가 날 수 있는 부분 수정 */
.hero-menu { display:flex; justify-content: center; align-items:center; position:relative; z-index:102; }
.hero-menu > li { position: relative; text-align:center; padding: 0 20px; } /* 간격 추가 */
.hero-menu > li > a { display: block; padding: 20px 0 22px; font-size: 18px; font-weight: 700; }

.hero-menu .subMn { 
    position:absolute; 
    padding:0; 
    top: 100%; /* 메뉴 아래에서 시작 */
    left:50%; 
    transform: translateX(-50%); /* 가운데 정렬 */
    overflow: hidden; 
    height:0; /* 1px 대신 0 */
    opacity:0; 
    visibility: hidden; /* 보이지 않게 처리 */
    transition: all 0.3s ease; /* 기본 트랜지션 추가 */
    z-index: 1000;
}

/* 서브메뉴가 보일 때의 상태 */
.hero-menu .subMn.active {
    height: auto;
    opacity: 1;
    visibility: visible;
}

.hero-menu .subMn ul { padding:25px 0 20px 0; width:auto; list-style: none; }
.hero-menu .subMn ul li a { 
    color:#333; 
    font-size:16px; 
    padding:10px 0; 
    display:block; 
    transition:all 0.2s ease; 
    font-weight:600; 
}
.hero-menu .subMn ul li a:hover { color:#5765c9; color:#437dea;}

/* 배경 레이어 */
.gnbBg { 
    position:absolute; 
    left:0; 
    top:-500px; /* 초기 위치 */
    background:#fff; 
    width:100%; 
    height:500px; 
    border-top:1px solid #eaeaea; 
    border-bottom:1px solid #eaeaea; 
    z-index:5;
    transition: top 0.4s ease; /* 애니메이션 부드럽게 */
}

/* 헤더에 on 클래스가 붙었을 때 글자색 변경 */
.header.on .hero-menu > li > a { color:#000; }







/* ── 우측 SNS 바 ── */
.hero-sns {position: fixed;right: 0;top: 12rem;z-index: 10;display: flex;flex-direction: column;gap: 4px;background:rgba(0,0,0,0.5);padding:2rem 1.2rem;}
.sns-item {
	display: flex;flex-direction: column;align-items: center;gap: 0.4rem;color: rgba(255,255,255,0.85);
	text-decoration: none;padding: 0.5rem 0.4rem;border-radius: 0.8rem;transition: background 0.2s;
}
.sns-label { font-size: 1.4rem; font-weight: 600; color:rgba(203,246,246,1)}

/* ── 하단 스크롤 마우스 ── */
.hero-scroll {position: absolute;bottom: 2.3rem;left: 9rem;z-index: 10;}
.scroll-mouse {width: 2.6rem;height: 4.5rem;border: 2px solid rgba(255,255,255,1);border-radius: 1.3rem;position: relative;}
.scroll-mouse::after {
	content: '';position: absolute;top: 0.6rem;left: 50%;transform: translateX(-50%);width: 1.1rem;height: 1.1rem;
	background: #d9d9d9;border-radius: 0.6rem;animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce { 0%, 100% { top: 0.6rem; opacity: 1; } 60% { top: 2.4rem; opacity: 0.3; } }


/* ===== SECTION 1  ===== */
.section1 { /* background: url('hero_bg.jpg') center center / cover no-repeat;background:#496ec2; */ height:100vh;}
.section1 .content {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;}
.hero-overlay {position: absolute;inset: 0;background: linear-gradient(to bottom,rgba(0,0,0,0.45) 10%,rgba(0,0,0,0.25) 20%,rgba(0,0,0,0.45) 100%);z-index: 1; top:0; left:0; width:100%; height:100%;}


/* 슬라이더 전체 크기 */
.main-hero-swiper {
    width: 100%;
    height: 100%; /* 부모 높이에 맞춤 */
    position: relative;
}

/* 슬라이드 내부 정렬 */
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent; /* 배경 영상이 보이도록 투명하게 */
}

/* 페이지네이션 색상 변경 (선택사항) */
.main-hero-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}
.main-hero-swiper .swiper-pagination-bullet-active {
    background: var(--primary, #007bff); /* 강조색 */
    opacity: 1;
}


/* --- 기존 스타일 유지 및 보정 --- */
.hero-copy { z-index: 10; text-align: center; position: relative; }
.hero-copy .hero-title { font-size: 5.4rem; font-weight: 700; line-height: 1.35; margin-bottom: 3.2rem; text-align: center; }

/* hero-sub의 마진이 .mask 밖으로 나가지 않도록 mask에 마진을 옮깁니다 */
.hero-copy .hero-sub { font-size: 2.2rem; font-weight: 500; color: rgba(255,255,255,0.8); text-align: center; margin-top:1rem; }
.hero-copy a.hero-cta {
  display: inline-flex; justify-content: center; align-items: center;
  width: 20.6rem; height: 4.8rem;
  background: rgba(255,255,255,0.94);
  color: rgba(10,14,18,1);
  text-decoration: none;
  border-radius: 2.4rem;
  font-size: 2rem;
  font-weight: 600;
  transition: background 0.25s, transform 0.2s;
  margin:5.5rem 0 0; 
}
.hero-copy a.hero-cta:hover {background: #fff;transform: translateY(0);}

/* 1. 마스크 설정 (중요: 내부 요소가 완벽히 숨겨지도록) */
.hero-copy .mask {
    overflow: hidden;
    line-height: 1.2;
    text-align: center;
    display: flex; /* 컨테이너 역할을 확실히 하기 위해 block 권장 */
	justify-content:center;
}

/* 2. 내부 요소 초기 상태 (숨김) */
.hero-copy .mask span, 
.hero-copy .mask p, 
.hero-copy .mask a {
    display: flex; /* inline-flex보다 block이 마스킹 제어에 더 유리합니다 */
    transform: translateY(140%); /* 130%보다 조금 더 여유있게 내려서 확실히 숨김 */
    transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
	text-align:center;
	justify-content:center;
}

/* =======================================================
    🌟 Swiper 활성화 시 순차적 등장 (1 -> 2 -> 3)
   ======================================================= */

/* --- 1번: 제목 (Line 1 & 2) --- */
.swiper-slide-active .hero-title .mask:nth-child(1) span {
    transform: translateY(0);
    transition-delay: 0.3s; 
}
.swiper-slide-active .hero-title .mask:nth-child(2) span {
    transform: translateY(0);
    transition-delay: 0.5s; 
}

/* --- 2번: 서브 텍스트 (hero-sub) --- */
/* h2 다음에 나오는 첫 번째 .mask div */
.swiper-slide-active .hero-copy > .mask:nth-of-type(1) p {
    transform: translateY(0);
    transition-delay: 0.95s; /* 제목 완료 후 등장 */
}

/* --- 3번: 버튼 (hero-cta) --- */
/* h2 다음에 나오는 두 번째 .mask div 내부의 a */
.swiper-slide-active .hero-copy > .mask:nth-of-type(2) a {
    transform: translateY(0);
    transition-delay: 1.3s; /* 서브 텍스트 완료 후 등장 */
}

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




/* ===== SECTION 2  ===== */
.section2 {background: url('../images/bg-main-experience.png') center center / cover no-repeat; color:#fff;position:relative;}
.section2::after { content:"";display:block;width:100%;height:100%;background:rgba(0,0,0,0.4); position:absolute; left:0; top:0; z-index:3; }
.section2 .content { position:relative; z-index:10; }
.section2 .content h2 { font-size: 5.4rem; margin-bottom: 3.2rem; font-weight: 700; }
.section2 .content p { font-size: 2.2rem; font-weight: 500; }
.section2 .counter-label { font-size: 2.2rem; color: #fff; font-weight: 700; margin-bottom:3.2rem; display:block;}
.section2 .counter-item { display:flex; justify-content:center; align-items:center; }
.section2 .counter-item .count-num {font-size: 9.2rem; font-weight: 700; color: #fff; display: inline-block;text-align:right;}
.section2 .counter-item em { font-size:5.4rem; font-weight:500; color:#fff; line-height:1; margin-left:0.5rem; margin-right:0.5rem;}
.section2 .counter-item i { font-size:10.2rem; font-weight:100; color:rgba(255,255,255,0.8); line-height:0.6; padding-bottom:1.2rem; display:inline-block; }
.section2 .standard-year { position:absolute; bottom:5rem; width:100%; left:0; text-align:center; font-size:1.8rem; letter-spacing:-0.025em; font-weight:500; color:rgba(255,255,255,0.5); }
.section2 .mask { overflow: hidden; line-height: 1.4; text-align: center; }
.section2 h2 .mask span,
.section2 .mask .hero-sub {
    display: block;
    transform: translateY(130%);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
.section2 .counter-container {
    display: flex; gap: 4rem; margin-top: 14rem; justify-content: center;
    visibility: hidden; /* 초기엔 숨김 */
}
.section2 .counter-container article {
    flex: 0 0 auto;
    opacity: 0; 
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.section2 .counter-container article:nth-child(1) { flex: 0 0 35rem; }
.section2 .counter-container article:nth-child(2) { flex: 0 0 45rem; }
.section2 .counter-container article:nth-child(3) { flex: 0 0 40rem; }


/* =======================================================
    📱 1024px 이하 반응형 스타일 (모바일 & 태블릿)
   ======================================================= */
@media (max-width: 1024px) {
    /* [공통] 섹션 높이 및 레이아웃 조정 */
    section {
        height: auto !important; /* 내용이 넘칠 수 있으므로 auto 허용 */
        min-height: 100vh;      /* 최소 높이는 유지 */
        padding: 8rem 2rem;     /* 상하 여백 확보 */
    }

	.section1 { padding:0; height:100vh !important; }
	section.section7 { padding:0; height:100vh !important;}

	.hero-logo { position:absolute; left:2.5rem; }
	a.hero-tour-btn { display:none; }
	.hero-scroll {position: absolute;bottom: 40px;left: 50%;margin-left:-1.3rem;}

    /* --- SECTION 1 (Hero) --- */
	.hero-copy { padding:0 5%; }
    .hero-copy .hero-title {
        font-size: 3.6rem;      /* 5.4rem -> 3.6rem 축소 */
        margin-bottom: 2rem;
    }
    .hero-copy .hero-sub {
        font-size: 1.6rem;      /* 2.2rem -> 1.6rem 축소 */
    }
    .hero-copy a.hero-cta {
        width: 18rem;           /* 버튼 크기 소폭 조정 */
        height: 4.4rem;
        font-size: 1.6rem;
        margin-top: 4rem;
    }

    /* --- SECTION 2 (Experience) --- */
	.section2 { flex-direction:column; }
    .section2 .content h2 {
        font-size: 3.6rem;      /* 제목 축소 */
        margin-bottom: 2rem;
    }
    .section2 .content p {
        font-size: 1.6rem;      /* 설명문 축소 */
    }

    /* 카운터 컨테이너: 가로 -> 세로 정렬 */
    .section2 .counter-container {
        flex-direction: column; /* 세로로 쌓기 */
        gap: 3rem;              /* 아이템 간격 */
        margin-top: 6rem;       /* 상단 여백 축소 */
        visibility: visible !important; /* 모바일은 즉시 노출 (JS 연동 시 필요) */
    }

    /* 각 카운터 아이템 너비 초기화 */
    .section2 .counter-container article,
    .section2 .counter-container article:nth-child(1),
    .section2 .counter-container article:nth-child(2),
    .section2 .counter-container article:nth-child(3) {
        flex: 1 1 auto;
        width: 100%;
        opacity: 1 !important;    /* 모바일 즉시 노출 */
        transform: none !important; /* 애니메이션 제거 */
    }

    .section2 .counter-label {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .section2 .counter-item .count-num {
        font-size: 5.6rem;      /* 9.2rem -> 5.6rem 축소 */
    }
    .section2 .counter-item em {
        font-size: 3.2rem;      /* em(단위) 크기 조정 */
    }
    .section2 .counter-item i {
        font-size: 6rem;        /* 구분선(|) 크기 조정 */
        padding-bottom: 0.8rem;
    }

    .section2 .standard-year {
        position: relative;     /* 하단 고정 해제 */
        bottom: auto;
        margin-top: 4rem;
        font-size: 1.4rem;
    }

    /* 모바일에서 마스크 효과 해제 (선택사항) */
    /* 애니메이션 대기 없이 바로 보이게 하고 싶을 때 사용 */
    .hero-copy .mask span, 
    .hero-copy .mask p, 
    .hero-copy .mask a,
    .section2 h2 .mask span,
    .section2 .mask .hero-sub {
        transform: translateY(0) !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/* 📱 480px 이하 (초소형 기기 전용 추가 보정) */
@media (max-width: 480px) {
    .hero-copy .hero-title { font-size: 2.8rem; }
    .section2 .counter-item .count-num { font-size: 4.8rem; }
    .section2 .counter-item i { display: none; } /* 아주 좁을 땐 구분선 숨김 */
}



/* ===== SECTION 3  ===== */
.section3 { background:#ecf6f8; }
.section3 .branch-layout {display: flex;width: 130rem;gap: 6rem;align-items: flex-start;justify-content:flex-start;}
.section3 .branch-info { flex:1; width:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; position:relative; z-index:10;}
.section3 .branch-title { font-size: 5.4rem; line-height: 1.2; font-weight:700; letter-spacing:-0.025em; margin-bottom: 3.4rem; color:#0b1d34;text-align:left;}
.section3 .branch-sub { 
	font-size:2.52rem; font-weight:700; letter-spacing:-0.025em;color: #069b9b; font-weight: 700; 
	position:relative; padding:1.2rem 0; display:flex; align-items:center;
}
.section3 .branch-sub span { padding-left:3.6rem; margin-right:3.6rem; position:relative; letter-spacing:-0.025em;}
.section3 .branch-sub span::after { 
	content:"";display:block;width:1px; height:3.5rem; background:#069b9b; 
	position:absolute; left:0; top:50%; transform:translateY(-50%);
}
.section3 .branch-sub span:nth-child(1) { padding-left:0;  }
.section3 .branch-sub span:nth-child(1)::after { display:none; }

/* 탭 스타일 */
.section3 .branch-tabs { display: flex; list-style: none; margin-bottom: 4rem; width:78rem; margin-top: 7rem; }
.section3 .branch-tabs li { 
	flex: 1; padding: 1.5rem; text-align: center; cursor: pointer; transition: 0.3s; font-weight: 600; 
	background:rgba(105,135,135,0.1); color:#0b1d34; font-size:2rem; letter-spacing:-0.025em;
}
.section3 .branch-tabs li.active { background: #009c9a; color: #fff; font-weight:700;}

/* 카드 스타일 */
.section3 .branch-card { 
	display: flex; background: #fff; padding: 2.9rem 2.7rem; border-radius: 1.5rem; gap: 4.2rem; 
	box-shadow: 0 1rem 3rem rgba(0,0,0,0.1); height:100%;flex-direction:row;
}
.section3 .card-img { flex:0 0 31.2rem;  }
.section3 .card-img img { width: 100%; border-radius: 1rem; }

.section3 .card-text { 
	letter-spacing:-0.025em; text-align:left; padding:1rem 0 0 0; position:relative; 
	flex:1; display:flex;flex-direction:column;
}
.section3 .card-text h3 { font-size:1.8rem; font-weight:700; color:rgba(11,29,52,0.8); margin-bottom:1.5rem;}
.section3 .card-text p { display:flex; align-items:flex-start; margin-bottom:1.3rem;}
.section3 .card-text p strong { font-size:1.6rem; font-weight:600; color:rgba(11,29,52,0.8); flex:0 0 6rem;}
.section3 .card-text p span { font-size:1.6rem; font-weight:400; color:rgba(11,29,52,0.8); flex:1;}

.section3 .highlight { color: #069b9b; }
.section3 a.btn-map {
	position:absolute; left:0; bottom:0;
	display: flex;
    align-items: center;
	justify-content:center;
	width:13.4rem; height:4.5rem;
	border: 1px solid rgba(6,155,155,0.8); color: rgba(6,155,155,0.8); 
	text-decoration: none; border-radius: 2.3rem; 
	font-size:1.5rem;
}

/* 지도 포인트 모션 */
.branch-map { 
	position: absolute; left:50%; transform:translateX(20rem); top:0; width:75rem; width:40%; height:100%;  
	background:url(../images/bg-main-net-map.png) no-repeat center top / contain;
	margin-left:10rem;
}
.map-wrap { position: relative; width: 100%; height:100%; }
.map-base { width: 100%; }
.map-dot {
    position: absolute;
    width: 2.4rem; height: 2.4rem;
    background: rgba(13,152,169,1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
	left:50%; top:50%;
}

.dot-dongtan {	 margin:-25% 0 0 -15%;}
.dot-cheongju { margin:-1% 0 0 -5%;}
.dot-pohang {	margin:9% 0 0 37%;}
.dot-incheon {	margin:-36% 0 0 -23%; }


.map-dot span { 
	position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%); font-size: 1.2rem; white-space: nowrap; font-weight: bold; 
	display:none;
}

/* 깜빡이며 퍼지는 효과 */
.map-dot.active::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: rgba(0, 155, 157, 0.6);
    transform: translate(-50%, -50%);
    animation: mapPulse 2s infinite;
}
.map-dot::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 7.2rem; height: 7.2rem;
    border-radius: 50%;
	display:block;
    background: rgba(13,152,169,0.1);
    transform: translate(-50%, -50%);
}


@keyframes mapPulse {
    0% { width: 100%; height: 100%; opacity: 0.8; }
    100% { width: 500%; height: 500%; opacity: 0; }
}

/* --- 마스크 공통 --- */
.section3 .mask { overflow: hidden; display: block; }

/* 1, 2번: 제목 및 서브 초기 상태 */
.section3 .branch-title .mask span,
.section3 .mask .branch-sub {
    display: block;
    transform: translateY(110%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* 3번: 탭 컨테이너 초기 상태 */
.section3 .tab-container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 4번: 지도 영역 초기 상태 */
.section3 .branch-map {
    opacity: 0;
    transform: scale(0.95); /* 지도는 살짝 커지며 나타나는 효과 추가 */
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =======================================================
    📱 Section 3 반응형 (1024px 이하)
   ======================================================= */
@media (max-width: 1024px) {
    .section3 {
		height:100vh !important;
        padding: 8rem 0; /* 상하 여백 확보 */
		flex-direction:column;
    }

    /* 레이아웃: 가로 -> 세로 배치 */
    .section3 .branch-layout {
        flex-direction: column;
        width: 100% !important;
        padding: 0 2rem;
        gap: 4rem;
    }

    .section3 .branch-info {
        width: 100%;
        align-items: center; /* 정보 중앙 정렬 (선택사항) */
    }

    /* 타이틀 및 서브텍스트 조정 */
    .section3 .branch-title {
        font-size: 3.6rem;
        text-align: center;
        margin-bottom: 2rem;
    }

    .section3 .branch-sub {
        font-size: 1.8rem;
        flex-wrap: wrap; /* 내용이 많으면 줄바꿈 */
        justify-content: center;
    }
    .section3 .branch-sub span {
        padding: 0 1.5rem !important;
        margin: 0.5rem 0;
        display: block;
		text-align:center;
    }

    /* 탭 메뉴: 너비 100% */
    .section3 .branch-tabs {
        width: 100%;
        margin-top: 4rem;
    }
    .section3 .branch-tabs li {
        font-size: 1.6rem;
        padding: 1.2rem 0.5rem;
    }

    /* 카드 스타일: 내부 정렬 */
    .section3 .branch-card {
        width: 100%;
        gap: 2rem;
        padding: 2rem;
		height:auto;
    }
    .section3 .card-img {
        flex: 0 0 20rem; /* 이미지 크기 축소 */
    }
    .section3 .card-text h3 { font-size: 2rem; }
    .section3 .card-text p strong, 
    .section3 .card-text p span { font-size: 1.4rem; }

    /* 지도 영역: 아래로 이동 및 크기 조정 */
    .section3 .branch-map {
        position: relative; /* 절대값 해제 */
        left: 0;
        transform: none !important;
        width: 100%;
        height: 40rem; /* 고정 높이 부여 */
        margin: 4rem 0 0 0;
        opacity: 1 !important; /* 모바일 즉시 노출 */
        background-size: contain;
    }

    /* 지도 점 위치 미세 조정 (비율 유지) */
    .dot-dongtan { margin: -10% 0 0 -5%; }
    .dot-cheongju { margin: 5% 0 0 0%; }
    /* ... 필요 시 각 지점별 위치 모바일 최적화 ... */

    /* [중요] 애니메이션 강제 초기화 */
    .section3 .branch-title .mask span,
    .section3 .mask .branch-sub,
    .section3 .tab-container {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
        visibility: visible !important;
    }
}

/* =======================================================
    📱 Section 3 소형 모바일 (480px 이하)
   ======================================================= */
@media (max-width: 480px) {
    .section3 .branch-title {
        font-size: 2.8rem;
		margin-bottom:1rem;
    }

    /* 지점 정보 리스트 줄바꿈 */
    .section3 .branch-sub span {
        width: 100%;
        text-align: center;
    }
    .section3 .branch-sub span::after {
        display: none; /* 구분선 제거 */
    }

    /* 카드 세로 배치 */
    .section3 .branch-card {
        flex-direction: column;
        align-items: center;
    }
    .section3 .card-img {
        flex: 0 0 auto;
        width: 100%;
    }
    .section3 .card-text {
        padding: 0;
        text-align: center;
    }
    .section3 .card-text p {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    .section3 .card-text p strong {
        flex: 0 0 auto;
    }

    /* 지도 높이 축소 */
    .section3 .branch-map {
		display:none;
        height: 30rem;
    }

    /* 버튼 위치 조정 */
    .section3 a.btn-map {
        position: relative;
        margin: 2rem auto 0;
        bottom: auto;
        left: auto;
    }

	.section3 .branch-tabs {  margin-bottom: 2rem; margin-top: 3rem; }
}



/* ===== SECTION 4  ===== */
.section4 {padding: 5rem 0;background:#fff;}
.section4 .content {width: 100%;height: 100%;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;position: relative;}
.section4 .container {width: 130rem;margin: 0 auto;padding: 0 2rem;box-sizing: border-box;position: relative;text-align:left;z-index: 2;}
.section4 .content-left {width: 88.2rem;}
.section4 .main-title { font-size:5.4rem; font-weight:700; color:rgba(11,29,52,1); line-height:1.2em; margin-bottom:4.2rem;}
.tab-list { list-style: none; padding: 0; }
.tab-item { cursor: pointer; margin-bottom: 4rem;transition: 0.3s;border-radius:1.6rem;overflow:hidden;}
.tab-list > li:nth-child(1) { margin-top:0; }
.tab-item .tab-inner { display:flex; align-items:center; justify-content:space-between; position:relative; padding:0 7.3rem 0 3.7rem; transition:all 0.7s;}
.tab-item .tab-inner .icon-box { width:8.8rem; }
.tab-item .tab-inner .icon-box i { display:none; }
.tab-item .tab-inner .txt-box { padding-left:2.4rem; flex:1; padding-right:6rem;}
.tab-item .tab-inner .txt-box h3 { font-size:2.2rem; font-weight:600; line-height:1.2em; color:#000; margin-bottom:1.3rem; transition:all 0.3s;}
.tab-item .tab-inner .txt-box p { font-size:1.5rem; font-weight:400; line-height:1.35em; color:rgba(0,0,0,0.7); transition:all 0.3s;margin-bottom:0.3rem;word-break:keep-all;}
.tab-item .tab-inner .txt-box span.tags { font-size:1.5rem; font-weight:400; line-height:1.35em; color:rgba(0,0,0,0.7); transition:all 0.3s;}
.tab-item .tab-inner a { display:none; }
.icon-t1 { width:8.8rem; height:8.7rem; background:url(../images/icon-t1.svg) no-repeat center / 100%; }
.icon-t2 { width:8.8rem; height:8.7rem; background:url(../images/icon-t2.png) no-repeat center / 100%; }
.icon-t3 { width:8.8rem; height:8.7rem; background:url(../images/icon-t3.png) no-repeat center / 100%; }
.icon-t4 { width:8.8rem; height:8.7rem; background:url(../images/icon-t4.png) no-repeat center / 100%; }

.tab-item.active {background: linear-gradient(90deg, #5b67be 0%, #1599a8 100%);color: #fff;}
.tab-item.active .tags { color: rgba(255,255,255,0.8); }
.tab-item.active .tab-inner {background: linear-gradient(90deg, #5b67be, #1599a8);color: #fff;border-radius: 2rem;padding:3.7rem 7.3rem 3.7rem 3.7rem;}
.tab-item.active .tab-inner .icon-box i { display:block;}
.tab-item.active .tab-inner .txt-box h3 { color:#fff; }
.tab-item.active .tab-inner .txt-box p { color:#fff; }
.tab-item.active .tab-inner .txt-box span.tags { color:#fff; }
.tab-item.active .tab-inner a.arrow { flex:0 0 6rem; width:6rem; height:6rem; background:#fff; border-radius:3rem; display:flex; justify-content:center; align-items:center;}
.i-go-arrow { width:3rem; height:0.7rem; background:url(../images/i-go-arrow.svg) no-repeat center / 100%; }

.image-right-wrap {position: absolute;right: 0;top: 50%;transform: translateY(-50%) !important; width: 43vw;  height: 90vh;z-index: 1;}
.img-content {
	position: absolute;width: 100%;height: 100%;background-size: cover;background-position: center;opacity: 0;transition: opacity 0.6s ease-in-out;
	display:flex; justify-content:center; align-items:center;
}
.img-content > div {background:rgba(0,0,0,0.5); width:80%; height:80%;display:flex;  justify-content:center; align-items:center; flex-direction:column;} 
.img-content > div i { width:1.8rem; height:9.8rem; border-radius:1rem; border:1px solid rgba(255,255,255,0.5); margin:0 auto; }
.img-content > div em { color:#fff; font-size:2rem; font-weight:500; padding:1.5rem 0; }
.img-content.active {opacity: 1;}


/* --- 마스크 설정 --- */
.section4 .mask { overflow: hidden; display: block; }

/* 1번: 타이틀 초기 상태 (숨김) */
.section4 .main-title span {
    display: block;
    transform: translateY(110%);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* 2번: 탭 리스트 초기 상태 (숨김) */
.section4 .tab-list {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 3번: 이미지 랩 초기 상태 (숨김) */
.section4 .image-right-wrap {
    opacity: 0;
    /* 기존 translateY(-50%)를 유지하면서 opacity만 조절 */
    transition: opacity 1.2s ease-in-out; 
}


/* =======================================================
    📱 Section 4 반응형 (1024px 이하)
   ======================================================= */
@media (max-width: 1024px) {
    .section4 {
		height:100vh !important;
        padding: 0 0 !important;
    }

    /* 레이아웃 가로 -> 세로 */
    .section4 .content {
        flex-direction: column;
        align-items: flex-start;
    }

    .section4 .container {
        width: 100% !important;
        padding: 0 2rem;
    }

    .section4 .content-left {
        width: 100% !important;
    }

    /* 타이틀 크기 조정 */
    .section4 .main-title {
        font-size: 3.6rem;
        margin-bottom: 3rem;
    }

    /* 우측 이미지 랩: 상단으로 배치 (order: -1) */
    .section4 .image-right-wrap {
        position: relative;     /* 절대 위치 해제 */
        top: 0; right: 0;
        width: 100% !important;
        height: 40vh !important; /* 모바일 적정 높이 */
        transform: none !important;
        margin-bottom: 4rem;
        order: -1;              /* 탭 목록보다 위로 올림 */
        opacity: 1 !important;  /* 즉시 노출 */
    }

    .img-content > div {
        width: 90%;
        height: 90%;
    }

    /* 탭 아이템 내부 여백 축소 */
    .tab-item {
        margin-bottom: 2rem;
    }
    .tab-item .tab-inner {
        padding: 2rem !important; /* 7.3rem 여백 제거 */
    }
    .tab-item.active .tab-inner {
        padding: 2rem !important;
    }

    .tab-item .tab-inner .icon-box {
        width: 7rem;
    }
    .icon-t1, .icon-t2, .icon-t3, .icon-t4 {
        width: 7rem;
        height: 7rem;
    }

    .tab-item .tab-inner .txt-box {
        padding-left: 1.5rem;
        padding-right: 2rem;
    }
    .tab-item .tab-inner .txt-box h3 {
        font-size: 2rem;
    }

    /* 화살표 버튼 크기 조정 */
    .tab-item.active .tab-inner a.arrow {
        flex: 0 0 5rem;
        width: 5rem;
        height: 5rem;
    }

    /* [중요] 애니메이션 강제 초기화 */
    .section4 .main-title span,
    .section4 .tab-list {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/* =======================================================
    📱 Section 4 소형 모바일 (480px 이하)
   ======================================================= */
@media (max-width: 480px) {
    .section4 .main-title {
        font-size: 2.8rem;
    }

    /* 탭 아이템 내부 요소 세로 정렬(선택사항) 또는 크기 최소화 */
    .tab-item .tab-inner {
        flex-direction: row; /* 가로 유지하되 더 작게 */
        align-items: center;
    }

    .tab-item .tab-inner .icon-box {
        display: none; /* 아주 작을 땐 아이콘 숨겨서 공간 확보 가능 */
    }

    .tab-item .tab-inner .txt-box {
        padding-left: 0;
    }

    .tab-item .tab-inner .txt-box h3 {
        font-size: 1.8rem;
    }
    .tab-item .tab-inner .txt-box p,
    .tab-item .tab-inner .txt-box span.tags {
        font-size: 1.35rem;
    }

    .section4 .image-right-wrap {
        height: 25rem !important; /* 이미지 영역 더 축소 */
    }

    /* 이동 화살표는 숨기거나 작게 처리 */
    .tab-item.active .tab-inner a.arrow {
        flex: 0 0 4rem;
        width: 4rem;
        height: 4rem;
    }
    .i-go-arrow {
        width: 2.4rem;
    }

    .section4 .container {
		height:75vh;
    }

    /* 우측 이미지 랩: 상단으로 배치 (order: -1) */
    .section4 .image-right-wrap {
        height: 25vh !important; /* 모바일 적정 높이 */
    }

    /* 탭 아이템 내부 여백 축소 */
    .tab-item {
        margin-bottom: 0;
    }

}



/* ===== SECTION 5  ===== */
.section5 { background:rgba(250,250,250,1); }
.baseWidth { width:132rem; margin:0 auto; }
.healthState h2 { text-align:center; font-size:5.4rem; font-weight:700; line-height:1;  color:rgba(1,29,52,1);}
.healthState .hero-sub { padding:2.2rem 0 0; text-align:center; font-size:2.2rem; font-weight:400; color:rgba(11,29,52,0.8); }

.h_tab { display:flex; justify-content:center; margin:4.8rem 0 0; gap:1rem; padding-bottom:4rem; position:relative;}
.h_tab li { border:1px solid rgba(0,0,0,0.5); border-radius:2rem; height:3.7rem; display:flex; justify-content:center; align-items:center; font-size:1.8rem; line-height:1; padding:0.8rem 2.6rem; font-weight:600; cursor:pointer; border:1px solid #5366c6; color:#5366c6;}
.h_tab li.on { background:#5366c6; border:1px solid #5366c6; color:#fff; }

/* =========================
   탭 콘텐츠 영역
========================= */
.ytb-section { position: relative; z-index: 100; }
.ytb-layout {width:100%;margin:0 auto;border-radius:2rem;background-color:#f2f5f5;padding:5rem 5rem 2rem;}
.ytb-layout h2 { display:flex; flex-wrap:wrap; align-items:flex-end; padding:0 0 3rem 0; }
.ytb-layout h2 strong { font-size:2.4rem; font-weight:600; line-height:1.2; color:#0b1d34; margin-right:15rem;}
.ytb-layout h2 span  { font-size:1.6rem; font-weight:500; line-height:1.2; padding-bottom:2px; color:#0b1d34;}

.youtube-wrap {display: flex;justify-content:space-between;gap:3.7rem;}
.player-area {width: 70.9rem;}
.player-area article {width:100%;height:39.9rem;}
.video-info {padding: 1.2rem 0;}
.video-info h3 {font-size: 1.6rem;margin: 0 0 6px 0;font-weight:500;color: #0b1d34;text-align:left;}
.video-info p {font-size: 1.6rem;line-height: 1.4;color: #0b1d34;margin: 0;}
.player-area iframe {width: 100%;height: 100%; pointer-events: auto !important;}
.list-area {flex:1;height: 39.9rem;overflow-y: auto;box-sizing: border-box;}

.scrollbar::-webkit-scrollbar { width: 5px; border-radius:5px; height:5px; background:transparent}
.scrollbar::-webkit-scrollbar-track { background: transparent; border-radius:5px; width:1px; background: #d9d9d9;}
.scrollbar::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius:5px; border-radius:5px;}
.scrollbar::-webkit-scrollbar-thumb:hover {	background: #3a3a3a; 	border-radius:5px; border-radius:5px;}

.list-area ul {margin: 0;padding: 0;list-style: none;}
.list-area li {display: flex;height: 9rem;margin-bottom: 1rem;cursor: pointer;border-radius: 0.6rem;transition: background 0.2s;}
.list-area li:hover {background: rgba(255,255,255,0.3);}
.list-area img {width: 16rem;height: 9rem;object-fit: cover;border:2px solid #059ee0;}
.list-area .text {padding-top:0.5rem;padding-left: 1rem;padding-right:2rem;display: flex;flex-direction: column;justify-content: flex-start;}
.list-area .text strong {font-size: 1.4rem;line-height: 1.4;font-weight:500;}
.list-area .text p {font-size: 1.2rem;line-height: 1.4;margin: 2px 0;}
.list-area .text .list-title { color:#0b1d34; font-size:1.6rem; line-height:160%; }

#videoTitle {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;color:#0b1d34;}
.ytb-area {display:block;position:absolute;left:50%; top:50%;transform:translate(-50%,-50%);opacity:0;z-index:1;}
.ytb-area.on {display: block;position:relative;opacity:1;z-index:10;top:30rem;}

@media(max-width:1150px){
	.ytb-area.on {top:45rem;}
}
.ytb-area {display:block;animation: fade 0.3s ease;}
@keyframes fade {
	from {opacity: 0;}
	to {opacity: 1;}
}
.ytb-area.loading .player-area article {	position: relative;}


/* --- 마스크 및 기본 설정 --- */
.healthState .mask { overflow: hidden; display: block; text-align: center; }

/* 1, 2번: 제목 및 설명 초기 상태 */
.healthState h2 .mask span,
.healthState .mask .hero-sub {
    display: block;
    transform: translateY(110%);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* 3번: 유튜브 탭 초기 상태 */
.healthState .h_tab {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 4번: 유튜브 콘텐츠 영역 초기 상태 */
.healthState .ytb-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}


@media (max-width: 1024px) {
    /* 1. 전체 섹션 설정: 스크롤 없이 한 화면 고정 */
    .section5 {
        height: 100vh !important;
        overflow: hidden; 
        padding: 2rem 0 !important; /* 전체 여백 축소 */
        display: flex;
        flex-direction: column;
    }

    .section5 .content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .baseWidth.healthState {
        width: 100% !important;
        padding: 0 1.5rem;
        display: flex;
        flex-direction: column;
        height: 100%; /* 부모 높이 전체 사용 */
		justify-content:center;
    }

    /* 2. 타이틀 및 서브텍스트 대폭 축소 */
    .healthState h2 {
        font-size: 2.6rem !important; /* 5.4 -> 2.6 */
        margin-bottom: 0.5rem !important;
    }
    .healthState .hero-sub {
        font-size: 1.4rem !important; /* 2.2 -> 1.4 */
        padding: 0.5rem 0 0 !important;
    }

    /* 3. 탭 영역 간격 축소 */
    .h_tab {
        margin: 1.5rem 0 !important;
        padding-bottom: 1rem !important;
        gap: 0.5rem !important;
    }
    .h_tab li {
        font-size: 1.3rem !important;
        padding: 0.5rem 1.2rem !important;
        height: auto !important;
    }

    /* 4. 유튜브 영역 레이아웃 재배치 (핵심) */
    .ytb-section {
        flex: 1; /* 남은 세로 공간을 모두 차지 */
        min-height: 0; /* flex 자식의 overflow 방지를 위한 설정 */
        display: flex;
        flex-direction: column;
    }

    /* 기존 절대 위치값들 완전히 초기화 */
    .ytb-area {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        display: none;
        height: 100%;
    }
    .ytb-area.on {
        display: flex !important;
        flex-direction: column;
    }

    .ytb-layout {
        padding: 1.5rem !important; /* 내부 여백 축소 */
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 1.5rem !important;
    }

    .ytb-layout h2 {
        padding: 0 0 1rem 0 !important;
        flex-direction: column;
        align-items: flex-start !important;
    }
    .ytb-layout h2 strong {
        font-size: 1.6rem !important;
        margin-right: 0 !important;
        margin-bottom: 0.3rem;
    }
    .ytb-layout h2 span {
        font-size: 1.2rem !important;
    }

    /* 5. 비디오 + 리스트 가로배치 -> 세로배치 */
    .youtube-wrap {
        flex-direction: column !important;
        gap: 1rem !important;
        flex: 1;
        min-height: 0;
    }

    /* 비디오 플레이어 영역 */
    .player-area {
        width: 100% !important;
    }
    .player-area article {
        height: auto !important;
        aspect-ratio: 16 / 9; /* 영상 비율 유지 */
    }
    .video-info { padding: 0.5rem 0 !important; }
    .video-info h3 { font-size: 1.4rem !important; margin-bottom: 2px !important; }
    .video-info p { display: none; } /* 공간 확보를 위해 상세설명 숨김 */

    /* 재생 목록 영역: 남은 공간에서 내부 스크롤 */
    .list-area {
        flex: auto; /* 영상 제외 남은 공간 모두 차지 */
        height: 20vh !important;
        min-height: 10rem;
    }
    .list-area li {
        height: 6.5rem !important; /* 리스트 높이 축소 */
        margin-bottom: 0.6rem !important;
        gap: 1rem;
    }
    .list-area img {
        width: 11rem !important; /* 썸네일 크기 조정 */
        height: 6.5rem !important;
    }
    .list-area .text { padding-top: 0 !important; }
    .list-area .text .list-title {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
    }

    /* [애니메이션 차단] 모바일에서는 즉시 노출 */
    .healthState h2 .mask span,
    .healthState .mask .hero-sub,
    .healthState .h_tab,
    .healthState .ytb-section {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
        visibility: visible !important;
    }
}

/* 📱 480px 이하 초소형 기기 대응 */
@media (max-width: 480px) {
    .healthState h2 { font-size: 2.2rem !important; }
    .ytb-layout h2 strong { font-size: 1.4rem !important; }
    .list-area img { width: 9rem !important; height: 5.5rem !important; }
    .list-area li { height: 5.5rem !important; }
}



/* ===== SECTION 6  ===== */
.section6 { background: linear-gradient(to right, #5565c7 0%, #0c9aa7 100%); }
.section6 .content {width: 100%;height: 100%;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;position: relative;}
.section6::after { 
	content:""; display:block;position:absolute; right:0; top:1.5rem;width:88.3rem; height:78.9rem;
	background:url(../images/bg-main-connect-r.svg) no-repeat center / 100%;z-index:0;
}
.title6-header { margin-bottom:12.1rem;text-align:left; }
.section6 .title6-header { font-size:4.6rem;font-weight:400; color:#fff;line-height:1.2; }
.section6 .title6-header .mask span { font-size:4.6rem;font-weight:400; color:#fff;line-height:1.2; }
.section6 .title6-header .mask span strong { font-size:4.6rem; font-weight:700; color:#fff; }
.sns-area { display:flex; justify-content:space-between; align-items:center; gap:7.5rem;}
.sns-area article { display:flex; justify-content:space-between; align-items:center; }
.sns-area article .txt { display:flex; flex-direction:column; color:#fff; align-items:flex-start;}
.sns-area article .txt em { font-size:1.8rem; font-weight:500; }
.sns-area article .txt h4 { font-size:3.2rem; font-weight:700; margin:1.4rem 0 2.8rem; text-align:left;}
.sns-area article .txt p { font-size:1.6rem; line-height:150%; font-weight:500; text-align:left;}
.sns-area article .txt p strong { font-size:1.6rem; font-weight:700; }
.sns-area article .img { flex:0 0 auto; }
.sns-area article .img img { max-width:100%; margin-left:0.6rem; }

/* --- 마스크 공통 --- */
.section6 .mask { overflow: hidden; display: block; }

/* 1번: 헤더 초기 상태 */
.section6 .title6-header .mask span {
    display: block;
    transform: translateY(110%);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* 2, 3번: SNS 영역 아티클 초기 상태 */
.section6 .sns-area article {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =======================================================
    📱 Section 6 반응형 (1024px 이하)
   ======================================================= */
@media (max-width: 1024px) {
    /* 1. 전체 섹션: 100vh 고정 및 세로 정렬 */
    .section6 {
        height: 100vh !important;
        overflow: hidden; 
        display: flex;
        flex-direction: column;
        justify-content: center; /* 콘텐츠 중앙 정렬 */
        padding: 4rem 2rem !important;
    }

    .section6 .content {
        height: 100%;
        width: 100% !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .section6 .baseWidth {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }

    /* 2. 배경 장식 요소: 크기 대폭 축소 및 투명도 조절 */
    .section6::after {
        width: 60rem; /* 기존 88.3rem에서 축소 */
        height: 50rem;
        top: 50%;
        right: -10rem;
        transform: translateY(-50%);
        opacity: 0.3; /* 텍스트 가독성을 위해 낮춤 */
        background-size: contain;
    }

    /* 3. 헤더 타이틀: 폰트 및 간격 축소 */
    .title6-header {
        margin-bottom: 4rem !important; /* 12.1rem -> 4rem */
        text-align: center;
        width: 100%;
    }
    .section6 .title6-header, 
    .section6 .title6-header .mask span, 
    .section6 .title6-header .mask span strong {
        font-size: 2.8rem !important; /* 4.6rem -> 2.8rem */
        line-height: 1.3;
    }

    /* 4. SNS 아티클 영역: 세로 배치 및 간격 조절 */
    .sns-area {
        flex-direction: column !important;
        gap: 3rem !important; /* 7.5rem -> 3rem */
        width: 100%;
        align-items: center;
    }

    .sns-area article {
        width: 100%;
        max-width: 60rem;
        justify-content: space-between;
        gap: 2rem;
    }

    .sns-area article .txt {
        flex: 1;
    }
    .sns-area article .txt em {
        font-size: 1.4rem !important;
    }
    .sns-area article .txt h4 {
        font-size: 2.2rem !important; /* 3.2rem -> 2.2rem */
        margin: 0.8rem 0 1.2rem !important;
    }
    .sns-area article .txt p {
        font-size: 1.4rem !important; /* 1.6rem -> 1.4rem */
        line-height: 1.4;
    }
    .sns-area article .txt p br {
        display: none; /* 좁은 화면에서 강제 줄바꿈 해제 */
    }

    /* 5. 이미지 크기 조정 */
    .sns-area article .img {
        flex: 0 0 12rem; /* 이미지 영역 고정폭 축소 */
    }
    .sns-area article .img img {
        width: 100%;
        margin-left: 0;
    }

    /* [애니메이션 차단] 모바일/태블릿 즉시 노출 */
    .section6 .title6-header .mask span,
    .section6 .sns-area article {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
        visibility: visible !important;
    }

}

/* 📱 480px 이하 초소형 기기 대응 */
@media (max-width: 480px) {
    .section6 .title6-header, 
    .section6 .title6-header .mask span, 
    .section6 .title6-header .mask span strong {
        font-size: 2.2rem !important;
    }

    .section6 .sns-area { gap: 2.5rem !important; }

    .section6 .sns-area article {
        flex-direction: coloum; /* 아주 작은 화면에서도 가로 유지 또는 세로 선택 */
        align-items: center;
    }
    
    .section6 .sns-area article .img {
        flex: 0 0 8rem; /* 이미지 더 축소 */
    }

    .section6 .sns-area article .txt h4 { font-size: 2rem !important; }
    .section6 .sns-area article .txt p,
	.section6 .sns-area article .txt p strong { font-size: 1.3rem !important; line-height:1.3;}

}


/* ===== SECTION 7 ===== */
.s6_wrap { 
  display:flex; justify-content:center; align-items:center; flex-direction:column; 
  height:100%; background:url(/images/sub/bg66.png) no-repeat center / cover; 
  width:100%;
}
.s6_wrap h2 { font-size:57px; color:#fff; font-weight:700; padding:50px 0 50px; }

.s6_tab { display:flex; justify-content:center; align-items:center; padding-bottom:40px; }
.s6_tab li { display:flex; flex-direction:column; justify-content:center; align-items:center; margin:0 12px; cursor: pointer; overflow: hidden;}
.s6_tab li i { background:url(/images/i-line-2.png) no-repeat; width:19px; height:19px;  display:block; overflow: hidden; transition:all 0.5s; position:relative; top:-19px; background-size:100%;}
.s6_tab li span { 
    display:flex; margin-top:13px; border:1px solid rgba(255,255,255,0.5); width:149px; 
    height:40px; border-radius:0; justify-content:center; align-items:center;
    font-size:19px; font-weight:500; color:#fff; transition:all 0.5s;
}
.s6_tab li:hover {}
.s6_tab li:hover i { height:19px; top:0; }
.s6_tab li:hover span { background:#099ba7; border:1px solid #099ba7; color:#fff; }

.s6_tab li.on i { height:19px; top:0; }
.s6_tab li.on span { background:#099ba7; border:1px solid #099ba7; color:#fff; }

.newsWrap > article { 
  position:relative;  width:1200px; margin:0 auto; 
  opacity:0; height:0; overflow: hidden; transition:all 0.3s ease-out;
}
.newsWrap > article.on { opacity: 1; height: 600px; padding:30px 0;}

.newsDiv .newsSlider { height:450px; }

.swiper-button-prev.newsPrev1 { 
  position:absolute; left:0 !important; top:auto !important; 
  width:22px; height:41px; z-index:9999; margin:auto !important; 
  bottom: 0 !important; right:auto !important;
  background:url(/images/i-prev.png) no-repeat center / 100%;
}
.swiper-button-next.newsNext1 { 
  position:absolute; left:auto !important; top:auto !important; 
  width:22px; height:41px; z-index:9999; margin:auto !important; 
  bottom: 0 !important; right:0 !important;
  background:url(/images/i-next.png) no-repeat center / 100%;
}

.nsLink { position:relative; max-width:100%;}
.nsLink .nsImg { position:relative; }
.nsLink .nsImg a { display:block; width:100%; height:100%; position:relative; z-index:11; background:transparent }
.nsLink .nsImg a div { }
.nsLink .nsImg a div img { position:relative; z-index:1; width:100%; object-fit:cover; height:300px;}
.nsLink .nsImg a span { position:absolute; display:block; z-index:10; border:10px solid #089d9b; left:50%; top:50%; width:100%; height:100%; transition:all 0.5s; transform:translate(-50%,-50%); display:flex; justify-content:center; align-items:center;}
.nsLink .nsImg a i { opacity:0; transition:all 0.5s; }
.nsLink:hover .nsImg span { border:none; width:90%; height:90%; background:rgba(8,157,155,0.5); }
.nsLink:hover .nsImg i { width:52px; height:47px; background:url(/images/i-icon-2.png) no-repeat center / 100%; display:flex; opacity:1; }

.nsLink .nsTxt { text-align:left;}
.nsLink .nsTxt a { display:block; font-size:22px; font-weight:500; padding:12px 0 8px; line-height:1.2; color:#fff;}
.nsLink .nsTxt span { font-size:15px; font-weight:300; color:#fff;}

.empty_li { text-align:center;color:#fff;padding:50px 0; width:100%; font-size:1.6rem;}

a.newsMore { position:absolute; right:0; top:0; display:flex; justify-content:center; align-items:center;}
a.newsMore span { color:#fff; margin-right:5px;font-size:1.4rem;}
a.newsMore i { background:url(/images/i-plus1.png) no-repeat; background-size:100%; display:inline-block; width:19px; height:19px; }


@media (max-width:1270px){	
	.s6_wrap h2 { font-size:45px; padding:0 0 30px; }
	.newsWrap { padding:0 30px; }
	.newsWrap > article { width:600px; }
	.newsWrap > article.on { height: 400px;}
	.newsDiv .newsSlider { height:350px; }

	.s6_tab { padding-bottom:30px; }
	.s6_tab li { margin:0 8px;}
	.s6_tab li span {  margin-top:13px; width:110px; 	font-size:16px; }

	.nsLink .nsTxt a {  font-size:20px; }
	.nsLink .nsTxt span { font-size:14px; }
}

@media (max-width:720px){	
	.s6_wrap { padding-top:70px; }
	.s6_wrap h2 { font-size:30px; padding:0 0 20px; }
	.newsWrap > article { width:300px; }
	.newsWrap > article.on { height: 400px;}
	.newsDiv .newsSlider { height:350px; }

	.nsLink .nsTxt a {  font-size:17px; }
	.nsLink .nsTxt span { font-size:12px; }
	.s6_tab li i { display:none;}
	.s6_tab li.on i { display:none; }
	.s6_tab li { margin-top:10px; }
	.s6_tab li i { width:12px; height:12px;  top:-12px; }
	.s6_tab li span {  margin-top:0; width:80px; 	font-size:14px; }

}

@media (max-width:450px){
	.s6_tab { flex-wrap:wrap; width:250px; justify-content:space-between;  }
	.s6_tab li { margin:0 0; flex:0 0 49%; }
	.s6_tab li span { 
		margin-top:4px; width:100%; 
		height:auto; padding:7px 0;
		font-size:12px;
	}
	.nsLink .nsImg a span { border:6px solid #089d9b;  }
	a.newsMore span { font-size:14px;}
}
@media (max-width:380px){
	.s6_wrap h2 { font-size:26px; }
	.s6_tab li i { display:none;}
	.s6_tab li.on i { display:none; }

	.newsWrap > article { width:250px; }
	.newsWrap > article.on { height: 340px;}
	.newsDiv .newsSlider { height:300px; }

	.nsLink .nsTxt a {  font-size:15px; }
	.nsLink .nsTxt span { font-size:11px; }

}



/* ===== SECTION 8  ===== */
.section8 { background:rgba(255,255,255,1); }
.section8 .content {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;position: relative; text-align:left;}

.section8 .con-title span { font-size:2.4rem; font-weight:700; color:#0b1d34; line-height:1; text-align:left; padding:0 0 1.9rem 0; }
.section8 article { display:flex; align-items:center; gap:1rem;  }
.contact-tel a { display:flex; align-items:center; padding:1.2rem 4rem; border-radius:3rem;border:1px solid rgba(0,0,0,0.2);  }
.contact-tel a strong { font-size:2rem; font-weight:500; color:#0b1d34; }
.contact-tel a span { font-size:2rem; font-weight:500; color:#069b9b; margin-left:0.5rem; }

.contact-center { margin:7.8rem 0; position:relative; left:50%; margin-left:-66rem; width: calc(100% - 30rem); display:flex; height:30.4rem; align-items:center;}
.section8 .con-title { font-size:2.4rem; font-weight:700; color:#0b1d34; line-height:1; text-align:left; padding:0 0 0 0; }
.contact-center-inner { flex:0 0 40%; flex-direction:column; justify-content:center; height:100%; display:flex; }
.contact-center-inner .con-title { margin-bottom:3.6rem; }
.contact-center-inner p { font-size:2.6rem; font-weight:600; color:#069b9b; line-height:1.2; margin-bottom:3.6rem; }
.contact-center-inner article { display:flex; margin-top:1rem; align-items:flex-start; }
.contact-center-inner article em { flex:0 0 6.5rem; font-size:2rem; font-weight:600; color:#0b1d34; }
.contact-center-inner article ul { flex:1;  }
.contact-center-inner article ul li { display:flex; margin-top:1rem; }
.contact-center-inner article ul li strong{ flex:0 0 6.5rem; font-size:2rem; font-weight:500; color:#0b1d34;  }
.contact-center-inner article ul li span { flex:1; font-size:2rem; font-weight:500; color:#0b1d34; }
.contact-center-inner article:nth-child(2) { margin-bottom:0; }
.contact-center-inner article ul li:nth-child(1) { margin-top:0; }

.section8 .contact-explore { 
	flex:1; height:100%; background:url(../images/contact-img.png) no-repeat center / cover;  
	flex-direction:column; justify-content:space-between; align-items:flex-start; padding:5.2rem 0 5.2rem 6.2rem; position:relative;
}
.section8 .contact-explore article { flex:1; display:block; }
.section8 .contact-explore article em { display:block; font-size:1.8rem; color:#fff; line-height:1; font-weight:600;margin:0 0 1.2rem;}
.section8 .contact-explore article h4 { display:block; font-size:3.4rem; font-weight:700; color:#fff; line-height:1; font-weight:700;}
.section8 .contact-explore a.btn-baro-white { 
	display:inline-flex; align-items:center; font-size:1.8rem; font-weight:600; border-bottom:2px solid rgba(255,255,255,0.4); color:#fff; 
	position:absolute; left:6.2rem; bottom:5.2rem;
}
.contact-bottom div img { max-width:100%; }
.contact-bottom p { font-size:1.5rem; color:rgba(11,29,52,0.4); line-height:1; font-weight:600;margin:2rem 0 3.2rem;}
.contact-bottom a.btn-baro-black { display:inline-flex; align-items:center; font-size:1.8rem; font-weight:600; border-bottom:2px solid rgba(11,29,52,0.4);  }


/* --- 마스크 설정 --- */
.section8 .mask { overflow: hidden; display: block; }

/* 1, 3번: 제목 초기 상태 */
.section8 .con-title .mask span {
    display: block;
    transform: translateY(110%);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2, 4, 5, 6, 7번: 공통 페이드인 요소 초기 상태 */
.section8 .contact-tel,
.section8 .contact-center-inner article,
.section8 .contact-center-inner p,
.section8 .contact-explore,
.section8 .contact-bottom {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 7번은 조금 더 묵직하게 나타나도록 설정 */
.section8 .contact-bottom { transition-duration: 1.2s; }






/* =======================================================
    📱 Section 7 반응형 (1024px 이하)
   ======================================================= */
@media (max-width: 1024px) {
	.section8 {
		height: 100vh !important; /* 고정 높이 해제 */
		min-height: 100vh;       /* 최소한 한 화면 높이는 유지 */
	}

	.section8 .content {
		height: auto !important;
		padding: 6rem 2rem;      /* 모바일 환경에 맞는 여백 조정 */
		display: block;          /* flex 해제하여 순차적 배치 */
	}

	/* 마지막 섹션 내부 요소들이 겹치지 않게 조정 */
	.contact-center {
		margin: 4rem 0;
		width: 100%;
		left: 0;
		margin-left: 0;
		height: auto;
		display: block;
	}

	.contact-center-inner {
		width: 100%;
		margin-bottom: 3rem;
	}

	.section8 .contact-explore {
		width: 100%;
		height: 400px; /* 모바일에서 적절한 이미지 영역 확보 */
	}

    /* 2. 상단: 상담 및 문의 (전화번호) */
    .contact-top {
        width: 100% !important;
    }
    .section8 .con-title span {
        font-size: 1.8rem !important; /* 2.4 -> 1.8 */
        padding-bottom: 1rem !important;
        justify-content: center;
        display: flex;
    }
    .contact-tel {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.8rem !important;
		gap:0 !important;
    }
    .contact-tel a {
		flex:0 0 100%;
        padding: 0.8rem 2rem !important; /* 여백 대폭 축소 */
		display:flex; 
		justify-content:center;
		align-items:center;
		margin-top:5px;
    }
	.contact-tel a:nth-child(1) { margin-top:0; }

    .contact-tel a strong, 
    .contact-tel a span {
        font-size: 1.4rem !important; /* 2.0 -> 1.4 */
    }

    /* 3. 중앙: 진료시간 및 병원 둘러보기 (가장 중요한 변화) */
    .contact-center {
        position: relative !important;
        left: 0 !important;
        margin: 3.5vh 0 !important; /* 7.8rem -> 가변 마진 */
        margin-left: 0 !important; /* -66rem 핵 제거 */
        width: 100% !important;
        height: auto !important; /* 고정 높이 해제 */
        flex-direction: column !important;
        gap: 2vh !important;
    }

    .contact-center-inner {
        flex: 0 0 auto !important;
        width: 100% !important;
    }
    .contact-center-inner .con-title {
        margin-bottom: 1.5rem !important;
    }
    .contact-center-inner p {
        font-size: 1.6rem !important; /* 2.6 -> 1.6 */
        margin-bottom: 1.5rem !important;
    }
    .contact-center-inner article {
        justify-content: center;
        margin-top: 0.5rem !important;
    }
    .contact-center-inner article em,
    .contact-center-inner article ul li strong,
    .contact-center-inner article ul li span {
        font-size: 1.3rem !important; /* 폰트 일괄 축소 */
    }
    .contact-center-inner article em { flex: 0 0 5rem !important; }
    .contact-center-inner article ul li strong { flex: 0 0 5rem !important; }

    /* 병원 둘러보기 박스: 슬림하게 변경 */
    .section8 .contact-explore {
        width: 100% !important;
        height: 12rem !important; /* 높이 대폭 축소 */
        padding: 2rem !important;
        border-radius: 1rem;
        flex-direction: row !important; /* 가로 배치로 공간 절약 */
        justify-content: space-between !important;
        align-items: center !important;
    }
    .section8 .contact-explore article { text-align: left; }
    .section8 .contact-explore article em { font-size: 1.2rem !important; margin-bottom: 0.4rem !important; }
    .section8 .contact-explore article h4 { font-size: 1.8rem !important; }
    .section8 .contact-explore a.btn-baro-white {
        position: static !important; /* 절대 위치 해제 */
        font-size: 1.4rem !important;
		margin-top:15px;
    }

    /* 4. 하단: 푸터 */
    .contact-bottom {
        width: 100% !important;
        margin-top: 30px;
    }
    .contact-bottom div img {
        height: 2.5rem; /* 로고 크기 축소 */
    }
    .contact-bottom p {
        font-size: 1.1rem !important;
        margin: 1rem 0 !important;
    }
    .contact-bottom a.btn-baro-black {
        font-size: 1.3rem !important;
    }

    /* [애니메이션 차단] 즉시 노출 */
    .section8 .con-title .mask span,
    .section8 .contact-tel,
    .section8 .contact-center-inner article,
    .section8 .contact-center-inner p,
    .section8 .contact-explore,
    .section8 .contact-bottom {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
        visibility: visible !important;
    }


	.swiper-button-prev.newsPrev1 { 
		left:20px !important; top:50% !important;
		transform:translateY(-50%);
	}
	.swiper-button-next.newsNext1 { 
		right:20px !important; top:50% !important;
		transform:translateY(-50%);
	}

}

/* 📱 480px 이하 추가 보정 */
@media (max-width: 480px) {
    .contact-tel a { width: 48%; padding: 0.8rem 0.5rem !important; } /* 2개씩 배치 */
    .contact-center-inner p { font-size: 1.4rem !important; }
    .section8 .contact-explore article h4 { font-size: 1.6rem !important; }
}




/* =========================
반응형 (모바일)
========================= */

@media (max-width: 1150px) {
	.ytb-layout {width:100%;margin:0 auto;border-radius:0;padding:3rem 0;}
	.ytb-layout h2 { display:flex; flex-wrap:wrap; align-items:flex-end; padding:0 3rem 1rem 3rem }
	.ytb-layout h2 strong { font-size:2.5rem; font-weight:700; line-height:1.4; margin-bottom:0.5rem; flex:0 0 100%}
	.ytb-layout h2 span { font-size:1.5rem; font-weight:400; margin-left:0; line-height:1.4; margin-bottom:0.5rem;}
}

@media (max-width: 1150px) {
	.youtube-wrap {flex-direction: column;width: 100%;}
	.player-area {width: 100%;}
	.player-area article {width:100%;height:auto;}
	.player-area iframe {width: 100%;height: calc(100vw * 9 / 16); /* 16:9 비율 유지 */max-height: 360px;border:3px solid #059ee0;box-sizing:border-box;}
	.video-info {padding: 0.5px 1rem 3rem 1rem;}
	.list-area {width: 100%;padding: 1rem;}
	.list-area ul {display: flex;flex-direction: column;gap: 0.5rem;}
	.list-area li {height: auto;min-height: auto;}
	.list-area img {width: 14rem;height: 8rem;}
	.list-area .text strong {font-size: 1.3rem;}
}



/* 기본 PC 스타일 (일부 생략) */
.mobile-toggle-btn, .mobile-menu-layer {
    display: none; /* 기본적으로는 숨김 */
}

@media (max-width: 1500px) {
	.hero-nav {height:65px;	}
	.hero-menu { gap: 1.2rem;}
	.hero-menu li a {font-size: 1.8rem;}
	.hero-menu .subMn ul li a { font-size:13px; padding:10px 0 10px; }
	.hero-logo { left:5rem; }
	.hero-logo h1 .logo {width:20.9rem; height:4.4rem;}
	.hero-tour-btn {right:5rem; }
}

@media (max-width: 1280px) {
	.hero-menu { gap: 0.8rem;}
	.hero-menu li a {font-size: 1.7rem;}
	.hero-menu .subMn ul li a { font-size:12px; padding:10px 0 10px; }
	.hero-logo { left:4rem; }
	.hero-logo h1 .logo {width:20.9rem; height:4.4rem;}
	.hero-tour-btn {right:4rem; }
}


/* 1024px 미만일 때 반응형 처리 */
@media (max-width: 1120px) {
    .hero-menu, .hero-tour-btn {
        display: none; /* PC 메뉴 숨김 */
    }

    /* 햄버거 버튼 노출 */
    .mobile-toggle-btn {
		position:absolute; right:20px; top:20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 24px;
        height: 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
    .mobile-toggle-btn span {
        width: 100%;
        height: 2px;
        background-color: #fff;
        border-radius: 2px;
    }

    /* 모바일 레이어 스타일 */
    .mobile-menu-layer {
        display: block;
        position: fixed;
        top: 0;
        right: -100%; /* 처음엔 화면 밖에 숨김 */
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 10000;
        transition: right 0.3s ease;
        padding: 60px 20px;
        overflow-y: auto;
    }

    /* 레이어 활성화 시 */
    .mobile-menu-layer.is-active {
        right: 0;
    }

    /* 모바일 내부 메뉴 리스트 */
    .mobile-gnb .depth1 {
        display: block;
        font-size: 20px;
        font-weight: bold;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        color: #222;
        text-decoration: none;
    }
	.mobile-gnb .depth1 i { display:none; }
    .mobile-gnb .depth2 {
        background: #f9f9f9;
        padding: 10px 15px;
        /* 기본적으로 서브메뉴를 펼쳐두거나 필요시 JS로 제어 */
    }
    .mobile-gnb .depth2 li a {
        display: block;
        padding: 8px 0;
        color: #666;
        text-decoration: none;
		font-size:1.8rem;
    }

    .close-btn {
        position: absolute;
        top: 0;
        right: 10px;
        font-size: 40px;
        border: none;
        background: none;
        cursor: pointer;
    }

	/* 기본적으로 서브메뉴 숨김 */
	.mobile-gnb .depth2 {
		display: none; 
		background: #f9f9f9;
		padding: 10px 15px;
	}

	/* active 클래스가 붙었을 때만 노출 */
	.mobile-gnb li.is-active .depth2 {
		display: block;
	}

	/* 선택사항: 화살표 아이콘 같은 표시가 있으면 더 좋음 */
	.mobile-gnb .depth1 {
		position: relative;
		display: block;
		padding: 15px 0;
		/* ...기존 스타일... */
	}

	/* 열렸을 때 화살표 방향 변경 등의 시각적 효과용 */
	.mobile-gnb .depth1::after {
		content: '▼';
		position: absolute;
		right: 0;
		font-size: 12px;
		transition: transform 0.3s;
	}

	.mobile-gnb li.is-active .depth1::after {
		transform: rotate(180deg);
	}

}