@charset "utf-8";

li,ul{list-style:none}
i{vertical-align:middle}

.clearfix{zoom:1}
.clearfix::after{content:'';display:block;height:0px;visibility:hidden;clear:both}
.flex{display:flex;flex-wrap:wrap}
.flex-ai-c{display:flex;flex-wrap:wrap;align-items:center}
.flex-ai-fs{display:flex;flex-wrap:wrap;align-items:flex-start}
.flex-ai-fe{display:flex;flex-wrap:wrap;align-items:flex-end}
.flex-jc-c{display:flex;flex-wrap:wrap;justify-content:center}
.flex-jc-sb{display:flex;flex-wrap:wrap;justify-content:space-between}
.flex-jc-sa{display:flex;flex-wrap:wrap;justify-content:space-around}
.flex-jc-fe{display:flex;flex-wrap:wrap;justify-content:flex-end}
.flex-jc-fs{display:flex;flex-wrap:wrap;justify-content:flex-start}
.flex-jc-ai-c{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.flex-jc-ai-sb{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}

.pdshow-l{width:100%;}
.preview-container{position:relative;width:100%;text-align:center}
.small-box{width:100%;height:400px;border:1px solid #EAEAEA;position:relative;background:#FFF;overflow:hidden}
.preview-container .small-box img{max-width:100%;max-height:100%;display:block}
.preview-container .small-box .hover{position:absolute;width:180px;height:180px;background-color:hsla(0,0%,80%,.6);border:1px solid #EEE;display:none;cursor:move}
.preview-container .thumbnail-box{margin-top:20px;position:relative;width:100%}
.preview-container .thumbnail-box .btn{position:absolute;top:50%;width:28px;height:28px;margin-top:-14px;color:var(--color);line-height:1}
.preview-container .thumbnail-box .btn i{font-size:28px;font-weight:var(--fontbold6)}
.preview-container .thumbnail-box .btn-prev{left:10px}
.preview-container .thumbnail-box .btn-next{right:10px}
.preview-container .thumbnail-box .btn_next_disabled,.preview-container .thumbnail-box .btn_prev_disabled{opacity:.5;cursor:not-allowed}
.preview-container .thumbnail-box .list{overflow:hidden;width:calc(100% - 80px);margin:0px auto;position:relative}
.preview-container .thumbnail-box .list .swiper-pagination{display:none}
.preview-container .thumbnail-box .list ul .item{width:80px;height:80px;display:flex;justify-content:center;align-items:center;margin:0 2px;border:1px solid #EAEAEA;font-size:0;cursor:pointer;overflow:hidden}
.preview-container .thumbnail-box .list ul .item img{width:100%}
.preview-container .thumbnail-box .list ul .item-cur{border-color:#0C0C0C;}
.preview-container .thumbnail-box .list .banner-page{display:none;justify-content:center;align-items:center;position:absolute;width:13.3333333333vw;border-radius:5.3333333333vw;background:var(--color);bottom:1.3333333333vw;right:1.3333333333vw;z-index:999}
.preview-container .thumbnail-box .list .banner-page span{color:#FFF;font-size:4vw;margin:0 2px}
.preview-container .big-box{display:none;overflow:hidden;top:0px;left:calc(100% - 1px);border:1px solid #EFEFEF;position:absolute;width:100%;height:500px;background:#FFF;z-index:20}
.preview-container .big-box img{display:block;max-width:none;max-height:none;width:150%}
.pdshow-r{width:calc(100% - 500px);padding:20px 0px 0px 40px}
@media(max-width:1367px){
.pdshow-l{width:400px}
.preview-container .big-box,.small-box{height:400px}
.pdshow-r{width:calc(100% - 400px)}
.preview-container .thumbnail-box .list{width:calc(100% - 69px)}
.preview-container .thumbnail-box .list ul .item{width:100px;height:100px;margin:0px 5px}
.preview-container .thumbnail-box .btn-prev{left:0px}
.preview-container .thumbnail-box .btn-next{right:0px}}
@media(max-width:768px){
.preview-container .thumbnail-box .btn,.preview-container .thumbnail-box .list .swiper-pagination,.prodetails-page .crumbs,.prodetails-page .inner-banner,.small-box,.video-img a::after{display:none}
.pdshow-l{width:100%;margin-bottom: 30px;}
.prodetails-page .page-box{padding-top:15px}
.preview-container .thumbnail-box .list{width:100%}
.preview-container .thumbnail-box .list ul .item-cur{border:none}
.preview-container .thumbnail-box .list ul .item{width:100%;height:auto;border:none;margin:0px}
.preview-container .thumbnail-box .list .banner-page{display:flex}
.pdshow-r{padding-left:0px;width:100%;border-top:1px solid #EAEAEA}
.preview-container .thumbnail-box{margin-top:0px}
.pdshow-r-btn{margin-top:20px}
}
#swiper-banner .swiper-button-next,#swiper-banner .swiper-button-prev{width:30px;height:30px;line-height:28px;display:none}