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

body {
  margin: 0;
  border-width: 0;
  padding: 0;
  width: 100vw;
  background-color: #EEEEEE;
  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;
}

.cov {
  width: calc(var(--wd) * 100);
  margin-top:0;
}

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

#menu_bar {
  z-index: 99;
  border-width: 0;
  padding: calc(var(--wd) * 1) calc(var(--wd) * 0);
  display: block;
  position: absolute;/*fixed;*/
  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:block;/*none;*/
}

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

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

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

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


/* content.html */

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

.cont {
  font-size: calc(var(--wd) * 3.2);
}

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

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

/* 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);
}*/

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


/* sc??.html */

#pg1,#pg2,#pg3,#pg4,#pg5,#pg6 {
  margin-top:calc(var(--wd) * 18);
  z-index: 9;
}

#pg83,#pg84,#pg85,#pg86,#pg87,#pg88,#pg89,#pg90,
#pg91,#pg92,#pg93,#pg94,#pg95,#pg96,#pg97,#pg98,#pg99,#pg100,
#pg101,#pg102,#pg103,#pg104,#pg105,#pg106 {
  margin-top:calc(var(--wd) * 18);
}

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

.sc_pg_hd {
  margin-top:calc(var(--wd) * 18);
  top:0;
  position: absolute;
  padding:calc(var(--wd) * 2) 0;
  width:calc(var(--wd) * 100);
  display:none;
  text-align:left;
  background-color: #FFFFFF;
  min-height: calc(var(--wd) * 12);
}

#pg0 {
  height:calc(var(--wd) * 10);
}

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

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

.hd {
  margin:0 0 calc(var(--wd) * 5) 0;
  width: calc(var(--wd) * 100);
  text-align: center;
}

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

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

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

td.mc0 {
  height: calc(var(--wd) * 6);
  width: calc(var(--wd) * 14.4);
  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;
}

.trpos {
  color:black;
}

.bodyci {
  color:black;
}

/*
.ybg {
  background-color: #FFFF00;
  display:inline;
}*/

td.mc1 {
  height: calc(var(--wd) * 4);
  width: calc(var(--wd) * 7.2);
  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.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;
}


.cs {
  margin:0;
  font-size: calc(var(--wd) * 4);
  line-height: calc(var(--wd) * 6);
  text-align: right;
  padding:0 calc(var(--wd) * 5) calc(var(--wd) * 8) calc(var(--wd) * 20);
}

.seq0 {
  margin: calc(var(--wd) * 0.25) 0 0 0;
  padding: 0;
  height: calc(var(--wd) * 6);
  width: calc(var(--wd) * 9);
  color: #FFFFFF;
  font-family: 'Arial Narrow', Arial, sans-serif;
  background-image:url("../images/green.svg");
  background-size: calc(var(--wd) * 9) calc(var(--wd) * 6);
  font-stretch: ultra-condensed;
  display:inline-block;
  font-size: calc(var(--wd) * 3.6);
  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);
  color: #000000;
  font-family: 'Arial Narrow', Arial, sans-serif;
  background-image:url("../images/gold.svg");
  background-size: calc(var(--wd) * 9) calc(var(--wd) * 6);
  font-stretch: ultra-condensed;
  display:inline-block;
  font-size: calc(var(--wd) * 3.6);
  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);
  display:inline-block;
  float:left;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: calc(var(--wd) * 4.5);
  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);
  color: #FFFFFF;
  font-family: 'Arial Narrow', Arial, sans-serif;
  background-image: url("../images/jin.svg");
  background-size: calc(var(--wd) * 9) calc(var(--wd) * 6);
  font-stretch: ultra-condensed;
  display: inline-block;
  font-size: calc(var(--wd) * 3.6);
  line-height: calc(var(--wd) * 6);
  vertical-align: center;
}

p {
  font-size: calc(var(--wd) * 4);
  line-height: calc(var(--wd) * 6);
  text-indent:2em;
}

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

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

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

a:hover {
  color: #FF0000;
}
/*
#kp {
  display:none;
}*/