body{ font-size:12px; padding:15px 0;}

/* ----------  public css ---------- */
.clear {clear: both !important;float: none !important;font-size: 0 !important; height: 0 !important;line-height: 0 !important;overflow: hidden !important;}

/* ----------  effect ---------- */
.fade .productlist{ padding-bottom:40px;}
.slider .seckill{ padding-bottom:40px;}

/* ----------  item number ---------- */
/* 5x2 */
.itemnum10 .rslides li{height:400px; width:1000px;}
.itemnum10 .item{width:200px;height:200px;}
.itemnum10 .productlist{height:400px;}

/* 4x2 */
.itemnum8 .rslides li{height:500px; width:1000px;}
.itemnum8 .item{width:250px;height:250px;}
.itemnum8 .productlist{height:500px;}


/* ----------  product css  ---------- */
.seckill{overflow: hidden; position:relative; width:1000px;  margin:0 auto; -webkit-background-clip:padding; -moz-background-clip:padding; background-clip:padding-box; }
.seckill h2 { font-size:30px; height:42px;  line-height:42px; padding:0 10px;}
.m3link{ position:absolute;display:inline-block; height:20px; line-height:20px; position:absolute; top:10px; right:10px; padding:4px 130px 2px 12px; background:url(../images/mabang3_logo_invert.png) 80px center no-repeat;text-decoration:none; cursor:pointer;transition: all 450ms ease-out 0s;}
.m3link img{ height:100%;}
.productlist{ clear:both; position:relative; overflow:hidden; width:1000px; margin:0 auto;}
.productlist .item{ box-sizing:border-box; position:relative; float:left; display:inline; overflow:hidden;}

.productlist .item .photo{ background: url(../images/loading-bubbles.svg) center no-repeat; position:relative;overflow:hidden; width:100%;height:100%;}
.productlist .item .photo .link{overflow:hidden;width:100%;height:100%; background-repeat:no-repeat; display: block; position:absolute; left:0; top:0;background-position:center; background-repeat:no-repeat; -moz-background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-size: cover;}

