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

.card {
  font-family: 'Times New Roman', 'SimSun' !important;
}

@media print {
  .card {
    zoom: 0.74;
  }
}

.page {
  width: 162mm;
}

.position {
  position: absolute;
  width: 7.5mm;
  height: 3.5mm;
  background-color: #000;
}

.pos-left {
  top: 0;
  left: 9mm;
}

.pos-center {
  top: 0;
  left: 50%;
  margin-left: -3.75mm;
}

.pos-right {
  top: 0;
  right: 9mm;
}

.pos-bottom-left {
  bottom: -3.5mm;
  left: 9mm;
}

.pos-bottom-right {
  bottom: -3.5mm;
  right: 9mm;
}

.binary-page .binary-point {
  width: 3.75mm;
  height: 1.75mm;
  position: absolute;
  bottom: -3.4mm;
}

.binary-page .binary-point.black {
  background-color: #000;
}

.binary-page .binary-point:nth-child(1) {
  right: 48.375mm;
}

.binary-page .binary-point:nth-child(2) {
  right: 42.75mm;
}

.binary-page .binary-point:nth-child(3) {
  right: 37.12mm;
}

.binary-page .binary-point:nth-child(4) {
  right: 31.5mm;
}

.binary-page .binary-point:nth-child(5) {
  right: 25.875mm;
}

.binary-page .binary-point:nth-child(6) {
  right: 20.25mm;
}

.flex, .info, .info .info-text .essential-info, .info .info-text .essential-info .info-item, .info .info-text .tips, .word-list, .word-list .word-li, .word-list .word-li .words-item, .word-list .word-li .words, .test .page .content .word-list, .test .page .content .word-list .word-li, .test .page .content .word-list .word-li .words-item, .test .page .name-line, .fill-num .tag-information .student-information, .fill-num .tag-information .student-information .student-info-item, .fill-num .tag-information .filling-area, .card-after .page .info .info-text .tips-wrap, .card-after .page .info .info-text .tips-wrap .tips-wrap-left-right {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.flex-1, .fill-num .tag-information .student-information .student-info-item {
  flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
}

.alic, .word-list .word-li, .word-list .word-li .words-item, .test .page .content .word-list .word-li, .test .page .content .word-list .word-li .words-item {
  -webkit-align-items: center;
  -moz-box-align: center;
  -webkit-box-align: center;
  align-items: center;
}

.flex-center, .info .info-text .tips .tips-left, .info .info-text .examples, .info .info-text .examples .correct, .info .info-text .examples .absent, .info .qr-code, .four-line-grid, .fill-num .tag-information .filling-area .area-middle .absent {
  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;
}

.space-arround, .fill-num .tag-information .filling-area {
  -webkit-justify-content: space-around;
  -moz-box-pack: space-around;
  -webkit--moz-box-pack: space-around;
  box-pack: space-around;
  justify-content: space-around;
}

.space-between, .word-list .two {
  -webkit-justify-content: space-between;
  -moz-box-pack: space-between;
  -webkit--moz-box-pack: space-between;
  box-pack: space-between;
  justify-content: space-between;
}

.alic-justc, .card-after .page .info .info-text .tips-wrap .tips-wrap-left .tips .tips-left, .card-after .page .info .info-text .tips-wrap .tips-wrap-left .examples.examples-after .examples-left, .card-after .page .info .info-text .tips-wrap .tips-wrap-left .examples.examples-after .examples-right, .card-after .page .info .info-text .tips-wrap .tips-wrap-left-right .correct-txt, .card-after .page .info .info-text .tips-wrap .tips-wrap-left-right .correct-number {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -webkit--moz-box-pack: center;
  box-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -webkit-box-align: center;
  align-items: center;
}

.thinline, .bd:after, .bdb:after, .bdt:after, .bdr:after, .bdl:after, .four-line-grid .line:after, .four-line-grid:after, .fill-num .tag-information .filling-area .area-left table:after, .fill-num .tag-information .filling-area .area-left table tr:after, .fill-num .tag-information .filling-area .area-left table tr td:first-child:after {
  position: absolute;
  content: " ";
  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);
}

.bd {
  position: relative;
}

.bd:after {
  border: 1px solid;
}

.bdb {
  position: relative;
}

