div,
ul,
li {
    margin: 0;
    padding: 0;
}

.box {
    width: 412px;
    height: 412px;
    border: 1px solid #ccc;
    position: relative;
    z-index: 2;
}

.big {
    width: 410px;
    height: 410px;
    position: absolute;
    top: 0;
    left: 440px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.mask {
    width: 205px;
    height: 205px;
    /* background-image: url('maskHover.png'); */
    background-image: radial-gradient(rgba(124, 165, 236, 0.4) 30%, transparent 0),
        radial-gradient(rgba(124, 165, 236, 0.4) 30%, transparent 0);
    background-size: 3px 3px;
    background-position: 0 0, 3px 3px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
}

.small {
    position: relative;
    width: 410px;
    height: 410px;
    background: url("../img/123-mini.jpg") no-repeat;
    background-size: contain;
}

.show {
    display: show;
}

.hide {
    display: none;
}

li {
    list-style: none;
}

.items li {
    float: left;
    margin: 10px;
    padding: 5px;
}

.items li>img {
    width: 58px;
}

.items .active {
    /* border: 1px solid #bbb; */
    background-color: #ccc;
}

ul.items {
    display: inline-block;
    width: 412px;
    margin-top: 10px;
}