@import url(besscolor.css);

.bread{line-height:60px;background-color:#f4f4f4;color:#999}
.bread ul{display:flex}
.bread li{margin-right:20px}
.main{display:flex;justify-content:space-between;margin-top: 20px;}
.main .productlist{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;min-height:50vh;margin-top:30px}
.main .content{width:75%;padding:0;text-align:left;margin-bottom:40px;float: right;}
.products_top{background:#0f2a520f;display:flex;align-items:center;justify-content:space-between;height:50px;padding:0 20px;margin-bottom:15px}
.products_top .title{font-size:22px;color:#222;font-weight:700}
.products_top .breadcrumb{width:auto;justify-content:flex-end;color:#999;margin:0}
.main .listTitle .list.active span{border-bottom:5.5px solid #fff;border-top:none}
.main .listTitle .active{display:block;transition:all .3s}
.main .listTitle .active .listTit{background:var(--Bcolor)}
.main .listTitle .active .title{color:#fff}
.content .tit{width:100%;text-align:left!important;padding:0 10px;margin:20px 0 10px;font-size:20px}
.content .info{line-height:28px;font-size:15px;color:#626262;padding:0 10px;margin-bottom:20px}
.wrapper{display:flex;align-content:flex-start;flex-wrap:wrap}
.wrapper .slide{width:33%;padding:10px;border-radius:12px;transition:all .5s ease;margin-bottom:15px}
.wrapper .slide a{width:100%;padding:0}
.products .proImgBox{overflow:hidden;width:100%}
.products .proImgBox img{width:100%}
.products .txtBox{padding:0 30px 30px}
.products .txtBox .proTitle{width:100%;color:#333;font-size:16px!important;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:pre-wrap!important;transition:all .5s ease;padding:0;font-weight:600;margin:0 auto}
.products .txtBox .proSummry{width:100%;text-align:left;font-size:14px;color:#999;line-height:130%;margin-bottom:15px;display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;min-height:2rem}
.wrapper .slide a .btn{width:100%}
.wrapper .slide a:hover .proTitle{color:var(--Bcolor)}
.wrapper .slide:hover{box-shadow:0 2px 20px #ccc}
.product-nav{width:22%;display:block;border-radius:0;background:#fff;float: left;}
.product-nav .product-title,.product-nav .titleh2{color:#222;font-size:20px;font-weight:700;background:var(--Bcolor);color:#fff;text-align:center;padding:14px 0;font-family:var(--font-title)}
.wrapper .slide a picture:hover::after{display:none!important}
.menu{list-style-type:none;padding:0;margin:0;text-transform:capitalize}
.menu .menu-li{font-size:16px;position:relative}
.menu-item{display:flex;justify-content:space-between;padding:16px 40px 16px 10px;cursor:pointer;border-radius:0;transition:all .2s ease;position:relative;font-size:15px;color:#312e39;border-bottom:1px solid #d3d8dc}
.menu-item::after{content:"";width:0;height:1px;background:var(--Bcolor);position:absolute;bottom:0;left:0;transition:all .3s}
.menu-item:hover{background:#f2f2f2}
.menu-item.active{color:var(--Bcolor);font-weight:700}
.submenu{list-style-type:none;padding:0;margin:0;display:none;background:#f6f6f6}
.submenu li a{display:block;font-size:16px;position:relative;color:#666;padding:16px}
.submenu li a:hover{background:var(--Hcolor);color:#fff}
.menu .menu-li:hover .submenu{display:block;left:100%;position:absolute;width:max-content;z-index:1;top:0}
.arrow{display:inline-block;width:16px;height:16px;background:url(../images/icon_arr_r.png) no-repeat center;background-size:100%;position:absolute;right:10px;top:16px}
.arrownone{display:none;opacity:0}
.mMenu{width:100%;background:#fff}
.menuBox{position:relative}
.menuBox .menuTit{font-size:22px;color:#000;font-weight:500;line-height:2.8em;text-align:left;padding:5px 10px}
.mMenu .menuDown{width:46px;height:60px;line-height:60px;position:absolute;right:4px;top:4px;text-align:center;color:#333}
.mMenu .menuList{display:none}
.menuList li{border-bottom:1px solid #ddd;padding:5px 10px;position:relative;font-weight:600}
.menuList li a{height:44px;line-height:40px;font-size:14px;margin-left:8px}
.menuList .sub-ul{margin-left:20px}
.menuList .sub-ul li{border-bottom:none;font-weight:500;border-top:1px solid #ddd}
.menuList .sub-ul li::before{display:none}
.mMenu .collapse-bd{margin-left:20px}
.mMenu .collapse-bd li{padding-left:15px;border-bottom:1px solid #eee}
.hide{display:none}
.mMenu .none{display:block;background:#f9f9f9}
@media only screen and (max-width:1200px){.wrapper .slide{width:47%;margin:0 3% 20px 0}
}
@media only screen and (max-width:769px){.main{display:block}
.product-nav{display:none}
.content p.info{font-size:16px;line-height:28px}
.main .content{width:100%;margin-left:0;padding:0}
.hide{display:block}
.wrapper .slide{width:47%;margin:0 1.5% 20px 1.5%;padding:0}
.wrapper .slide a{padding:0}
.main .productlist{margin-top:15px}
.menuBox .menuTit{font-size:16px;color:#fff;background:#222;margin-top:0}
.mMenu .menuDown{height:50px;line-height:50px}
.mMenu .menuDown .icon-down:before{transform:rotate(45deg);color:#fff}
.products .txtBox .proTitle{font-size:14px!important;line-height:20px}
.content .info{line-height:28px;font-size:16px}
.products_top{background:0 0;height:auto;padding:0;justify-content:flex-end}
.products_top .title{display:none}
}