.blog{
	padding-top: 56px;
}
.blog .inner ul{
	margin-top: 0;
}

.filter{
	padding-top: 32px;
}
.filter .inner{
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: var(--section-padding-horizontal);
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.filter .inner .filter-btn{
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 16px;
	gap: 5px;
	color: var(--theme-default-text-color);
	cursor: pointer;
	transition: opacity .3s;
}
.filter .inner .filter-btn .iconfont{
	font-size: 20px;
}
.filter .inner .filter-btn .iconfont:before{
	content: "\e606";
}
.filter .inner .filter-btn.active .iconfont:before{
	content: "\e62c";
}
.filter .inner .filter-btn:hover{
	opacity: .6;
}
.filter .inner .select-box{
	display: flex;
	flex-direction: row;
	align-items: center;
	color: rgb(var(--color-foreground-secondary));
	gap: 10px;
}
.filter .inner .select-box .yg-select label{
	color: rgb(var(--color-foreground-secondary));
	margin: 0;
}
.filter .inner .select-box .yg-select .select-box{
	border: none;
	padding: 0 5px;
	color: var(--theme-default-text-color);
}

.collection{
	padding-top: 30px;
}
.collection .inner{
	max-width: 1440px;
	padding: var(--section-padding-horizontal);
	width: 100%;
	margin: 0 auto;
}
.collection-product{
	transition: margin-left var(--duration-default) 
	cubic-bezier(.4, 0, .25, 1) 0ms;
}
.collection-product .empty{
	padding: 100px 0;
	font-size: 20px;
	text-align: center;
}
.collection-product ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 40px 16px;
}
.collection-product ul li{
	width: calc(25% - (16px * 3) / 4);
}
.collection-product ul li .img-box {
	position: relative;
	padding-bottom: 135.7%;
	border-radius: var(--border-radius-block);
	overflow: hidden;
}
.collection-product ul li .img-box .img-arr {
	width: 100%;
	height: 100%;
}
.collection-product ul li .img-box .img-arr img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: linear .3s;
}
.collection-product ul li h3 {
	text-align: center;
	margin-top: 12px;
}
.collection-product ul li h3 a {
	font-weight: normal;
	color: var(--theme-default-text-color);
	font-size: 16px;
}
.collection-product ul li .img-box .img-arr img:nth-child(2) {
	opacity: 0;
}
.collection-product ul li .img-box .default-button {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -60px;
	transition: ease-in-out .3s;
}
.collection-product ul li:hover .img-box .img-arr img:nth-child(1) {
	opacity: 0;
}
.collection-product ul li:hover .img-box .img-arr img:nth-child(2) {
	opacity: 1;
}
.collection-product ul li:hover .img-box .default-button {
	bottom: 20px;
}

@media screen and (max-width: 1440px){
	.collection-product ul li{
		width: calc(33.33333% - (16px * 2) / 3);
	}
}

@media screen and (max-width: 1024px){
	.collection-product ul li{
		width: calc(50% - 16px / 2);
	}
	
}

@media screen and (max-width: 767px){
	
	.filter .inner{
		justify-content: center;
	}
	
	.collection-product .empty{
		font-size: 15px;
	}
}

@media screen and (max-width: 576px){
	.collection-product ul{
		flex-direction: column;
	}
	.collection-product ul li{
		width: 100%;
	}
}