.productlist .item .info{position: absolute; box-sizing:border-box; display:block; font-weight:bold;cursor: pointer; text-decoration:none; z-index:2;-webkit-transition: all 450ms ease-out 0s; -moz-transition: all 450ms ease-out 0s;-o-transition: all 450ms ease-out 0s;transition: all 450ms ease-out 0s;}
.productlist .item .info .productname{color:#fff; line-height:20px; display:block; overflow:hidden; word-break: break-all; word-wrap: break-word; box-sizing:border-box;  padding:0 1em;}
.productlist .item .info p{color:#fff; line-height:20px; font-size:14px; word-break: break-all; word-wrap: break-word; box-sizing:border-box; padding:0 1em;}
.productlist .item .info p .price{ font-family: Georgia, "Times New Roman", Times, serif; font-size:1.4em; font-weight:bold; padding:0 5px; color:#f00;}

.productlist .rslides{ padding:0; margin:0; list-style:none; position:absolute; left:0; top:0;}
.productlist .rslides li{float:left;}

.rslides_tabs{margin:0;  float:left; position:absolute; left:50%; height:18px; bottom:8px;}
.rslides_tabs li{float:left; margin-left:10px; right:50%; position:relative;}
.rslides_tabs a{cursor:pointer; display:block;width:18px; height:18px;  box-sizing:border-box; position:relative; overflow:hidden; text-indent:-999px;}

.seckill .btn {position:absolute;  padding:0;  bottom:0; left:50%; height:18px; bottom:8px;}
.seckill .btn span {display:block; width:18px; height:18px; box-sizing:border-box; float:left;_font-size:0; margin-left:10px;  cursor:pointer; overflow:hidden;  position:relative; right:50%;}


/* ----------  style type  ---------- */
/* skin1 */
.skin1{ background-color:#c9a569;}
.skin1 .seckill{ background-color:rgba(255,255,255,0.2);  border:6px solid rgba(255,255,255,0.2); border-radius:10px;}
.skin1 .seckill h2 {color:#fff; background-color:#e56849; text-shadow:0 1px 0 #a53e24; border-radius:7px 7px 0 0; }
.skin1 .m3link{ color:#fff; border-radius:13px; }
.skin1 .m3link:hover{background-color:#a53e24;}

.skin1 .item .info{background-color:rgba(158,84,6,0); overflow:hidden; top: 0;left: 0;width: 100%;height: 100%;}
.skin1 .item .info:before, .skin1 .item .info:after {position: absolute;top:1em;right:1em;bottom:1em;left:1em;content:"";-webkit-opacity:0; -moz-opacity:0;opacity:0;filter: alpha(opacity=0);-webkit-transition: all 450ms ease-out 0s; -moz-transition: all 450ms ease-out 0s;-o-transition: all 450ms ease-out 0s;transition: all 450ms ease-out 0s;}
.skin1 .item .info:before {border-top: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: scale(0,1); -moz-transform: scale(0,1);-transform: scale(0,1);}
.skin1 .item .info:after {border-right: 1px solid #fff;border-left: 1px solid #fff;-webkit-transform: scale(1,0);-moz-transform: scale(1,0);transform: scale(1,0);}
.skin1 .item:hover .info:before, .skin1 .item:hover .info:after {-webkit-opacity:1; -moz-opacity:1;opacity:1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);transform: scale(1);}
.skin1 .item:hover .info{background-color:rgba(158,84,6,0.7);}

.skin1 .item .info .productname, .skin1 .item .info p{position:absolute; color:#fff; padding:0 1.5em;-webkit-transition: all 450ms ease-out 0s; -moz-transition: all 450ms ease-out 0s;-o-transition: all 450ms ease-out 0s;transition: all 450ms ease-out 0s;}
.skin1 .item .info p{ text-align:right; top:1.5em; right:-100%;}
.skin1 .item .info .productname{ height:20px; left:0; bottom:0; background-color:rgba(158,84,6,0.5); width:100%; text-overflow: ellipsis; white-space: nowrap;}
.skin1 .item:hover .info p{ padding:0 1.5em; right:0;}
.skin1 .item:hover .info .productname{ bottom:1.5em; height:auto; max-height:40px;  background-color:rgba(158,84,6,0); white-space: inherit;}


.skin1 .rslides_tabs a{ border:rgba(158,84,6,1) solid 3px;  border-radius:50%;}
.skin1 .rslides_tabs li.rslides_here a:hover,.skin1 .rslides_tabs a:hover {border-color:#c8761f;}
.skin1 .rslides_tabs li.rslides_here a{ background-color:rgba(158,84,6,0.5);}
.skin1 .btn span { border:rgba(158,84,6,1) solid 3px;  border-radius:50%;}
.skin1 .btn span.on {background-color:rgba(158,84,6,0.5);}

/* skin2 */
.skin2{ background-color:#e0e0e0;}
.skin2 .seckill{ background-color:#c8385e; border:6px solid #c8385e;}
.skin2 .seckill h2 {color:#fff;}
.skin2 .m3link{ color:#fff; border-radius:13px; top:5px; right:5px;}
.skin2 .m3link:hover{background-color:#962a46;}

.skin2 .item .photo{ -webkit-transition: all 300ms  ease-in-out 0s; -moz-transition: all 300ms  ease-in-out 0s;-o-transition: all 300ms  ease-in-out 0s;transition: all 300ms  ease-in-out 0s;}
.skin2 .item:hover .photo{width:120%; height:120%; margin:-10% 0 0 -10%;}
.skin2 .item .info{top:100%; height:100%; margin-top:-40px; left: 0;width: 100%; background-color:rgba(34, 34,34, 0.8);}
.skin2 .item:hover .info{ margin-top:-90px; }
.skin2 .item .info p{ margin-top:5px; color:#ccc; margin-left:40%; -webkit-transition: all 300ms  ease-in-out 300ms; -moz-transition: all 300ms  ease-in-out 300ms;-o-transition: all 300ms  ease-in-out 300ms;transition: all 300ms  ease-in-out 300ms;-webkit-opacity:0; -moz-opacity:0;opacity:0;filter: alpha(opacity=0)}
.skin2 .item:hover .info p{ margin-left:0; -webkit-opacity:1; -moz-opacity:1;opacity:1;filter: alpha(opacity=100)}
.skin2 .item .info p .price{ color:#c8385e;}
.skin2 .item .info .productname{margin-top:1em; color:#ccc;}

.skin2 .item .info .productname{text-overflow: ellipsis; white-space: nowrap;}
.skin2 .item:hover .info .productname{ max-height:40px; white-space: inherit;}


.skin2 .rslides_tabs a{ border:#962a46 solid 3px; border-radius:50%;}
.skin2 .rslides_tabs li.rslides_here a:hover,.skin2 .rslides_tabs a:hover {background-color:rgba(255,255,255,0.3);}
.skin2 .rslides_tabs li.rslides_here a{ background-color:#ed6f90;}
.skin2 .btn span { border:#962a46 solid 3px; border-radius:50%;}
.skin2 .btn span.on {background-color:#ed6f90;}

/* skin3 */
.skin3{ background-color:#404040;}
.skin3 .seckill h2 { background-color:#19a2de; margin:0 3px 3px;}
.skin3 .m3link{color:#fff;}
.skin3 .m3link:hover{color:#fff; background-color:rgba(0,0,0,0.3);}


.skin3 .item{ padding:3px; overflow:inherit; z-index:1;}
.skin3 .item:hover{z-index:2;}
.skin3 .item .photo{ z-index:2;}
.skin3 .item .photo, .skin3 .item .info{ -webkit-transition: all 500ms ease-out 0s; -moz-transition: all 500ms ease-out 0s;-o-transition: all 500ms ease-out 0s;transition: all 500ms ease-out 0s; -moz-transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; backface-visibility:hidden;}
.skin3 .item .info{ left: 3px;top:3px; bottom:3px; right:3px;background-color:#19a2de; -moz-transform:perspective(900px) rotateX(180deg); -webkit-transform:perspective(900px) rotateX(180deg); transform:perspective(900px) rotateX(180deg);z-index:1;}
.skin3 .item:hover .photo{ -moz-transform:perspective(900px) rotateX(180deg); -webkit-transform:perspective(900px) rotateX(180deg); transform:perspective(900px) rotateX(180deg);}
.skin3 .item:hover .info{ -moz-transform:perspective(900px) rotateX(0deg); -webkit-transform:perspective(900px) rotateX(0deg); transform:perspective(900px) rotateX(0deg);}

.skin3 .item .info p{ margin-top:5px;}
.skin3 .item .info .productname{margin-top:1em;}

.skin3 .rslides_tabs a{background-color:#8d8d8d; -webkit-transition: all 300ms  ease-in-out 300ms; -moz-transition: all 300ms  ease-in-out 300ms;-o-transition: all 300ms  ease-in-out 300ms;transition: all 300ms  ease-in-out 300ms;}
.skin3 .rslides_tabs a:hover {background-color:#ccc;}
.skin3 .rslides_tabs li.rslides_here a{background-color:#19a2de; width:36px;}
.skin3 .btn span { background-color:#8d8d8d; -webkit-transition: all 300ms  ease-in-out 300ms; -moz-transition: all 300ms  ease-in-out 300ms;-o-transition: all 300ms  ease-in-out 300ms;transition: all 300ms  ease-in-out 300ms;}
.skin3 .btn span.on {background-color:#19a2de; width:36px;}

/* skin4 */
.skin4{ background-color:#00aaaa;
	background-size:200px 200px;
	background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
	background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
	background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);}
.skin4 .seckill{ background-color:#00aaaa; border:6px solid rgba(255,255,255,0.4); border-radius:4px;}
.skin4 .seckill h2 {color:#fff;}
.skin4 .m3link{ color:#fff; border-radius:13px; top:8px; right:5px;border-radius:3px;}
.skin4 .m3link:hover{background-color:rgba(0,0,0,0.3);}

.skin4 .item .photo, .skin4 .item .info{ -webkit-transition: all 300ms  ease-in-out 0s; -moz-transition: all 300ms  ease-in-out 0s;-o-transition: all 300ms  ease-in-out 0s;transition: all 300ms  ease-in-out 0s;}
.skin4 .item:hover .photo{width:140%; height:140%; margin:-20% 0 0 -20%;}
.skin4 .item .link:before{ z-index:1; content:""; background-color:rgba(0,0,0,0.6); position: absolute; top:0; left:50%; width:0; height:100%; -webkit-transition: all 500ms  ease-in-out 0s; -moz-transition: all 500ms ease-out 0s;-o-transition: all 500ms ease-out 0s;transition: all 500ms ease-out 0s; -moz-transform:rotate(45deg) scale(1.5); -webkit-transform:rotate(45deg) scale(1.5); transform:rotate(45deg) scale(1.5);}

.skin4 .item .info{width:100%; height:100%; left:0; top:0; -webkit-transition: all 300ms  ease-in-out 200ms; -moz-transition: all 300ms  ease-in-out 200ms;-o-transition: all 300ms  ease-in-out 200ms;transition: all 300ms  ease-in-out 200ms;-webkit-opacity:0; -moz-opacity:0;opacity:0;filter: alpha(opacity=0); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);}
.skin4 .item:hover .info{width:100%; height:100%; margin:0;-webkit-opacity:1; -moz-opacity:1;opacity:1;filter: alpha(opacity=100); -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);}
.skin4 .item:hover .link:before{ left:0; width:100%;}

.skin4 .item .info .productname{ margin-top:30%; padding:0 1.5em; max-height:60px; color:#ccc;}
.skin4 .item .info p{ margin-top:10px; text-align:center; padding:0 1.5em; color:#ccc;}


.skin4 .btn, .skin4 .rslides_tabs{ bottom:10px;}
.skin4 .rslides_tabs a{border:#5ee0e0 solid 3px; background-color:#00aaaa; border-radius:50%;}
.skin4 .rslides_tabs li.rslides_here a:hover,.skin4 .rslides_tabs a:hover {background-color:rgba(255,255,255,0.3);}
.skin4 .rslides_tabs li.rslides_here a{border-color:#fff; background-color:#5ee0e0;}
.skin4 .btn span { border:#5ee0e0 solid 3px; background-color:#00aaaa; border-radius:50%;}
.skin4 .btn span.on {background-color:#fff;}

/* skin5 */
.skin5{ background-color:#2c3f52;}
.skin5 .seckill h2 {color:#fff;}
.skin5 .m3link{ color:#fff; border-radius:13px; right:0; top:0;background-color:#00a99d;}
.skin5 .m3link:hover{background-color:#516f8d;}

.skin5 .item .photo{ z-index:2; -webkit-transition: all 300ms  ease-in-out 0s; -moz-transition: all 300ms  ease-in-out 0s;-o-transition: all 300ms  ease-in-out 0s;transition: all 300ms  ease-in-out 0s;}
.skin5 .item:hover .photo{-webkit-opacity:0; -moz-opacity:0;opacity:0;filter: alpha(opacity=0); -moz-transform: scale(0.3); -webkit-transform: scale(0.3); transform: scale(0.3);}
.skin5 .item .info{ z-index:1; top:0; left: 0; height:100%; width: 100%;}
.skin5 .item .info p{ position:absolute; bottom:1.5em; right:1.5em; background-color:#ed4e6e; border-radius:3px; padding:0 5px; z-index:3;}
.skin5 .item .info p .price{ color:#fff;}

.skin5 .item .info .productname{margin:1.5em; z-index:3; position:relative;}

.skin5 .item .info:before{ content:""; z-index:1; position: absolute;top: 0;left: 0;right: 0;bottom: 0;-webkit-opacity:0; -moz-opacity:0;opacity:0;filter: alpha(opacity=0);-webkit-transition: opacity 0.3s ease;-moz-transition: opacity 0.3s ease;transition: opacity 0.3s ease;background-size: 30px 30px;
	background-image: -webkit-linear-gradient(45deg, #516f8d 25%, transparent 25%, transparent 50%, #516f8d 50%, #516f8d 75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient(45deg, #516f8d 25%, transparent 25%, transparent 50%, #516f8d 50%, #516f8d 75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, #516f8d 25%, transparent 25%, transparent 50%, #516f8d 50%, #516f8d 75%, transparent 75%, transparent);
	-webkit-animation: barberpole 0.5s linear infinite;
	-moz-animation: barberpole 0.5s linear infinite;
	animation: barberpole 0.5s linear infinite;}
.skin5 .item:hover .info:before{-webkit-opacity:1; -moz-opacity:1;opacity:1;filter: alpha(opacity=100);}
.skin5 .item .info:after{content:""; position:absolute; left:0.5em; top:0.5em; right:0.5em; bottom:0.5em; background-color:#2c3f52; z-index:2;}

@-webkit-keyframes barberpole {from { background-position: 0 0;}to {background-position: 60px 30px;}}
@-moz-keyframes barberpole {from {background-position: 0 0;}to {background-position: 60px 30px;}}
@keyframes barberpole {from {background-position: 0 0;}to {background-position: 60px 30px;}}

.skin5 .rslides_tabs a{ border:#516f8d solid 3px; border-radius:50%;}
.skin5 .rslides_tabs li.rslides_here a:hover,.skin5 .rslides_tabs a:hover { border-color:#00a99d;}
.skin5 .rslides_tabs li.rslides_here a{  border-color:#00a99d; background-color:#015751;}
.skin5 .btn span { border:#516f8d solid 3px; border-radius:50%;}
.skin5 .btn span.on { border-color:#00a99d; background-color:#015751;}