.zoom {height:400px; position: relative;}
.zoom-main {
    height:80%;
    position:relative;
    text-align:center;
}
.zoom-thumb-hide .zoom-main {height:100%;}
.zoom-main span {
    background-position: 50% 50%;
    background-repeat:none;
    background-size:200%;
    overflow: hidden;
    position:absolute;
    cursor: zoom-in;
    /* border:dashed thin #ccc; */
    position: relative;
    display:inline-block;
    height:100%;
}
.zoom-right .zoom-main span {left:0;}
.zoom-main img {
    height:100%;
    display:block; 
    background:#fff;
    transition: opacity .5s;
    object-fit: cover;
}
.zoom-main img:hover {opacity: 0;}
.zoom-right .zoom-main{height:100%;float:left;padding-right:5px;}
.zoom-thumb {height:20%;text-align:center;padding:5px;}
.zoom-right .zoom-thumb {display:inline;}
.zoom .zoom-thumb a {
    margin: 5px;
    height:100%;
    display:inline-block;
    cursor: pointer;
    width: 100px;
}
.zoom-right .zoom-thumb a {float:left;height:20%;display:inline-block;}
.zoom .zoom-thumb a img {width: 100%; height: 100%; object-fit: cover; padding:5px; border:solid thin #ccc; background: #fff;}
.zoom .zoom-thumb a.active img {border-color: #f7a234;}
.zoom-left .zoom-main, .zoom-left .zoom-thumb a{float:right;width:auto;}
@media all and (max-width: 735px){
    .zoom img{width:auto;max-width:100%;height:auto;}
    .zoom .zoom-thumb a img {width:auto;}
    .zoom-main, .zoom-thumb a{float:none !important;}
    .zoom-main {height:auto !important;}
    .zoom .zoom-thumb {display:block; height:100%;text-align:center !important;padding:5px;}
    .zoom-thumb a {height:20% !important;display:inline-block !important;}
}