/*頁面設定*/
@page {
    size: A4 portrait;
    margin: 0;
    orphans: 4;
    widows: 2;
}

@page a4-p {
    size: A4 portrait;
    margin: 0;
}

@page a4-l {
    size: A4 landscape;
    margin: 0;
}
@page a4-l2 {
    size: 210mm 297mm landscape;
    margin: 0;
}

@page a4-l-2x5 {
    size: A4 landscape;
    /* size: 59mm 104mm; */
    margin: 0;
}

@page tablet-l {
    size: 274mm 392mm;
    margin: 0;
}

@page tablet-m {
    size: 214mm 305mm;
    margin: 0;
}

@page tablet-s {
    size: 197mm 215mm;
    margin: 0;
}

body {
    --page-w: 210mm;
    --page-h: 297mm;
    font-family: 標楷體;
    font-size: 32pt;
    margin: 0;
}

body.a4-p {
    page: a4-p;
}

body.a4-l {
    page: a4-l;
}

body.a4-l-2x5 {
    page: a4-l2;
    --page-w: 210mm;
    --page-h: 297mm;
}
body.a4-l-2x5 .pages{
    display: flex;
    flex-wrap: wrap;
    width: var(--page-w);
    max-width: var(--page-w);
}
body.a4-l-2x5 .page {
    margin: 0;
    flex: 0 0 auto;
    /* width: 50%; */
    width: calc(var(--page-w) / 2);
    height: calc(var(--page-h) / 5);
    position: relative;
    outline: 0.25pt dotted #EEE;
    font-size: 9pt;
}
body.a4-l-2x5 .page .content{
    position: absolute;
    height: calc(var(--page-w) / 2);
    width: calc(var(--page-h) / 5);
    margin: 0;
    transform: rotate(-90deg);
    top: 0;
    left: -60mm;
    /* right: 0; */
    /* bottom: 0; */
    transform-origin: top right;
}
body.a4-l-2x5 .page .bg {
    width: 52%;
}
body.a4-l-2x5 .page .bg img{
    height: auto;
}
body.a4-l-2x5 .page .text-block.vertical {
    --fs_w: var(--divw)/var(--lines);
    --fs_h: var(--divh)/var(--line_len);
    --fs: min(var(--fs_w), var(--fs_h));
    font-size:9pt;
    line-height: calc(var(--fs_w) * 1.0);
}
body.a4-l-2x5 .page .top_text_1{
    font-size: 9pt;
    top:2mm;
}
body.a4-l-2x5 .page .top_text_2{
    font-size: 9pt;
}
body.a4-l-2x5 .page .top_text_3{
    font-size: 9pt;
}
body.a4-l-2x5 .page .right_text {
    --divw: 10mm;
    --divh: 70mm;
    position: absolute;
    right: 10mm;
    top: 20mm;
}
body.a4-l-2x5 .page .mid_text {
    --divw: 15mm;
    --divh: 60mm;
    position: absolute;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -50%);
}
body.a4-l-2x5 .page .mid_text_2 {
    --divw: 15mm;
    --divh: 20mm;
    position: absolute;
    left: 50%;
    bottom: 15%;
    transform: translate(-50%, 0);
}
body.a4-l-2x5 .page .left_text{
    --divw: 20mm;
    --divh: 50mm;
    position: absolute;
    left: 0mm;
    top: 40mm;
}
body.a4-l-2x5 .page .txt_up {
    top: 30mm;
    left:0;
    width: 20mm;
    text-align: center;
    line-height: 20mm;
}
body.a4-l-2x5 .page .txt_down {
    top: 85mm;
    left: 0;
    width: 20mm;
    text-align: center;
    line-height: 20mm;
    height: 10mm;
}
body.a4-l-2x5 .page:nth-child(8n) {
    outline: 0.25pt solid #DDD;
    page-break-after: always;
}
body.a4-p {
    --page-w: 210mm;
    --page-h: 297mm;
    page: a4-p;
    font-size: 22pt;
}
body.a4-l {
    --page-w: 297mm;
    --page-h: 210mm;
    page: a4-l;
    font-size: 22pt;
}
body.a4-l2 {
    --page-w: 297mm;
    --page-h: 210mm;
    page: a4-l2;
    font-size: 22pt;
}
body.tablet-l {
    --page-w: 274mm;
    --page-h: 392mm;
    page: tablet-l;
    font-size: 22pt;
}
body.tablet-m {
    --page-w: 214mm;
    --page-h: 305mm;
    page: tablet-m;
    font-size: 22pt;
}

body.tablet-s {
    --page-w: 197mm;
    --page-h: 215mm;
    page: tablet-s;
    font-size: 18pt;
}

.page {
    margin: 0 auto;
    width: var(--page-w);
    height: var(--page-h);
    position: relative;
    page-break-inside:avoid;
}

