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

#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);
}

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

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

#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) * 5);
  background-color: #0000FF;
  white-space: nowrap;
  font-size: calc(var(--wd) * 4);
  line-height: calc(var(--wd) * 5);
  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);
  cursor: pointer;
}

.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);
  cursor: pointer;
}

.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);
  cursor: pointer;
}

#play_mode {
  z-index: 90;
  position: absolute;
  top: calc(var(--wd) * 8);
  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) * 75);
  padding:calc(var(--wd) * 1) calc(var(--wd) * 1); 
  text-align:right;
  background-color: #FFFFFF;
}

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

.contents {
  margin-top:calc(var(--wd) * 16);
  padding-top:calc(var(--wd) * 10);
  width:calc(var(--wd) * 100);
  display:none;
  text-align:left;
  min-height: calc(100vh - var(--wd) * 16);
}

#page-3 {
  margin-top:calc(var(--wd) * 13.5);
  padding-top:0;
}

#page-2, #page-1, #page0 {
  padding-top:0;
}

#page701, #page702, #page703, #page704, #page705, #page706, #page707, #page708, #page709, #page710, 
#page711, #page712, #page713, #page714 {
  padding-top:calc(var(--wd) * 1);
}

.table_of_contents {
  font-size: calc(var(--wd) * 3);
  line-height: calc(var(--wd) * 8);
}

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

li {
  height: font-size: calc(var(--wd) * 4.2);
  padding-bottom: calc(var(--wd) * 1);
  padding-right: calc(var(--wd) * 2);
  font-size: calc(var(--wd) * 3.2);
  line-height: calc(var(--wd) * 4.2);
  cursor: pointer;
}

.ailshd {
  background-color:#FF0000;
  color: #FFFFFF;
}

.ailshd:hover {
  color: #FFFF00;
}

.ails {
  color: #0000FF;
}

.li_letter {
  margin:0 calc(var(--wd) * 10) 0 0;
  padding:0;
  float: left;
  list-style-type: circle;
}

.small_letter {
  margin:0;
  padding:0;
  font-size: calc(var(--wd) * 2.8);
  line-height: calc(var(--wd) * 4.2);
  vertical-align:text-top;
  font-family: "Noto Serif TC", serif;
  color: #505050;
}

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

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

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

.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 {
  display: block;
  position: absolute;
  top: calc(var(--wd) * 12);
  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 {
  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) * 2);
  width: calc(var(--wd) * 90);
}

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

td.zi {/*漢字*/
  height: calc(var(--wd) * 4.8);
  width: calc(var(--wd) * 5);
  text-align:center;
  font-size: calc(var(--wd) * 4.8);
  line-height: calc(var(--wd) * 4.8);
  letter-spacing: 0;
  white-space:nowrap;
  word-break:keep-all;
  vertical-align: bottom;
  cursor: pointer;
}

td.py1 {/*拼音100% width*/
  height: calc(var(--wd) * 3);
  width: calc(var(--wd) * 5);
  text-align: center;
  color: #0000FF;
  font-family: arial;
  font-size: calc(var(--wd) * 2);
  line-height: calc(var(--wd) * 2.2);
  letter-spacing: 0;
  white-space:nowrap;
  word-break:keep-all;
  padding-bottom: calc(var(--wd) * 0.75);
  vertical-align: top;
}

td.py2 {/*拼音80% width*/
  height: calc(var(--wd) * 3);
  width: calc(var(--wd) * 5);
  text-align: center;
  color: #0000FF;
  font-family: arial;
  font-size: calc(var(--wd) * 2);
  transform: scale(0.8,1);
  line-height: calc(var(--wd) * 2.2);
  letter-spacing: 0;
  white-space:nowrap;
  word-break:keep-all;
  padding-bottom: calc(var(--wd) * 0.75);
  vertical-align: top;
}

td.py3 {/*拼音67% width*/
  height: calc(var(--wd) * 3);
  width: calc(var(--wd) * 5);
  text-align: center;
  color: #0000FF;
  font-family: arial;
  font-size: calc(var(--wd) * 2);
  transform: scale(0.67,1);
  line-height: calc(var(--wd) * 2.2);
  letter-spacing: 0;
  white-space:nowrap;
  word-break:keep-all;
  padding-bottom: calc(var(--wd) * 0.75);
  vertical-align: top;
}

.cs {
  margin:0 calc(var(--wd) * 3);
  font-size: calc(var(--wd) * 2.4);
  text-indent:2em;
  line-height: calc(var(--wd) * 3.6);
  text-align: justify;
  padding:calc(var(--wd) * 1) 0 0 0;
  color:Maroon;
}

a:hover {
  color: #FF0000;
}

.ai_bar {
  margin: calc(var(--wd) * 1) 0 calc(var(--wd) * 1) 0;
  width: calc(var(--wd) * 96);
  height: calc(var(--wd) * 8);
  text-align: center;
}

.aibtn {
  height: calc(var(--wd) * 8);
  display: inline;
  padding: 0vw 0vw 0 calc(var(--wd) * 5);
  cursor: pointer;
}

.prnbtn {
  height: calc(var(--wd) * 8);
  display: inline;
  padding: 0;
  cursor: pointer;
}

.prev_btn {
  height: calc(var(--wd) * 6);
  display: inline;
  padding: 0 0 0 calc(var(--wd) * 5);
  cursor: pointer;
}

.next_btn {
  height: calc(var(--wd) * 6);
  display: inline;
  padding: 0 calc(var(--wd) * 5) 0 0;
  cursor: pointer;
}

.level {
  height: calc(var(--wd) * 6);
}

.aitxt {
  text-align:left;
  font-size: calc(var(--wd) * 4.8);
  line-height: calc(var(--wd) * 7.5);
  cursor: pointer;
  white-space: nowrap;
  /*position: absolute;
  left:50%;
  transform: translate(-50%,0);*/
}

#at706, #at707, #at710, #at711, #at712, #at714 {
  padding-left:calc(var(--wd) * 12);
}

#at701, #at704, #at705, #at708, #at709, #at713 {
  padding-left:calc(var(--wd) * 18);
}

#at702, #at703 {
  padding-left:calc(var(--wd) * 30);
}

.bt {
  color:blue;
  font-weight: normal;
  text-decoration: underline dotted;
}

p {
  text-align:justify;
  font-size: calc(var(--wd) * 3.2);
  line-height: calc(var(--wd) * 4.8);
  text-indent: 2em;
  padding:0 calc(var(--wd) * 3);

}

#wkf_img {
  float:left;
  width:calc(var(--wd) * 35);
}

::placeholder {
	color: #F0F0F0;
}

.ref {
  /*display: none;*/
  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;
}

#login_box {
  z-index: 99;
  margin: 0;
  width: calc(var(--wd) * 68);
  right: calc(50vw - var(--wd) * 35);
  top: calc(var(--wd) * 18);
  padding: calc(var(--wd) * 3) 0 0 0;
  background-color: #F0F0F0;
  position: absolute;
  border-width: 0;
  border-color:#FF0000;
  text-align: left;
  vertical-align: middle;
  visibility: hidden;
}

#login_tbl {
  width: calc(var(--wd) * 62);
  font-size: calc(var(--wd) * 3.2);
}

#login_tbl th {
  width: calc(var(--wd) * 10);
  height: calc(var(--wd) * 7);
  align: right;
}

#login_tbl td {
  width: calc(var(--wd) * 46);
  align: left;
}

#login_tbl td input {
  font-size: calc(var(--wd) * 3.2);
}

.inbox {
  width: calc(var(--wd) * 46);
}

#jspgno {
  font-size: 1px;
}