/* 標題設定*/
table {
	margin: 1rem 0.1rem 1rem 0.5rem;
}
header {
	margin: 0.5em 0.4em;
}

.title-word {
	padding: 0 0.1rem 0 0.8rem;
	font-size: 2.8rem;
	font-weight: 900;
}
.title-img {
	height: 3.6rem;
    padding: 0 0.3rem 0 0;
    margin: 0.1rem 0;
}

/* 中間內容*/
section {
	display: inline-block;
	width: 99.5%;
    font-size: 2.2rem;
    font-weight: 800;
    padding:0 0.5rem 0 0.02rem;
}

.banner {
	color: #000000;
	padding: 0.3rem 0.2rem 0.3rem 0.2rem;
	margin: 0.05rem 0 0.5rem 0.6rem;
}

div {
	margin: 0.1em 0 0.1em 0.4em;
	font-size: 2rem;
    
}
p {
	color: #282828;
	font-weight: 600;
	padding-left: 1rem;
    margin-top:0.2rem;
    margin-left:0.1rem;
}
audio {
	width: 98%;
	margin: 0.5rem 0 1rem 0.3rem;
	padding: 0.2rem;
}

/* 一小段空白*/
hr{
  border: 0.6rem solid rgba(0,0,0,0.00);
}


/* 影片按鈕 */
.bt {
	margin: 0.2rem -0.5rem 0.6rem 1.5rem;
	font-size: 1.5rem;
	letter-spacing: 0.02rem;
	border: 0.03rem rgba(205,205,205,1) solid;
	width: 9rem;
	height: 2.5rem;
	background-color: #FFF3DC;
	font-weight: bold;
	border-radius: 0.3rem;
}

.bt:hover {
	background-color:rgba(251,226,168,1.00);
    transition: all 0.2s linear;
    border: 0.03em rgba(251,226,168,0.3) solid;
}
/* 聽力測驗 */
.bt-LS {
	margin: 0.4rem -0.5rem 0.6rem 1.2rem;
	font-size: 1.55rem;
	border: 0.03rem rgba(205,205,205,1) solid;
	width: auto;
	height: 2.8rem;
	padding: 0.4rem 0.8rem 0.3rem;
	background-color: #FFF3DC;
	font-weight: bold;
	border-radius: 0.3rem;
}

.bt-LS:hover {
	background-color:rgba(255,240,145,0.5);
    transition: all 0.2s linear;
}
/*標題按鈕*/
.A {
	background-color: #ffcccc;
}
.B {
	background-color: #b7f274;
}
.C {
	background-color: #aaf0eb;
}
.D {
	background-color: #fff8a6;
}
.E {
	background-color: #e6ccff;
}
.F {
	background-color: #3F7BE8;
}
/*標題按鈕變色*/

.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: 2.1rem;
    margin: 0.3rem 0 0.6rem -0.5rem ;
	text: border;
	color: black;
}

/* 素養小標 */
.sub {
  padding: 0.2rem;
  margin: 0.5rem 0 0.5rem 1rem;
  font-size: 1.5rem;
  text-align: center;
  border-radius: 0.3rem;
  width: 5.8rem;
  float: left;
  color:aliceblue;  
}
.list {
  padding: 0.2rem;
  margin: 0.5rem 1rem;
  font-size: 1.5rem;
  text-align: center;
  border-radius: 0.3rem;
  width: 2.2rem;
  float: left;
  color:aliceblue;      
}

.bt-S {
  margin: 0.5rem 0.5rem -0.5rem 0;
  font-size: 1.5rem;
  width: 10rem;
  height: 2.5rem;
  background-color:aliceblue;
  font-weight: bold;
  border-radius: 0.3rem;
}

.banner3 {
	font-size: 2.3rem;
	padding: 0 1rem 0 1rem;
	margin: 0rem 1rem 0.5rem 0rem;
	float: left;
	font-weight: 600;
}
/* 底部設定*/
footer {
	margin: 1.5rem 0.8rem 2rem;
    /* padding-bottom:0.4rem; */
	position: relative;
}

