.zoom-box{
	width: 452px; position: relative; float:left;
}
.pic{border: 1px solid #ccc; width:100%; height:452px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.small-box{position: relative;}
.small-box img{max-width: 100%;max-height: 100%;}
.small-box .square{
    position: absolute;
    left: 0;
    top: 0;
    background: yellow;
    opacity: 0.5;
    /*display: none;*/
}
.small-box .mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.img-list{position:relative; margin-top:10px;}
.img-list span{position:absolute; background:#f8f8f8; border:1px solid #eee; width:16px; height:41px; padding-top:32px; z-index:99999; cursor:pointer;}
.img-list .pre{float:left; top:0; left:0;}
.img-list .next{float:right; top:2px; right:0;}
.img-list span i{display:block; width:0; height:0; border:5px dashed transparent; overflow:hidden;}
.img-list .pre i{border-right:solid;}
.img-list .next i{border-left:solid; margin-left:6px;}
.piclist{width:405px; height:75px; overflow:hidden; margin:0 auto; position:relative;}
#piclist{height:100%; overflow:hidden; position:absolute; left:0; top:0;}
#piclist::after{
    clear: both;
    content: '';
    display: table;
}
#piclist li{float: left; margin: 0 3px; height:75px; line-height:75px;
}
#piclist img{width:75px; height:75px; opacity:.5; filter:alpha(opacity=50);
}
#piclist img.active{
    opacity:1; filter:alpha(opacity=100);
}
.big-box{
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 15px;
    border: 1px solid #cccccc;
    width: 452px;
    height: 452px;
    overflow: hidden;
    display: none;
}
.big-box img{
    position: absolute;
    top: 0;
    left: 0;
}