@media (max-width:1024px) and (min-width:769px){.preview-container{max-width:400px}
.singglepic{max-width:400px;}
.preview-container .thumbnail-box .swiper{height:75px;}}
.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 (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}}
@media (min-width:769px){.preview-container{max-width:500px;flex-direction:column-reverse;height:auto}
.singglepic{max-width:500px;}
.preview-container .thumbnail-box{margin:20px 0 0;padding:0 35px;width:100%;}
.thumbnail-box .prodetails-button-next,.thumbnail-box .prodetails-button-prev{width:25px;height:100%;}
.thumbnail-box .prodetails-button-next{left:auto;right:0;}
.thumbnail-box .prodetails-button-prev em{transform:rotate(90deg);}
.thumbnail-box .prodetails-button-next em{transform:rotate(-90deg);}
.preview-container .thumbnail-box .swiper{height:100px;}
.preview-container .thumbnail-box .item img{object-fit:contain;background:#fff;}}
@media (max-width:1280px) and (min-width:769px){.preview-container .thumbnail-box .swiper{height:80px;}}
@media (max-width:1024px) and (min-width:769px){.preview-container{max-width:100%;}
.singglepic{max-width:100%;}
.preview-container .thumbnail-show{width:100%}}