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

html {
  touch-action: manipulation;
}

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

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

#inner-div {
  margin: 0 auto;
  width: calc(var(--wd) * 100);
  height: 100vh;
  background-color: #FFFFFF;
  /*position: absolute;*/
}

#logo {
  margin-top: 0;
  position: absolute;
  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) * 10);
}

#menu_bar {
  margin: 0 calc(var(--wd) * 1);
  border-width: 0;
  padding: calc(var(--wd) * 1) calc(var(--wd) * 2);
  display: block;
  position: absolute;
  top: calc(var(--wd) * 10);
  width:calc(var(--wd) * 94);
  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);
}

#ifr {
  top: calc(var(--wd) * 19);
  margin: 0;
  border-width: 0;
  padding: calc(var(--wd) * 1) 0;
  width: calc(var(--wd) * 100);
  height: calc(100vh - var(--wd) * 21.5);
  display: block;
  /*overflow: auto;*/
  position: absolute;
}

#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: 6vw;
  line-height: 6vw;
  font-weight: bold;
  font-variant: normal;
  color: #0000FF;
}

.cont {
  font-size: 3.2vw;
}

ul ul {
  padding-left: 4vw;
}

li {
  height: 6vw;
}

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

.li_letter {
  margin:0 20vw 0 0;
  padding: 0;
  float: left;
  list-style-type: circle;
}

.txt_pg {
  position:relative;
  padding: 5vw;
}

p {
  font-size: 5vw;
  text-indent:2em;
}

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


/* sc??.html */

.sc_pg {
  margin: 0;
  border-width: 0;
  padding: 0 2%;
  text-align: center;
  width: 96%;
  font-size: 4vw;
}

#snd_bar {
  margin: 2vw 0 0 0;
  width: 96vw;
  height: 10vw;
}

#mp3btn {
  height: 10vw;
  display: inline;
  padding: 0;
}

#sndbtn {
  height: 8vw;
  display: inline;
  padding: 1vw 0 1vw 5vw;
}

h3 {
  font-size: 5vw;
  padding: 0 2vw;
}

table {
  table-layout:fixed;
  padding: 0;
  border-spacing: 0;
  padding: 0;
  border-width: 0;
  border-collapse:collapse;
  text-align: center;
  margin-left: 1vw; 
}

.sc {
  margin: 0 3vw;
  width: 90vw;
}

td.mc0 {
  height: 6vw;
  width: 14.4vw;
  text-align: center;
  font-size: 6vw;
  line-height: 6vw;
  letter-spacing: 0;
  white-space:nowrap;
  word-break:keep-all;
  vertical-align: bottom;
}

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

td.mc2 {
  height: 6vw;
  width: 7.2vw;
  text-align:center;
  font-size: 6vw;
  line-height: 6vw;
  letter-spacing: 0;
  white-space:nowrap;
  word-break:keep-all;
  vertical-align: bottom;
}


.cs {
  margin:0;
  font-size: 4vw;/*3.5*/
  text-indent:2em;
  line-height: 6vw;/*5*/
  text-align: left;
  padding:2vw 5vw 0 6vw;
  color:Maroon;
}

.cs1 {
  margin:0;
  font-size: 4vw;/*3*/
  text-indent:-2em;
  line-height: 5vw;
  text-align: left;
  padding:2vw 5vw 0vw 12vw;
  color:Maroon;
}

.cs2 {
  margin:0;
  font-size: 4vw;/*3*/
  text-indent:-2em;
  line-height: 5vw;
  text-align: left;
  padding:2vw 5vw 0vw 12vw;
  color:Maroon;
}

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

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

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

.seq0 {
  margin: 0.25vw 0 0 0;
  padding: 0;
  height: 6vw;
  width: 9vw;
  color: #FFFFFF;
  font-family: 'Arial Narrow', Arial, sans-serif;
  background-image:url("../images/green.svg");
  background-size: 9vw 6vw;
  font-stretch: ultra-condensed;
  display:inline-block;
  font-size: 3.6vw;
  line-height: 6vw;
  vertical-align: center;
}

.seq1 {
  margin: 0.25vw 0 0 0;
  padding:0;
  height: 6vw;
  width: 9vw;
  color: #000000;
  font-family: 'Arial Narrow', Arial, sans-serif;
  background-image:url("../images/gold.svg");
  background-size: 9vw 6vw;
  font-stretch: ultra-condensed;
  display:inline-block;
  font-size: 3.6vw;
  line-height: 6vw;
  vertical-align: center;
}

.seq2 {
  margin: 2.3vw 0 2.3vw 6vw;
  padding:0;
  height: 5.4vw;
  width: 12vw;
  background-image:url("../images/red.svg");
  background-size: 12vw 5.4vw;
  display:inline-block;
  float:left;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 4.5vw;
  line-height: 5vw;
  text-align:center;
  font-stretch: ultra-condensed;
  color: #FFFFFF;
  vertical-align: center;
}

.seq3 {
  margin: 0.25vw 0 0 0;
  padding: 0;
  height: 6vw;
  width: 9vw;
  color: #FFFFFF;
  font-family: 'Arial Narrow', Arial, sans-serif;
  background-image: url("../images/jin.svg");
  background-size: 9vw 6vw;
  font-stretch: ultra-condensed;
  display: inline-block;
  font-size: 3.6vw;
  line-height: 6vw;
  vertical-align: center;
}

.tjt {
  margin: 0;
  padding: 5vw 5vw 0 5vw;
  text-indent: 0;
  font-size: 5vw;
  line-height: 8vw;
  text-align: left;
  font-weight: bold;
}

.tj {
  margin: 0;
  padding: 1vw 5vw;
  text-indent: 2em;
  font-size: 5vw;
  line-height: 8vw;
  text-align: justify;
}

.smp3btn {
  height: 6vw;
  display: inline-block;
  padding: 0;
}

a:hover {
  color: #FF0000;
}

.ref {
  font-size: 3vw;
  line-height: 5vw;
  text-indent:-4vw;
  padding:0;
}

.refimg {
  height: 4vw;
  padding: 0 1vw 0 1vw;
  float: right;
}

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