/*：这是演示代码,不是源代码。源码下载唯一地址: http://www.bootstrapmb.com/item/100(这个备注仅在演示页面有，源代码里没有)*//* -------------------------------- Main Components -------------------------------- */.cd-gallery {  margin: 1.5em auto;  padding: 0;}.cd-gallery::after {  clear: both;  content: "";  display: table;}.cd-gallery >li {  overflow: hidden;  position: relative;  margin-bottom: 2em;  border-radius: .25em;  -webkit-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1);  -moz-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1);  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1);  background: #fff;}.cd-gallery >li >a {  display: block;}@media only screen and (min-width: 1110px) {  .cd-gallery {    margin: 0 auto;  }  .cd-gallery >li {    width: 22%;    float: left;    margin-right: 4%;    margin-bottom: 2.5em;  }  .cd-gallery >li:nth-of-type(4n) {    margin-right: 0;  }}@media (min-width: 768px) and (max-width: 1110px) {  .cd-gallery {    margin: 0 auto;  }  .cd-gallery >li {    width: 48%;    float: left;    margin-right: 4%;    margin-bottom: 2.5em;  }  .cd-gallery >li:nth-of-type(2n) {    margin-right: 0;  }}@media only screen and (min-width: 1048px) {  .cd-gallery {    margin: 2.5em auto;  }  .no-touch .cd-gallery >li:hover .cd-dots li.selected a {    /* Slider dots - change background-color of the selected dot when hover over the its parent list item */    background: #2f2933;    border-color: #2f2933;  }  .no-touch .cd-gallery >li:hover .cd-dots a {    /* Slider dots - change dot border-color when hover over the its parent list item */    border-color: #9688a0;  }  .no-touch .cd-gallery >li:hover li.move-right, .no-touch .cd-gallery >li:hover li.move-left {    /* show preview items when hover over the its parent list item */    opacity: 0.3;  }}.cd-item-wrapper {  position: relative;  overflow: hidden;  margin: 3em 0;  padding: 0;}.cd-item-wrapper li {  list-style-type: none;  position: absolute;  top: 0;  left: 25%;  height: 100%;  width: 50%;  opacity: 0;  /* Force Hardware Acceleration */  -webkit-transform: translateZ(0);  -moz-transform: translateZ(0);  -ms-transform: translateZ(0);  -o-transform: translateZ(0);  transform: translateZ(0);  -webkit-backface-visibility: hidden;  backface-visibility: hidden;  will-change: transform, opacity;  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;  -moz-transition: -moz-transform 0.4s, opacity 0.4s;  transition: transform 0.4s, opacity 0.4s;}.cd-item-wrapper li.selected {  /* selected item */  position: relative;  opacity: 1;}.cd-item-wrapper li.move-left {  /* item on left - preview visible */  -webkit-transform: translateX(-100%) scale(0.7);  -moz-transform: translateX(-100%) scale(0.7);  -ms-transform: translateX(-100%) scale(0.7);  -o-transform: translateX(-100%) scale(0.7);  transform: translateX(-100%) scale(0.7);  opacity: 0.3;}.cd-item-wrapper li.move-right {  /* item on right - preview visible */  -webkit-transform: translateX(100%) scale(0.7);  -moz-transform: translateX(100%) scale(0.7);  -ms-transform: translateX(100%) scale(0.7);  -o-transform: translateX(100%) scale(0.7);  transform: translateX(100%) scale(0.7);  opacity: 0.3;}.cd-item-wrapper li img {  display: block;  width: 100%;}@media only screen and (min-width: 1048px) {  .cd-item-wrapper li.move-left,  .cd-item-wrapper li.move-right {    /* hide preview items */    opacity: 0;  }  .cd-item-wrapper li.focus-on-left {    /* class added to the .selected and .move-right items when user hovers over the .move-left item (item preview on the left) */    -webkit-transform: translateX(3%) scale(1.25);    -moz-transform: translateX(3%) scale(1.25);    -ms-transform: translateX(3%) scale(1.25);    -o-transform: translateX(3%) scale(1.25);    transform: translateX(3%) scale(1.25);  }  .cd-item-wrapper li.focus-on-left.move-right {    -webkit-transform: translateX(103%) scale(0.7);    -moz-transform: translateX(103%) scale(0.7);    -ms-transform: translateX(103%) scale(0.7);    -o-transform: translateX(103%) scale(0.7);    transform: translateX(103%) scale(0.7);  }  .cd-item-wrapper li.focus-on-right {    /* class added to the .selected and .move-left items when user hovers over the .move-right item (item preview on the right) */    -webkit-transform: translateX(-3%) scale(1.25);    -moz-transform: translateX(-3%) scale(1.25);    -ms-transform: translateX(-3%) scale(1.25);    -o-transform: translateX(-3%) scale(1.25);    transform: translateX(-3%) scale(1.25);  }  .cd-item-wrapper li.focus-on-right.move-left {    -webkit-transform: translateX(-103%) scale(0.7);    -moz-transform: translateX(-103%) scale(0.7);    -ms-transform: translateX(-103%) scale(0.7);    -o-transform: translateX(-103%) scale(0.7);    transform: translateX(-103%) scale(0.7);  }  .cd-item-wrapper li.hover {    /* class added to the preview items (.move-left or .move-right) when user hovers over them */    opacity: 1 !important;  }  .cd-item-wrapper li.hover.move-left {    -webkit-transform: translateX(-97%) scale(0.75);    -moz-transform: translateX(-97%) scale(0.75);    -ms-transform: translateX(-97%) scale(0.75);    -o-transform: translateX(-97%) scale(0.75);    transform: translateX(-97%) scale(0.75);  }  .cd-item-wrapper li.hover.move-right {    -webkit-transform: translateX(97%) scale(0.75);    -moz-transform: translateX(97%) scale(0.75);    -ms-transform: translateX(97%) scale(0.75);    -o-transform: translateX(97%) scale(0.75);    transform: translateX(97%) scale(0.75);  }}.cd-dots {  /* not visible in the html document - created using jQuery */  margin-left: 50%;  right: auto;  -webkit-transform: translateX(-50%);  -moz-transform: translateX(-50%);  -ms-transform: translateX(-50%);  -o-transform: translateX(-50%);  transform: translateX(-50%);}.cd-dots::after {  clear: both;  content: "";  display: table;}.cd-dots li {  display: inline-block;  float: left;  margin: 0 5px;  pointer-events: none;}.cd-dots li.selected a {  background: #2f2933;  border-color: #2f2933;}.cd-dots a {  display: block;  height: 6px;  width: 6px;  border-radius: 50%;  border: 1px solid #9688a0;  /* image replacement */  overflow: hidden;  text-indent: 100%;  white-space: nowrap;  -webkit-transition: border-color 0.2s, background-color 0.2s;  -moz-transition: border-color 0.2s, background-color 0.2s;  transition: border-color 0.2s, background-color 0.2s;}@media only screen and (min-width: 1048px) {  .cd-dots li {    pointer-events: auto;  }  .cd-dots li.selected a {    background: #cccccc;    border-color: #cccccc;  }  .cd-dots a {    height: 8px;    width: 8px;    border-color: #cccccc;    /* fix a bug in IE9/10 - transparent anchor not clickable */    background-color: rgba(255, 255, 255, 0);  }}.cd-item-info {  padding: 2em;  border-bottom: 1px solid #f1f1f1;}.cd-item-info::after {  clear: both;  content: "";  display: table;}.cd-item-info b, .cd-item-info .cd-price, .cd-item-info .cd-new-price {  font-weight: bold;  font-size: 14px;}.cd-item-info b {    margin-bottom: 5px;    display: block;    }.cd-item-info b a {  color: #2f2933;  display: block;  width: 100%;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}.cd-item-info .cd-price {  color: #22BAA0;  position: relative;  -webkit-transition: color 0.2s;  -moz-transition: color 0.2s;  transition: color 0.2s;}.cd-item-info .cd-price::after {  /* crossing line - visible if price is on sale */  content: '';  position: absolute;  top: 50%;  bottom: auto;  -webkit-transform: translateY(-50%);  -moz-transform: translateY(-50%);  -ms-transform: translateY(-50%);  -o-transform: translateY(-50%);  transform: translateY(-50%);  left: 0;  height: 2px;  width: 0%;  background-color: #22BAA0;  opacity: 0;  -webkit-transition: width 0.2s 0s, opacity 0s 0.2s;  -moz-transition: width 0.2s 0s, opacity 0s 0.2s;  transition: width 0.2s 0s, opacity 0s 0.2s;}.cd-item-info .cd-price.on-sale::after {  opacity: 1;  width: 100%;  -webkit-transition: width 0.2s 0s, opacity 0s 0s;  -moz-transition: width 0.2s 0s, opacity 0s 0s;  transition: width 0.2s 0s, opacity 0s 0s;}.cd-item-info .cd-new-price {  /* new price - visible if price is on sale */  color: #F25656;  opacity: 0;  -webkit-transform: translateX(5px);  -moz-transform: translateX(5px);  -ms-transform: translateX(5px);  -o-transform: translateX(5px);  transform: translateX(5px);  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;  -moz-transition: -moz-transform 0.2s, opacity 0.2s;  transition: transform 0.2s, opacity 0.2s;}.cd-item-info .cd-new-price.is-visible {  -webkit-transform: translateX(0);  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -o-transform: translateX(0);  transform: translateX(0);  opacity: 1;}.no-js .move-right,.no-js .move-left {  display: none;}/* -------------------------------- xcredits -------------------------------- */.credits {  width: 90%;  margin: 2em auto;  text-align: center;}.no-touch .credits a:hover {  text-decoration: underline;}.cd-item-details a {    color: #333;    margin: 1em 2em;    font-size: 12px;    text-decoration: none;}.cd-item-details a:hover {    color: #22BAA0;}.cd-item-details a i {    margin-right: 5px;}.cd-sale {    display: block;    position: absolute;    top: 10px;    right: 10px;    border-radius: 2px;    padding: 3px 10px;    color: #fff;    z-index: 9;    font-size: 11px;}/*：这是演示代码,不是源代码。源码下载唯一地址: http://www.bootstrapmb.com/item/100(这个备注仅在演示页面有，源代码里没有)*/