.page-container{width:100%;display:flex;align-items:flex-start;justify-content:space-between}
.page-sidenav{width:320px;}
.page-sidenav ul{list-style:none}
.sidebar-item{width:100%;background:#f7f7f7;border-radius:5px;border-bottom:3px solid var(--color);margin-bottom:1.5em;position:relative}
.sidebar-item .sidebar-title{font-size:var(--fontsize22);font-weight:var(--fontbold6);color:var(--fontcolor);line-height:1.2;border-bottom:1px solid #e5e5e5;padding:15px 20px;padding-left:38px;position:relative}
.sidebar-item .sidebar-title::before{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);width:8px;height:8px;background:var(--color);border-radius:50%}
.sidebar-item .sidebar-cate{padding:20px 20px}
.sidebar-item .sidebar-cate li{position:relative;}
.sidebar-item .sidebar-cate>li{width:100%;border-radius:3px;margin-bottom:0.6em;text-transform:capitalize;background:#fff;}
.sidebar-item .sidebar-cate>li:last-child{margin-bottom:0em}
.sidebar-item .sidebar-cate>li>a{width:100%;padding:12px 15px;padding-right:40px;font-weight:var(--fontbold6);display:block;line-height:25px;}
.sidebar-item .sidebar-cate li .iconshow{position:absolute;right:0px;top:0px;width:39px;height:49px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sidebar-item .sidebar-cate li .iconshow::after{content:"";width:6px;height:6px;border:2px solid var(--fontcolor);border-left:none;border-bottom:none;transform:rotate(45deg);transition:.3s}
.sidebar-item .sidebar-cate>li .sub-menu{display:none;}
.sidebar-item .sidebar-cate>li .sub-menu a{display:flex;padding:8px 20px;color:var(--fontcolor);transition:all .1s linear;line-height:25px}
.sidebar-item .sidebar-cate>li>a{width:100%;padding:12px 15px;padding-right:40px;font-weight:var(--fontbold6);display:block;line-height:25px;}
.sidebar-item .sidebar-cate li .sub-menu .iconshow{height:41px}
.sidebar-item .sidebar-cate>li .pro-menu{display:none;}
.sidebar-item .sidebar-cate>li .pro-menu a{display:flex;padding:8px 20px 8px 35px;color:var(--fontcolor);transition:all .1s linear}
.sidebar-item .sidebar-cate li:hover >a{color:var(--color)}
.sidebar-item .sidebar-cate li:hover >ul{display:block}
.sidebar-item .sidebar-cate li:hover >.iconshow::after{transform:rotate(135deg);border-color:var(--color)}
.page-main{flex:1;width:calc(100% - 320px);padding-left:40px}
@media (min-width:1025px){.preview-container .thumbnail-box{margin-right:15px;width:70px}
.preview-container .thumbnail-box .item{width:70px;}
.preview-container .thumbnail-box .swiper{height:290px}
.preview-container .thumbnail-show{width:calc(100% - 85px)}
.prodetails-info{width:50%;}}
@media (min-width:1367px){.preview-container .thumbnail-box{width:90px}
.preview-container .thumbnail-box .swiper{height:400px;}
.preview-container .thumbnail-box .item{width:90px;}
.preview-container .thumbnail-show{width:calc(100% - 120px)}}
@media (max-width:1366px) and (min-width:1025px){.page-sidenav{width:280px}
.page-main{width:calc(100% - 280px);}
.preview-container{height:360px}}
@media (max-width:1024px){.page-sidenav{display:none}
.page-main{width:100%;padding-left:0}}


.sidebar-prolist>li{margin-bottom:20px}
.sidebar-prolist .pro-item{display:flex}
.sidebar-prolist .pro-item>div{-ms-flex:1;flex:1}
.sidebar-prolist .pro-img{position:relative;max-width:120px;border:1px solid #EEEEEE;box-sizing:border-box;overflow:hidden}
.sidebar-prolist .pro-img img{max-width:100%;max-height:100%}
.sidebar-prolist .pro-img>.img-wrap{position:absolute;width:100%;height:100%;top:0px;left:0px;display:flex;justify-content:center;align-items:center}
.sidebar-prolist .pro-img:hover img{transform:scale(1.05)}
.sidebar-prolist .pro-info{display:flex;flex-direction:column;justify-content:center;padding-left:20px}
.sidebar-prolist .pro-info>p{color:var(--fontcolor);line-height:1.5em;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3em}
.sidebar-prolist .pro-more{margin-top:10px;color:var(--introcolor);text-transform:lowercase}
.sidebar-contact li{color:var(--fontcolor);display:flex;margin-bottom:15px;line-height:1.5em}
.sidebar-contact i,.sidebar-contact em{margin-right:5px}
.sidebar-contact .icon-map{font-size:var(--fontsize17);margin-right:3px}
.sidebar-contact a{color:var(--fontcolor)}
.siderbar-search{display:flex;padding: 10px;}
.siderbar-search .search-input{width:100%;height:40px;padding:0px 14px;box-sizing:border-box}
.siderbar-search>button{height:40px;cursor:pointer;padding:0px 12px;line-height:40px;background-color:var(--color);color:#FFFFFF;border:0px;outline:0}