.bb-bookblock { width: 700px; height: 470px; margin: 0 auto; position: relative; z-index: 100; -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
.bb-page { position: absolute; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; }
.bb-vertical .bb-page { width: 50%; height: 100%; left: 50%; -webkit-transform-origin: left center; -moz-transform-origin: left center; transform-origin: left center; }
.bb-horizontal .bb-page { width: 100%; height: 50%; top: 50%; -webkit-transform-origin: center top; -moz-transform-origin: center top; transform-origin: center top; }
.bb-page > div, .bb-outer, .bb-content, .bb-inner { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: #fff; }
.bb-vertical .bb-content { width: 200%; }
.bb-horizontal .bb-content { height: 200%; }
.bb-page > div { width: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
.bb-page > div:not(:only-child) { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
.bb-vertical .bb-back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg); }
.bb-horizontal .bb-back { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); transform: rotateX(-180deg); }
.bb-outer { width: 100%; overflow: hidden; z-index: 999; }
.bb-overlay, .bb-flipoverlay { background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; }
.bb-flipoverlay { background-color: rgba(0, 0, 0, 0.2); }
/* */

.bb-bookblock.bb-vertical > div.bb-page:first-child, .bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); }
.bb-bookblock.bb-horizontal > div.bb-page:first-child, .bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); }
/* Content display */
.bb-vertical .bb-front .bb-content { left: -100%; }
.bb-horizontal .bb-front .bb-content { top: -100%; }
/* Flipping classes */
.bb-vertical .bb-flip-next, .bb-vertical .bb-flip-initial { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg); }
.bb-vertical .bb-flip-prev { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); }
.bb-horizontal .bb-flip-next, .bb-horizontal .bb-flip-initial { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); }
.bb-horizontal .bb-flip-prev { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); }
.bb-vertical .bb-flip-next-end { -webkit-transform: rotateY(-15deg); -moz-transform: rotateY(-15deg); transform: rotateY(-15deg); }
.bb-vertical .bb-flip-prev-end { -webkit-transform: rotateY(-165deg); -moz-transform: rotateY(-165deg); transform: rotateY(-165deg); }
.bb-horizontal .bb-flip-next-end { -webkit-transform: rotateX(15deg); -moz-transform: rotateX(15deg); transform: rotateX(15deg); }
.bb-horizontal .bb-flip-prev-end { -webkit-transform: rotateX(165deg); -moz-transform: rotateX(165deg); transform: rotateX(165deg); }
.bb-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; background: #fff; }
/* No JS */
.no-js .bb-bookblock, .no-js ul.bb-custom-grid li { width: auto; height: auto; }
.no-js .bb-item { display: block; position: relative; }
/*具体代码*/
.bb-bookblock { width: 640px; height: 434px; overflow:hidden }
ul.bb-custom-grid { list-style: none; margin: 0 auto 0 auto; padding: 0; max-width: 700px; }
/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
ul.bb-custom-grid:before, ul.bb-custom-grid:after { content: " "; display: table; }
ul.bb-custom-grid:after { clear: both; }
/* end clearfix hack */

ul.bb-custom-grid li { width: 640px; height: 470px; padding: 10px; background: #fff; position: relative; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
ul.bb-custom-grid li:nth-child(odd) { margin-right: 20px; }
ul.bb-custom-grid li:before, ul.bb-custom-grid li:after { content: ''; position: absolute; z-index: -2; bottom: 15px; left: 10px; width: 50%; height: 20%; box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); }
ul.bb-custom-grid li:after { right: 10px; left: auto; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); }
ul.bb-custom-grid li a { display: block; }
ul.bb-custom-grid li h3 { color: #9a9b92; margin: 0; padding: 0; text-transform: uppercase; font-weight: 700; font-size: 14px; line-height: 35px; letter-spacing: 1px; }
ul.bb-custom-grid nav { text-align: center; margin-top: 12px; padding-bottom: 5px; }
ul.bb-custom-grid nav span { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: #f0f0f0; margin: 3px 5px; cursor: pointer; box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2),  0 2px 1px rgba(255,255,255,0.9); }
ul.bb-custom-grid nav span.bb-current { background: #ecb700; }

/*报错*/
.has-error{border-color: #A94442; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;}