.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; }