.bdb:after {
  border-bottom: 1px solid;
}

.bdt {
  position: relative;
}

.bdt:after {
  border-top: 1px solid;
}

.bdr {
  position: relative;
}

.bdr:after {
  border-right: 1px solid;
}

.bdl {
  position: relative;
}

.bdl:after {
  border-left: 1px solid;
}

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

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

.card-head .head-bottom {
  font-size: 9pt;
  padding: 2mm 0;
  overflow: hidden;
}

.info {
  margin-bottom: 2mm;
}

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

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

.info .info-text .essential-info .info-item i {
  height: 5.5mm;
  display: block;
  min-width: 28mm;
  text-align: center;
}

.info .info-text .tips .tips-left {
  font-size: 9pt;
  padding: 0 1mm;
  text-align: center;
}

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

.info .info-text .tips .tips-right {
  font-size: 9pt;
  line-height: 3.8mm;
  text-align: justify;
  padding: 1mm;
}

.info .info-text .tips .tips-right div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.info .info-text .tips .tips-right div span {
  font-size: 10pt;
}

.info .info-text .tips .tips-right div p {
  width: 100%;
}

.info .info-text .tips .tips-right div p i {
  font-weight: bold;
}

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

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

.info .info-text .examples .correct .four-line-grid {
  width: 16mm;
  height: 5mm;
  box-sizing: border-box;
}

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

.info .info-text .examples .correct .four-line-grid .line .write {
  position: absolute;
  top: -2.1mm;
  left: 2.4mm;
  font-size: 13pt;
}

.info .info-text .examples .absent .absent-sign {
  width: 4.6mm;
  height: 2.4mm;
  margin: 0 3mm 0 1mm;
}

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

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

.page .content {
  padding: 2mm;
  font-size: 12pt;
}

.four-line-grid {
  width: 46.5mm;
  height: 9.5mm;
  box-sizing: border-box;
  position: relative;
}

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

.four-line-grid .line:after {
  border-top: 1px dashed #ddd;
  border-bottom: 1px solid #888;
}

.four-line-grid:after {
  border: 1px dashed #ddd;
}

.word-list {
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -moz-box-pack: space-between;
  -webkit-box-pack: space-between;
  box-pack: space-between;
  justify-content: space-between;
}

.word-list .word-li {
  height: 9.5mm;
}

.word-list .word-li .words {
  width: 30mm;
  line-height: 5.1mm;
  padding-right: 1mm;
}

.word-list .word-li .words i {
  font-size: 12pt;
  min-width: 5.3mm;
}

.word-list .word-li .words span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.word-list .type-title {
  height: auto;
  padding-top: 2mm;
}

.word-list .long .words-item {
  width: 100%;
}

.word-list .long .words {
  width: 33%;
}

.word-list .long .four-line-grid {
  width: 66.2%;
}

.word-list .han .words-item {
  -webkit-align-items: flex-end !important;
  -moz-box-align: flex-end !important;
  -webkit-box-align: flex-end !important;
  align-items: flex-end !important;
}

.word-list .han .four-line-grid:after {
  border: none;
  border-bottom: 1px solid #888;
}

.word-list .han .four-line-grid .line:after {
  border: none;
}

.test .page {
  width: 176mm;
  height: 230mm;
  box-sizing: border-box;
  padding: 6mm 8mm;
  position: relative;
  margin: 0 auto 6mm;
}

.test .page:last-child {
  margin-bottom: 0;
}

.test .page .content {
  height: 214mm;
}

.test .page .content .word-list {
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -moz-box-pack: space-between;
  -webkit-box-pack: space-between;
  box-pack: space-between;
  justify-content: space-between;
}

.test .page .content .word-list .word-li {
  height: 9.5mm;
}

.test .page .content .word-list .type-title {
  height: auto;
  padding-top: 2mm;
}

.test .page .name-line {
  height: 6mm;
  line-height: 7mm;
  font-size: 9pt;
  position: absolute;
  top: -1.6mm;
  left: 26mm;
}

.test .page .name-line i {
  height: 6mm;
  display: block;
  width: 40mm;
  text-align: center;
}

.test .page.first-page .content {
  height: 170mm;
}

.fill-num .tag-information {
  padding: 2mm;
  box-sizing: border-box;
}

