*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demoh2{font-size:14px;margin:20px;color:#ff6600;}
/* preview style */
.preview{ margin:0 auto; float:left}
/* smallImg */
.smallImg{position:relative;height:420px; padding:20px 5px 16px 5px; width:82px; overflow:hidden;float:left; margin-right:20px}
.scrollbutton{width:45px; height:10px; overflow:hidden; position:absolute; left:17px; cursor:pointer;background:#fff url(../images/zoom.gif) no-repeat;}
.scrollbutton.smallImgUp{background-position:0 0; top:8px;}
.scrollbutton.smallImgDown{background-position:0 -11px; margin-top:0pxx; bottom:2px}
.scrollbutton.smallImgUp.disabled{background-position:0 -22px;}
.scrollbutton.smallImgDown.disabled{background-position:0 -33px;}
#imageMenu {height:410px;overflow:hidden; margin-top:4px;}
#imageMenu li {height:84px; width:72px; overflow:hidden;}
#imageMenu li img{padding:1px;border:1px solid #E8E8E8; width:68px; height:68px;cursor:pointer;}
#imageMenu li#onlickImg img{border:1px solid #B9AB77;}
/* bigImg */
.bigImg{position:relative;float:left;width:452px;height:452px;border:1px solid #E4E4E4;overflow:hidden; text-align:center}
.bigImg img{ vertical-align:middle}
.bigImg #midimg{width:450px;height:450px;}
.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;}
/* bigView */
#bigView{position:absolute;border: 1px solid #ccc;overflow: hidden;width:260px;height:295.652px;top:20%;left:500px;z-index:999;}
#bigView img{position:absolute;}

.fd_tu{ display:block}

@media only screen and (max-width: 1190px) {
.smallImg{position:relative;height:360px; padding:20px 5px 16px 5px; width:82px; overflow:hidden;float:left; margin-right:10px}

.bigImg{position:relative;float:left;width:402px;height:402px;border:1px solid #E4E4E4;overflow:hidden; text-align:center}

.bigImg #midimg{width:400px;height:400px;}

#imageMenu {height:350px;overflow:hidden; margin-top:4px;}
#imageMenu li {height:84px; width:72px; overflow:hidden;}
}


@media only screen and (max-width: 800px) {
.fd_tu{ display: none}
.preview{width:auto; margin:0 auto; float:none; width:500px}
.bigImg #winSelector{width:235px;height:210px; display:none}
.smallImg{position:relative;height:360px; padding:20px 5px 16px 5px; width:82px; overflow:hidden;float:left; margin-right:1px}

}
@media only screen and (max-width:560px) {
.preview{width:auto; margin:0 auto; float:none; width:340px}
.bigImg{position:relative;float:right;width:260px;height:260px;padding:2px;border:1px solid #E4E4E4;overflow:hidden;}
.bigImg #midimg{width:100%; height:260px}

.smallImg{position:relative;height:230px; padding:20px 5px 16px 5px; width:60px; overflow:hidden;float:left;}
.scrollbutton{width:52px; height:10px; overflow:hidden; position:absolute; left:7px; cursor:pointer;background:#fff url(../images/zoom.gif) no-repeat left;}
#imageMenu li {height:58px; width:52px; overflow:hidden;}
#imageMenu li img{padding:1px;border:1px solid #E8E8E8; width:48px; height:48px;cursor:pointer;}
#imageMenu {height:226px;overflow:hidden; margin-top:4px;}

}


@media only screen and (max-width:330px) {
.preview{width:auto}
.bigImg{position:relative;float:right;width:210px;height:210px;padding:2px;border:1px solid #E4E4E4;overflow:hidden;}
.bigImg #midimg{width:100%;height:100%;}

.smallImg{position:relative;height:177px; padding:20px 5px 16px 5px; width:60px; overflow:hidden;float:left;}
.scrollbutton{width:52px; height:10px; overflow:hidden; position:absolute; left:7px; cursor:pointer;background:#fff url(../images/zoom.gif) no-repeat left;}
#imageMenu li {height:58px; width:52px; overflow:hidden;}
#imageMenu li img{padding:1px;border:1px solid #E8E8E8; width:48px; height:48px;cursor:pointer;}
#imageMenu {height:174px;overflow:hidden; margin-top:4px;}
}