@charset "utf-8";
#product { margin: 0 auto; }
#product .display { padding-bottom: 200px; }
#product .display>.lists { width: 20%; }
#product .display>.lists a { display: inherit; font-size: 1.6rem; color: #6C6C6C; margin-bottom: 15px; }
#product .display>.lists a:hover { color: #000; }
#product .display>.row { width: 80%; }
.row .quickView { float: left; margin: 0 10px 50px; width: calc(25% - 10px - 10px ) !important; }
/*.row .quickView:first-child { margin: 0; }*/


/* begin: category common */
.quickView { background: #fff; }
.quickView .gallery { position: relative; overflow: hidden; }
.quickView .gallery .preview { float: left; display: block; position: relative; background-color: #F1F0F1; }
.quickView .gallery .preview img { display: block; }
.quickView .gallery ul.thumbs { float: left; background: #fff; list-style: none; height:68px; overflow:hidden; }
.quickView .gallery ul.thumbs li { margin: 5px 0; padding: 1px 0 0 0; cursor: pointer; }
.quickView .gallery ul.thumbs li.empty { cursor: default; }
.quickView .gallery ul.thumbs li.empty .thumb { background: #eee; }
.quickView .gallery ul.thumbs li .thumb { background-color: #F1F0F1; border:1px solid #F1F0F1; display: block; width: 58px; height: 60px; text-align: center; }
.quickView .gallery ul.thumbs li .thumb img { cursor: pointer; height: 58px; transition: all 0.1s; -moz-transition: all 0.1s; -webkit-transition: all 0.1s; -ms-transition: all 0.1s; -o-transition: all 0.1s; }
.quickView .gallery ul.thumbs li:first-child { padding-top: 0 !important; }
.quickView .gallery ul.thumbs li.active .thumb { background-color: #FFFFFF; border:1px solid #F1F0F1; }
.quickView.bottomPosition .gallery a.preview { float: none; overflow:hidden; }
.quickView.bottomPosition .gallery a.preview img { transition: all 0.36s; }
.quickView.bottomPosition .gallery a.preview:hover img { transform: scale(1.1); }
.quickView.bottomPosition .gallery ul.thumbs li { float: left; padding: 0 0 0 1px; }
.quickView.bottomPosition .gallery ul.thumbs li:first-child { padding: 0 !important; }
.quickView .info { padding: 15px 0 0; font-size: 1.4rem; position: relative; }
.quickView .info a { color: #000; text-decoration: none; }
.quickView ul.stats { border-top: 1px solid #e5e5e5; list-style: none; padding: 13px 0 0 0; margin: 0; }
.quickView ul.stats li { float: left; padding: 0 10px; margin: 0; border-left: 1px solid #e5e5e5; text-align: center; color: #4877c3; font-size: 12px; }
.quickView ul.stats li:first-child { border-left: 0; }
.quickView ul.stats li .count { color: #000; font-size: 18px; display: block; font-weight: 600; }
.quickView ul.stats li a { color: #4877c3; text-decoration: none; display: block; width: 50px; }
/* end: category common */


/* === Page CSS === */
.page { padding: 10px; line-height: normal; text-decoration: none; text-indent: 0px; }
.page a { display: block; padding: 5px 10px; font-size:1.4rem; border: solid 1px #000000; float: left; margin: 3px; color: #000000; }
.page a:hover { background: #666666; color: #fff; }
.pagedefault { padding: 5px 10px; font-size:1.4rem; border: solid 1px #000000; float: left; margin: 3px; background: #666666; color: #FFF; }
.pageno { padding: 2px 10px 0px; border: solid 1px #999; float: left; margin: 3px 3px 3px 12px; }
.pageall { padding: 2px 10px 0px; border: solid 1px #999; float: left; margin: 3px; }


/* ===  === */
@media only screen and (max-width: 1480px) {
.row .quickView { width: calc(33.3% - 10px - 10px ) !important; }
}
@media only screen and (max-width: 1200px) {
.row .quickView { width: calc(50% - 10px - 10px ) !important; }
}
@media only screen and (max-width: 960px) {
#product .display>.lists { width: 100%; margin-bottom: 20px; }
#product .display>.lists a { display: inline-block; color: #000; margin-left: 10px; margin-bottom: 20px; padding: 5px 10px; border: 1px #F1F0F1 solid; background-color: #F1F0F1; }
#product .display>.row { width: 100%; }
}
@media only screen and (max-width: 860px) {
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 520px) {
.row .quickView { width: calc(100% - 10px - 10px ) !important; }
}