/*：这只是演示代码。源码下载链接: http://www.bootstrapmb.com/item/93(这个说明仅在演示里会看到,下载的源码里没有)*/.logo {  height: 36px;  width: 60px;  font-style: italic; }  .logo, .logo:before, .logo:after {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box; }.logo.amex {  text-transform: uppercase;  font-size: 4px;  font-weight: bold;  color: white;  background-image: -webkit-repeating-radial-gradient(center, circle, #FFF 1px, #999 2px);  background-image: repeating-radial-gradient(circle at center, #FFF 1px, #999 2px);  background-image: repeating-radial-gradient(circle at center, #FFF 1px, #999 2px);  border: 1px solid #EEE; }  .logo.amex:before, .logo.amex:after {    width: 28px;    display: block;    position: absolute;    left: 16px; }  .logo.amex:before {    height: 28px;    content: "american";    top: 3px;    text-align: left;    padding-left: 2px;    padding-top: 11px;    background: #267AC3; }  .logo.amex:after {    content: "express";    bottom: 11px;    text-align: right;    padding-right: 2px; }.card.amex.flipped {  -webkit-transform: none;  -ms-transform: none;  transform: none; }.card.amex.identified .front:before, .card.amex.identified .back:before {  background-color: #108168; }.card.amex.identified .front .logo.amex {  opacity: 1; }.card.amex.identified .front .cvc {  visibility: visible; }.card.amex.identified .front:after {  opacity: 1; }.logo {  height: 36px;  width: 60px;  font-style: italic; }  .logo, .logo:before, .logo:after {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box; }.logo.discover {  background: #FF6600;  color: #111;  text-transform: uppercase;  font-style: normal;  font-weight: bold;  font-size: 10px;  text-align: center;  overflow: hidden;  z-index: 1;  padding-top: 9px;  letter-spacing: 0.03em;  border: 1px solid #EEE; }  .logo.discover:before, .logo.discover:after {    content: " ";    display: block;    position: absolute; }  .logo.discover:before {    background: white;    width: 200px;    height: 200px;    border-radius: 200px;    bottom: -5%;    right: -80%;    z-index: -1; }  .logo.discover:after {    width: 8px;    height: 8px;    border-radius: 4px;    top: 10px;    left: 27px;    background-color: #FFF;    background-image: -webkit-radial-gradient(#FFF, #FF6600);    background-image: radial-gradient(  #FFF, #FF6600);    content: "network";    font-size: 4px;    line-height: 24px;    text-indent: -7px; }.card .front .logo.discover {  right: 12%;  top: 18%; }.card.discover.identified .front:before, .card.discover.identified .back:before {  background-color: #86B8CF; }.card.discover.identified .logo.discover {  opacity: 1; }.card.discover.identified .front:after {  -webkit-transition: 400ms;  transition: 400ms;  content: " ";  display: block;  background-color: #FF6600;  background-image: -webkit-linear-gradient(#FF6600, #ffa166, #FF6600);  background-image: -webkit-gradient(linear, left top, left bottom, from(#FF6600), color-stop(#ffa166), to(#FF6600));  background-image: linear-gradient(#FF6600, #ffa166, #FF6600);  height: 50px;  width: 50px;  border-radius: 25px;  position: absolute;  left: 100%;  top: 15%;  margin-left: -25px;  -webkit-box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.5);  box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.5); }.logo {  height: 36px;  width: 60px;  font-style: italic; }  .logo, .logo:before, .logo:after {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box; }.logo.visa.visa {  background: white;  text-transform: uppercase;  color: #1A1876;  text-align: center;  font-weight: bold;  font-size: 15px; }  .logo.visa.visa:before, .logo.visa.visa:after {    content: " ";    display: block;    width: 100%;    height: 25%; }  .logo.visa.visa:before {    background: #1A1876;    bottom: 100%; }  .logo.visa.visa:after {    background: #E79800;    top: 100%; }.card.visa.identified .front:before, .card.visa.identified .back:before {  background-color: #191278; }.card.visa.identified .logo.visa {  opacity: 1; }.logo {  height: 36px;  width: 60px;  font-style: italic; }  .logo, .logo:before, .logo:after {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box; }.logo.mastercard {  color: white;  font-weight: bold;  text-align: center;  font-size: 9px;  line-height: 36px;  z-index: 1;  text-shadow: 1px 1px rgba(0, 0, 0, 0.6); }  .logo.mastercard:before, .logo.mastercard:after {    content: " ";    display: block;    width: 36px;    top: 0;    position: absolute;    height: 36px;    border-radius: 18px; }  .logo.mastercard:before {    left: 0;    background: #FF0000;    z-index: -1; }  .logo.mastercard:after {    right: 0;    background: #FFAB00;    z-index: -2; }.card.mastercard.identified .front .logo.mastercard, .card.mastercard.identified .back .logo.mastercard {  -webkit-box-shadow: none;  box-shadow: none; }.card.mastercard.identified .front:before, .card.mastercard.identified .back:before {  background-color: #0061A8; }.card.mastercard.identified .logo.mastercard {  opacity: 1; }.card-container {  -webkit-perspective: 1000px;  perspective: 1000px;  width: 350px;  height: 200px;  margin: auto;  z-index: 1;  position: relative; }.card {  position: relative;  width: 100%;  height: 100%;  border-radius: 10px;  -webkit-transform-style: preserve-3d;  -ms-transform-style: preserve-3d;  -o-transform-style: preserve-3d;  transform-style: preserve-3d;  -webkit-transition: all 400ms linear;  transition: all 400ms linear; }  .card.flipped {    -webkit-transform: rotateY(180deg);    -ms-transform: rotateY(180deg);    transform: rotateY(180deg); }  .card .front, .card .back {    -webkit-backface-visibility: hidden;    backface-visibility: hidden;    -webkit-transform-style: preserve-3d;    -ms-transform-style: preserve-3d;    -o-transform-style: preserve-3d;    transform-style: preserve-3d;    -webkit-transition: all 400ms linear;    transition: all 400ms linear;    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    overflow: hidden;    border-radius: 10px;    background: #DDD; }    .card .front:before, .card .back:before {      content: " ";      display: block;      position: absolute;      width: 100%;      height: 100%;      top: 0;      left: 0;      opacity: 0;      border-radius: 10px;      -webkit-transition: all 400ms ease;      transition: all 400ms ease; }    .card .front:after, .card .back:after {      content: " ";      display: block; }    .card .front .display, .card .back .display {      color: white;      font-weight: normal;      opacity: 0.5;      -webkit-transition: opacity 400ms linear;      transition: opacity 400ms linear; }      .card .front .display.focused, .card .back .display.focused {        opacity: 1;        font-weight: 700; }    .card .front .cvc, .card .back .cvc {      font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;      font-size: 14px; }    .card .front .shiny, .card .back .shiny {      width: 50px;      height: 35px;      border-radius: 5px;      background: #CCC;      position: relative; }      .card .front .shiny:before, .card .back .shiny:before {        content: " ";        display: block;        width: 70%;        height: 60%;        border-top-right-radius: 5px;        border-bottom-right-radius: 5px;        background: #d9d9d9;        position: absolute;        top: 20%; }  .card .front .logo {    position: absolute;    opacity: 0;    right: 5%;    top: 8%;    -webkit-transition: 400ms;    transition: 400ms; }  .card .front .lower {    width: 80%;    position: absolute;    left: 10%;    bottom: 30px; }    .card .front .lower .cvc {      visibility: hidden;      float: right;      position: relative;      bottom: 5px; }    .card .front .lower .number {      font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;      font-size: 24px;      clear: both;      margin-bottom: 30px; }    .card .front .lower .expiry {      font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;      letter-spacing: 0em;      position: relative;      float: right;      width: 20%; }      .card .front .lower .expiry:before, .card .front .lower .expiry:after {        font-family: "Helvetica Neue";        font-weight: bold;        font-size: 7px;        white-space: pre;        display: block;        opacity: 0.5; }      .card .front .lower .expiry:before {        content: "month/year";        margin-bottom: 2px;        font-size: 7px;        text-transform: uppercase; }      .card .front .lower .expiry:after {        position: absolute;        content: "valid\Athru";        text-align: right;        right: 100%;        margin-right: 5px;        margin-top: 2px;        bottom: 0; }    .card .front .lower .name {      text-transform: uppercase;      font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;      font-size: 20px;      position: absolute;      bottom: 0;      width: 190px; }  .card .back {    -webkit-transform: rotateY(180deg);    -ms-transform: rotateY(180deg);    transform: rotateY(180deg); }    .card .back .bar {      background-color: #444;      background-image: -webkit-linear-gradient(#444, #333);      background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#333));      background-image: linear-gradient(#444, #333);      width: 100%;      height: 20%;      position: absolute;      top: 10%; }    .card .back:after {      content: " ";      display: block;      background-color: #FFF;      background-image: -webkit-linear-gradient(#FFF, #FFF);      background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF));      background-image: linear-gradient(#FFF, #FFF);      width: 80%;      height: 16%;      position: absolute;      top: 40%;      left: 2%; }    .card .back .cvc {      position: absolute;      top: 40%;      left: 85%;      -webkit-transition-delay: 600ms;      transition-delay: 600ms; }    .card .back .shiny {      position: absolute;      top: 66%;      left: 2%; }      .card .back .shiny:after {        content: "This card has been issued by Jesse Pollak and is licensed for anyone to use anywhere for free.\AIt comes with no warranty.\A For support issues, please visit: github.com/jessepollak/card.";        position: absolute;        left: 120%;        top: 5%;        color: white;        font-size: 7px;        width: 230px;        opacity: 0.5; }  .card.identified {    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); }    .card.identified .front:before, .card.identified .back:before {      -webkit-transition: all 400ms ease;      transition: all 400ms ease;      background-image: -webkit-repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(315deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), -webkit-repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(240deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-radial-gradient(30% 30%, circle, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-radial-gradient(70% 70%, circle, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-radial-gradient(90% 20%, circle, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-radial-gradient(15% 80%, circle, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);      background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);      background-image: -webkit-repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(315deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), -webkit-repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(240deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-radial-gradient(30% 30%, circle, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-radial-gradient(70% 70%, circle, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-radial-gradient(90% 20%, circle, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-radial-gradient(15% 80%, circle, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(115deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);      background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);      opacity: 1; }    .card.identified .front .logo, .card.identified .back .logo {      -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); }    .card.identified.no-radial-gradient .front:before, .card.identified.no-radial-gradient .back:before {      background-image: -webkit-repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(315deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), -webkit-repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(240deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);      background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);      background-image: -webkit-repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(315deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), -webkit-repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-repeating-linear-gradient(240deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(115deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);      background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%); }/*：这只是演示代码。源码下载链接: http://www.bootstrapmb.com/item/93(这个说明仅在演示里会看到,下载的源码里没有)*/