/* Base start */

:focus{
  outline: none;
}

#tabs{
  border: none;
}

#tabs ul li img
{
  width:100%;
}

.qatab{
  width: 100%;
  /* margin: 4rem auto; */
}


.tablist{
  background: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#subtabs1{
border: none;
}

#subtabs2{
border: none;
}

.accordion {
  background-color: #fcf5E0 !important;
  color: #122B4F;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  font-size: 0.9rem;
font-family:'Noto Sans TC', sans-serif ,Georgia, 'Times New Roman', Times, serif;
}

.active,
.accordion:hover {
  background-color: #122B4F;
  font-size: 0.9rem;
font-family:'Noto Sans TC', sans-serif ,Georgia, 'Times New Roman', Times, serif;
}

.accordion:after {
  content: '\002B';
  color: #122B4F;
  font-size: 0.9rem;
font-family:'Noto Sans TC', sans-serif ,Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.panel p{
  color:#122B4F;
  font-size: 0.9rem;
font-family:'Noto Sans TC', sans-serif ,Georgia, 'Times New Roman', Times, serif;

}

.panelimg{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel img{
  max-width: 70%;
}

/* Base End */

/* intro2 start */

.div-intro2 {
width: 100%;
  text-align: justify;
  margin: 1rem 0 0;
}

.intro2-style4-text .content-text{
  text-align: left;
}

.intro2-container {
  width: 80%;
  min-width: 170px;
  height: 250px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro2-style1 {
width: 20%;
  float: left;
  display: flex;
  flex-direction: column;
}

.intro2-style1 img{
width: 30%;
}

.intro2-style1-text {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
font-size: 1rem;
font-family: 'Noto Sans TC', sans-serif ,Georgia, 'Times New Roman', Times, serif;
justify-content: start;
color: #122B4F;
}

.gender{
width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}

.header-text{
font-size: 1.2rem;
font-weight: 500;
}

.intro2-style1-text p{
margin: 0;
}

.intro2-style2 {
width: 3px;
  height: 80%;
  background-color: gray;
}

.intro2-style3 {
width: 16%;
  float: left;
  align-content: center;
  align-items: center;
  justify-items: center;
}

.intro2-style3-text {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
font-size: 1rem;
font-family: 'Noto Sans TC', sans-serif ,Georgia, 'Times New Roman', Times, serif;
justify-content: center;
color: #122B4F;
}

.grade{

display: flex;
width: 100%;
}

.grade-title{
width: 75%;
display: flex;
justify-content: flex-end;
}

.grade-content{
  width: 50%;
  display: flex;
  justify-content: center;
  justify-content: start;
  margin-left: 0.5rem;
}

.center{
text-align: center;
}

.grade-title2{
width: 100%;
}

.intro2-style3-text p{
margin: 0;
}

.intro2-style3-text a{
color:red;
text-decoration: none;   
}

.intro2-style4 {
width: 59%;
  float: left;
  align-content: center;
  align-items: center;
  justify-items: center;
}

.intro2-style4-text {
  width:auto;
  height: 100%;
  padding-left:1rem ;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  justify-items: center;
  flex-direction: column;
  
  color: #122B4F;
  font-size: 1rem;
  font-family: 'Noto Sans TC', sans-serif ,Georgia, 'Times New Roman', Times, serif;
}

.text-small{
font-size: 0.7rem;
}

.div-point-text{
display: flex;
  flex-flow: row;
  width: 100%;
}

.point-text{
margin: 0 1rem 0 0;
display: flex;
align-items: flex-start;
}

.content-text{
margin:0.1rem !important;
}

.oddrow{
  background-color: #FCF5E0;
}

.evenrow{
  background-color: #EFE0E0;
}
/* intro2 end */

.div-intr-space{
height: 4rem;
}