:root {
  --wd: min(1vw, 1.2vh); 
}

html {
  touch-action: manipulation;
}

body {
  margin: 0;
  border-width: 0;
  padding: 0;
  width: 100vw;
  background-color: #000000;
  color: #222;
  font-family: Helvetica;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

/* index.html */
#outer-div {
  z-index: 96;
  position: absolute;
  margin: 0;
  border-width: 0;
  padding: 0;
  top:0;
  width: 100vw;
  background-color: #EEEEEE;
  text-align: center;
}

#inner-div {
  z-index: 97;
  margin: 0 auto;
  width: calc(var(--wd) * 100);
  background-color: #FFFFFF;
}

#logo {
  z-index: 98;
  margin-top: 0;
  position: absolute;
  top: 0;
  left:calc(50vw - var(--wd) * 50);
  display:block;
  width: calc(var(--wd) * 100);
  background-color: #fff;
  text-align: center;
  font-size: calc(var(--wd) * 7);
}

#cont_box {
  width: calc(var(--wd) * 6);
}

img {
  vertical-align : middle;
  align : middle;
  padding: 0;
}

#logoimg {
  height:calc(var(--wd) * 9);
}

#coverimg {
  width:calc(var(--wd) * 100);
}

#menu_bar {
  z-index: 99;
  border-width: 0;
  padding: calc(var(--wd) * 1) calc(var(--wd) * 0);
  display: block;
  position: absolute;
  top: calc(var(--wd) * 9);
  left:calc(50vw - var(--wd) * 50);
  width:calc(var(--wd) * 100);
  height:calc(var(--wd) * 7);
  background-color: #0000FF;
  white-space: nowrap;
  font-size: calc(var(--wd) * 5);
  line-height: calc(var(--wd) * 7);
  font-family: "微軟正黑體";
  text-align: center;
}

.menu_item2 {
  border-style: none none none solid;
  border-width: 0 0 0 calc(var(--wd) * 0.25);
  padding-left: calc(var(--wd) * 0.75);
  border-color:#FFFFFF;
  color: #FFFFFF;
  text-decoration: none;
  text-align:center;
  display:inline-block;
  width:calc(var(--wd) * 12);
}

.menu_item3 {
  border-style: none none none solid;
  border-width: 0 0 0 calc(var(--wd) * 0.25);
  padding-left: calc(var(--wd) * 0.75);
  border-color:#FFFFFF;
  color: #FFFFFF;
  text-decoration: none;
  text-align:center;
  display:inline-block;
  width:calc(var(--wd) * 16);
}

.menu_item_sp {
  border-style: none none none solid;
  border-width: 0 0 0 calc(var(--wd) * 0.25);
  padding-left: calc(var(--wd) * 0.75);
  border-color:#FFFFFF;
  color: #FFFFFF;
  text-decoration: none;
  text-align:center;
  display:inline-block;
  width:calc(var(--wd) * 24);
}

.menu_item_right {
  border-style: none solid;
  border-width: 0 calc(var(--wd) * 0.25);
  padding-left: calc(var(--wd) * 0.75);
  border-color:#FFFFFF;
  color: #FFFFFF;
  text-decoration: none;
  text-align:center;
  display:inline-block;
  width:calc(var(--wd) * 18);
}

#play_mode{
  font-size: calc(var(--wd) * 3);
  line-height: calc(var(--wd) * 3);
  margin: calc(var(--wd) * 1) calc(var(--wd) * 4) 0 calc(var(--wd) * 78);
  padding:calc(var(--wd) * 1) calc(var(--wd) * 1); 
  text-align:right;
  background-color: #FFFFFF;
  display:none;
}

.contents {
  margin-top:calc(var(--wd) * 18);
  width:calc(var(--wd) * 100);
  display:none;
  text-align:left;
  background-color: #FFFFFF;
  min-height: calc(100vh - var(--wd) * 18);
}

#simg {
  margin: 0;
  height: calc(var(--wd) * 6);
}

#kt {
  font-size: calc(var(--wd) * 4);
  margin: 0 calc(var(--wd) * 3) calc(var(--wd) * 1) calc(var(--wd) * 4);
  padding: 0 calc(var(--wd) * 1);
  height: calc(var(--wd) * 5.5);
}

input[type=text]:focus {
  background-color: lightblue;
}

input[type=number]:focus {
  background-color: lightblue;
}


/* content.html */

.hd_txt {
  width: calc(var(--wd) * 100);
  font-family: "微軟正黑體";
  text-align: center;
  font-size: calc(var(--wd) * 8);
  line-height: calc(var(--wd) * 14);
  font-weight: bold;
  font-variant: normal;
  color: #0000FF;
}