.content {
    margin: 0 auto;
    position: relative;
}

.border {
    /* outline: 0.25pt solid #000; */
}

.text {}

/*自動字型*/
.text-block {
    /* border: .25pt solid #000; */
    /* margin: 5mm; */

    font-family: 標楷體;
    text-align: start;
    vertical-align: middle;

    /* --divw: 120mm;  */
    /* --divh: 50mm; */
    --line_len: 10;
    --lines: 1;
    --fs_w: var(--divw)/var(--line_len);
    --fs_h: var(--divh)/var(--lines);
    --fs: min(var(--fs_w), var(--fs_h), var(--font-max));

    width: var(--divw);
    height: var(--divh);

    font-size: var(--fs);
    line-height: calc(var(--fs_h) * 1.0);
}

.text-block.vertical {
    --fs_w: var(--divw)/var(--lines);
    --fs_h: var(--divh)/var(--line_len);
    --fs: min(var(--fs_w), var(--fs_h), var(--font-max));
    line-height: calc(var(--fs_w) * 1.0);
}

.vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.text-start {
    text-align: start;
}
.text-center {
    text-align: center;
}
.text-end {
    text-align: end;
}

.bg {
    position: relative;
    margin: 0 auto;
}

.bg > svg,
.bg > img {
    display: block;
}

.bg img {
    width: 100%;
    height: var(--page-h);
    /*outline: 0.25pt solid #000;*/
}

.block {
    /*background: #ddd;*/
}

.mid_text {
    --divw: 50mm;
    --divh: 220mm;
    position: absolute;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -50%);
}
.mid_text_2 {
    --divw: 50mm;
    --divh: 50mm;
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translate(-50%, 0);
}

.right_text {
    --divw: 10mm;
    --divh: 260mm;
    position: absolute;
    right: 8mm;
    top: 80mm;
}

.left_text {
    --divw: 20mm;
    --divh: 160mm;
    position: absolute;
    left: 0mm;
    top: 180mm;
}

.txt_up,
.txt_down {
    position: absolute;
    left: 3.5mm;
}

.txt_up {
    top: 155mm;
}

.txt_down {
    bottom: 30mm;
}

.top_text_1,
.top_text_2,
.top_text_3 {
    position: absolute;
}

.top_text_1 {
    top: 0;
    width: 100%;
    text-align: center;
    font-size: 20pt;
}

.top_text_2,
.top_text_3 {
    top: 9mm;
    width: 40%;
    font-size: 0.7em;
}

.top_text_2 {
    text-align: right;
    right: 2mm;
}

.top_text_3 {
    text-align: left;
    left: 2mm;
}


/*大牌位相關*/
body.tablet-l .content {
    width: 124mm;
}

/*中牌位相關*/
body.tablet-m .content {
    width: 92mm;
}

body.tablet-m .mid_text {
    --divw: 45mm;
    --divh: 180mm;
}
body.tablet-m .mid_text_2 {
    --divw: 45mm;
    --divh: 50mm;
    bottom:17%;
}

body.tablet-m .right_text {
    --divw: 8mm;
    --divh: 200mm;
    right: 6mm;
    top: 64mm;
}

body.tablet-m .left_text {
    --divw: 15mm;
    --divh: 98mm;
    top: 165mm;
}

body.tablet-m .txt_up,
body.tablet-m .txt_down {
    left: 3mm;
}

body.tablet-m .txt_up {
    top: 148mm;
}

body.tablet-m .txt_down {
    bottom: 25mm;
}

body.tablet-m .top_text_1 {
    font-size: 16pt;
}

body.tablet-m .top_text_2,
body.tablet-m .top_text_3 {
    top: 9mm;
}

body.tablet-m .top_text_2 {
    right: 1mm;
}

body.tablet-m .top_text_3 {
    left: 1mm;
}

/*小牌位相關*/
body.tablet-s .content {
    width: 65mm;
}

body.tablet-s .mid_text_2 {
    --divw: 32mm;
    --divh: 50mm;
    bottom: 17%;
}
body.tablet-s .mid_text {
    --divw: 32mm;
    --divh: 126mm;
}

body.tablet-s .right_text {
    --divw: 6mm;
    --divh: 120mm;
    right: 5mm;
    top: 45mm;
}

body.tablet-s .left_text {
    --divw: 10mm;
    --divh: 64mm;
    top: 114mm;
}

body.tablet-s .txt_up,
body.tablet-s .txt_down {
    font-size: .8em;
    left: 2mm;
}

body.tablet-s .txt_up {
    top: 102mm;
}

body.tablet-s .txt_down {
    bottom: 25mm;
}

body.tablet-s .top_text_1 {
    font-size: 16pt;
}

