@charset "utf-8";

/* archive */
.blog_list{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:50px 40px;
	padding:0;
	margin:0;
}
.blog_item{
	list-style:none;
	margin:0;
}
.blog_link{
	display:block;
	position:relative;
	height:100%;
	border-bottom:1px solid rgba(51,51,51,0.1);
	color:#212121 !important;
	text-decoration:none !important;
}
.blog_link::after{
	content:'';
	position:absolute;
	bottom:-1px;
	left:0;
	width:100%;
	height:1px;
	background:#333;
	opacity:0;
	transform:scaleX(0.5);
	transform-origin:right;
	transition:transform 0.3s, opacity 0.3s;
}
.blog_link:hover::after{
	opacity:1;
	transform:scaleX(1);
	transform-origin:left;
}
.blog_thumb{
	position:relative;
	padding-bottom:64.705%;
	margin-bottom:15px;
	background:#F7F3F0;
	overflow:hidden;
}
.blog_img{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	max-height:100%;
	margin:auto;
	transition:transform 0.3s;
}
a:hover .blog_img{transform:scale(1.05);}
.blog_info{
	display:flex;
	align-items:center;
	margin-bottom:10px;
	font-size:1.3rem;
	letter-spacing:0.65px;
	line-height:1.9rem;
}
.blog_date{
	position:relative;
	margin-right:30px;
}
.blog_date::after{
	content:'';
	position:absolute;
	top:0;
	right:-15px;
	bottom:0;
	width:1px;
	height:10px;
	margin:auto;
	background:#333;
	opacity:0.2;
}
.blog_title{
	margin-bottom:20px;
	font-size:1.7rem;
	letter-spacing:0.85px;
	line-height:2.5rem;
}


/* single */
.img_txt{margin-bottom:30px;}
.img_txt p{margin-bottom:10px;}
.img_txt > p{width:140px;}


@media screen and (max-width:1024px){

.blog_list{gap:40px 25px;}
.blog_info{
	font-size:1.2rem;
	letter-spacing:0.6px;
	line-height:1.7rem;
}
.blog_title{
	font-size:1.5rem;
	letter-spacing:0.75px;
	line-height:2.2rem;
}

}


@media screen and (max-width:767px){

.blog_list{gap:30px 15px;}
.blog_info{
	font-size:1.1rem;
	letter-spacing:0.55px;
	line-height:1.6rem;
}
.blog_date{margin-right:20px;}
.blog_date::after{right:-10px;}
.blog_title{
	font-size:1.3rem;
	letter-spacing:0.65px;
	line-height:1.9rem;
}

}


@media screen and (max-width:650px){

.blog_list{grid-template-columns:1fr 1fr;}

}