/*서브페이지에서 language select 과 header를 제외한 하단 컨텐츠 */
/* 전체 감싼 main */
.layout {
	display: grid;
	grid-template-columns: 25rem auto 25rem;
	grid-template-rows: 22rem 1fr;
}
/* main에서 상단 카테고리 영역  */
.category {
	height: 22rem;
	background-color: var(--primary-color);
	padding: 3rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;

	h2 {
		font-size: 2rem;
		color: var(--basic-text-color);
	}
}

/* 메인 중앙 타이틀 영역  */
.title {
	height: 22rem;
	background-color: #ccc;
	text-align: center;
	padding: 7rem 5% 5rem;
	display: grid;
	gap: 2rem;

	h3 {
		font-weight: 700;
		font-size: 3.8rem;
		text-transform: uppercase;
		color: #000;
	}

	p {
		width: 100%;
		background-color: #fff;
		color: var(--second-text-color);
		padding: 0.5rem;
		font-size: 1.4rem;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

/* 메인에서 타이틀 옆 키컬러박스  */
.deco {
	height: 22rem;
	background-color: var(--primary-color);
}

/* 메인 하단 서브카테고리 영역  */
.subCategory {
	background-color: var(--home-bg2-color);
	padding: 3rem 4rem;

	nav ul li {
		margin-bottom: 2rem;

		a {
			font-size: 1.4rem;
			color: var(--basic-text-color);
			padding: 1rem 0;
		}

		&.on a {
			font-weight: bold;
			color: var(--primary-text-color);
		}
	}
}

/* 메인 하단 이미지 영역  */
.right {
	background-color: var(--home-bg2-color);

	.thumbnail {
		width: 100%;
		height: calc(100% - 22rem);

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

.content {
	width: 100%;
	height: calc(100vh - 3.5rem - 22rem);
	overflow-y: auto;

	> div {
		width: 100%;
		height: 100%;
	}
}

/* 최대너비 1600px 이하 레이아웃  */
@media screen and (max-width: 1600px) {
	.layout {
		height: auto;
	}
	.content {
		height: calc(100vh - 22rem);
	}
}

@media screen and (max-width: 1280px) {
	.layout {
		grid-template-columns: auto 25rem;
	}

	.category {
		display: none;
	}

	.subCategory {
		display: none;
	}
}

@media screen and (max-width: 1024px) {
	.title {
		grid-column: 1;

		h3 {
			font-size: 2.4rem;
		}
	}

	.deco {
		grid-column: 2;
		grid-row: 1;
	}
}

@media screen and (max-width: 767px) {
	.layout {
		grid-template-columns: minmax(auto, 70%) minmax(auto, 25rem);
		grid-template-rows: 22rem auto;
	}

	.title {
		grid-column: 1;
		h3 {
			font-size: 2.4rem;
		}
	}

	.deco {
		display: none;
	}

	.content {
		grid-column: 1/-1;
		grid-row: 2/-1;
		height: auto;
	}

	.right {
		grid-column: 2;
		grid-row: 1;

		.thumbnail {
			height: 100%;

			img {
				object-position: center;
			}
		}
	}
}

@media (pointer: coarse) {
	.content {
		min-height: 100vmin;
	}
}