@media only screen and (min-width: 996px)
{
.t_pro
{
width: 100%;
}
.t_pro_left
{
width: 250px;
background-color: #fff;
box-shadow: var(--main-shadow);
}
.t_pro_leftout
{
position: sticky;
top: 20px;
width: 250px;
float: left;
}
.t_pro_left ul li
{
margin-top: 3px;
display: flex;
padding: 10px;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #efefef;
}
.t_pro_left ul li a
{
display: block;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
height: 40px;
line-height: 40px;
font-size: 14px;
color: var(--main-color-p_color);
}
.t_pro_left ul li i
{
transition: var(--main-transition);
font-size: 22px;
text-align: center;
}
.t_pro_left i
{
font-size: 22px!important;
}
.prodrop
{
display: none;
}
.prodrop a
{
display: block;
padding-left: 20px;
height: 40px;
width: 80%;
line-height: 40px;
font-size: 14px;
color: var(--main-color-p_color);
}
.pro_change
{
transform: rotate(90deg);
}
.t_pro_right
{
width: 930px;
float: right;
}
.t_pro_right ul
{
display: flex;
flex-wrap: wrap;
}
.t_pro_right ul li
{
margin-bottom: 25px;
padding: 10px;
background-color: #fff;
width: calc(100% / 4);
}
.t_pro_right ul li img
{
width: 100%;
height: 200px;
object-fit: contain;
}
.t_pro_right ul li p
{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
color: var(--main-color-fontColor);
font-size: 14px;
margin: 10px 0;
text-align: center;
}
.clear
{
clear: both;
}
.active_pro
{
background-color: var(--main-color)!important;
color: var(--main-color-white)!important;
}
.active_pro a
{
color: var(--main-color-white)!important;
}
.active_open
{
display: block;
}
.zk_mb
{
display: none;
}
.sec_drop
{
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10px;
border-bottom: 1px solid #efefef;
}
.proarr1
{
cursor: pointer;
transition: var(--main-transition);
}
.third_drop
{
display: none;
}
.third_drop a
{
display: block;
padding-left: 35px!important;
}
.third_drop a
{
border-bottom: 1px solid #efefef;
width: 100%;
}
}
@media only screen and (max-width: 996px)
{
.pronav_ul
{
display: none;
}
.third_drop a
{
border-bottom: 1px solid #efefef;
}
.sec_drop
{
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10px;
border-bottom: 1px solid #efefef;
}
.proarr1
{
cursor: pointer;
transition: var(--main-transition);
}
.third_drop
{
display: none;
}
.third_drop a
{
display: block;
padding-left: 35px!important;
}
.zk_mb
{
padding: 10px;
background-color: var(--main-color);
}
.zk_mb span
{
color: var(--main-color-white);
display: flex;
align-items: center;
}
.zk_mb span i
{
margin-right: 15px;
margin-top: 3px;
}
.t_pro
{
width: 100%;
}
.t_pro_left
{
width: 100%;
background-color: #fff;
}
.t_pro_leftout
{
z-index: 20;
width: 100%;
box-shadow: var(--main-shadow);
}
.t_pro_left ul li
{
display: flex;
padding: 5px 15px;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #efefef;
}
.t_pro_left ul li a
{
display: block;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 14px;
color: var(--main-color-p_color);
}
.t_pro_left ul li i
{
transition: var(--main-transition);
font-size: 22px;
flex: 1;
text-align: center;
}
.t_pro_left i
{
font-size: 22px!important;
}
.prodrop
{
display: none;
}
.prodrop a
{
display: block;
padding-left: 20px;
height: 40px;
line-height: 40px;
font-size: 14px;
width: 80%;
color: var(--main-color-p_color);
}
.pro_change
{
transform: rotate(90deg);
}
.t_pro_right
{
width: 100%;
margin-top: 25px;
}
.t_pro_right ul
{
display: flex;
flex-wrap: wrap;
}
.t_pro_right ul li
{
margin-bottom: 25px;
padding: 10px;
background-color: #fff;
width: 50%;
}
.t_pro_right ul li img
{
width: 100%;
height: 200px;
object-fit: contain;
}
.t_pro_right ul li p
{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
color: var(--main-color-fontColor);
font-size: 14px;
margin: 10px 0;
text-align: center;
}
.clear
{
clear: both;
}
.active_pro
{
background-color: var(--main-color)!important;
color: var(--main-color-white)!important;
}
.active_pro a
{
color: var(--main-color-white)!important;
}
.active_open
{
display: block;
}
}