xiaoben-as2-php/css/magic_word/card.css

.card {
  max-width: 162mm;
  padding: 4.5mm 6mm 4mm 6mm;
  font-family: 'Times New Roman', 'SimSun' !important;
  position: relative;
}

.card .position {
  position: absolute;
  width: 5.6mm;
  height: 2.6mm;
  background-color: #000;
}

.card .pos-left {
  top: 0;
  left: 8.4mm;
}

.card .pos-center {
  top: 0;
  left: 33%;
}

.card .pos-right {
  top: 0;
  right: 8.4mm;
}

.card .pos-bottom-left {
  bottom: -3.5mm;
  left: 8.4mm;
}

.card .pos-bottom-right {
  bottom: -3.5mm;
  right: 8.4mm;
}

.card .flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.card .alic {
  -webkit-align-items: center;
  -moz-box-align: center;
  -webkit-box-align: center;
  align-items: center;
}

.card .flex-center {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-box-align: center;
  -webkit-box-align: center;
  align-items: center;
}

.card .bd {
  position: relative;
}

.card .bd:after {
  position: absolute;
  content: " ";
  left: 0;
  top: 0px;
  z-index: -1;
  width: 200%;
  height: 200%;
  border: 1px solid;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}

.card .bdb {
  position: relative;
}

.card .bdb:after {
  position: absolute;
  content: " ";
  left: 0;
  top: 0px;
  z-index: -1;
  width: 200%;
  height: 200%;
  border-bottom: 1px solid;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}

.card .bdt {
  position: relative;
}

.card .bdt:after {
  position: absolute;
  content: " ";
  left: 0;
  top: 0px;
  z-index: -1;
  width: 200%;
  height: 200%;
  border-top: 1px solid;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}

.card .bdr {
  position: relative;
}

.card .bdr:after {
  position: absolute;
  content: " ";
  left: 0;
  top: 0px;
  z-index: -1;
  width: 200%;
  height: 200%;
  border-right: 1px solid;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}

.card .bdl {
  position: relative;
}

.card .bdl:after {
  position: absolute;
  content: " ";
  left: 0;
  top: 0px;
  z-index: -1;
  width: 200%;
  height: 200%;
  border-left: 1px solid;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}

.card .card-head {
  text-align: center;
}

.card .card-head .card-title {
  font-size: 9pt;
  font-weight: bold;
}

.card .card-head .head-bottom {
  font-size: 6pt;
  margin: 1mm 0;
  height: 2.12mm;
  overflow: hidden;
}

.card .info {
  margin-bottom: 2mm;
}

.card .info .info-text {
  box-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  flex: 1;
  -webkit-flex: 1;
}

.card .info .info-text .essential-info {
  height: 6mm;
  line-height: 7mm;
  font-size: 7pt;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -moz-box-pack: space-around;
  -webkit-box-pack: space-around;
  box-pack: space-around;
}

.card .info .info-text .essential-info .info-item i {
  height: 5mm;
  display: block;
  width: 20mm;
  text-align: center;
}

.card .info .info-text .tips .tips-left {
  font-size: 5pt;
  padding: 0 1mm;
  width: 2mm;
  text-align: center;
  line-height: 2.2mm;
}

.card .info .info-text .tips .tips-left span {
  display: block;
}

.card .info .info-text .tips .tips-right {
  font-size: 5pt;
  line-height: 2.2mm;
  padding: 0.8mm 0 0.8mm 2mm;
}

.card .info .info-text .examples {
  height: 5mm;
  font-size: 5pt;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  -moz-box-pack: space-around;
  -webkit-box-pack: space-around;
  box-pack: space-around;
}

.card .info .info-text .examples .correct span {
  margin-right: 1mm;
}

.card .info .info-text .examples .correct .four-line-grid {
  width: 13mm;
  height: 3.5mm;
  box-sizing: border-box;
}

.card .info .info-text .examples .correct .four-line-grid .line {
  width: 100%;
  height: 1.1mm;
  box-sizing: border-box;
  position: relative;
}

.card .info .info-text .examples .correct .four-line-grid .line .write {
  position: absolute;
  top: -1.6mm;
  left: 2.3mm;
  font-size: 10pt;
}

.card .info .info-text .examples .correct .four-line-grid:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0px;
  z-index: -1;
  width: 200%;
  height: 200%;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  border-bottom: 1px dashed #999;
}

.card .info .info-text .examples .sign div {
  width: 3.6mm;
  height: 1.6mm;
  margin: 0 3mm 0.5mm 1mm;
}

.card .info .info-qr-code {
  padding: 0 2mm;
}

.card .info .info-qr-code img {
  width: 14mm;
  height: 14mm;
}

.card .content {
  height: 128mm;
  padding: 2mm 1mm;
  font-size: 7pt;
}

