@charset "UTF-8";

/*==============================================================

	style.css  —  희망의 자국 (unicef_dr26a)
	베이스: blue25c (복제 후 수정)

==============================================================*/

/* fonts */
/*=================================*/
@import url("./font.css");


/* setting */
/*=================================*/
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

article, aside, details, figcaption, figure,
footer, header, main, mark, nav, section, summary {
	display: block;
}

a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }

body {
	font-family: sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

ul, ol { list-style: none; }

input, button, select, textarea {
	background: transparent;
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}
button { cursor: pointer; }

*:focus { outline: 3px solid #000; outline-offset: 0; }

em { font-style: normal; }

img, picture, video {
	max-width: 100%;
	height: auto;
	display: block;
}

section { position: relative; }

/* 공통 class */
html, body {
	font-size: 10px;
	color: #222222;
	font-family: "Paperlogy", "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;
}

.hidden, .blind {
	position: absolute !important;
	top: auto !important;
	left: auto !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	text-indent: 0rem !important;
}

br.br-pc { display: block; }
br.br-tablet { display: none; }
br.br-mo { display: none; }
span.span-pc { display: block; }

.inner_1920 {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	max-width: 192.0rem;
}
.inner_1280 {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	max-width: 128.0rem;
}

/* keyframes */
@keyframes fade-in-top {
	0%   { transform: translateY(-50px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes fade-in-up {
	0%   { transform: translateY(50px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes fade-in-left {
	0%   { transform: translateX(-50px); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}

/* ico */
i[class^="ico-"] { display: inline-block; vertical-align: top; }

/* point-box (강조 박스) */
.point-box {
	display: inline-block;
	padding: 0.2rem 0.8rem;
	color: #fff;
	background-color: #0047AB;
	line-height: 1.2;
}

/* btn */
.btn-block { position: relative; display: block; text-align: center; }

.btn-support {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 54rem;            /* 1920 기준 610px */
	min-width: 54rem;
	height: 10.8rem;         /* 1920 기준 108px */
	min-height: 10.8rem;
	letter-spacing: -0.2rem;
	padding: 0 4rem;
	padding-bottom: 0.5rem;
	border-radius: 3rem;   /* 1920 기준 16px */
	background-color: #00AEEF;
/*	background-image: linear-gradient(
		142deg,
		rgba(255, 255, 255, 0.22) 0%,
		rgba(255, 255, 255, 0) 45%,
		rgba(0, 0, 0, 0.16) 100%
	);*/
	box-shadow:
			inset 2px 2px 0.1rem 0px rgb(255 255 255 / 45%), inset -1px -1px 0.3rem 0px rgba(0, 0, 0, 0.75), 0 1rem 1.4rem 0 rgb(0 0 0 / 20%);
	font-family: "Noto Sans KR", sans-serif;
	transition: transform 0.4s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.btn-support:hover,
.btn-support:focus {
	transform: scale(1.025);
	/*filter: brightness(1.05);*/
	/*box-shadow:*/
	/*	inset 2px 2px 2px rgba(255, 255, 255, 0.73),*/
	/*	inset -2px -4px 5px rgba(0, 0, 0, 0.75),*/
	/*	0 1.2rem 2.8rem 0 rgba(0, 0, 0, 0.35);*/
}

.btn-support > span {
	display: inline-flex;
	align-items: center;
	gap: 1.2rem;
	color: #FFF;
	font-size: 3.2rem;       /* 1920 기준 32px */
	font-weight: 700;
	line-height: 4rem;       /* 1920 기준 40px */
}
/* 메인 CTA 화살표 (퀵메뉴 제외 — .btn-block 한정) */
.btn-block .btn-support > span::after {
	content: "→";
	font-weight: 500;
}

/* 우측하단 퀵메뉴 */
.quick-menu {
	position: fixed;
	z-index: 100;
	right: 1.5rem;
	top: 6rem;
	width: 16rem;
	transform: translateX(150%);
	transition: transform .8s cubic-bezier(.39,.575,.565,1.000);
}
.quick-menu a,
.quick-menu img { display: block; width: 100%; }
.quick-menu__imgs {
	position: relative;
	display: block;
	width: 100%;
}
.quick-menu__img { transition: opacity 0.35s ease; }
.quick-menu__img--active {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}
.quick-menu.is-img-active .quick-menu__img--base { opacity: 0; }
.quick-menu.is-img-active .quick-menu__img--active { opacity: 1; }
.quick-menu a { transition: transform .3s ease; }
.quick-menu a:hover,
.quick-menu a:focus { transform: scale(1.03); }

body.js-quick-menu--is-active .quick-menu { transform: translateX(0); }

/* video */
.video-cont iframe,
.video-cont object,
.video-cont embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* layout */
/*=================================*/
/* bg는 전체를 감싸는 wrap에 한 번만 (hero+intro 영역을 덮음). 개별 섹션은 투명 */
.wrap {
	overflow: hidden;
	background: #000 url(https://cdn.unicef.or.kr/images/unicef_drtv26a/bg-hero.png) no-repeat center top / 100% auto;
}

section { position: relative; }
section .title { position: relative; text-align: center; }

/* section-header */
/*=================================*/
.section-header {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	padding: 4rem;
}
.section-header .logo img { width: 100%; }
.section-header .logo .logo_btn {
	display: block;
	width: 12.7rem;
	height: 6.8rem;
	background-color: transparent;
}

/* section-main (Hero) */
/*=================================*/
.section-main {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 134rem;          /* PC 기준 총 높이 1340 — bg는 .wrap 에서 처리 */
	margin-top: -14rem;
}
/* 합성 스테이지 (1920 디자인 기준, rem-vw 로 스케일) */
.section-main .main-stage {
	position: relative;
	width: 100%;
	height: 100%;
}
.section-main .hero-human {
	position: absolute;
	z-index: 10;
	width: auto;
	height: auto;
	pointer-events: none;
}
.section-main .hero-human--w { top: 21rem; left: min(20rem, calc(36.6vw - 46rem)); width: 46rem; z-index: 1; }   /* 박주미 — 사진 뒤 / 안쪽 가장자리 36.6vw 캡(1920 위치 유지) */
.section-main .hero-human--m { top: 55rem; right: min(18.5rem, calc(38vw - 56rem)); width: 50rem; z-index: 3; }   /* 이덕화 — 사진 앞 / 안쪽 가장자리 66.15vw 캡 */
.section-main .hero-photo {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: calc(25rem + 50rem * 102 / 290 + 15px + 3.75rem + 0.6rem + 7.5rem + 25px); /* 상단 카피 하단 + 25px */
	width: 68rem;
	transform: translateX(-50%);
}
.section-main .hero-photo img {
	display: block;
	width: 100%;
	height: auto;
}
.section-main .hero-title {
	position: absolute;
	z-index: 4;
	top: 28rem;
	left: 50%;
	width: 50rem;
	margin: 0;
	transform: translateX(-50%);
}
.section-main .hero-copy {
	position: absolute;
	z-index: 4;
	left: 50%;
	width: 64rem;
	transform: translateX(-50%);
	text-align: center;
	color: #fff;
	font-family: "Noto Sans KR", sans-serif;
/*	text-shadow: 0 0.2rem 1.6rem rgba(0,0,0,0.55);*/
}
.section-main .hero-copy p {
	margin: 0;
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 3.4rem;
}
.section-main .hero-copy--top p {
	font-size: 2.5rem;       /* 1920 기준 25px */
	line-height: 3.2rem;    /* 1920 기준 37.5px */
	letter-spacing:-0.2rem;
}
.section-main .hero-copy--btm p {
	font-size: 2.5rem;       /* 1920 기준 24px */
	line-height: 3.2rem;     /* 1920 기준 36px */
	letter-spacing: -0.2rem;
}
.section-main .hero-copy .copy-hl {
	color: #F2A6A6;
	font-weight: 600;
}
/* '불주사'만 강조 → 첫 줄 간격은 p(.copy-q)로 이전 (레이아웃 동일 유지) */
/*.section-main .hero-copy--top .copy-q { margin-bottom: 0.6rem; }*/
.section-main .hero-copy--top {
	top: calc(28rem + 50rem * 102 / 290 + 15px); /* 타이틀 이미지 하단 + 15px */
}
.section-main .hero-copy--btm {
	top: calc(28rem + 50rem * 102 / 250 + 15px + 3.75rem + 0.6rem + 7.5rem + 25px + 60rem * 109 / 348 + 30px - 3.6rem); /* 폴라로이드 하단 + 30px, 4줄 br 반영 1줄 상향 */
}
.section-main .hero-btn {
	position: absolute;
	z-index: 4;
	top: calc(28rem + 50rem * 102 / 290 + 15px + 3.75rem + 0.6rem + 7.5rem + 25px + 60rem * 109 / 348 + 30px + 10.8rem + 35px); /* 하단 카피 하단 + 35px */
	left: 50%;
	width: auto;
	transform: translateX(-50%);
}
.section-main .hero-src.card-src {
	position: absolute;
	z-index: 4;
	right: 19rem;
	bottom: 11.2rem;
	left: auto;
	text-align: right;
	color: #8f8f8f;
	font-size: 1.4rem;
	opacity: 0.4;
	line-height: 1;
	white-space: nowrap;
}
/* 스크롤 다운 인디케이터 */
.section-main .scroll-down {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: 3.2rem;
	transform: translateX(-50%);
}
.section-main .scroll-down .ico-scroll {
	width: 6.4rem;
	height: 3.6rem;
	background: url(https://cdn.unicef.or.kr/images/unicef_drtv26a/ico_scroll_down.svg) no-repeat center center / contain;
}

/* section-intro (영상 + 인물 탭) */
/*=================================*/
.section-intro {
	padding: 6rem 0 14.5rem;       /* 상단 60 / 하단 145 — bg 없음(.wrap 배경 노출) */
}
.section-intro .video-area {
	position: relative;
	width: 134.8rem;               /* 영상 가로 1348 */
	max-width: 100%;
	margin: 0 auto;
}
.section-intro .video-cont {
	overflow: hidden;
	position: relative;
	z-index: 2;
	width: 100%;
	aspect-ratio: 16 / 9;          /* 1348 × 758 */
}
/* 인물 탭 — 영상 바로 아래 우측정렬, flush */
.section-intro .intro-tab {
	position: absolute;
	top: 99.6%;
	right: 0;
	z-index: 1;
	display: flex;
	gap: 0;
}
.section-intro .intro-tab__btn {
	position: relative;
	min-width: 26rem;
	padding: 1.4rem 3rem;
	border-radius: 0 0 1.6rem 1.6rem;
	color: #ffffff;
	background: #00AEEF;
	opacity: 0.3;
	font-family: "Noto Sans KR", sans-serif;
	font-size: 2.6rem;       /* 1920 기준 26px */
	font-weight: 700;
	line-height: 3.4rem;     /* 1920 기준 34px */
	letter-spacing: -0.18rem;
	transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.section-intro .intro-tab__btn.is-active {
	z-index: 2;
	color: #ffffff;
	background: #00AEEF;
	opacity: 1;
	border-radius: 0 0 1.6rem 0;   /* 왼쪽은 직선 → btn-side 와 이음새 없이 연결 */
	overflow: visible;
}
/* 활성 탭 좌측 곡선 플레어 (btn-side) — 탭과 한 덩어리로 보이게 겹쳐 붙임 */
.section-intro .intro-tab__btn.is-active::before {
	content: '';
	position: absolute;
	top: 0;
	right: 100%;
	width: 8.7rem;
	height: calc(100% + 0px);
	margin-right: -12px;
	background: url(https://cdn.unicef.or.kr/images/unicef_drtv26a/btn-side.png) no-repeat 100% 0 / auto 100%;
	pointer-events: none;
}
/* 2번 탭 활성 시 btn-side 곡선이 1번 텍스트와 겹치지 않도록 간격 */
.section-intro .intro-tab:has(.intro-tab__btn:nth-child(2).is-active) {
	gap: 3rem;
}

/* section-story */
/*=================================*/
.section-story {
	height: 94rem;                 /* 총 높이 940 */
	padding: 10rem 20rem 24rem 10rem;        /* 위 110 / 아래 240 */
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	/* 배경 없음 — .wrap(bg-hero 하단 블랙 + #000) 노출 */
}
.section-story .inner_1920 { position: relative; height: 100%; }
/* 좌측 풀블리드 이미지 */
.section-story .story-img {
	position: absolute;
	left: 0;
	top: 0;
	width: 49%;
	height: 100%;
	overflow: visible;
	opacity: 0;
	transition: opacity 1s ease;
}
.section-story.has-scrolled .story-img { opacity: 1; }
.section-story .story-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	transform: scale(1.3);
	transform-origin: left center;
}
/* 우측 우정렬 텍스트 */
.section-story .inner_1280 {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.section-story .story-text { text-align: right; color: #fff; }
.section-story .title {
	margin: 0;
	text-align: right;
}
.section-story .title img {
	display: block;
	margin-left: auto;
	height: 20.4rem;          /* 1920 기준 204px */
	width: auto;
}
.section-story .title .copy-hl {
	color: #bf6a6a;
/*	font-weight: 500;*/
}
.section-story .text-cont {
	margin-top: 9.5rem;      /* 1920 기준 95px — 타이틀 이미지 하단 간격 */
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.section-story .text-cont p {
	color: #fff;
	font-size: 3.4rem;       /* 1920 기준 34px */
	font-weight: 700;        /* Pretendard Bold */
	line-height: 5rem;     /* 1920 기준 56px */
	letter-spacing:-0.15rem;
}
.section-story .text-cont .copy-hl {
	color: #bf6a6a;
	font-weight: 700;
}
.section-story .text-cont p + p { margin-top: 3rem; }

/* section-story ~ section-disease 사이 구분선 */
.section-disease::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -12rem;
	width: 1px;
	height: 20rem;
	background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity var(--rv-dur) ease;
}

/* section-disease (질병 카드) */
/*=================================*/
.section-disease {
	height: 110rem;                /* 총 높이 1100 */
	padding: 14.5rem 0 10.5rem;    /* 위 145 / 아래 105 */
	font-family: "Noto Sans KR", sans-serif;
	/* 배경 없음 — wrap(#000) 노출 */
}
.section-disease .disease-cont .disease-stat{
	text-align:center;
}
.section-disease .disease-cont .disease-stat .inner-disease-stat{
	display:inline-block;
}
.section-disease .disease-cont .disease-stat .inner-disease-stat b{
	color:#bf6a6a;
}
.br-m { display: none; }   /* 모바일 전용 줄바꿈 (PC 숨김) */
/* 타이틀 (흰 텍스트 + 파란 손글씨 강조) */
.section-disease .title {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	color: #fff;
	font-family: "Noto Sans KR", "Pretendard", sans-serif;
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 6rem;
	letter-spacing: -0.18rem;
}
.section-disease .title span {
	display: flex;
	align-items: center;
	justify-content: center;
}
.section-disease .title span:nth-of-type(1) img { width: auto; height: 5.2rem; max-width: 200%; }   /* 1920 기준 52px */
.section-disease .title span:nth-of-type(2) img { width: auto; height: 5.2rem; max-width: 200%; }
.section-disease .title .bk { font-style: normal; font-weight: 400; color: #fff; margin: 0 1.1rem; }
.section-disease .title b.hand {
	/*font-family: "Sandoll GongPil", "SD GongPil", "Nanum Brush Script", cursive;*/
	color: #5cc6f0;
	/*font-weight: 400;          !* SD GongPil Medium (aMd) *!*/
	/*font-style: normal;*/
	font-size: 5.4rem;
	line-height: 1;
	padding: 0 6rem;
	/*width:264px;*/
}
/* 카드 (슬라이드 이미지 = 카드 배경, 텍스트 오버레이) */
.section-disease .slider-disease {
	overflow: visible;
	position: relative;
	margin-top: 4rem;
}
.section-disease .slider-disease .swiper-buttons { display: none; }
.section-disease .slider-disease .swiper-wrapper {
	transform: unset;
	justify-content: center;
	gap: 1.5rem;
}
.section-disease .slider-disease .swiper-slide {
	flex-shrink: 0;
	width: 37rem;
}
.section-disease .card-cont {
	position: relative;
	width: 37rem;
	opacity: 0;
}
.section-disease.has-scrolled .swiper-slide:nth-of-type(1) .card-cont { animation: fade-in-up 0.9s linear both; }
.section-disease.has-scrolled .swiper-slide:nth-of-type(2) .card-cont { animation: fade-in-up 0.9s linear both 0.2s; }
.section-disease.has-scrolled .swiper-slide:nth-of-type(3) .card-cont { animation: fade-in-up 0.9s linear both 0.4s; }
.section-disease .card-bg { width: 100%; display: block; }
.section-disease .card-body {
	position: absolute;
	top: 33.8rem;            /* 1920 기준 338px */
	left: 3.5rem;            /* 1920 기준 35px */
	right: 3.5rem;
	bottom: 0;
	padding: 0;
}
.section-disease .card-tit {
	display: block;
	margin: 0 0 1.2rem;
	color: #fff;
	font-size: 3.3rem;         /* 1920 기준 33px */
	font-weight: 700;
	line-height: 4.8rem;     /* 1920 기준 48px */
	letter-spacing: -0.18rem;
}
.section-disease .card-body p {
	color: #e6e6e6;
	font-size: 2rem;         /* 1920 기준 20px */
	font-weight: 400;
	line-height: 3rem;       /* 1920 기준 30px */
	letter-spacing: -0.06em;
}
.section-disease .card-src {
	position: absolute;
	bottom: 1.8rem;          /* 1920 기준 18px */
	left: 0;
	right: 0;
	text-align: center;
	color: #8a8a8a;
	font-size: 1.4rem;
	opacity: 0.4;
}
/* 하단 통계 라인 */
.section-disease .disease-stat {
	margin-top: 4rem;
	text-align: center;
	color: #fff;
	font-size: 3.2rem;
	font-weight: 500;
	line-height: 4.2rem;
	letter-spacing: -0.18rem;
}
.section-disease .disease-stat > b { color: #ce7373; font-weight: 700; }
.section-disease .disease-stat .stat-src {
	/*display: none;*/
	display:block;
	text-align: right;
	color: #8a8a8a;
	font-size: 1.4rem;
	opacity: 0.5;
}

/* section-goal (이덕화 + CTA) */
/*=================================*/
.section-goal {
	 position: relative;
  height: 77.2rem;
  background:
    linear-gradient(
      180deg,
      rgba(0, 70, 97, 0) 74%,
      #004661 100%
    ),
    url("https://cdn.unicef.or.kr/images/unicef_drtv26a/bg-human.png") no-repeat center top / auto 100%;
	font-family: "Noto Sans KR", sans-serif;
}
/* 하단부터 시안으로 페이드 → support 와 끊김 없이 연결 (그라데이션이 goal 안에서 시작) */
.section-goal::after {
	/* content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 48%; */
	/* z-index: 1; */
	/* background: linear-gradient(180deg, rgba(0, 174, 239, 0) 0%, #00AEEF 100%); */
	/* pointer-events: none; */
}
.section-goal .inner_1920 { position: relative; z-index: 2; height: 100%; }
.section-goal .inner_1280 { position: relative; height: 100%; }
.section-goal .goal-text {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 66rem;
	color: #fff;
}
.section-goal .goal-text h2 { margin: 0; font-size: inherit; font-weight: 400; }
.section-goal .goal-lead {
	display: block;
	font-size: 3rem;
	font-weight: 400;
	line-height: 4.6rem;
	letter-spacing: -0.18rem;
}
.section-goal .goal-point {
	display: block;
	margin: 1.6rem 0 4.4rem;
	text-align: left;
	color: #6bb0e2;
	font-family: "Sandoll MyeongjoNeo1", "Nanum Myeongjo", "Noto Serif KR", serif;
	font-size: 4.8rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.3rem;
}
.section-goal .btn-support { width: 52rem; min-width: 52rem; }
.section-goal .btn-block { text-align: left; }

/* cyan-zone : goal~footer 공통 배경 */
.cyan-zone { background: #00b2f6; }

/* section-support */
/*=================================*/
.section-support {
	height: 139rem;                /* 총 높이 1390 */
	padding: 20rem 0 3.5rem;       /* 위 200 / 아래 35 */
	font-family: "Noto Sans KR", sans-serif;
	/* 배경 없음 — cyan-zone(#00AEEF). 상단 그라데이션으로 goal과 연결 */
}
/* 상단 #004660 → #00AEEF 페이드 (goal 하단 시안과 이어짐) */
.section-support::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 30rem;
	z-index: 1;
	background: linear-gradient(180deg, #004661 0%, rgba(0, 70, 97, 0) 100%);
	pointer-events: none;
}
.section-support .inner_1920 { position: relative; z-index: 2; height: 100%; }
.section-support .support-cont {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	max-width: 128rem;
}
.section-support .support-cont .title {
	color: #fff;
	font-size: 5rem;
	font-weight: 700;
	line-height: 7rem;
	letter-spacing: -0.25rem;
}
.section-support .support-cont .title .hl {
	display: inline-block;
	padding: 0.1rem 1rem 0rem 1.5rem;
	background: rgba(0, 106, 167, 0.8);   /* #006aa7 · opacity 0.8 */
	padding-top: 0;
	padding-bottom: 0;
	line-height: 5.2rem;
}
.section-support .support-cont .title .hl > b { font-weight: 700; }
.section-support .support-cont .title .hl > b > em { font-size: 2.8rem; }
/* 카드 (가로형: 썸네일 + 텍스트, 세로 스택) */
.section-support .support-cards {
	position: relative;
	z-index: 1;
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	width: 100%;
}
.section-support .support-card {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 4rem;
	padding: 1.2rem 4rem 1.4rem 1.4rem;
	border-radius: 5rem;
	background: #0891da;
	/* 크리스탈 베벨 (PSD 경사와 엠보스 · 방향 아래로 → 안쪽으로 눌린: 좌상단 그림자·우하단 #7acaf0 하이라이트) */
	box-shadow:
		inset 0.35rem 0.35rem 0.25rem 0 rgba(4, 42, 82, 0.55), inset -0.05rem -0.05rem 0.25rem 0.25rem rgba(152, 198, 245, 0.9);
	opacity: 0;
}
.section-support.has-scrolled .support-card:nth-of-type(1) { animation: fade-in-up 0.9s linear both; }
.section-support.has-scrolled .support-card:nth-of-type(2) { animation: fade-in-up 0.9s linear both 0.2s; }
.section-support.has-scrolled .support-card:nth-of-type(3) { animation: fade-in-up 0.9s linear both 0.4s; }
.section-support .card-thumb {
	flex-shrink: 0;
	width: 40rem;
	border-radius: 1.2rem;
	overflow: hidden;
}
.section-support .card-thumb img { width: 100%; display: block; }
.section-support .card-text strong,
.section-support .card-text h3 {
	display: block;
	margin: 0 0 1.8rem;   /* 1920 기준 18px */
	color: #fff;
	font-size: 3.6rem;       /* 1920 기준 36px */
	font-weight: 700;
	line-height: 4.4rem;     /* 1920 기준 44px */
	letter-spacing: -0.25rem;
}
.section-support .card-text p {
	color: #dcefff;
	font-size: 2.2rem;       /* 1920 기준 22px */
	font-weight: 400;
	line-height: 3rem;     /* 1920 기준 36px */
	letter-spacing: -0.1rem;
}
/* 박주미 — 페이지 우측(inner_1920 기준)으로 빼서 카드 텍스트와 겹침 최소화 */
.section-support .support-park {
	position: absolute;
	right: 8rem;
	bottom: 13rem;
	z-index: 2;
	width: 50rem;
	height: auto;
	pointer-events: none;
}
/* 하단 카피 — 카드와 45px 간격 */
.section-support .support-foot {
	margin-top: 5.2rem;      /* 1920 기준 52px */
	text-align: center;
	color: #fff;
	font-size: 5rem;       /* 1920 기준 52px */
	font-weight: 600;
	line-height: 6.8rem;     /* 1920 기준 68px */
	letter-spacing: -0.4rem;
	z-index: 3;
}
.section-support .support-foot > b {
	color: #004163;
	font-weight: 700;
	text-decoration: none;
}

/* section-closing */
/*=================================*/
.section-closing {
	position: relative;
	height: 89.8rem;          /* 총 높이 1138 */
	background:linear-gradient(180deg, rgba(0, 178, 246, 100) 0%, rgba(0, 178, 246, 0) 26%),
    url("https://cdn.unicef.or.kr/images/unicef_drtv26a/bg-vaccine.png") no-repeat center top / auto 100% ;
/*	background: url(https://cdn.unicef.or.kr/images/unicef_drtv26a/bg-vaccine.png) no-repeat center center / 100% auto;*/
	font-family: "Noto Sans KR", sans-serif;
}
/* 상단을 support 시안에서 페이드 → 경계 제거 */
.section-closing::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 16%;
	z-index: 1;
	/* background: linear-gradient(180deg, #00AEEF 0%, rgba(0, 174, 239, 0) 100%); */
	pointer-events: none;
}
.section-closing .inner_1920 { 
	position: relative; z-index: 2; height: 100%; 
/*	background:linear-gradient(#00b2f6, rgba(0, 178, 246, 0) 15%)*/
}
.section-closing .inner_1280 {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-left: 16rem;
}
@media all and (min-width: 1600px) {
	.section-closing .inner_1280 { margin-left: 40rem; }
}
.section-closing .closing-text {
	width: 52rem;
	padding-top:14rem;
}
.section-closing .title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	font-family: "Sandoll GongPil", "SD GongPil", "Nanum Brush Script", cursive;
	color: #243646;
	font-weight: 400;
	line-height: 1.1;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.section-closing .title .line1 { font-size: 7.6rem; }
.section-closing .title .line2 { font-size: 5.8rem; color: #243646; }
.section-closing .title .hl-cyan {
	color: #00AEEF;
	font-weight: 400;
}
.section-closing.has-scrolled .title { opacity: 1; width:45rem; margin:0; }
.section-closing .closing-desc {
	margin: 2.8rem 0 4rem;
	font-family: "Pretendard", "Noto Sans KR", sans-serif;
}
.section-closing .closing-desc p {
	margin: 0;
	color: #243646;
	font-size: 3rem;
	font-weight: 500;
	line-height: 5rem;
	letter-spacing: -0.15rem;
	border-bottom: 1px solid rgba(36, 54, 70, 0.55);
    padding-left: 2rem;
/*
	text-decoration: underline;
	text-decoration-color: rgba(36, 54, 70, 0.55);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.7rem;
*/
}
.section-closing .btn-block { text-align: left; }
.section-closing .btn-support {
	width: 52rem;
	min-width: 52rem;
}

/* Footer */
/*=================================*/
.sec_footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #000;
	text-align: center;
	padding: 12rem 0 14rem;
}
.sec_footer .footer-logo { width: auto; height: auto; }
.sec_footer .footer-logo img { width: 32rem; height: auto; }
.sec_footer .footer-info {
	margin-top: 3.2rem;
	font-size: 1.7rem;
	color: #b3b3b3;
	line-height: 2.8rem;
}
.sec_footer .footer-copyright {
	margin-top: 4rem;
	font-size: 1.6rem;
	line-height: 2.4rem;
	color: #666;
}
.sec_footer .line-pc { display: inline-block; margin: 0 0.6rem; }
.sec_footer .m-show { display: none; }


/* ==========================================================
	등장 모션 (Scroll Entrance) — 과하지 않은 부드러움
	IntersectionObserver 가 섹션에 .has-scrolled 부여 시 재생 (1회)
========================================================== */
:root {
	--rv-dur: 1s;
}

/* 숨김 상태 (opacity only — VDI repaint 부담 완화) */
.section-intro .video-area,
.section-intro .intro-tab,
.section-story .story-text .title,
.section-story .story-text .text-cont,
.section-disease .title,
.section-disease .card-cont,
.section-disease .disease-stat,
.section-goal .goal-lead,
.section-goal .goal-point,
.section-goal .btn-block,
.section-support .support-cont .title,
.section-support .support-card,
.section-support .support-foot,
.section-support .support-park,
.section-closing .closing-desc,
.section-closing .btn-block,
.sec_footer .footer-logo,
.sec_footer .footer-info,
.sec_footer .footer-copyright {
	opacity: 0;
	transition: opacity var(--rv-dur) ease;
}
/* 기존 animation 기반 카드 → transition 으로 통일 */
.section-disease .card-cont,
.section-support .support-card { animation: none !important; }

/* 섹션 겹침 시 intro가 story 위 */
.section-intro.has-scrolled { z-index: 3; }
.section-story.has-scrolled { z-index: 2; }

/* 표시 상태 */
.section-intro.has-scrolled .video-area,
.section-intro.has-scrolled .intro-tab,
.section-story.has-scrolled .story-text .title,
.section-story.has-scrolled .story-text .text-cont,
.section-disease.has-scrolled .title,
.section-disease.has-scrolled .card-cont,
.section-disease.has-scrolled .disease-stat,
.section-goal.has-scrolled .goal-lead,
.section-goal.has-scrolled .goal-point,
.section-goal.has-scrolled .btn-block,
.section-support.has-scrolled .support-cont .title,
.section-support.has-scrolled .support-card,
.section-support.has-scrolled .support-foot,
.section-support.has-scrolled .support-park,
.section-closing.has-scrolled .closing-desc,
.section-closing.has-scrolled .btn-block,
.sec_footer.has-scrolled .footer-logo,
.sec_footer.has-scrolled .footer-info,
.sec_footer.has-scrolled .footer-copyright {
	opacity: 1;
}
.section-disease.has-scrolled::before {
	opacity: 1;
}

/* stagger (살짝) */
.section-disease.has-scrolled::before { transition-delay: 0s; }
.section-disease.has-scrolled .title { transition-delay: .08s; }
.section-intro.has-scrolled .intro-tab { transition-delay: .12s; }
.section-story.has-scrolled .story-text .text-cont { transition-delay: .15s; }
.section-disease.has-scrolled .swiper-slide:nth-of-type(2) .card-cont { transition-delay: .12s; }
.section-disease.has-scrolled .swiper-slide:nth-of-type(3) .card-cont { transition-delay: .24s; }
.section-disease.has-scrolled .disease-stat { transition-delay: .32s; }
.section-goal.has-scrolled .goal-point { transition-delay: .12s; }
.section-goal.has-scrolled .btn-block { transition-delay: .24s; }
.section-support.has-scrolled .support-card:nth-of-type(2) { transition-delay: .12s; }
.section-support.has-scrolled .support-card:nth-of-type(3) { transition-delay: .24s; }
.section-support.has-scrolled .support-park { transition-delay: .3s; }
.section-support.has-scrolled .support-foot { transition-delay: .4s; }
.section-closing.has-scrolled .closing-desc { transition-delay: .12s; }
.section-closing.has-scrolled .btn-block { transition-delay: .24s; }
.sec_footer.has-scrolled .footer-info { transition-delay: .1s; }
.sec_footer.has-scrolled .footer-copyright { transition-delay: .2s; }

/* HERO — 타이틀 이미지만 등장 모션, 나머지는 즉시 표시 */
.section-main .hero-veil {
	position: absolute;
	inset: 0;
	z-index: 20;
	background: #2e1b1b;
	opacity: 0;
	pointer-events: none;
}

.section-main .hero-human,
.section-main .hero-photo,
.section-main .hero-copy,
.section-main .hero-btn {
	opacity: 1;
}

.section-main .hero-src {
	opacity: 0.4;
}

.section-main .hero-title {
	opacity: 0;
	transition: opacity var(--rv-dur) ease;
}

.section-main.has-scrolled .hero-title {
	opacity: 1;
	transition-delay: .9s;
}

/* 모션 최소화 선호 사용자: 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================
	반응형
========================================================== */

/* SIZE 1920 기준 */
@media all and (max-width: 1920px) {
	html, body { font-size: calc(95vw * 10 / 1920); }
	br.br-pc { display: none; }
	br.br-tablet { display: block; }
}

/* SIZE 1600 기준 */
@media all and (max-width: 1600px) {
	html, body { font-size: calc(90vw * 10 / 1600); }

	.section-disease .disease-cont,
	.section-support .support-cont { /*padding: 0 6rem;*/ }
	.section-support .support-deco { right: 2rem; width: 22rem; }
}

/* SIZE 768 기준 (모바일 분기) */
@media all and (max-width: 768px) {
	html, body { font-size: calc(100vw * 10 / 750); }

	br.br-pc { display: none; }
	br.br-tablet { display: none; }
	br.br-mo { display: block; }
	span.span-pc { display: none; }

	.inner_1920, .inner_1280 { max-width: 100%; height: auto; margin-left:0!important;}

	*:focus { outline: 2px solid #000; }

	/* btn */
	.btn-block { width: 100%; }
	.btn-support {
		width: 100%;
		min-width: 0;
		height: auto;
		min-height: 54px;
		padding: 13px 20px;
		border-radius: 16px;

	}
	.btn-support > span { font-size: 24px; line-height: 34px;  }

	/* quick-menu — MO 이미지(가로 바)가 완성형, 하단 full-width */
	.quick-menu {
		top: auto;
		right: 0;
		bottom: 0;
		width: 100%;
		transform: translateY(100%);
	}
	.quick-menu a:hover,
	.quick-menu a:focus { /*transform: none;*/ }
	body.js-quick-menu--is-active .quick-menu { transform: translateY(0); }

	/* header */
	.section-header { padding: 16px; }
	.section-header .logo .logo_btn { width: 64px; height: 34px; }

	/* bg: 모바일 히어로 배경은 .wrap 에서 처리 */
	.wrap {
		background: #000 url(https://cdn.unicef.or.kr/images/unicef_drtv26a/bg-hero_m.png) no-repeat center top / 100% auto;
	}

	/* section-main — MO 히어로 높이 640 (360 기준). 좌표는 360px 기준 */
	.section-main {
		height: calc(640 * 100vw / 360);   /* 360폭에서 640px */
		min-height: 0;
	}
	.section-main .main-stage { 
		height: 100%; min-height: 0;
/*		background:linear-gradient(rgba(46, 27, 27, 0) 54.62%, #2e1b1b); */
	}
	/* z-index: 박주미(휴먼1) 최상단 → 폴라로이드 → 이덕화 / 텍스트는 그 위 */
	/* 이덕화(휴먼2): top 268 / left 50%+42px / 높이 285 (360 기준) — z 최상단 */
	.section-main .hero-human--m {
		z-index: 3;
		top: calc(268 * 100vw / 360);
		left: calc(50% + 42 * 100vw / 360);
		right: auto;
		bottom: auto;
		height: calc(285 * 100vw / 360);
		width: auto;
	}
	/* 폴라로이드(중앙 사진): top 247 / 133×209 / 가로 중앙 (360 기준) */
	.section-main .hero-photo {
		z-index: 2;
		top: calc(247 * 100vw / 360);
		bottom: auto;
		left: 50%;
		transform: translateX(-50%);
		width: calc(133 * 100vw / 360);
		height: calc(209 * 100vw / 360);
	}
	.section-main .hero-photo img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	/* 박주미(휴먼1): top 147 / right 50%−20px / 높이 255 (360 기준) — z 최하단 */
	.section-main .hero-human--w {
		z-index: 1;
		top: calc(147 * 100vw / 360);
		right: calc(50% + 20 * 100vw / 360);
		left: auto;
		bottom: auto;
		height: calc(255 * 100vw / 360);
		width: auto;
	}
	.section-main .hero-title,
	.section-main .hero-copy,
	.section-main .hero-btn { z-index: 4; }
	/* 타이틀: top 95 / 이미지 높이 62 (360 기준) */
	.section-main .hero-title { top: calc(95 * 100vw / 360); height: calc(62 * 100vw / 360); width: auto; }
	.section-main .hero-title img { height: 100%; width: auto; }
	/* 상단 카피: 타이틀 하단 + 10px / 텍스트 12px (360 기준) */
	.section-main .hero-copy { width: 100%; padding: 0 24px; }
	.section-main .hero-copy p { font-size: calc(12 * 100vw / 360); line-height: calc(18 * 100vw / 360); }
	.section-main .hero-copy .copy-hl { font-size: calc(12 * 100vw / 360); }
/*	.section-main .hero-copy--top .copy-q { margin-bottom: calc(4 * 100vw / 360); }*/
	.section-main .hero-copy--top { top: calc((95 + 62 + 10) * 100vw / 360); }
	/* 하단 카피: top 478 (원래 463 +15) / 텍스트 12px (360 기준) */
	.section-main .hero-copy--btm { top: calc(460 * 100vw / 360); bottom: auto; } /* 478 - 18(1줄) */
	/* CTA: top 548 / 210×38 / radius 8 / 텍스트 14px (360 기준), 가로 중앙 */
	.section-main .hero-btn {
		top: calc(548 * 100vw / 360);
		bottom: auto;
		left: 50%;
		width: calc(240 * 100vw / 360);
		padding: 0;
		transform: translateX(-50%);
	}
	.section-main .hero-btn .btn-support {
		width: 100%;
		min-width: 0;
		height: calc(42 * 100vw / 360);
		min-height: 0;
		padding: 0;
		border-radius: calc(8 * 100vw / 360);
		padding-bottom: 0.5rem;
	}
	.section-main .hero-btn .btn-support > span { font-size: calc(14 * 100vw / 360); }
	.section-main .hero-src.card-src {
		right: calc(24 * 100vw / 360);
		bottom: calc(105 * 100vw / 360);
		font-size: calc(7 * 100vw / 360);
	}
	.section-main .scroll-down { display: block; bottom: 2.5vh; }
	.section-main .scroll-down .ico-scroll { width: 36px; height: 20px; }

	/* section-intro */
	.section-intro {
		padding: 40px 0 56px;
	}
	/* 양쪽 여백 18 (360 기준) */
	.section-intro .video-area { width: 100%; padding: 0 calc(18 * 100vw / 360); }
	.section-intro .video-cont {
		position: relative;
		z-index: 2;
		aspect-ratio: 16 / 9;
	}
	.section-intro .video-cont iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
	/* 탭: 영상 아래 우측정렬 / 버튼 폭 140·높이 25 / 폰트 12 (360 기준) */
	.section-intro .intro-tab {
		position: relative;
		z-index: 1;
		transform: none;
		display: flex;
		justify-content: flex-end;
		gap: calc(2 * 100vw / 360);
		margin-top: 0;                       /* 영상에 찰싹 붙임 (간격 없음) */
	}
	.section-intro .intro-tab__btn {
		flex: none;
		width: calc(140 * 100vw / 360);
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(25 * 100vw / 360);
		padding: 0;
		/*border-radius: calc(6 * 100vw / 360);*/
		border-radius: 0!important;
		border-bottom-left-radius:calc(6 * 100vw / 360)!important;
		border-bottom-right-radius:calc(6 * 100vw / 360)!important;
		font-size: calc(12 * 100vw / 360);
		line-height: 1;
		box-shadow: none;
	}
	/* 활성탭: 좌측 직선 + btn-side 곡선 플레어 (PC와 동일, 모바일 스케일) */
	.section-intro .intro-tab__btn.is-active { border-radius: 0 calc(6 * 100vw / 360) calc(6 * 100vw / 360) 0; }
	.section-intro .intro-tab__btn.is-active::before {
		display: block;
		top: 0;
		height: calc(100% + 0px);
		width: calc(36 * 100vw / 360);
		margin-right: calc(-8 * 100vw / 360);
	}
	.section-intro .intro-tab:has(.intro-tab__btn:nth-child(2).is-active) {
		gap: calc(10 * 100vw / 360);
	}

	/* section-story — 타이틀·본문 자연 흐름 / 이미지 absolute */
	.section-story { height: auto; padding: 0 0 60px; }
	.section-story .inner_1920 { display: block; height: auto; position: relative; }
	.section-story .inner_1280 { display: block; position: relative; z-index: 2; }
	.section-story .story-text { display: flex; flex-direction: column; }
	.section-story .title {
		z-index: 2;
		text-align: right;
		padding: 0 calc(30 * 100vw / 360) 0 calc(20 * 100vw / 360);
	}
	.section-story .title img {
		height: calc(81 * 100vw / 360);   /* 360 기준 81px */
		width: auto;
	}
	/* 이미지: 100% absolute — 위치는 별도 조정 */
	.section-story .story-img {
		position: absolute;
		left: 0;
		width: 100%;
		height: auto;
		margin: 0;
		transform: none;
		opacity: 1;
		z-index: 1;          /* 이미지는 텍스트 아래 */
		border-radius: 0;
		top:-24rem;
	}
	.section-story .story-img img {
		width: 100%;
		height: auto;
		object-fit: unset;
		border-radius: 0;
		transform:scale(1)
	}
	.section-story .text-cont {
		margin-top: calc(160 * 100vw / 360);   /* 360 기준 상단 160px */
		z-index: 2;
		text-align: right;
		padding: 0 calc(30 * 100vw / 360) 0 calc(20 * 100vw / 360);
	}
	.section-story .text-cont p { font-size: calc(14 * 100vw / 360); line-height: calc(22 * 100vw / 360); }
	.section-story .text-cont p + p { margin-top: calc(16 * 100vw / 360); }

	/* section-disease */
	.section-disease::before {
		top: -6rem;
		transform: translateX(-50%);
		height: calc(70 * 100vw / 360);
	}
	.section-disease { height: auto; padding: 72px 0 56px; }
	.section-disease .disease-cont { padding: 0; }
	/* 타이틀: 문장별 2줄로 깔끔하게 (br-m), 손글씨 인라인 */
	.section-disease .title {
		font-size: calc(18 * 100vw / 360);
		line-height: 1.4;
		gap: calc(18 * 100vw / 360);
		padding: 0 calc(24 * 100vw / 360);
		text-align: center;
	}
	.section-disease .title span { display: block; }       /* flex 해제 → br 줄바꿈 */
	.section-disease .title span:nth-of-type(1) .hand { width: auto; padding: 0; margin: 0 calc(15 * 100vw / 360); }
	.section-disease .title span:nth-of-type(1) .hand img { width: auto; height: calc(24 * 100vw / 360); }
	.section-disease .title span:nth-of-type(2) .hand { width: auto; padding: 0; margin: 0 calc(15 * 100vw / 360); }
	.section-disease .title span:nth-of-type(2) .hand img { width: auto; height: calc(24 * 100vw / 360); }
	.section-disease .title b.hand { display: inline-block; vertical-align: middle; font-size: calc(28 * 100vw / 360); padding: 0 calc(6 * 100vw / 360); }
	.section-disease .title .br-m { display: inline; }
	/* 캐러셀: 중앙 강조 + 양옆 peek(opacity 0.2) / 간격 10 / 좌우 화살표 SVG */
	.section-disease .slider-disease { position: relative; margin-top: 70px; overflow: visible; }
	.section-disease .slider-disease .swiper-buttons { display: block; }
	.section-disease .swiper-button-prev,
	.section-disease .swiper-button-next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		width: calc(20 * 100vw / 360);
		height: calc(34 * 100vw / 360);
	}
	/* 활성 카드 각 면에서 28px 간격 (카드면 75 - 간격28 - 화살표폭20 = 27 @360) */
	.section-disease .swiper-button-prev { left: calc(27 * 100vw / 360); background: url(https://cdn.unicef.or.kr/images/unicef_drtv26a/ico_arrow_prev.svg) no-repeat center / contain; }
	.section-disease .swiper-button-next { right: calc(27 * 100vw / 360); background: url(https://cdn.unicef.or.kr/images/unicef_drtv26a/ico_arrow_next.svg) no-repeat center / contain; }
	.section-disease .swiper-button-prev::after,
	.section-disease .swiper-button-next::after { display: none; }
	.section-disease .slider-disease .swiper-wrapper { gap: 0; justify-content: flex-start; }
	.section-disease .slider-disease .swiper-slide {
		flex-shrink: 0;
		width: calc(210 * 100vw / 360);
		padding: 0;
		opacity: 0.2;
		transition: opacity 0.3s ease;
	}
	.section-disease .slider-disease .swiper-slide-active { opacity: 1; }
	/* 카드: 210 × 260 (360 기준), 이미지는 cover */
	.section-disease .card-cont { width: 100%; height: calc(260 * 100vw / 360); max-width: none; margin: 0; animation: none !important; opacity: 1; }
	.section-disease .card-bg { height: 100%; object-fit: cover; }
	/* 카드 텍스트: 좌 22 / 위 130 시작, 출처는 아래서 10 (360 기준) */
	.section-disease .card-body {
		top: calc(130 * 100vw / 360);
		left: calc(16 * 100vw / 360);
		right: calc(16 * 100vw / 360);
		bottom: calc(10 * 100vw / 360);
		display: flex;
		flex-direction: column;
		padding: 0;
		text-align: left;
	}
	.section-disease .card-tit { font-size: calc(20 * 100vw / 360); margin-bottom: calc(6 * 100vw / 360); }
	.section-disease .card-body p { font-size: calc(11 * 100vw / 360); line-height: calc(17 * 100vw / 360); letter-spacing: -0.04rem; }
	/* 출처: 카드 하단 10px, 카드 전체 기준 가운데 정렬 (card-body 인셋 상쇄) */
	.section-disease .card-src {
		position: absolute;
		left: calc(-22 * 100vw / 360);
		right: calc(-16 * 100vw / 360);
		bottom: 0;
		margin: 0;
		text-align: center;
		line-height: 1;
		font-size: calc(10 * 100vw / 360);
	}
	.section-disease .disease-stat { margin-top: calc(22 * 100vw / 360); font-size: calc(16 * 100vw / 360); line-height: 1.2; padding: 0 calc(24 * 100vw / 360); }
	.section-disease .disease-stat .br-m { display: inline; }
	.section-disease .disease-stat .stat-src { display: block; text-align: center; margin-top: calc(10 * 100vw / 360); font-size: calc(10 * 100vw / 360); font-weight: 400; color: rgba(255, 255, 255, .45); }

	/* section-goal — MO 전용 배경 (bg-human_m). 최종 .svg→.png */
	.section-goal {
		height: auto;
		padding: 11vw 24px 14vw;
		background: 
			linear-gradient(
180deg,
rgba(0, 70, 97, 0) 74%,
#004661 100%
),
url("https://cdn.unicef.or.kr/images/unicef_drtv26a/bg-human_m.png") no-repeat center center / cover;
/*		background-image: url(https://cdn.unicef.or.kr/images/unicef_drtv26a/bg-human_m.png);*/
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100% auto;
	}
	/* 하단 그라데이션: #00455f → #00aeef 로 support(시안)와 부드럽게 연결 */
	.section-goal::after {
		display: block;
		height: 65%;
		background: linear-gradient(rgba(2, 176, 245, 0), #02b0f5 54.2%);
	}
	.section-goal .inner_1920 { height: auto; position: relative; }
	.section-goal .inner_1280 { position: static; height: auto; }
	.section-goal .goal-text {
		position: static;
		transform: none;
		width: 100%;
		text-align: left;
		word-break: keep-all;   /* 한글 단어 안 쪼개짐 (함께해 등) */
	}
	/* 텍스트: 좌측정렬, 화면 좌측 기준 193(@360)부터 시작 / 흰 11px · 시안 17px */
	.section-goal .goal-lead { margin-top: calc(5 * 100vw / 360); padding-left: calc(193 * 100vw / 360 - 24px); font-size: 3vw; line-height: 1.4; }
	.section-goal .goal-point { padding-left: calc(193 * 100vw / 360 - 24px); margin: 3vw 0 18px; text-align: left; font-size: 4.5vw; line-height: 1.2; }
	.section-goal .br-m { display: inline; }
	/* CTA: hero(다른 섹션)와 동일 규격 — 210×38, radius 8, 14px */
	.section-goal .btn-block { width: 100%; margin-top: calc(43 * 100vw / 360); text-align: center; }
	.section-goal.has-scrolled .btn-block {
		position: absolute;
		bottom: calc(-84 * 100vw / 360);
		left: 0;
		right: 0;
		margin-top: 0;
		text-align: center;
	}
	.section-goal .btn-support {
		width: calc(210 * 100vw / 360);
		min-width: 0;
		height: calc(38 * 100vw / 360);
		min-height: 0;
		padding: 0;
		border-radius: calc(8 * 100vw / 360);
	}
	.section-goal .btn-support > span { font-size: calc(14 * 100vw / 360); white-space: nowrap; }

	/* section-support */
	.section-support { height: auto; padding: 0 calc(20 * 100vw / 360) 52px; }   /* 카드 좌우 풀기준 20 */
	.section-support::before {
		background: linear-gradient(180deg, #004661 0%, #00b2f6 100%);
	}
	.section-support.has-scrolled { padding-top: calc(96 * 100vw / 360); }
	.section-support .inner_1920 { position: relative; }
	.section-support .support-cont { max-width: unset; padding: 0; }
	/* 타이틀: 16px, 2줄 (keep-all) */
	.section-support .support-cont .title { font-size: calc(18 * 100vw / 360); line-height: calc(24 * 100vw / 360); word-break: keep-all; }
	.section-support .support-cont .title .hl { /*padding: 2px 8px;*/ }
	.section-support .support-cont .title .hl > b > em { font-size: calc(12 * 100vw / 360); }
	/* 카드: 안쪽 패딩 8, 이미지 133×100, 텍스트 15/12 (간격 5) */
	.section-support .support-cards { width: 100%; margin-top: 26px; gap: 14px; }
	.section-support .support-card { gap: calc(10 * 100vw / 360); padding: calc(8 * 100vw / 360); border-radius: 14px; animation: none !important; opacity: 1;}
	.section-support .card-thumb { flex-shrink: 0; width: calc(133 * 100vw / 360); height: calc(100 * 100vw / 360); border-radius: 8px; }
	.section-support .card-thumb img { width: 100%; height: 100%; object-fit: cover; }
	.section-support .card-text { word-break: keep-all; }
	.section-support .card-text strong,
	.section-support .card-text h3 { font-size: calc(14 * 100vw / 360); line-height: calc(18 * 100vw / 360); margin-bottom: calc(5 * 100vw / 360); }
	.section-support .card-text p { font-size: calc(10 * 100vw / 360); line-height: calc(14 * 100vw / 360); }
	.section-support .card-text p br { display: none; }   /* PC용 줄바꿈 해제 → 자연 흐름 */
	.section-support .card-text p br.br-m { display: inline; }   /* 단, 모바일 전용 줄바꿈은 살림 */
	/* 하단: 박주미(우하단) + 카피 */
	/* 박주미: 카드 앞 / 텍스트 뒤 (z: 카드1 < 박주미2 < 카피3) */
	.section-support .support-park { display: block; position: absolute; right: -33px; bottom: 0; width: 23.5rem; height: auto; z-index: 2; }
	.section-support .support-foot { position: relative; z-index: 3; margin-top: calc(20 * 100vw / 360); text-align: center; font-size: calc(18 * 100vw / 360); line-height: calc(25 * 100vw / 360); }
	.section-support .br-m { display: inline; }

	/* section-closing — MO 전용 배경 (bg-vaccine_m). 최종 .svg→.png */
	.section-closing {
		height: auto;
		padding: calc(215 * 100vw / 360) 24px calc(45 * 100vw / 360);   /* 상단=이미지 높이+15(콘텐츠 이미지 아래로), 하단 45 */
		background-color: #e3e5df;                 /* 이미지 아래 남는 영역 */
		background-image: url(https://cdn.unicef.or.kr/images/unicef_drtv26a/bg-vaccine_m.png);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100% auto;                /* 가로 꽉, 비율 유지(크롭 방지) */
	}
	.section-closing::before { display: none; }   /* PC 상단 시안 페이드 비활성(MO) */
	.section-closing .inner_1920 { height: auto; }
	.section-closing .inner_1280 { display: block; height: auto; }
	.section-closing .closing-text { width: 100%; text-align: center; padding-top:0; background-color: #e3e5e0;}
	/* 타이틀: 센터, 질병보다 백신이 42 / 먼저 닿을 수 있도록 28 */
	.section-closing .title { align-items: center; text-align: center; width:60vw!important; margin:0 auto!important; }
	.section-closing .title .line1 { font-size: calc(42 * 100vw / 360); }
	.section-closing .title .line2 { font-size: calc(28 * 100vw / 360); }
	.section-closing .title .hl-cyan { font-size: inherit; }
	/* desc 14px, 위(타이틀) 16 / 아래(CTA) 15 */
	.section-closing .closing-desc { margin: calc(16 * 100vw / 360) 0 calc(15 * 100vw / 360); }
	.section-closing .closing-desc p { font-size: calc(14 * 100vw / 360); line-height: calc(22 * 100vw / 360); margin:0 auto; width:75%;}
	/* CTA: hero(다른 섹션)와 동일 — 210×38, radius 8, 14px, 센터 */
	.section-closing .btn-block { width: 100%; text-align: center; }
	.section-closing .btn-support {
		width: calc(210 * 100vw / 360);
		min-width: 0;
		height: calc(38 * 100vw / 360);
		min-height: 0;
		padding: 0;
		border-radius: calc(8 * 100vw / 360);
	}
	.section-closing .btn-support > span { font-size: calc(14 * 100vw / 360); white-space: nowrap; }

	/* footer */
	.sec_footer { padding: calc(35 * 100vw / 360) 0 120px; }   /* 위패딩 35 */
	.sec_footer .footer-logo { width: auto; height: auto; }
	.sec_footer .footer-logo img { width: auto; height: calc(20 * 100vw / 360); }   /* 로고 높이 20 */
	.sec_footer .footer-info { margin-top: 16px; width: 80%; font-size: calc(10 * 100vw / 360); line-height: calc(15 * 100vw / 360); color: #ccc; }
	.sec_footer .footer-copyright { margin-top: calc(15 * 100vw / 360); width: 80%; font-size: calc(10 * 100vw / 360); line-height: calc(15 * 100vw / 360); color: #777; }
	.sec_footer .line-pc { display: none; }
	.sec_footer .m-show { display: inline; }
	.sec_footer .m-hide { display: none; }
}

/* SIZE 480 기준 */
@media all and (max-width: 480px) {
	br.br-mo { display: block; }
}
