/* bigImg */
.pre-box{overflow:hidden;width: calc(100% - 74px);height: calc(100% - 74px);float:right;}
.bigImg{position:relative; width:400px; height:400px; text-align: center; margin: 0 auto;}
 .bigImg #midimg{width:400px;height:400px;}
.bigImg #winSelector{width:235px; height:210px;}
#winSelector{position:absolute; cursor:crosshair; filter:alpha(opacity=15); -moz-opacity:0.15; opacity:0.15; background-color:#000; border:1px solid #fff;} 

/* smallImg */
.smallImg{position:relative; width:72px;padding:0 0; /*height:400px;*/float:left; margin-top:5px;}
.scrollbutton{height:13px; width:50px; overflow:hidden; position:relative; margin: 0 auto; cursor:pointer;}
.scrollbutton.smallImgUp {background:url(../images/d_08.jpg) 0px 0px no-repeat;}
.scrollbutton.smallImgDown {background:url(../images/d_09.jpg) 0px 0 no-repeat;}

.scrollbutton.smallImgUp.disabled{background-position: -63px 0;}
.scrollbutton.smallImgDown.disabled{background-position: -63px 0;}

.imgDiv {
    height:374px;
    overflow:hidden;
    float:left;
}
#imageMenu {float:left; overflow:hidden}

#imageMenu li {width:70px; overflow:hidden; float:left;text-align:center; margin-top:2px;}
#imageMenu li img{cursor:pointer;border:1px solid #ccc }
#imageMenu li#onlickImg img, #imageMenu li:hover img{ border:1px solid #f30 !important;}

/* bigView */
#bigView{position:absolute;border: 1px solid #959595; overflow: hidden; z-index:999; top:0px;}
#bigView img{position:absolute;}
/*video*/
.videoimg{position:relative;}
.videoimg::before{content:"";position: absolute;width: 40%; height: 40%; background:url(../images/play.png) center no-repeat; background-size: 100%; top:30%;left:30%; }

@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.preview bigImg{ width:300px; height:300px!important;}
}
@media screen and (max-width: 1023px){
    .preview .bigImg{ width:100%; height:100%!important;max-width: 428px; max-height: 428px;}
    .bigImg #midimg, .bigImg video{ width:100%; height:100%!important;max-width: 428px; max-height: 428px;}
	.scrollbutton{ height:27px; }
	.scrollbutton.smallImgDown, .scrollbutton.smallImgUp{ background-color: #959595; background-position: 0 7px}
	.scrollbutton.smallImgUp.disabled, .scrollbutton.smallImgDown.disabled{background-position: -63px 7px; background-color: #dbdbdb}
}
@media screen and (max-width: 639px){
	.imgDiv{height:215px;}
	.smallImg{margin-top:0;}
	.bigImg #midimg, .bigImg video{width: 270px; max-width: 100%}
}