.card .content .word-list {
  -webkit-flex-wrap: wrap;
  -webkit-box-lines: multiple;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
}

.card .content .word-list li {
  padding-bottom: 3.6mm;
  padding-left: 1.5mm;
}

.card .content .word-list li .words-img {
  width: 34mm;
  height: 6.5mm;
  box-sizing: border-box;
  font-size: 7pt;
  position: relative;
}

.card .content .word-list li .words-img .correct {
  position: absolute;
  font-weight: bolder;
  top: -0.3mm;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
}

.card .content .word-list li .words-img .result {
  color: #444;
  font-weight: bolder;
  position: absolute;
  top: -0.3mm;
  right: 0;
  background: rgba(255, 255, 255, 0.5);
}

.card .content .word-list li .words-img .iconfont {
  font-size: 15pt;
  font-weight: bold;
  position: absolute;
  top: 0.7mm;
  right: 0mm;
}

.card .content .word-list li .words-img img {
  width: 100%;
  height: 100%;
}

.card .content .words {
  width: 22mm;
  padding-right: 1mm;
}

.card .content .words i {
  padding-right: 1mm;
}

.card .content .words span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 2.7mm;
}

.card .four-line-grid {
  width: 34mm;
  height: 6.5mm;
  box-sizing: border-box;
  position: relative;
}

.card .four-line-grid .line {
  width: 100%;
  height: 2mm;
  box-sizing: border-box;
  position: relative;
}

.card .four-line-grid .line:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0px;
  z-index: -1;
  width: 200%;
  height: 200%;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  border-top: 1px dashed #ddd;
  border-bottom: 1px solid #888;
}

.card .four-line-grid:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0px;
  z-index: -1;
  width: 200%;
  height: 200%;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  border: 1px dashed #ddd;
}

.back .pos-center2 {
  top: 0;
  right: 33% !important;
}

.back .content {
  height: 156.23mm;
}

.card-after {
  padding: 0 6mm;
}

.card-after .info .info-text .examples.examples-after {
  height: 6mm;
}

.card-after .info .info-text .examples.examples-after .correct-after {
  position: relative;
  font-size: 6pt;
}

.card-after .info .info-text .examples.examples-after .correct-after .four-line-grid {
  width: 26mm;
  height: 5mm;
}

.card-after .info .info-text .examples.examples-after .correct-after .four-line-grid .line {
  width: 100%;
  height: 1.6mm;
  box-sizing: border-box;
  position: relative;
}

.card-after .info .info-text .examples.examples-after .correct-after .four-line-grid .line .write {
  position: absolute;
  top: -1mm;
  left: 8.6mm;
  font-size: 10pt;
}

.card-after .info .info-text .examples.examples-after .correct-after .correct {
  position: absolute;
  top: 0mm;
  left: 13.5mm;
}

.card-after .info .info-text .examples.examples-after .correct-after .result {
  position: absolute;
  top: 0mm;
  right: 0mm;
}

.card-after .content {
  height: 139mm;
}

.card-after .content .word-list li {
  padding-bottom: 4.5mm;
}

.back-after {
  padding: 0 6mm;
  margin-top: 2mm;
}

.back-after .content {
  height: 164mm;
}

.card-teach {
  padding: 0 6mm;
}

.card-teach .card-head {
  margin-bottom: 2mm;
}

.card-teach .content {
  height: 159mm;
}

.card-teach .content .words {
  width: 25mm;
  padding-right: 1mm;
}

.card-teach .content .word-list li {
  padding-bottom: 2.6mm;
}

.card-teach .content .word-list li .four-line-grid {
  width: 31mm;
  height: 5.5mm;
}

.card-teach .content .word-list li .four-line-grid .line {
  height: 1.8mm;
  text-align: center;
  line-height: 1mm;
}

.card-teach .content .word-list li .four-line-grid .line .write {
  font-size: 12pt;
}

.teach-back {
  padding: 0 6mm;
  margin-top: 2mm;
}

.teach-back .content {
  height: 165mm;
}

.separate {
  padding: 0 6mm;
}

.separate .card-head {
  margin-bottom: 4mm;
}

.separate .content {
  height: 149mm;
}

.separate .content .word-list li {
  padding-bottom: 5.4mm;
}

.separate .content .word-list li .four-line-grid .line {
  text-align: center;
  line-height: 1mm;
}

.separate .content .word-list li .four-line-grid .line .write {
  font-size: 12pt;
}

.separate-back {
  padding: 0 6mm;
  margin-top: 2mm;
}

.separate-back .content {
  height: 165mm;
}

.separate-back .content .word-list li {
  padding-bottom: 5.4mm;
}

.separate-back .content .word-list li .four-line-grid .line {
  text-align: center;
  line-height: 1mm;
}

.separate-back .content .word-list li .four-line-grid .line .write {
  font-size: 12pt;
}

.paper .card {
  padding: 0;
}