* {
    margin: 0;
    padding: 0
}

ul,
li {
    list-style: none
}

img {
    border: 0;
    outline: 0
}

.imgdet {
    position: relative;
    height: 500px;
    width: 630px;
    /* margin: 100px auto 0; */
    /* background: #fff */
}

.imgdet .imglist {
    position: relative;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 124px;
    height: 100%;
    overflow: hidden
}

.imgdet .imglist ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 0
}

.imgdet .imglist ul li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 110px;
    height: 110px;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    margin-bottom: 20px;
    cursor: pointer;
}

.imgdet .imglist ul li:last-of-type {
    margin-bottom: 0
}

.imgdet .imglist ul .active {
    border: 1px solid #e5060f;
}

.imgdet .imglist ul li img {
    width: 100%;
    height: 100%
}

.imgdet .imgpart {
    vertical-align: top;
    position: relative;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 500px;
    height: 500px
}

.imgdet .imgpart .pic {
    position: relative;
    width: 100%;
    height: 100%
}

.imgdet .imgpart .pic .magnify {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    cursor: move;
    background-color: #fff;
    opacity: .3;
    filter: alpha(opacity=30)
}

.imgdet .imgpart .pic img {
    width: 100%;
    height: 100%
}

.imgdet .imgpart .bigpic {
    display: none;
    position: absolute;
    top: 0;
    right: -510px;
    width: 500px;
    height: 500px;
    z-index: 333;
    border: 1px solid #fff;
    overflow: hidden
}

.imgdet .imgpart .bigpic>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 920px;
    height: 920px;
    max-width: none;
}