.cc,.cc-back{border-radius:4%;z-index:1}.cc .date .right span,.cc .name,.cc .number{color:#fff}.cc{box-shadow:5px 5px 6px 3px #ccc;position:relative}.cc .logo,.cc .number,.chip .mc{position:absolute}.cc-back{transform:rotateY(180deg)}.cc .chip,.cc-back .chip{width:18%;height:18%;position:absolute;background:#ddd;border-radius:5%;top:10%;left:10%}.cc-back .chip{top:70%!important;left:5%!important}.chip .mc{width:65%;height:70%;background:#aaa;top:15%;left:5%}.cc .logo{width:20%;height:100%;top:10%;right:10%;display:none}.cc .number{width:80%;height:20%;top:45%;left:10%;text-align:center}.cc .name,.cc-back .sign{left:5%;position:absolute}.cc .name{width:60%;height:auto;bottom:15%}.cc .date{width:30%;height:auto;position:absolute;right:10%;bottom:10%}.cc .date .left{width:30%;display:inline-block;float:left;padding-top:10%}.cc .date .right{width:70%;display:inline-block;float:right;text-align:center}.cc-back .magnet{width:100%;height:20%;position:absolute;background:#000;top:15%}.cc-back .sign{width:65%;height:15%;background:#fff;top:40%}.cc-back .cvc{width:25%;height:auto;position:absolute;color:#fff;top:40%;right:5%;text-align:center}.cc-back .copyright{width:65%;height:20%;position:absolute;top:70%;right:5%;color:#666;text-align:justify}