/* 商品列表 */

.pro-list .list{
	gap: 5rem;
}

/* 左侧菜单 */
.pro-list .left{
	width: 18rem;
	position: sticky;
	top: calc(var(--headerHeight) + 2rem);
}
.pro-list .left .box {
  
    border: 1px solid #e2e4e4;
	background-color: #fff;
}

.pro-list .left .box .down .nav .box1 {
    padding: 1rem 2rem;
    display: none;
}

.pro-list .left .box .down > .nav{
	border-bottom: 1px solid #f3f3f3;
}

.pro-list .nav-item1{
	height: 3.4rem;
	width: 100%;
	display: block;
	font-size: var(--f20);
	color: #000000;
	transition: all .5s;
	display: flex;
	padding: 0 2rem;
	align-items: center;
}
.pro-list .nav.act .nav-item1,
.pro-list .nav-item1:hover{
	background: var(--themeColor);
	color: #fff;
}

.pro-list .nav2 > a{
	color: #4d4d4d;
	font-size: var(--f17);
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 2rem;
}
.pro-list .nav2 > a .icon-bg{
	background: #d5d5d5;
	border-radius: 100%;
	width: 1rem;
	height: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .5s;
	
}
.pro-list .nav2 > a i{
	color: #fff;
	font-size: var(--f12);
	transform: rotate(-90deg);
	display: block;
}

.pro-list .nav2.act > a,
.pro-list .nav2 > a:hover{
	font-weight: bold;
}

.pro-list .nav2.act > a .icon-bg,
.pro-list .nav2 > a:hover .icon-bg{
	background: var(--themeColor);
	color: #fff;
	font-weight: normal;
}

.pro-list .nav2.act > a .icon-bg{
	transform: rotate(180deg);
}

.pro-list .nav2 .box1{
	padding: 0!important;
	position: relative;
	border-bottom: 1px dashed #dcdcdc;
	margin-bottom: .8rem;
}
	
.pro-list .nav2 .box2{
	display: flex;
	flex-wrap: wrap;
	column-gap: 1rem;
	padding: .4rem 0 .6rem 0;
}
.pro-list .nav2:last-child .box1{
	margin-bottom: 0;
}

.pro-list .nav2 .box2 a{
	position: relative;
}

.pro-list .nav2 .box2 a::before{
	position: absolute;
	content: '';
	height: 1rem;
	width: 1px;
	background: #bcbcbc;
	display: block;
	right: -0.5rem;
	top: 50%;
	transform: translateY(-50%);
}

.pro-list .nav2 .box2 a:last-child::before{
	display: none;
}

.pro-list .nav2 .box1 a{
	font-size: var(--f16);
	color: #4d4d4d;
}
.pro-list .nav2 .box1 a:hover,.pro-list .nav2 .box1 a.act{
	color: var(--themeColor);
}

/* 右侧列表 */
.pro-list .right{
	flex: 1;
}
.pro-list .right .grid{
	gap: 2rem;
}