#blog-archive{
	padding-top:40px;
	
	position:relative;
}
#blog-archive .main-title{
	width:100%;
	height:114px;
	background:url('../images/category-banner.jpg') no-repeat center;
	
	-moz-background-size:cover;
	-webkit-background-size:cover;
	-khtml-background-size:cover;
	background-size:cover;
	
	overflow:hidden;
	border-radius:16px;
	margin-bottom:40px;
	
	display:flex;
	justify-content:center;
	align-items:center;
}
#blog-archive .main-title .title{
	font-size: 40px;
	font-weight:600;
	color:rgba(255, 255, 255, 0.8);
	text-align:center;
}
#blog-archive .container .content{
	width:100%;
	
	display:flex;
	justify-content:flex-start;
	align-items:top;
	flex-wrap:wrap;
	gap:24px;
}
#blog-archive .container .content .blog-item{
	width: -moz-calc( ( 100% / 3 ) - 16px ) !important;
	width: -webkit-calc( ( 100% / 3 ) - 16px ) !important;
	width: calc( ( 100% / 3 ) - 16px ) !important;
	
	background:#FFF;
	border: 1px solid rgba(139, 79, 30, 0.16);
	border-radius: 16px;
}
#blog-archive .container .content .blog-item .thumb{
	width:100%;
    aspect-ratio:320/218;
    overflow:hidden;
	display:block;
	border-radius:16px 16px 0 0;
	margin-bottom:16px;
}
#blog-archive .container .content .blog-item .thumb img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
	display:block;
	border-radius:16px 16px 0 0;
}
#blog-archive .container .content .blog-item .title{
	width:100%;
	height:27px;
	overflow: hidden;
	padding:0 16px;
	margin-bottom:16px;
	display:block;
	
	font-size: 15px;
	font-weight: 600;
	line-height: 25px;
	color:#766152;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap
}
#blog-archive .container .content .blog-item .title,
#blog-archive .container .content .blog-item .title:visited{
	color:#766152;
}
#blog-archive .container .content .blog-item .title:hover{
	color:#857469;
}
#blog-archive .container .content .blog-item .info{
	width:100%;
	height:20px;
	overflow: hidden;
	padding:0 16px;
	margin-bottom:16px;
	
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	gap:5px;
}
#blog-archive .container .content .blog-item .info .item{
	height:24px;
	
	display:flex;
	justify-content:flex-start;
	align-items:center;
	gap:5px;
	
	font-size: 14px;
	font-weight: 500;
	color: rgba(133, 116, 105, 0.5);
	text-align: right;
	line-height: 24px;
}
#blog-archive .container .content .blog-item .info .date{
	width:110px;
	
	direction:ltr;
}
#blog-archive .container .content .blog-item .info .date:before{
	width:24px;
	height:24px;
	background:url('../images/blog-calendar.svg') no-repeat;
	
	-moz-background-size:100%;
	-webkit-background-size:100%;
	background-size:100%;
	
	display:block;
	content:'';
}
#blog-archive .container .content .blog-item .info .author{
	width:-moz-calc(100% - 115px);
	width:-webkit-calc(100% - 115px);
	width:calc(100% - 115px);
	
	direction:rtl;
}
#blog-archive .container .content .blog-item .info .author span{
	width:-moz-calc(100% - 24px);
	width:-webkit-calc(100% - 24px);
	width:calc(100% - 24px);
	
	height:24px;
	display:block;
	overflow:hidden;
	
	text-overflow: ellipsis;
	white-space: nowrap
}
#blog-archive .container .content .blog-item .info .author:before{
	width:24px;
	height:24px;
	background:url('../images/blog-author.svg') no-repeat;
	
	-moz-background-size:100%;
	-webkit-background-size:100%;
	background-size:100%;
	
	display:block;
	content:'';
}
#blog-archive .container .content .blog-item .desc{
	width:100%;
	height:94px;
	overflow: hidden;
	padding:0 16px;
	margin-bottom:16px;
	
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	color:#211A16;
	text-align: right;
}
#blog-archive .container .content .blog-item .bottom{
	width:100%;
	overflow: hidden;
	padding:0 16px;
	margin-bottom:16px;
	
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	gap:5px;
}
#blog-archive .container .content .blog-item .bottom .reading-duration{
	width:-moz-calc(100% - 150px);
	width:-webkit-calc(100% - 150px);
	width:calc(100% - 150px);
	
	overflow:hidden;
	
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	gap:5px;
	
	color:#766152;
	font-size:14px;
	font-weight:500;
}
#blog-archive .container .content .blog-item .bottom .reading-duration span:last-child{
	color:#53443A;
}
#blog-archive .container .content .blog-item .bottom .readmore{
	width:140px;
	height:56px;
	background:#766152;
	display:inline-block;
	border-radius:8px;
	
	color:#fff;
	font-size:14px;
	font-weight:500;
	line-height:56px;
	text-align:center;
}
#blog-archive .container .content .blog-item .bottom .readmore:hover{
	background:#53443A;
}