.fill-num .tag-information:after {
  border-bottom: none;
}

.fill-num .tag-information .student-information {
  height: 6mm;
  line-height: 6mm;
  font-size: 9pt;
  margin-bottom: 1mm;
}

.fill-num .tag-information .student-information .student-info-item .left {
  margin-right: 2mm;
}

.fill-num .tag-information .student-information .student-info-item .right {
  height: 5mm;
  display: block;
  width: 80%;
  text-align: center;
}

.fill-num .tag-information .filling-area .area-left table {
  position: relative;
}

.fill-num .tag-information .filling-area .area-left table:after {
  border: 1px solid;
  border-right: none;
}

.fill-num .tag-information .filling-area .area-left table tr {
  display: block;
  float: left;
  position: relative;
}

.fill-num .tag-information .filling-area .area-left table tr td {
  display: block;
  width: 8mm;
  padding-top: 1.5mm;
  font-size: 9pt;
  text-align: center;
}

.fill-num .tag-information .filling-area .area-left table tr:after {
  border-right: 1px solid;
}

.fill-num .tag-information .filling-area .area-left table tr td:first-child {
  position: relative;
  height: 6mm;
  padding: 0;
}

.fill-num .tag-information .filling-area .area-left table tr td:first-child:after {
  border-bottom: 1px solid;
}

.fill-num .tag-information .filling-area .area-left table tr td:nth-child(2) {
  padding-top: 1mm;
}

.fill-num .tag-information .filling-area .area-left table tr td:last-child {
  padding-bottom: 1.6mm;
}

.fill-num .tag-information .filling-area .area-middle {
  width: 18%;
  margin-top: 5mm;
}

.fill-num .tag-information .filling-area .area-middle .absent {
  font-size: 9pt;
  text-align: center;
}

.fill-num .tag-information .filling-area .area-middle .absent .absent-sign {
  width: 4.6mm;
  height: 2.4mm;
  margin-left: 2mm;
}

.fill-num .tag-information .filling-area .area-middle p {
  margin-top: 2mm;
  font-size: 9pt;
  line-height: 3.8mm;
}

.fill-num .tag-information .filling-area .area-rigth {
  height: 20mm;
  text-align: center;
  margin-top: 5mm;
}

.fill-num .tag-information .filling-area .area-rigth img {
  width: 20mm;
  height: 20mm;
}

.fill-num .page.first-page .content {
  height: 137mm;
}

.card-after .page {
  padding: 0 6mm;
  margin: 0 auto 2mm;
}

.card-after .page .card-head .card-title {
  font-size: 16pt;
}

.card-after .page .card-head .head-bottom {
  height: auto;
  font-size: 9pt;
}