body.tablet-s .top_text_2,
body.tablet-s .top_text_3 {
    top: 7mm;
}

body.tablet-s .top_text_2 {
    right: 1mm;
}

body.tablet-s .top_text_3 {
    left: 1mm;
}
/*------*/
@page a3 {
    size: a3 portrait;
    margin: 0;
}
@page a3l {
    size: a3 landscape;
    margin: 0;
}
@page a4 {
    size: a4 portrait;
    margin: 0;
}
@page a4l {
    size: a4 landscape;
    margin: 0;
}
@page a5 {
    size: a5 portrait;
    margin: 0;
}

body{
    --font-max: 22pt;
    --bg-padding: 0;
}
.bg{    
    padding: var(--bg-padding);
}
.bg img{
    height: calc(var(--page-h) - var(--bg-padding) * 2);
    max-height: var(--page-h);
}
.content{
    width: var(--page-w);
    height: var(--page-h);
    outline: 0.25pt solid #000;
}
/*-----------*/

body.tblt-l.a3{
    page: a3;
    --page-w: 285mm;
    --page-h: 400mm;
    --bg-padding: 4mm;
    --font-max: 44pt;
    font-size: 22pt;    
}
body.tblt-l.a3 .page{
    page-break-after: always;
}
body.tblt-l.a3 .content {
    --page-w: 137mm;
}
body.tblt-l.a3 .mid_text_2{
    --divh: 60mm;
}

body.tblt-m{
    page: a4;
    --page-w: 200mm;
    --page-h: 285mm;
    --bg-padding: 0;
    --font-max: 32pt;
    font-size: 22pt;    
}
body.tblt-m .mid_text{
    --divw: 45mm;
    --divh: 160mm;
}
body.tblt-m .mid_text_2 {
    --divw: 45mm;
    --divh: 60mm;
}
body.tblt-m .right_text{
    --divw: 10mm;
    --divh: 160mm;
}
body.tblt-m .left_text {
    --divw: 20mm;
    --divh: 100mm;
    left: 0mm;
    top: 150mm;
}
body.tblt-m.a4{
    page: a4;
}
body.tblt-m.a4 .page{
    --page-w: 100mm;
    --page-h: 285mm;    
    page-break-after: always;
}
body.tblt-m.a4-merge{
    page: a4;
}
body.tblt-m.a4-merge .page{
    --page-w: 100mm;
    float: left;
}


body.tblt-s{
    --bg-padding: 0;
    --font-max: 28pt;
    font-size: 22pt;    
}
body.tblt-s .page{
    --page-w: 70mm;
    page-break-after: always;
}
body.tblt-s .mid_text{
    --divw: 30mm;
    --divh: 110mm;
}
body.tblt-s .mid_text_2 {
    --divw: 30mm;
    --divh: 60mm;
}
body.tblt-s .right_text{
    --divw: 15mm;
    --divh: 120mm;
    right: 0mm;
    top:60mm;
}
body.tblt-s .left_text {
    --divw: 15mm;
    --divh: 80mm;
    left: 0mm;
    top: 100mm;
}
body.tblt-s.a5{
    page: a5;
    --page-w: 138mm;
    --page-h: 200mm;  
}
body.tblt-s.a4l-merge{
    page: a4l;
    --page-w: 200mm;
    --page-h: 285mm;
}
body.tblt-s.a4l-merge .page{
    --page-w: 70mm;
    --page-h: 200mm;
    page-break-after: auto;
    float: left;
}
body.tblt-s.a3-merge{
    page: a3;
    --page-w: 285mm;
    --page-h: 410mm;
}
body.tblt-s.a3-merge .page{
    --page-w: 70mm;
    --page-h: 200mm;
    page-break-after: auto;
    float: left;
}

body.tblt-xs{
    --bg-padding: 0;
    --font-max: 18pt;
    font-size: 14pt;    
}
body.tblt-xs.a3-merge .page{
    --page-w: 57mm;
    --page-h: 100mm;    
    page-break-after: auto;
    float: left;
}
body.tblt-xs.a4l-merge{
    page:a4l;
}
body.tblt-xs.a4l-merge .page{
    --page-w: 57mm;
    --page-h: 100mm;
    page-break-after: auto;
    float: left;
}
body.tblt-xs .top_text_1{
    font-size: 14pt;
}
body.tblt-xs .mid_text{
    --divw: 15mm;
    --divh: 56mm;
}
body.tblt-xs .mid_text_2 {
    --divw: 15mm;
    --divh: 56mm;    
}
body.tblt-xs .right_text{
    --divw: 15mm;
    --divh: 70mm;
    right: 0mm;
    top: 20mm;
}
body.tblt-xs .left_text {
    --divw: 15mm;
    --divh: 60mm;
    left: 0mm;
    top: 30mm;
}