.cont {
  font-size: calc(var(--wd) * 4);
  line-height: calc(var(--wd) * 6);
}

ul ul {
  padding-left: calc(var(--wd) * 4);
}

li {
  height: calc(var(--wd) * 8);
}

/* pre.html shici.html ciju.html */

.li_letter {
  margin:0 calc(var(--wd) * 20) 0 0;
  padding: 0;
  float: left;
  list-style-type: circle;
}
/*
.txt_pg {
  position:relative;
  padding: calc(var(--wd) * 5);
}*/

p {
  font-size: calc(var(--wd) * 5);
  text-indent:2em;
}

.hd_center_txt_red {
  font-family: "微軟正黑體";
  text-align: center;
  font-size: calc(var(--wd) * 12);
  line-height: calc(var(--wd) * 12);
  color: #FF0000;
  padding-top: calc(var(--wd) * 24);
}


/* sc??.html */

.sc_pg {
  margin: 0;
  border-width: 0;
  padding: 0 calc(var(--wd) * 2);
  text-align: center;
  width: calc(var(--wd) * 96);
  font-size: calc(var(--wd) * 4);
}

#snd_bar {
  margin: calc(var(--wd) * 2) 0 0 0;
  width: calc(var(--wd) * 96);
  height: calc(var(--wd) * 10);
}

#mp3btn {
  height: calc(var(--wd) * 10);
  display: inline;
  padding: 0;
}

#sndbtn {
  height: calc(var(--wd) * 8);
  display: inline;
  padding: calc(var(--wd) * 1) 0 calc(var(--wd) * 1) calc(var(--wd) * 5);
}

h3 {
  font-size: calc(var(--wd) * 5);
  padding: 0 calc(var(--wd) * 2);
}

table {
  /*table-layout:fixed;*/
  width:calc(var(--wd) * 91.2); 
  padding: 0;
  border-spacing: 0;
  padding: 0;
  border-width: 0;
  border-collapse:collapse;
  text-align: center;
  margin-left: calc(var(--wd) * 4); 
}

.sc {
  margin: 0 calc(var(--wd) * 3);
  width: calc(var(--wd) * 90);
}

td.mc0 {
  height: calc(var(--wd) * 6);
  width: calc(var(--wd) * 15.2);
  text-align: center;
  font-size: calc(var(--wd) * 6);
  line-height: calc(var(--wd) * 6);
  letter-spacing: 0;
  white-space:nowrap;
  word-break:keep-all;
  vertical-align: bottom;
}

td.mc1 {
  height: calc(var(--wd) * 4);
  width: calc(var(--wd) * 7.6);
  text-align: center;
  color: #0000FF;
  font-family: arial;
  font-size: calc(var(--wd) * 2.8);
  line-height: calc(var(--wd) * 2.8);
  letter-spacing: 0;
  white-space:nowrap;
  word-break:keep-all;
  padding-bottom: calc(var(--wd) * 1);
  vertical-align: top;
}

td.mc2 {
  height: calc(var(--wd) * 6);
  width: calc(var(--wd) * 7.6);
  text-align:center;
  font-size: calc(var(--wd) * 6);
  line-height: calc(var(--wd) * 6);
  letter-spacing: 0;
  white-space:nowrap;
  word-break:keep-all;
  vertical-align: bottom;
}


.cs {
  margin:0 calc(var(--wd) * 6) 0 0;
  font-size: calc(var(--wd) * 4);
  text-indent:2em;
  line-height: calc(var(--wd) * 6);
  /*text-align: left;*/
  text-align: justify;
  /*padding:calc(var(--wd) * 2) calc(var(--wd) * 5) 0 calc(var(--wd) * 4);*/
  padding:calc(var(--wd) * 6) 0 0 calc(var(--wd) * 4);
  color:Maroon;
}

.cs1 {
  margin:0 calc(var(--wd) * 6) 0 0;
  font-size: calc(var(--wd) * 4);
  text-indent:-2em;
  line-height: calc(var(--wd) * 5);
  text-align: left;
  /*padding:calc(var(--wd) * 2) calc(var(--wd) * 5) 0 calc(var(--wd) * 12);*/
  padding:calc(var(--wd) * 6) 0 0 calc(var(--wd) * 12);
  color:Maroon;
}