.card-after .page .info .info-text .tips-wrap {
  font-size: 9pt;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left {
  box-flex: 2;
  -webkit-box-flex: 2;
  -moz-box-flex: 2;
  -webkit-flex: 2;
  flex: 2;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left .tips .tips-left {
  font-size: 9pt;
  line-height: 3.8mm;
  width: 3mm;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left .tips .tips-right {
  font-size: 9pt;
  line-height: 3.8mm;
  padding-left: 1mm;
  white-space: nowrap;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left .examples.examples-after {
  height: 10mm;
  font-size: 9pt;
  -webkit-justify-content: flex-start;
  -moz-box-pack: flex-start;
  justify-content: flex-start;
  -webkit-align-items: unset;
  -moz-box-align: unset;
  -webkit-box-align: unset;
  align-items: unset;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left .examples.examples-after .examples-left {
  padding: 0 1mm;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left .examples.examples-after .examples-right {
  position: relative;
  box-flex: auto;
  -webkit-box-flex: auto;
  -moz-box-flex: auto;
  -webkit-flex: auto;
  flex: auto;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left .examples.examples-after .examples-right > span {
  margin-right: 1mm;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left .examples.examples-after .examples-right .four-line-grid {
  width: 54mm;
  height: 7mm;
  position: relative;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left .examples.examples-after .examples-right .four-line-grid .line {
  width: 100%;
  height: 2.3mm;
  box-sizing: border-box;
  position: relative;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left .examples.examples-after .examples-right .four-line-grid .line .write {
  position: absolute;
  top: -2mm;
  left: 14mm;
  font-size: 16pt;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left .examples.examples-after .examples-right .four-line-grid .correct {
  position: absolute;
  top: -0.5mm;
  left: 0mm;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left .examples.examples-after .examples-right .four-line-grid .result {
  position: absolute;
  top: -0.6mm;
  right: -0.6mm;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left-right .correct-txt {
  padding: 0 1mm;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left-right .correct-txt .correct-txt-cont {
  line-height: 3.8mm;
  text-align: center;
}

.card-after .page .info .info-text .tips-wrap .tips-wrap-left-right .correct-number {
  width: 20mm;
  padding: 0 1mm;
  text-align: center;
  font-size: 16pt;
  font-weight: bold;
}

.card-after .page .content {
  height: 223mm;
}

.card-after .page .content .word-list .word-li .words-img {
  width: 46.5mm;
  height: 9.5mm;
  box-sizing: border-box;
  font-size: 9pt;
  position: relative;
}

.card-after .page .content .word-list .word-li .words-img .correct {
  position: absolute;
  font-weight: bolder;
  top: -1mm;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
  display: block;
  width: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

.card-after .page .content .word-list .word-li .words-img .iconfont {
  font-size: 20pt;
  font-weight: bold;
  color: red;
  position: absolute;
  top: 1.5mm;
  right: 0mm;
}

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

.card-after .page .content .word-list .type-title {
  height: auto;
  padding-top: 2mm;
}

.card-after .page .content .word-list .long .words {
  width: 33%;
}

.card-after .page .content .word-list .long .words-img {
  width: 66.2%;
}

.card-after .page .chart-text:after {
  border-bottom: none;
}

.card-after .page .chart-text .text-block {
  font-size: 12pt;
  text-align: justify;
  padding: 1mm 2mm;
  text-indent: 2em;
}

.card-after .page .chart-text .text-block .encourage-text span {
  font-weight: bold;
}

.card-after .page .chart-text .text-block .encourage-text .en {
  line-height: 5mm;
}

.card-after .page .chart-text .text-block .encourage-text .cn {
  line-height: 5.5mm;
}

.card-after .page .chart-text .text-block .introduce {
  line-height: 5.5mm;
}

.card-after .page .chart-text #lineChart {
  height: 67mm;
}

.card-after .page .chart-text #lineChart .lineChart-title {
  font-size: 10pt;
  text-align: center;
}

.card-after .page.first-page .content {
  height: 82mm;
}

.card-after .page:last-child {
  margin-bottom: 0;
}

.card-teach .page {
  padding: 0 6mm;
  margin: 0 auto 2mm;
}

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

.card-teach .page .content {
  height: 221mm;
  font-size: 9pt;
}

.card-teach .page .content .word-list .word-li .words {
  line-height: 4mm;
  font-size: 10.5pt;
}

.card-teach .page .content .word-list .word-li .words i {
  font-size: 10pt;
  min-width: 5mm;
}

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

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

.card-teach .page .content .word-list .han .four-line-grid .line {
  line-height: 6mm;
}

.card-teach .page .content .word-list .han .four-line-grid .line .write {
  font-size: 12pt;
  height: 6mm;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-teach .page.first-page .content {
  height: 208mm;
}

.card-answer .page {
  padding: 0 6mm;
  margin: 0 auto 2mm;
}

.card-answer .page .card-head {
  margin-bottom: 3mm;
}

.card-answer .page .card-head .card-title {
  font-size: 9pt;
}

.card-answer .page .content {
  height: 221mm;
  font-size: 9pt;
}

.card-answer .page .content .word-list .word-li .words {
  line-height: 4mm;
}

.card-answer .page .content .word-list .word-li .words i {
  font-size: 10pt;
  min-width: 5mm;
}

.card-answer .page .content .word-list .word-li .four-line-grid .line {
  height: 3mm;
  text-align: center;
  line-height: 3.2mm;
}

.card-answer .page .content .word-list .word-li .four-line-grid .line .write {
  font-size: 16pt;
}

.card-answer .page .content .word-list .han .four-line-grid .line {
  line-height: 6mm;
}

.card-answer .page .content .word-list .han .four-line-grid .line .write {
  font-size: 12pt;
  height: 6mm;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-answer .page.first-page .content {
  height: 205mm;
}