#page-number{
	margin-top:50px;
	overflow: hidden;
	
	display:flex;
	justify-content:center;
}
#page-number .wp-pagenavi{
	width: auto;
	overflow: hidden;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:8px;
}
#page-number .wp-pagenavi a,
#page-number .wp-pagenavi span {
	min-width: 32px;
	height: 32px;
	background:#fff;
	overflow: hidden;
	border:1px solid #997B66;
	border-radius:4px;
	padding:0;
	
	display:flex;
	justify-content:center;
	align-items:center;
	
	font-size: 14px;
	color:#766152;
	font-weight:500;
	line-height:32px;
	
	-moz-transition: all .2s ease-out;
	-o-transition: all .2 ease-out;
	-webkit-transition: all .2s ease-out;
	transition: all .2s ease-out
}
#page-number .wp-pagenavi a:hover{
	border-color:#766152;
	color: #766152;
}
#page-number .wp-pagenavi span.current {
	background:#766152;
	color: #fff;
}
#page-number .wp-pagenavi span.dots{
	background:none;
}
#page-number .wp-pagenavi .nextpostslink{
	background:#fff url('../images/pagenumber-arrow-left.png') no-repeat center !important;
	
	font-size:0;
}
#page-number .wp-pagenavi .previouspostslink{
	background:#fff url('../images/pagenumber-arrow-right.png') no-repeat center !important;
	
	font-size:0;
}

@media only screen and (min-width:901px) and (max-width:1000px) {
	#blog-archive .container .content .blog-item .bottom .reading-duration{
		width:-moz-calc(100% - 105px);
		width:-webkit-calc(100% - 105px);
		width:calc(100% - 105px);
	}
	#blog-archive .container .content .blog-item .bottom .readmore{
		width:100px;
	}
}
@media only screen and (max-width:900px) {
	#blog-archive .main-title .title{
		font-size:27px;
	}
	#blog-archive .container .content .blog-item{
		width: -moz-calc( 50% - 12px ) !important;
		width: -webkit-calc( 50% - 12px ) !important;
		width: calc( 50% - 12px ) !important;
	}
}
@media only screen and (min-width:601px) and (max-width:700px) {
	#blog-archive .container .content .blog-item .bottom .reading-duration{
		width:-moz-calc(100% - 105px);
		width:-webkit-calc(100% - 105px);
		width:calc(100% - 105px);
	}
	#blog-archive .container .content .blog-item .bottom .readmore{
		width:100px;
	}
}
@media only screen and (max-width:600px) {
	#blog-archive .container .content .blog-item{
		width:100% !important;
	}
	#blog-archive .container .content .blog-item .thumb{
		height: 260px;
		min-height:260px;
	}
}
@media only screen and (max-width:350px) {
	#blog-archive .container .content .blog-item .bottom{
		gap:10px;
	}
	#blog-archive .container .content .blog-item .bottom .reading-duration{
		width:100%;
	}
	#blog-archive .container .content .blog-item .bottom .readmore{
		width:100%;
	}
}