@charset "UTF-8";

.main-archive-box{position:relative;padding:10.8rem 0  28rem;}
.main-archive-control-box{justify-content:flex-end;position:absolute;bottom:calc(100% - 1.2rem);width:100%;box-sizing:border-box;}
.main-archive-control-box .control-wrap{position:absolute;transform:translateY(-50%);}

.main-archive-tab{display:flex;gap:0 1.2rem;margin: 0 auto;padding:0 3rem;max-width: 154rem;width: 100%;box-sizing: border-box;}
.main-archive-tab li button{width:auto;height:6rem;padding:0 4rem;font-size:2.4rem;color:#999089;background:#fff;border:.2rem solid #999089;border-radius:3rem;    transition: all 0.6s;}
.main-archive-tab li.active button,
.main-archive-tab li:hover button{color:#fff;border-color:#ea5413;background:#ea5413}

.main-archive-items-wrap{display:flex;gap:3rem;flex-wrap:wrap;margin: 4.9rem auto 0;max-width: 160rem;width: 100%;padding-left:3rem;box-sizing: border-box;}
.m-width01{width:calc(100% / 3 - 3rem);aspect-ratio: 1;}
.m-width02{width:calc((100% / 3) * 2 - 3rem);aspect-ratio:960/460;}
.archive-radius-top-left{border-radius:4rem 0 0 0}
.archive-radius-bottom-left{border-radius:0 0 0 4rem}
.archive-radius-top-right{border-radius:0 4rem 0 0}
.archive-radius-bottom-right{border-radius:0 0 4rem 0}

.main-archive-item {
	position:relative;
	overflow:hidden;
	max-height:46rem;
	height:100%;
	background:var(--black06);
}
.main-archive-item:hover,.main-archive-item:active,
.main-archive-item:focus {box-shadow:0 0 0.7rem rgba(0,0,0,.5)}
.main-archive-item a {
	display:block;
	position:relative;
	width:100%;
	height:100%;
}
.main-archive-item a:focus-visible{
	border:5px solid #000;
}
.main-archive-item a::before {
	content:'';
	position:absolute;
	inset:0;
	z-index:2;
	background:rgba(48,37,29,.9);
	opacity:0;
	transition:opacity 0.4s ease;
}
.main-archive-item:hover a::before {
	opacity:1;
}
.main-archive-item img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform 0.6s ease;
}
.main-archive-item:hover img {
	transform:scale(1.05);
}

/* Category Badge */
.m-archive-badge {
	position:absolute;
	top:2.6rem;
	left:2.6rem;
	z-index:5;
	padding:1rem 1.6rem;
	border-radius:3rem;
	font-size:1.4rem;
	font-weight:var(--font-weight-medium);
	color:var(--white100);
	background:#908a84;
	transition:opacity 0.4s ease;
}
.main-archive-item:hover .m-archive-badge {
	opacity:0;
}

/* Hover Overlay */
.m-archive-active {
	position:absolute;
	top:50%;
	left:0;
	right:0;
	z-index:5;
	padding:3rem;
	opacity:0;
	transform:translateY(-40%);
	transition:all 0.4s ease;
}
.main-archive-item:hover .m-archive-active {
	opacity:1;
	transform:translateY(-50%);
}
.m-archive-active .m-archive-category {
	display:inline-block;
	padding:0.5rem 1.4rem;
	margin-bottom:1.2rem;
	border-radius:2rem;
	font-size:1.4rem;
	font-weight:var(--font-weight-medium);
	color:var(--white100);
	background:var(--color03);
}
.m-archive-active .m-archive-tit {
	display:-webkit-box;
	overflow:hidden;
	font-size:2.4rem;
	font-weight:var(--font-weight-semibold);
	max-height:6.4rem;
	color:var(--white100);
	line-height:3.2rem;
	margin-bottom:0.6rem;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.m-archive-active .m-archive-date {
	font-size:2.8rem;
	color:rgba(255,255,255,0.7);
	margin-bottom:3.3rem;
}
.m-archive-active .m-archive-tags {
	display:flex;
	flex-wrap:wrap;
	gap:0.4rem 1rem;
}
.m-archive-active .m-archive-tags span {
	font-size:1.7rem;
	color:#ea9c13;
	line-height: 1;
}

/* Plus Icon */
.m-archive-plus {
	position:absolute;
	bottom:3.5rem;
	right:3.5rem;
	z-index:5;
	width:3.8rem;
	height:3.8rem;
	opacity:0;
	transition:all 0.4s ease;
}
.m-archive-plus::before,
.m-archive-plus::after {
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	background:#837d79;
	transform:translate(-50%, -50%);
	border-radius: 2rem;
}
.m-archive-plus::before {
	width:100%;
	height:5px;
}
.m-archive-plus::after {
	width:5px;
	height:100%;
}
.main-archive-item:hover .m-archive-plus {
	opacity:1;
}

@media screen and (max-width:1024.98px) {
	.main-foot-swiper3{padding:0 3rem}
	.main-archive-items-wrap{gap:0;margin:2.5rem 0 13.8rem;padding-left:0; flex-wrap:nowrap;width:100%;}
	.main-archive-box{padding:6.6rem 0 2.7rem}
	.main-archive-tab {gap:0;display:flex;flex-wrap:wrap;}
	.main-archive-tab li{width: calc(100% / 3);box-sizing:border-box}
	.main-archive-tab li button{width:100%;border:0;padding:0;border-top:.1rem solid #999089;border-right:.1rem solid #999089; border-radius:0;font-size:1.6rem;height:4rem}
	.main-archive-tab li:nth-child(4n) button{border-left:.1rem solid #999089;}
	.main-archive-tab li:nth-child(n + 4) button{border-bottom:.1rem solid #999089;}
	.main-archive-tab li:nth-child(1) button{border-radius:4rem 0 0 0}
	.main-archive-tab li:nth-child(6) button{border-radius:0 0 4rem 0}
	
	.m-archive-active{padding: 2rem}
	.main-archive-item{height:25.5rem;}
	.m-width01{width:25.5rem;}
	.m-width02{width:51rem;aspect-ratio: auto;}
	
	.m-archive-active .m-archive-tit{font-size:1.6rem;line-height:1.3;max-height:5.4rem;}
	.m-archive-active .m-archive-tags {
		display:flex;
		flex-wrap:wrap;
		gap:0.4rem 1rem;
	}
	.m-archive-active .m-archive-date{font-size:1.4rem;margin-bottom:1.4rem;}
	.m-archive-active .m-archive-tags span {
		font-size:1.2rem;
	}
	.m-archive-plus {bottom:2rem;right:2rem;width:2rem;height:2rem}
	.m-archive-plus::before {
		height:3px;
	}
	.m-archive-plus::after {
		width:3px;
	}
}