@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Roboto:wght@300;400;500;700;900&family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@font-face {
    font-family: "GmarketSansLight";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GmarketSansMedium";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GmarketSansBold";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SBAggroB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ---------------------------------------------------
   세계 자살예방의 날(WSPD) 컬러 팔레트
   - 주황/노랑: 자살예방 인식 리본 색 (희망, 온기)
   - 딥네이비: 신뢰, 안정
--------------------------------------------------- */
:root {
	--c-primary: #f28c28;      /* 따뜻한 주황 */
	--c-primary-dark: #d9731a;
	--c-accent: #ffc93c;       /* 희망의 노랑 */
	--c-navy: #1d3557;         /* 딥 네이비 */
	--c-navy-deep: #14263f;
	--c-bg-soft: #fff8ef;      /* 크림 배경 */
	--c-text: #333;
}

* {
	padding: 0;
	margin: 0;
	box-sizing:border-box;
}
html {font-size:16px; scroll-behavior:smooth;}
body {
	margin:0; padding:0;
	font-family: 'Roboto', 'Noto Sans KR', "Dotum", sans-serif;
	color: #666;
	font-size: 1.08rem;
	line-height:1.7;
	font-weight:400;
}

b, strong {
	font-weight: 600;
}

div, section {
	margin:0; padding:0;
	}

ul, ol, li, dl, dt, dd {
	margin: 0;
	padding: 0;
	list-style: none;
}
a, a:active {
	color:#666; text-decoration:none;
	}
a:hover {
	text-decoration: none;
	color: var(--c-primary-dark);
}
img {border:none; padding:0; margin:0;}

button {cursor: pointer;}

.mgl0 {margin-left:0!important;}

#wrap {margin:0; padding:0; width:100%; height:100%;}

.top_area {padding:5px;}
.top_area ul {width:95%; max-width:1000px; margin:0 auto; overflow:hidden; zoom:1; clear:both;}
.top_area ul .logo {float:left; margin-top:2px;}
.top_area ul .go_btn {float:right; margin-top:10px; color:#c3c1c1; font-size:13px; font-family: 'Noto Sans KR', sans-serif; font-weight:400;}
.top_area ul .go_btn a {color:#7f7e7e;}
.top_area ul .go_btn a.lang_active {color:var(--c-primary-dark); font-weight:700; text-decoration:underline; text-underline-offset:3px;}
.top_area ul .go_btn a.lang_active:hover {color:var(--c-primary-dark);}

/* ---------------------------------------------------
   히어로(상단 배너)
   - 배경 일러스트: images/main1.png (투명 PNG, 하단 고정)
   - 크림/주황 그라데이션 위에 사람들 일러스트가 얹힘
--------------------------------------------------- */
/* 그라데이션 + 하단 사람들 일러스트(main1.png)를 .main_img 배경에 함께 쌓음
   - 1번 레이어: 일러스트(하단 중앙, 전체가 잘리지 않게)
   - 2번 레이어: 크림/주황 그라데이션 */
.main_img {
	position:relative;
	overflow:hidden;
	background-image:
		url(https://sunfull.or.kr/thema/savelife2026/images/main1.png),
		linear-gradient(160deg, #fff6e8 0%, #ffe9c9 52%, #ffdcae 100%);
	background-repeat:no-repeat, no-repeat;
	background-position:center bottom, center center;
	background-size:auto, cover; /* 일러스트는 원본 크기(축소 안 함), 그라데이션은 꽉 채움 */
}
.main_img::before {content:""; position:absolute; left:50%; top:-180px; width:640px; height:640px; margin-left:-320px; background:radial-gradient(circle, rgba(255,201,60,0.35) 0%, rgba(255,201,60,0) 70%); pointer-events:none; z-index:0;}

.hero_inner {position:relative; z-index:1; width:100%; max-width:1000px; margin:0 auto; padding:clamp(24px, 2.8vw, 38px) 20px clamp(130px, 18vw, 220px); text-align:center;}
/* 텍스트 뒤 크림 스크림: 가운데 일러스트와 글자를 분리해 가독성 확보(양옆 일러스트는 그대로 노출) */
.hero_inner::before {content:""; position:absolute; z-index:-1; left:50%; top:48%; transform:translate(-50%,-50%); width:min(820px, 94%); height:126%; background:radial-gradient(ellipse at center, rgba(255,249,240,0.78) 0%, rgba(255,249,240,0.66) 42%, rgba(255,249,240,0.3) 66%, rgba(255,249,240,0) 80%); pointer-events:none;}

.hero_eyebrow {display:inline-block; margin-bottom:12px; padding:8px 22px; background:var(--c-navy); border-radius:50px; color:#fff; font-family:'Noto Sans KR', sans-serif; font-size:clamp(13px, 1.9vw, 17px); font-weight:600; letter-spacing:0.3px; word-break:keep-all; box-shadow:0 4px 12px rgba(29,53,87,0.28); animation:heroFade 0.9s ease both;}

/* 캠페인 날짜 - 강조 */
.hero_date {margin:0 0 6px; color:var(--c-primary-dark); font-family:"SBAggroB", 'GmarketSansBold', 'Noto Sans KR', sans-serif; font-size:clamp(30px, 5.6vw, 50px); font-weight:700; line-height:1.0; letter-spacing:-2px; text-shadow:0 2px 2px rgba(255,255,255,0.9), 0 4px 12px rgba(242,140,40,0.25); animation:heroFade 0.9s 0.12s ease both;}
.hero_date i {margin-right:10px; font-size:0.5em; color:var(--c-accent); vertical-align:0.28em;}
.hero_date em {font-style:normal;}

.hero_title {margin:0 0 12px; color:var(--c-navy-deep); font-family:"SBAggroB", 'GmarketSansBold', 'Noto Sans KR', sans-serif; font-size:clamp(23px, 4.2vw, 40px); font-weight:700; letter-spacing:-1px; line-height:1.2; word-break:keep-all; text-shadow:0 2px 2px rgba(255,255,255,0.85); animation:heroFade 0.9s 0.24s ease both;}
.hero_sub {margin:0 0 20px; color:#7a4e14; font-size:clamp(16px, 2.5vw, 22px); font-weight:600; word-break:keep-all; text-shadow:0 1px 2px rgba(255,255,255,0.8); animation:heroFade 0.9s 0.36s ease both;}

/* 히어로 CTA(행동 유도) 버튼 */
.hero_cta {margin:0 0 16px; padding:14px 36px; font-size:clamp(15px, 2.3vw, 18px); animation:heroFade 0.9s 0.48s ease both, ctaPulse 2.4s 1.4s ease-in-out infinite;}

.hero_org {color:#9a6a29; font-size:clamp(13px, 2.1vw, 16px); font-weight:600; word-break:keep-all; text-shadow:0 1px 2px rgba(255,255,255,0.8); animation:heroFade 0.9s 0.6s ease both;}

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

.support {padding:0; border-bottom:1px solid #ECECEC; word-break:keep-all;}
.support span {display:block; max-width:1000px; margin:15px auto; font-family: 'Nanum Myeongjo', serif; color:#b3a6a6; font-size:1.1rem; font-weight:700;}
.support img {display:inline-block; margin-top:-5px; vertical-align:middle;}

#container {width:95%; max-width:1000px; margin:0 auto; padding:20px 0 0 0;}
.cont_text {padding:36px 0 10px; color:#525252; word-break:keep-all;}
.cont_text p {margin-bottom:30px; color:#191919; font-size:clamp(18px, 2.3vw, 22px); line-height:1.8;}
.cont_text p strong {color:var(--c-primary-dark); font-weight:700;}

/* 스크롤 등장 애니메이션 */
.fade-up {opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease;}
.fade-up.visible {opacity:1; transform:translateY(0);}

/* ---------------------------------------------------
   핵심 메시지 카드
--------------------------------------------------- */
.message_card {margin:30px 0 10px; padding:52px 30px 46px; background:linear-gradient(150deg, var(--c-navy) 0%, var(--c-navy-deep) 100%); border-radius:20px; text-align:center; position:relative; overflow:hidden; box-shadow:0 12px 30px rgba(29,53,87,0.25);}
.message_card::before {content:""; position:absolute; right:-70px; top:-70px; width:230px; height:230px; background:radial-gradient(circle, rgba(255,201,60,0.22) 0%, rgba(255,201,60,0) 70%); pointer-events:none;}
.message_card::after {content:""; position:absolute; left:-60px; bottom:-60px; width:200px; height:200px; background:radial-gradient(circle, rgba(242,140,40,0.2) 0%, rgba(242,140,40,0) 70%); pointer-events:none;}

.heart_pulse {display:inline-flex; justify-content:center; align-items:center; width:64px; height:64px; margin-bottom:18px; background:rgba(255,255,255,0.08); border-radius:50%;}
.heart_pulse i {color:var(--c-primary); font-size:30px; animation:heartBeat 1.6s ease-in-out infinite;}
@keyframes heartBeat {
	0%, 100% {transform:scale(1);}
	14% {transform:scale(1.25);}
	28% {transform:scale(1);}
	42% {transform:scale(1.25);}
	70% {transform:scale(1);}
}

.message_main {margin:0 0 32px; color:#fff; font-family:"SBAggroB", 'GmarketSansBold', 'Noto Sans KR', sans-serif; font-size:clamp(26px, 4.6vw, 40px); font-weight:700; letter-spacing:-0.5px; line-height:1.5; word-break:keep-all;}

/* CTA 버튼 */
.cta_btn {display:inline-block; padding:16px 42px; background:linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); border-radius:50px; color:#fff !important; font-family:'Noto Sans KR', sans-serif; font-size:clamp(16px, 2.6vw, 19px); font-weight:700; letter-spacing:-0.3px; position:relative; overflow:hidden; box-shadow:0 6px 18px rgba(242,140,40,0.45); transition:transform 0.25s ease, box-shadow 0.25s ease; animation:ctaPulse 2.4s ease-in-out infinite;}
.cta_btn i {margin-right:8px;}
.cta_btn:hover {color:#fff; transform:translateY(-3px); box-shadow:0 10px 24px rgba(242,140,40,0.55); animation-play-state:paused;}
.cta_btn::after {content:""; position:absolute; top:0; left:-80%; width:50%; height:100%; background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%); transform:skewX(-25deg); animation:ctaShine 3s ease-in-out infinite;}
@keyframes ctaPulse {
	0%, 100% {box-shadow:0 6px 18px rgba(242,140,40,0.45);}
	50% {box-shadow:0 6px 18px rgba(242,140,40,0.45), 0 0 0 12px rgba(242,140,40,0);}
}
@keyframes ctaShine {
	0% {left:-80%;}
	60%, 100% {left:130%;}
}

/* 플로팅 버튼 (스크롤 시 표시) */
#floatCta {display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; gap:2px; position:fixed; right:20px; bottom:24px; width:68px; height:68px; background:linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); border-radius:50%; color:#fff !important; box-shadow:0 6px 16px rgba(242,140,40,0.5); opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; z-index:100;}
#floatCta.show {opacity:1; visibility:visible; transform:translateY(0);}
#floatCta i {font-size:20px;}
#floatCta span {font-size:10px; font-weight:700; font-family:'Noto Sans KR', sans-serif;}
#floatCta:hover {color:#fff; transform:translateY(-3px);}

.cont_guide {padding:30px 0 10px 0; color:#ca6f1f; text-align:center;}

/* ---------------------------------------------------
   캠페인 이미지/영상 갤러리
--------------------------------------------------- */
#main-list, #main-list *{box-sizing:border-box;}
#main-list{zoom:1; border-top:2px solid var(--c-navy); padding:30px 0 15px; margin-top:40px;}
#main-list:after{content:""; display:block; clear:both;}
#main-list li{float:left; width:16.66666%;}
#main-list li a{display:block; padding:5px;}
#main-list li a .thumb-img{position:relative; display:block; height:0; padding-top:68%; border-radius:10px; overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,0.12); transition:transform 0.3s ease, box-shadow 0.3s ease;}
#main-list li a .thumb-img img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease;}
/* 호버 오버레이 + 돋보기 버튼 */
#main-list li a .thumb-img::before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(20,38,63,0); transition:background 0.3s ease; z-index:1;}
#main-list li a .thumb-img::after{content:"\f00e"; font-family:"Font Awesome 5 Free"; font-weight:900; position:absolute; left:50%; top:50%; display:flex; justify-content:center; align-items:center; width:44px; height:44px; margin:-22px 0 0 -22px; background:var(--c-primary); border-radius:50%; color:#fff; font-size:17px; opacity:0; transform:scale(0.5); transition:opacity 0.3s ease, transform 0.3s ease; z-index:2;}
#main-list li a:hover .thumb-img{transform:translateY(-5px); box-shadow:0 10px 22px rgba(20,38,63,0.25);}
#main-list li a:hover .thumb-img img{transform:scale(1.08);}
#main-list li a:hover .thumb-img::before{background:rgba(20,38,63,0.35);}
#main-list li a:hover .thumb-img::after{opacity:1; transform:scale(1);}
#main-list li a strong{display:block; height:40px; line-height:20px; word-break:break-all; overflow:hidden; margin-top:6px; font-size:14px; text-align:center; transition:color 0.25s ease;}
#main-list li a:hover{text-decoration:none;}
#main-list li a:hover strong{color:var(--c-primary-dark);}

@media screen and (max-width: 1000px){
	#main-list{padding: 15px 0px;}
	#main-list li{width: 25%;}
}

.list ul {padding-top:15px; margin-top:30px;}
.list ul li {display:inline-block;}

#lv-container {margin-top:40px; border-top:2px solid var(--c-navy); padding-top:20px;}

#reple {border-top:2px solid var(--c-navy);}

#copyright {margin:30px 0 0 0; padding:40px 0; background:var(--c-navy-deep); height:100%; color:#9fb0c8; font-size:14px; text-align:center;}
#copyright a {color:#d6e0ee; font-weight:bold;}

.page {padding:5px 0 30px 0; text-align:center; margin-bottom:20px;}
.page img {vertical-align:middle;}
.page a, .page strong {color:#333; display:inline-block; width:25px; text-align:center;}
.page a:hover, .page strong{color:var(--c-primary-dark); font-weight:600;}

/* ---------------------------------------------------
   반응형 (모바일)
--------------------------------------------------- */
@media all and (max-width:768px){
	.top_area, .support, .cont_guide {box-sizing:border-box; padding:0 15px;}
	.cont_text {padding:20px 0 10px;}
	.cont_guide {margin:25px 0 10px 0;}

	/* 모바일: 초광폭 원본을 확대해 인물이 크게 보이도록(양옆 그룹은 일부 잘림) */
	.main_img {background-size:170% auto, cover; background-position:center bottom, center center;}
	.hero_inner {padding:20px 18px 38vw;}

	.message_card {padding:40px 22px 36px; border-radius:16px;}
	.heart_pulse {width:54px; height:54px; margin-bottom:14px;}
	.heart_pulse i {font-size:25px;}

	#main-list{padding: 15px 0px;}
	#main-list li{width: 50%;}
}

@media all and (max-width:576px){
	html {font-size:14px;}

	.support img {width: 50px;}

	#container {padding-top:10px;}
	.cont_text {padding:15px 0 5px;}
	.cont_text p {margin-bottom:20px;}

	/* 작은 화면: 배경을 더 키우고 하단 여백도 그에 맞춤 */
	.main_img {background-size:200% auto, cover;}
	.hero_inner {padding:16px 15px 46vw;}
	.hero_eyebrow {margin-bottom:12px; padding:7px 16px;}

	.cta_btn {display:block; max-width:320px; margin:0 auto; padding:15px 20px;}
	.hero_cta {margin-bottom:16px;}

	#floatCta {right:14px; bottom:16px; width:60px; height:60px;}
	#floatCta i {font-size:17px;}

	#lv-container {margin-top:40px;}
}

@media all and (max-width:360px){
	.hero_inner {padding-top:36px;}
}

@media all and (max-width:600px){
	#main-list li{width: 100%;}
}

/* 접근성: 모션 최소화 설정 사용자 */
@media (prefers-reduced-motion: reduce){
	html {scroll-behavior:auto;}
	.hero_eyebrow, .hero_date, .hero_title, .hero_sub, .hero_org {animation:none;}
	.heart_pulse i, .cta_btn, .cta_btn::after {animation:none;}
	.fade-up {opacity:1; transform:none; transition:none;}
}