@import url(besscolor.css);
.bread ul,.main,.wrapper{display:flex}
.content .tit,.wrapper .slide a:hover .proTitle{color:var(--Bcolor)}
.bread{line-height:60px;background-color:#f4f4f4;color:#999}
.bread li{margin-right:20px}
.main{justify-content:space-between;margin-top:20px}
.menu,.submenu{list-style-type:none;margin:0}
.main .productlist{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;min-height:50vh}
.main .content{width:77%;margin-left:2%}
.main .listTitle .list.active span{border-bottom:5.5px solid #fff;border-top:none}
.main .listTitle .active{display:block;transition:.3s}
.submenu li a,.wrapper .slide,.wrapper .slide a:hover{transition:.5s}
.main .listTitle .active .listTit{background:var(--Bcolor)}
.main .listTitle .active .title{color:#fff}
.content .tit{padding:0 0 25px;font-weight:400;text-transform:capitalize;font-family:CustomFontBold,sans-serif;font-size:30px}
.content p.info{font-size:16px;margin-bottom:35px;line-height:24px}
.wrapper{align-content:flex-start;flex-wrap:wrap}
.wrapper .slide{width:32%;margin:0 1% 4px 0;border-radius:20px}
.wrapper .slide a{width:100%;background-color:#fff;padding:15px}
.products .proImgBox{overflow:hidden;width:100%}
.products .proImgBox img{width:100%}
.products .txtBox{padding:0 30px 30px}
.products .txtBox .proTitle{width:100%;text-align:left;color:#333;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.5s;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%;opacity:0;padding:12px}
.wrapper .slide a:hover .btn{opacity:1}
.product-nav{width:19%;display:block;background:#fff;border-radius:0;border:1px solid #ddd;margin-top: 15px;}
.wrapper .slide a picture:hover::after{display:none!important}
.menu{padding:0}
.menu .menu-li{font-size:16px}
.menu .menu-li:hover{background:#f2f2f2}
.menu-item.active,.menu-item.active:hover{background-color:var(--Bcolor)}
.menu-item{display:flex;justify-content:space-between;padding:15px 40px 15px 15px;cursor:pointer;border-radius:0;transition:.2s;position:relative}
.menu-item.active{color:#fff}
.submenu{padding:0;display:none;background:#fff;border-bottom:1px solid #ddd}
.submenu li a{display:block;padding:10px 15px;font-size:14px}
.submenu li a:hover{background:#f2f2f2;color:#333}
.arrow{display:inline-block;width:10px;height:10px;position:absolute;right:15px;top:calc(50% - 5px)}
.arrow:after,.arrow:before{content:'';position:absolute;background-color:#858a93;width:100%;height:2px;top:50%;left:0;transform:translateY(-50%)}
.arrow:after{transform:translateY(-50%) rotate(90deg)}
.arrow.up::before{background-color:#fff}
.arrow.up::after,.hide,.mMenu .menuList{display:none}
.mMenu{width:100%;margin-bottom:30px}
.menuBox{border:1px solid #f2f2f2;position:relative;padding:5px 10px}
.menuBox .menuTit{font-size:22px;color:#000;font-weight:500;line-height:2.8em;text-align:left;border-top-right-radius:16px}
.mMenu .menuDown{width:46px;height:60px;line-height:60px;position:absolute;right:4px;top:4px;text-align:center;color:#333;}
.menuList li a{height:44px;line-height:40px;font-size:14px}
.mMenu .collapse-bd{margin-left:20px}
.mMenu .collapse-bd li{padding-left:15px;border-bottom:1px solid #eee}
.main .page{margin:0 0 60px}
.mMenu .none{display:block}
@media only screen and (max-width:1200px){.wrapper .slide{width:47%;margin:0 3% 40px 0}
}
@media only screen and (max-width:769px){.hide,.main{display:block}
.product-nav{display:none}
.main .content{width:100%;margin-left:0}
.wrapper .slide{width:47%;margin:0 1.5% 40px}
.wrapper .slide a{padding:0}
.menuBox .menuTit{font-size:15px;color:#222}
.mMenu .menuDown{height:44px;line-height:44px}
}