body {
  font-family: "Microsoft JhengHei";
}
table {
  margin: 25px 10px 10px 10px;
}
/*  */
header {
  margin-bottom: 20px;
}
footer {
  margin-top: 25px;
  position: relative;
}
.title-w {
  font-size: 35pt;
}
.title-word {
  padding: 0px 0px 0px 15px;
  font-size: 32pt;
  font-weight: 900;
}
.title-img {
  width: 160px;
}
section {
  display: inline-block;
  width: 98.5%;
  margin-top: 8px;
  margin-left: 12px;
  font-weight: 700;
}
article {
  display: inline-block;
  width: 99%;
  margin-left: 12px;
  margin-bottom: 3px;
}
div {
  margin-left: 20px;
  margin-top: 10px;
}
p {
  margin-top: 3px;
  font-size: 20pt;
  color: blue;
}
audio {
  width: 75%;
  margin: 10px 0px 15px 8px;
}
.banner {
  font-size: 24pt;
  color: #000000;
  max-width: calc(100% - 10px);
  padding: 3px 0px 3px 3px;
  margin: 3px 3% 0 0.3%;
}
.banner2 {
  font-size: 24pt;
  color: #000000;
  max-width: calc(100% - 10px);
  padding: 3px 0px 3px 3px;
  margin: 3px 3% 0 2px;
}
.banner3 {
  font-size: 26pt;
  max-width: calc(100% - 5px);
  padding: 0.4% 1% 0.3%;
  margin: 0% 1% 0 5px;
  float: left;
  border-radius:25px;
}
.banner4 {
  font-size: 20pt;
  max-width: calc(100% - 5px);
  padding:calc(0.4% - 3px) calc(1% + 5px);
  margin: 6px;
  float: left;
  border-radius: 35px;
}
/* 影片按鈕 */
.bt {
  margin-top: 6px;
  margin-right: 10px;
  margin-left: 10px;
  font-size: 18pt;
  letter-spacing:0.6px;
  border: 1.5px #B5B5B5 solid;
  width: 160px;
  height: 38px;
  background-color: #FFF3DC;
  font-weight: bold;
  border-radius: 2px;
}
/* 聽力測驗 */
.bt-LS {
  margin-top: 6px;
  margin-left: 10px;
  font-size: 17pt;
  border: 1.5px #B5B5B5 solid;
  width: 310px;
  height: 38px;
  background-color: #FFF3DC;
  font-weight: bold;
  border-radius: 2px;
}

/* 素養小標 */
.bt-list {
  padding: 2px 2px 2px 2px;
  margin: 1% 0.5%;
  font-size: 17pt;
  text-align: center;
  border-radius: 5px;
  width: 35px;
  float: left;
}
/* 素養按鈕 */
.bt-S {
  margin: 1% 1pt;
  font-size: 16pt;
  width: 100pt;
  height: 36px;
  background-color:aliceblue;
  font-weight: bold;
  border-radius: 5px;
}

/*標題按鈕*/
.A {
  background-color: #ffcccc;
}
.B {
  background-color: #b7f274;
}
.C {
  background-color: #aaf0eb;
}
.D {
  background-color: #fff8a6;
}
.E {
  background-color: #e6ccff;
}
.F {
  background-color: #3F7BE8;
}

/*素養文字*/
.fontW {
  color: azure;
}
/*標題按鈕變色*/
.elect-w1:hover {
  color: whitesmoke;
  background-color: #e62789;
}

.elect-w2:hover {
  color: whitesmoke;
  background-color: #009900;
}

.elect-w3:hover {
  color: whitesmoke;
  background-color: #1e87fa;
}

.elect-w4:hover {
  color: whitesmoke;
  background-color: #993399;
}

.elect-w5 {
  color: white;
  background-color: cornflowerblue;
  padding: 3px 7px;
  font-size: 24pt;
}
.audio-area {
  font-size: 23pt;
  text: border;
  color:black;
}
.botton-end {
  position: relative;
  margin: 25px 5px 0px 15px;
  font-size: 14pt;
}
.img-size {
  width: 75px;
}
.buttom-img {
  width: 80px;
  position: absolute;
  right: 3vw;
}
.buttom-word {
  color: black;
  font-size: 12pt;
  left: 1vw;
  position: absolute;
}
/* phone */
@media (max-width: 768px) {
  header {
    margin-bottom: 3px;
  }
  table {
    margin: 5px 1px 1px 5px;
  }
  audio {
    width: 90%;
    margin: 8px 0px 6px 8px;
  }
  div{
	margin-top: 6px;
	}
  .title-img {
    width: 120px;
  }
  .title-word {
    font-size: 22pt;
  }
  .banner {
    font-size: 16pt;
  }

  .bt {
    font-size: 14pt;
    width: 125px;
    height: 30px;
  }
/* 聽力測驗 */
  .bt-LS {
    font-size: 14pt;
    width: 260px;
    height: 30px;
  }

  .bt-S {
	height: 35px;
  	font-size: 15pt;
	width: calc(25% - 5px);
	}
  .img-size {
    width: 80px;
  }
  .botton-end {
    font-size: 8pt;
  }
  p {
    margin-top: 2px;
    font-size: 12pt;
  }
  audio {
    margin-top: 4px;
    margin-bottom: 12px;
  }
  .buttom-img {
    width: 60px;
  }
  .buttom-word {
    font-size: 10pt;
  }
  .elect-w5 {
    font-size: 22pt;
  }
  .audio-area {
    font-size: 20px;
  }
 .banner3 {
  font-size: 20pt;
  padding:0.3% 0.6%;
}	
.banner4 {
  font-size: 16pt;
}			
}
/* phone */
@media (max-width: 450px) {
  header {
    margin-bottom: 3px;
  }
  table {
    margin: 5px 1px 1px 5px;
  }
  audio {
    width: 93%;
    margin: 8px 0px 6px 8px;
  }
  section {
  margin-top: 6px;
  }
  div{
	margin-top: 5px;
	}
  .title-img {
    width: 90px;
  }
  .title-word {
    font-size: 18pt;
  }
  .banner {
    font-size: 15pt;
  }
  .bt {
    font-size: 11pt;
	letter-spacing:normal;
	margin-left: 6px;
    width: 100px;
    height: 25px;
  }
/* 聽力測驗 */
  .bt-LS {
    font-size: 11pt;
	margin-left: 6px;
    width: 210px;
    height: 25px;
  }

 .bt-list {
  padding: 1.2px;
  margin: 1.5% 0.8%;
  font-size: 11pt;
  border-radius: 3px;
  width: 23px;
}
  .bt-S {
   font-size: 11pt;
	width: calc(30%);
	height: 20pt;
	}

  .img-size {
    width: 50px;
  }
  .botton-end {
    font-size: 8pt;
  }
  p {
    margin-top: 2px;
    font-size: 12pt;
  }
  audio {
    margin-top: 4px;
    margin-bottom: 12px;
  }
  .buttom-img {
    width: 60px;
  }
  .buttom-word {
    font-size: 10pt;
  }
  .elect-w5 {
    font-size: 18pt;
  }
  .audio-area {
    font-size: 20px;
  }
  .banner3 {
	font-size: 16pt;
	}
  .banner4 {
  font-size: 12pt;
}	

	
}