.cs2 {
  margin:0 calc(var(--wd) * 6) 0 0;
  font-size: calc(var(--wd) * 4);
  text-indent:-2em;
  line-height: calc(var(--wd) * 5);
  text-align: left;
  /*padding:calc(var(--wd) * 2) calc(var(--wd) * 5) 0 calc(var(--wd) * 12);*/
  padding:calc(var(--wd) * 6) 0 0 calc(var(--wd) * 12);
  color:Maroon;
}

.cs span {
  color: #FF0000;
  background-color: #FFFF00;
}

.cs1 span {
  background-color: #CCFFCC;
}

.cs2 span {
  background-color: #FFCCCC;
}

.seq0 {
  margin: calc(var(--wd) * 0.25) 0 0 0;
  padding: 0;
  height: calc(var(--wd) * 6);
  width: calc(var(--wd) * 9.2);
  color: #FFFFFF;
  font-family: 'Arial Narrow', Arial, sans-serif;
  background-image:url("../images/green.svg");
  background-size: calc(var(--wd) * 9.2) calc(var(--wd) * 6);
  background-repeat:no-repeat;
  font-stretch: ultra-condensed;
  display:inline-block;
  font-size: calc(var(--wd) * 3.6);
  letter-spacing:0;
  word-spacing:0;
  transform: scale(.75, 1);
  line-height: calc(var(--wd) * 6);
  vertical-align: center;
}

.seq1 {
  margin: calc(var(--wd) * 0.25) 0 0 0;
  padding:0;
  height: calc(var(--wd) * 6);
  width: calc(var(--wd) * 9.2);
  color: #000000;
  font-family: 'Arial Narrow', Arial, sans-serif;
  background-image:url("../images/gold.svg");
  background-size: calc(var(--wd) * 9.2) calc(var(--wd) * 6);
  background-repeat:no-repeat;
  font-stretch: ultra-condensed;
  display:inline-block;
  font-size: calc(var(--wd) * 3.6);
  letter-spacing:0;
  word-spacing:0;
  transform: scale(.75, 1);
  line-height: calc(var(--wd) * 6);
  vertical-align: center;
}

.seq2 {
  margin: calc(var(--wd) * 2.3) 0 calc(var(--wd) * 2.3) calc(var(--wd) * 6);
  padding:0;
  height: calc(var(--wd) * 5.4);
  width: calc(var(--wd) * 12);
  background-image:url("../images/red.svg");
  background-size: calc(var(--wd) * 12) calc(var(--wd) * 5.4);
  background-repeat:no-repeat;
  display:inline-block;
  float:left;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: calc(var(--wd) * 4.5);
  letter-spacing:0;
  word-spacing:0;
  transform: scale(.75, 1);
  line-height: calc(var(--wd) * 5);
  text-align:center;
  font-stretch: ultra-condensed;
  color: #FFFFFF;
  vertical-align: center;
}

.seq3 {
  margin: calc(var(--wd) * 0.25) 0 0 0;
  padding: 0;
  height: calc(var(--wd) * 6);
  width: calc(var(--wd) * 9.2);
  color: #FFFFFF;
  font-family: 'Arial Narrow', Arial, sans-serif;
  background-image: url("../images/jin.svg");
  background-size: calc(var(--wd) * 9.2) calc(var(--wd) * 6);
  background-repeat:no-repeat;
  font-stretch: ultra-condensed;
  display: inline-block;
  font-size: calc(var(--wd) * 3.6);
  letter-spacing:0;
  word-spacing:0;
  transform: scale(.75, 1);
  line-height: calc(var(--wd) * 6);
  vertical-align: center;
}

.tjt {
  margin: 0;
  padding: calc(var(--wd) * 5) calc(var(--wd) * 5) 0 calc(var(--wd) * 5);
  text-indent: 0;
  font-size: calc(var(--wd) * 5);
  line-height: calc(var(--wd) * 8);
  text-align: left;
  font-weight: bold;
}

.tj {
  margin: 0;
  padding: calc(var(--wd) * 1) calc(var(--wd) * 5);
  text-indent: 2em;
  font-size: calc(var(--wd) * 5);
  line-height: calc(var(--wd) * 8);
  text-align: justify;
}

.smp3btn {
  height: calc(var(--wd) * 6);
  display: inline-block;
  padding: 0;
}

a:hover {
  color: #FF0000;
}

.ref {
  font-size: calc(var(--wd) * 3);
  line-height: calc(var(--wd) * 5);
  /*text-indent: calc(var(--wd) * -4);*/
  padding:0;
}

.refimg {
  height: calc(var(--wd) * 6);
  padding: 0 calc(var(--wd) * 4) calc(var(--wd) * 1) calc(var(--wd) * 1);
  float: right;
}

.spanref {
  display: none;
  padding: 0;
}