@charset "utf-8"; 
/*prodetail*/
.preview-container{width:400px;position:relative}
.preview-container #media{height:400px!important;width:100%;display:none;border:1px solid #dfdfdf}
.preview-container .small-box{width:100%;height:400px;border:1px solid #dfdfdf;position:relative}
.preview-container .small-box img{width:100%;height:100%;object-fit:contain}
.preview-container .small-box .hover{position:absolute;width:180px;height:180px;background-color:rgba(204,204,204,.6);border:1px solid #eee;display:none;cursor:move;z-index:9}
.preview-container .small-box .vPlay{position:absolute;right:0;bottom:0;z-index:9;width:40px;height:40px;text-align:center;line-height:40px;background:rgba(0,0,0,.4);cursor:pointer;color:#fff;display:none;font-size:24px}
.preview-container .thumbnail-box{margin-top:20px;position:relative;padding:0 30px}
.preview-container .thumbnail-box .item{height:70px;display:flex;align-items:center;justify-content:center;border-radius:3px;border:1px solid #dcdcdc;cursor:pointer;overflow:hidden}
.preview-container .thumbnail-box .item img{width:100%;height:100%;object-fit:contain}
.preview-container .thumbnail-box .item.item-cur{border-color:var(--color)}
.preview-container .thumbnail-box .item .imgalt{display:none}
.preview-container .thumbnail-box .prodetails-button-next,.preview-container .thumbnail-box .prodetails-button-prev{display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:30px;height:30px;transition:all .2s linear}
.preview-container .thumbnail-box .prodetails-button-next{left:auto;right:0}
.preview-container .big-box{display:none;border:1px solid #dfdfdf;border-left:none;width:420px;height:400px;position:absolute;left:100%;top:0;overflow:hidden;z-index:999;background:#fff}
@media (max-width:1280px){.preview-container{width:300px}
.preview-container .small-box{height:300px}
.preview-container .thumbnail-box .item{height:50px}
.preview-container #media{height:300px}}
@media (max-width:1024px){.preview-container{width:100%}
.preview-container .small-box{display:none}
.preview-container .thumbnail-box{padding:0;margin:0;border:1px solid #e5e5e5;overflow:hidden}
.preview-container .thumbnail-box .item{height:calc(100vw - 30px);border:none}
.preview-container #media{border:none;height:calc(100vw - 30px)!important;min-height:240px;max-width:100%}
.preview-container .thumbnail-box .item .imgalt{position:absolute;left:50%;transform:translateX(-50%);z-index:99;bottom:8px;background:rgba(0,0,0,.2);color:#fff;width:95%;padding:0 6px;line-height:35px;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;border-radius:30px;font-size:14px;padding-right:40px;text-transform:capitalize}
.preview-container .thumbnail-box .prodetails-button-next,.preview-container .thumbnail-box .prodetails-button-prev{display:none}}
/*prodetail*/
@media (max-width:768px){.home-adv .homeadv-list li .opacity .text{padding:10px 0px 10px;font-size: 14px}}
@media (min-width:769px){header:not(.is-active) .head-info .head-logo img{max-height:100px}
header .head-info .head-logo a{display:flex;}
header .head-info .head-logo a>span{display:flex;flex-direction: column;}
header .head-info .head-logo a>span span{padding-left:0;}
header .head-info .head-logo a>span span.cname{font-size:22px}
header .head-info .head-logo a>span span.en-cname{font-size:14.5px}}
@media (max-width:768px){header .head-info .head-logo a>span{display:none}}