@charset "utf-8";

.products {}

.productList {}
.productList h3 {color: #000;font-size:var(--fs36);font-weight: 700;line-height: normal;}


.catalog-search {padding:30px 0;}
.catalog-search form {}
.catalog-search .inputWrap {display:flex;}
.catalog-search .inputWrap>* {height:60px;}
.catalog-search .inputWrap select {width:260px; margin-right:5px; border-radius:0;}
.catalog-search .inputWrap input {width:calc(100% - 325px); border-radius:0;}
.catalog-search .inputWrap button {width:60px; height:60px; border:1px solid #ddd; margin-left:-1px;}
.catalog-search .inputWrap button img {width:100%; height:100%; object-fit:scale-down;}

.catalog-total {padding:0 0 10px; display:flex; align-items:center; justify-content:space-between;}
.catalog-total .totalNum {}
.catalog-total select {width:200px; height:60px; border-radius:0;}

.catalog-list {display:flex; gap:60px 40px; flex-wrap:wrap;}
.catalog-list-item {width:calc((100% - 120px)/4); display:flex; flex-direction:column; gap:20px; position:relative;}
.catalog-list-item .img {aspect-ratio: 1 / 1.25; border: 1px solid #DDD;background: #FFF; overflow:hidden;}
.catalog-list-item .img img {width:100%; height:100%; object-fit:cover; transition:var(--ani);}
.catalog-list-item .desc {display:flex; flex-direction:column; gap:10px;}
.catalog-list-item .desc p {color: #666;font-size: var(--fs14);font-weight: 500;line-height: normal;}
.catalog-list-item .desc .tit {color: #000;font-size:var(--fs21);font-weight: 700;}

.catalog-list-item:hover .img img {transform:scale(1.05);}


@media (max-width: 1199px) {
	
	.catalog-search {padding:20px 0;}
	.catalog-search .inputWrap {gap:5px 0;}
	.catalog-search .inputWrap>* {height:50px;}
	.catalog-search .inputWrap select {width:200px;}
	.catalog-search .inputWrap select+select{margin:0;}
	.catalog-search .inputWrap input {width:calc(100% - 255px)}
	.catalog-search .inputWrap button {width:50px; height:50px;}
	.catalog-search .inputWrap button img {}
	
	
	.catalog-total select {height:50px;}
	
	.catalog-list {gap:60px 30px}
	.catalog-list-item {width:calc((100% - 60px)/3);}
	.catalog-list-item .head span {width:60px; line-height:30px; font-weight:400;}
	
	
}

@media (max-width: 767px) {
	
	.catalog-search {padding:20px 0;}
	.catalog-search .inputWrap {flex-wrap:wrap;}
	.catalog-search .inputWrap>* {height:40px;}
	.catalog-search .inputWrap select {width:100%; margin-right:0;}
	.catalog-search .inputWrap input {width:calc(100% - 40px)}
	.catalog-search .inputWrap button {width:40px; height:40px;}
	
	.catalog-total select {height:40px;}
	
	.catalog-list {gap:40px 20px}
	.catalog-list-item {width:calc((100% - 20px)/2); gap:10px;}
	.catalog-list-item .img {}
	.catalog-list-item .head span {width:50px; line-height:25px; font-weight:300;}
	.catalog-list-item .desc {gap:5px;}
	
	
	
	
}