/* ===== Layout ===== */

.pf-wrapper{
    display:flex;
    gap:40px;
    align-items:flex-start;
}

.pf-sidebar{
    width:300px;
    flex-shrink:0;
}

.pf-products{
    flex:1;
    min-width:0;
}

/* ===== Sidebar ===== */

.pf-box{
    border:1px solid #f7faff;
    margin-bottom:25px;
    background:#f7faff;
	border-radius: 5px;
}

.pf-box h3{
    margin:0;
    padding:15px 20px;
    font-size:18px;
    font-weight:600;
    border-bottom:1px solid #f7faff;
    background:#f7faff;
	position: relative;
}

.pf-box h3::after {
    content: "";
    position: absolute;
    left: 15%;
    bottom: 0%;
    transform: translate(-50%, -50%);
    background: var(--e-global-color-primary);
    width: 53px;
    height: 2px;
}

.pf-box .pf-check-list{
	list-style:none;
   margin:0;
	    padding: 15px 20px;
}

.pf-box .pf-check-list li {
    color: #333;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    transition: all .3s;
    font-size: 12px;
    font-weight: 500;
	margin-bottom: 12px;
}
.pf-box .pf-check-list li span{
    color:#9b9a9a;
}


.pf-category-list,
.pf-industry-list,
.pf-feature-list{
    list-style:none;
    margin:0;
    padding:15px 5px;
}

.pf-category-list li,
.pf-industry-list li,
.pf-feature-list li{
    margin-bottom:0px;
}

.pf-category-list a{
    color:#333;
    text-decoration:none;
    display:flex;
    justify-content:space-between;
    transition:all .3s;
	font-size: 12px;
	font-weight:500;
	padding: 15px;
}

.pf-category-list span{
    color:#9b9a9a;
}

.pf-category-list a.active span{
    color:#fff;
}

.pf-category-list a:hover,
.pf-category-list a.active{
    color: #fff;
    background: var(--e-global-color-primary);
    padding: 15px;
	border-radius: 5px;
}

.pf-industry-list label,
.pf-feature-list label{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:14px;
}

/* ===== Result Count ===== */

.pf-result-count{
    margin-bottom:25px;
    font-size:15px;
    font-weight:600;
    color:#666;
}

/* ===== Product List ===== */

.pf-item{
    display:flex;
    gap:25px;
    margin-bottom:35px;
    padding:35px;
    border:1px solid #eee;
	border-radius: 5px;
	transition:.3s;
}
.pf-item:hover{
    border:1px solid var(--e-global-color-primary);
    box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
}

.pf-image{
    width:50%;
    flex-shrink:0;
}

.pf-image img{
    width:100%;
    height:auto;
    display:block;
}

.pf-content{
    flex:1;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pf-content h3{
    margin:0 0 15px;
    font-size:30px;
    line-height:1.4;
}

.pf-content h3 a{
    color:#222;
    text-decoration:none;
}

.pf-content h3 a:hover{
    color:var(--e-global-color-primary);
}

.pf-desc{
    color:#666;
    line-height:1.8;
    margin-bottom:20px;
}
.pf-cat{
    display:inline-block;
    margin-bottom:2px;
    padding:5px 0px;
    color:var(--e-global-color-primary);
    font-size:18px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    border-radius:3px;
}
/* ===== Buttons ===== */

.pf-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.pf-detail,
.pf-inquiry, .pf-video{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:150px;
    height:45px;
    padding:0 20px;
    text-decoration:none;
    transition:.3s;
}

.pf-detail{
    background:var(--e-global-color-primary);
    color:#fff;
	gap: 10px;
	border-radius: 5px;
}
.pf-detail svg {
    fill: #fff;
    height: 1em;
    position: relative;
    width: 1em;
}

.pf-detail:hover{
    background:var(--e-global-color-primary);
    color:#fff;
}

.pf-inquiry, .pf-video{
    border:1px solid var(--e-global-color-primary);
    color:var(--e-global-color-primary);
	gap: 10px;
	border-radius: 5px;
}
.pf-inquiry svg, .pf-video svg {
    fill: var(--e-global-color-primary);
    height: 1em;
    position: relative;
    width: 1em;
}

.pf-inquiry:hover, .pf-video:hover{
    background:var(--e-global-color-primary);
    color:#fff;
}
.pf-inquiry:hover svg, .pf-video:hover svg{
    fill: #fff;
}
/* ===== Pagination ===== */

.pf-pagination{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:40px;
    flex-wrap:wrap;
}

.pf-pagination a{
    width:42px;
    height:42px;
    border:1px solid #ddd;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#333;
    transition:.3s;
}

.pf-pagination a:hover{
    background:#0b5ed7;
    border-color:#0b5ed7;
    color:#fff;
}

.pf-pagination a.current{
    background:#0b5ed7;
    border-color:#0b5ed7;
    color:#fff;
}

/* 筛选复选框 */

.pf-industry,
.pf-feature{
    appearance:none;
    -webkit-appearance:none;
    width:18px;
    height:18px;
    border:1px solid #d0d0d0;
    border-radius:3px;
    background:#fff;
    cursor:pointer;
    position:relative;
    transition:.3s;
    flex-shrink:0;
	margin-bottom: -4px;
}

.pf-industry:checked,
.pf-feature:checked{
    background:var(--e-global-color-primary);
    border-color:var(--e-global-color-primary);
}

.pf-industry:checked::after,
.pf-feature:checked::after{
    content:"✓";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-55%);
    color:#fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 10px;
}

.pf-industry:hover,
.pf-feature:hover{
    border-color:#0d6efd;
}

/* ===== Ajax Loading ===== */

#pf-result.loading{
    opacity:.5;
    pointer-events:none;
    transition:.3s;
}

/* ===== Sticky Sidebar ===== */

@media(min-width:1024px){

    .pf-sidebar{
        position:sticky;
        top:120px;
    }

}

/* ===== Mobile ===== */

@media(max-width:991px){

    .pf-wrapper{
        flex-direction:column;
    }

    .pf-sidebar{
        width:100%;
        order:1;
    }

    .pf-products{
        width:100%;
        order:2;
    }

    .pf-item{
        flex-direction:column;
    }

    .pf-image{
        width:100%;
    }

    .pf-content h3{
        font-size:20px;
    }

}

@media(max-width:767px){

    .pf-box h3{
        font-size:16px;
    }

    .pf-detail,
    .pf-inquiry, .pf-video{
        width:100%;
    }

    .pf-pagination a{
        width:38px;
        height:38px;
    }

}