.buttom-img {
	width: 5rem;
	float: left;
	right: 3vw;
	margin: 0 -1rem 0 1.3rem ;
}
.buttom-word {
	color: black;
	font-size: 1rem;
	left: 1vw;
	float: left;
	margin: 0 0 0 0.3rem;
}
/* 反回按鈕*/
.back-top {
  z-index: 99999;
  position: fixed;
  bottom: 0.3em;
  right: 0.31em;
  cursor: pointer;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  width: 1.1em;
  height: 1.05em;
  background: #131313 top no-repeat url(./arrow.png);
  background-size: 0.8em 0.8em;
  border-radius: 0.25em;
  border: 1px rgba(255, 255, 255, 0.6) solid;
  box-shadow: 0px 0px 2px #ffffff;
  transform: translateY(0%);
  transition: all 0.2s linear;
}

.back-top:hover {
  opacity: 0.8;
  filter: Alpha(opacity=75);
  box-shadow: 0px 0px 6px #ffffff;
}

.back-top.hide {
  opacity: 0;
  filter: Alpha(opacity=0);
  transform: translateY(150%);
}
/* phone */
@media (max-width: 524px) {
	header {
	margin: 0.3em 0;
	}
	table {
	  margin: 0.1em;
	}
 	.title-img {
	 height: 2em;
     padding: 0 0.2rem 0 0;        
	}
	.title-word {
	  padding: 0.05rem 0.1rem 0.08rem 0.2rem;
	  font-size: 18pt;
	}   
	audio {
	  width: 100%;
	  margin: 0 0 0.1rem -0.1rem;
	  padding: 0.65rem 0.25rem;
	}
    section {
        width: 100%;
        font-size: 16pt;
        font-weight: 800; 
    }

    .banner {
        color: #000000;
        padding: 0.1em 0.2em 0.2em 0.2em;
        margin: 0.1em 0.15em 0.2em 0.15em;
    }
    
	div {
	  margin: 0.15rem 0.1rem 0.1rem 0.33rem;
	  font-size: 1.2rem;
	}
   p {
	font-weight: 600;
	padding-left: 0.3rem;
    letter-spacing: -0.5px;
}
	hr {
	  border: 0.03em solid rgba(0, 0, 0, 0.00);
	}

	.bt {
	  font-size: 0.9rem;
	  letter-spacing: -1px;
	  margin: 0.1rem -0.6rem 0.5rem 0.7rem;
	  width: 4.8rem;
	  height: 1.6rem;
	}
	/* 聽力測驗 */
	.bt-LS {
	  font-size: 11pt;
	  margin: 0.2rem 0 0.2rem 0.1rem;
	  width: auto;
	  height: 25px;
	  padding: 0.2em 0.4rem 0.2em;
	}
   footer {
	margin: 0.5rem 0.25rem 1.5rem ;
    /* padding-bottom:0.08rem;    */
} 
	.buttom-img {
	  width: 3rem;
      left: 0; 
      margin: 0 -0.6rem 0.1rem 0.3rem;  
	}
	.buttom-word {
	  font-size: 0.6rem;
	  left: 2rem;
	  margin: 0.1rem 0 0 0.8rem;     
	}
	.elect-w5 {
	  font-size: 18pt;
	}
	.audio-area {
	  font-size: 20px;
	}
    
	.banner4 {
	  font-size: 12pt;
	}
	.back-top {
	  bottom: 0.5em;
	  right: 0.5em;
	  width: 0.95em;
	  height: 0.9em;
	  background-size: 0.63em 0.63em;
	  border-radius: 0.25em;
	  border: 1px rgba(255, 255, 255, 0.6) solid;
	  box-shadow: 0px 0px 1px #ffffff;
	}
/* 素養小標 */
.sub {
  padding: 0.2rem;
  margin: 0.3rem 0.5rem;
  font-size: 1rem;
  text-align: center;
  border-radius: 0.3rem;
  width: 3.8rem;
  float: left;
}
.banner3 {
	font-size: 1.6rem;
	padding: 0rem 1rem 0.3rem 0.5rem;
	margin: 0 1rem 0.35rem 0rem;
	font-weight: 600;
    letter-spacing: -0.8px;
}    
.list {
  padding: 0.2rem;
  margin: 0.3rem 0.5rem;
  font-size: 1rem;
  border-radius: 0.3rem;
  width: 1.8rem;
}

.bt-S {
  margin: 0.3rem 0rem -0.3rem 0.3rem;
  font-size: 1rem;
  width: 6rem;
  height: 1.8rem;
  background-color:aliceblue;
  font-weight: bold;
  border-radius: 0.3rem;
}



}