/* font-size: clamp(2px, calc(1vw), 160px); */
@media (max-width: 1440px) {
	html {
		font-size: clamp(5px, calc(4px + 0.25vw), 8px);
		/* font-size: 7.5px; */
	}
	header {
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 6rem;
		padding-right: 6rem;
	}
	section.s1 {
		padding-left: 6rem;
		padding-right: 6rem;
	}
	.text-wrapper {
		font-size: 1.5rem;
		margin-top: 1rem;
	}
}
@media (max-width: 1330px) {
	section.s1 .pager-nav img {
		width: 19rem;
	}
	.text-wrapper {
		font-size: 1.4rem;
		margin-top: 1rem;
	}
}
@media (max-width: 1100px) {
	header {
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 2000;
	}
	header nav {
		flex-direction: column;
		justify-content: start;
		align-items: baseline;
	}
	header nav ul {
		width: 100%;
	}
	/* header */
	/* 1. 상단 '사이트맵' 링크 숨기기 */
	.sitemap-btn {
		display: none;
	}
	a.sitemap-btn.mobile {
		display: block;
		text-decoration: none;
		font-weight: 700;
		font-size: 20px;
		color: #121a1b;
		position: absolute;
		bottom: 40px;
	}
	/* 2. 햄버거 버튼 보이기 및 스타일링 */
	button.mobile-menu-btn {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 30px;
		height: 25px;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;
		/* z-index: 1000; */
	}

	.mobile-menu-btn span {
		width: 100%;
		height: 3px;
		background-color: #333;
		border-radius: 5px;
	}

	button.mobile-close-btn {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 30px;
		height: 25px;
		position: absolute;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;
		right: 6rem;
		top: 20px;
	}
	/* 2개의 선을 만들기 위한 공통 스타일 */
	.mobile-close-btn::before,
	.mobile-close-btn::after {
		content: ""; /* 가상 요소에 필수 */
		position: absolute;
		top: 50%;
		left: 50%;
		width: 24px; /* 선의 길이 */
		height: 2px; /* 선의 굵기 */
		background-color: #333; /* 선의 색상 */
		border-radius: 2px; /* 선 끝을 둥글게 */
		transition: transform 0.3s ease; /* 부드러운 효과 */
	}
	/* 첫 번째 선 (＼) */
	.mobile-close-btn::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	/* 두 번째 선 (／) */
	.mobile-close-btn::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	/* 3. 내비게이션 메뉴를 화면 밖으로 숨기기 (초기 상태) */
	nav {
		position: fixed; /* 화면 기준으로 위치 고정 */
		top: 0;
		right: -100%; /* 화면 오른쪽 밖에 위치 */
		width: 80%;
		max-width: 450px;
		height: 100vh; /* 화면 전체 높이 */
		background-color: white;
		box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);

		/* 내부 요소들을 세로로 배치 */
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 60px 20px 20px;

		transition: right 0.3s ease-in-out; /* 부드러운 슬라이드 효과 */
	}

	/* 4. 'nav-active' 클래스가 추가되었을 때 메뉴를 보이게 함 */
	nav.nav-active {
		right: 0; /* 화면 오른쪽으로 슬라이드 인 */
	}

	/* 5. 메뉴 안의 링크들을 세로로 배치 */
	nav ul {
		flex-direction: column;
		width: 100%;
		gap: 0;
	}

	nav ul li {
		width: 100%;
		border-bottom: 1px solid #eee;
	}

	nav ul li a {
		display: block;
		padding: 15px 0;
	}

	/* 6. 검색창과 '온라인 지진 과학관' 링크도 세로 배치에 맞게 수정 */
	.nav-big {
		margin-bottom: 20px;
		font-size: 1.2rem;
	}

	.search-box {
		width: 100%;
		margin-top: 20px;
	}
	.search-box input {
		width: 100%;
	}
	/*  */
	section.s1 {
		flex-direction: column;
	}
	section.s1 .youtube-content,
	section.s1 .left .slider-wrapper {
		max-width: 100%;
	}
	section.s1 .right {
		width: 100%;
	}
	section.s1 .right a img {
		width: 100%;
	}
	section.s1 .pager-nav img {
		width: 24rem;
	}
	section.s1 .pager-nav .pager button img {
		width: 20px;
	}
	section.s1 .pager-nav .pager .pager-num {
		font-size: 16px;
	}
	section.s1 .youtube-content .youtube-long {
		max-width: 58%;
	}
	section.s3 {
		flex-direction: column;
		padding-top: 13rem;
	}
	section.s3 .left {
		padding-right: 0;
	}
	section.s3 .right {
		padding-left: 0;
		border: none;
		margin-top: 6rem;
		width: 100%;
		max-width: 100%;
	}
	.title-box.space-between {
		justify-content: left;
	}
	section.s3 {
		padding-left: 6rem;
		padding-right: 6rem;
	}
	.library {
		display: flex;
		flex-direction: row;
		gap: 5rem;
	}
	.text-wrapper {
		font-size: 2.3rem;
		margin-top: 3rem;
	}
}
@media (max-width: 1000px) {
	.text-wrapper {
		font-size: 2.2rem;
		margin-top: 1rem;
	}
}
@media (max-width: 900px) {
	.text-wrapper {
		font-size: 2rem;
		margin-top: 1rem;
	}
}
@media (max-width: 800px) {
	.text-wrapper {
		font-size: 1.8rem;
		margin-top: 1rem;
	}
}
@media (max-width: 768px) {
	html {
		font-size: clamp(3px, calc(3px + 0.25vw), 8px);
	}
	section.s1 .youtube-content {
		flex-direction: column;
	}
	section.s1 .youtube-content .youtube-long {
		max-width: 100%;
	}
	header .top .logo img {
		width: 12rem;
	}
	div.title {
		font-size: 4rem;
	}
	.process-list {
		flex-direction: column;
	}
	.process-list {
		row-gap: 25px;
	}
	.process-list .process-item {
		width: 100%;
		max-width: 100%;
	}

	.news-tab button {
		width: 16.7rem;
	}
	.library {
		flex-direction: column;
		row-gap: 5px;
	}
	.s3 .news-list {
		flex-direction: column;
	}
	.news-list .news-item {
		width: 100%;
		padding-left: 5.7rem;
		padding-right: 5.7rem;
	}
	.news-list .news-item h2 {
		font-size: 7rem;
		margin-bottom: 5rem;
	}
	.news-list .news-item h1 {
		margin-bottom: 5rem;
		font-size: 9rem;
	}
	.text-wrapper {
		font-size: 4.3rem;
		margin-top: 1rem;
	}
	.news-list .news-item .more-btn {
		right: 3.7rem;
		top: 3.7rem;
		width: 7.8rem;
		height: 7.8rem;
	}
}
@media (max-width: 650px) {
	.text-wrapper {
		font-size: 3.8rem;
		margin-top: 1rem;
	}
	.news-list .news-item .more-btn {
		right: 2.4rem;
		top: 2.4rem;
		width: 7.3rem;
		height: 7.3rem;
	}
	.sitemap-list {
		flex-direction: column;
	}
	.sitemap-list .sitemap-item {
		width: 100%;
	}
}
@media (max-width: 560px) {
	.text-wrapper {
		font-size: 3.6rem;
		margin-top: 1rem;
	}
	.news-list .news-item h2 {
		font-size: 4rem;
		margin-bottom: 5rem;
	}
	.news-list .news-item h1 {
		margin-bottom: 5rem;
		font-size: 5rem;
	}
}
@media (max-width: 480px) {
	.text-wrapper {
		font-size: 3.2rem;
		margin-top: 1rem;
	}
	.news-list .news-item .more-btn {
		right: 2.4rem;
		top: 2.4rem;
		width: 6.2rem;
		height: 6.2rem;
	}
}
@media (max-width: 420px) {
	.text-wrapper {
		font-size: 2.8rem;
		margin-top: 1rem;
	}
	.news-list .news-item .more-btn {
		right: 2.4rem;
		top: 2.4rem;
		width: 4.2rem;
		height: 4.2rem;
	}
}
@media (max-width: 380px) {
	.text-wrapper {
		font-size: 2.5rem;
		margin-top: 1rem;
	}
	.news-list .news-item .more-btn {
		right: 2.4rem;
		top: 2.4rem;
		width: 4rem;
		height: 4rem;
	}
}