@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}
.main .productlist{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;min-height:50vh}
.main .content{width:77%;padding:30px 0;text-align:left;margin-bottom:40px}
.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{padding:0 0 25px;font-size:1.2rem;font-weight:400;text-transform:capitalize;font-family:CustomFontBold,sans-serif;font-size:30px;color:var(--Bcolor)}
.content .info{line-height:32px;font-size:16px;color:#666;padding-bottom:26px}
.wrapper{display:flex;align-content:flex-start;flex-wrap:wrap}
.wrapper .slide{width:31%;margin:0 2.3333333333333% 20px 0;border:1px solid #f0f0f0}
.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%;text-align:left!important;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{border:1px solid #ddd}
.product-nav{width:19%;display:block;border-radius:0;background:#fff;padding:20px 10px}
.product-nav .titleh2{color:#222;font-size:22px;font-weight:700;margin:10px 0;font-family:CustomFontBold}
.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}
.menu-item{display:flex;justify-content:space-between;padding:14px 40px 14px 0;cursor:pointer;border-radius:0;transition:all .2s ease;position:relative;font-size:16px;color:#312e39}
.menu-item::after{content:"";width:0;height:1px;background:var(--Bcolor);position:absolute;bottom:0;left:0;transition:all .3s}
.menu-item:hover{color:var(--Bcolor)}
.menu-item:hover::after{width:100%}
.menu-item.active{color:var(--Bcolor);font-weight:700}
.menu-item.active::after{width:100%}
.submenu{list-style-type:none;padding:0;margin:0;display:none;background:#f7f7f7}
.submenu li a{display:block;padding:12px 0;font-size:15px;transition:all .5s ease;position:relative;color:#666;margin-left:10px}
.submenu li a::before{position:absolute;content:'';left:0;bottom:0;width:0%;height:1px;background-color:none;transition:all .3s;z-index:10}
.submenu li a:hover{color:var(--Bcolor)}
.submenu li a:hover::before{width:100%;left:0;background-color:var(--Bcolor)}
.arrow{display:inline-block;width:10px;height:10px;position:absolute;right:0;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::after{display:none}
.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 #ededed;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}
.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:20px 0}
.hide{display:block}
.wrapper .slide{width:47%;margin:0 1.5% 20px 1.5%}
.wrapper .slide a{padding:0}
.menuBox .menuTit{font-size:16px;color:#222;background:#eee;margin-top:20px}
.mMenu .menuDown{height:50px;line-height:50px}
.mMenu .menuDown .icon-down:before{transform:rotate(45deg)}
.products .txtBox .proTitle{font-size:14px!important;line-height:20px}
.content .info{line-height:28px;font-size:16px}
}