html, body {
    font-family: 'Roboto Condensed', '微軟正黑體', 'Microsoft JhengHei', 'Segoe UI Semibold', 'Segoe UI', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #000000;
    line-height: 24px;
}

body
{
   
}

a {
    text-decoration : none;
    color: #000000;
}
.variableContent {
    padding: 1em 0;
}
.hdSubmenu
{
   text-align : right;
   

}

.hdHeader
{
   margin : 0 0 10px 0;
}


.hdHomeLink
{
   display : flex;
   flex-direction: row;

   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
}

.hdSchoolLogo
{

   height : 100px;
   width : auto;
}

.hdSchoolName
{
   font-weight : 900;

}

.hdSchoolNameChinese
{
   font-size : 40px;
   line-height : 50px;

}

.hdSchoolNameEnglish
{
   font-size : 25px;

   line-height : 50px;
}

.hdSchoolInfo
{
    background-image: linear-gradient(to bottom, rgb(31,135,0), rgb(31,135,0));
    border-radius: 8px;

    color : #FFFFFF;
    padding : 2rem;
    margin-top : 2rem;
}

.hdSchoolInfo a
{
    color : #FFFFFF;
}

@media (max-width: 480px) 
{
   .hdHomeLink
   {
      justify-content: center;
   }
   .hdSchoolLogo
   {
      height : 60px;
   }
   .hdSchoolNameChinese
   {
      font-size : 30px;
      line-height : 40px;
   }
   .hdSchoolNameEnglish
   {
      font-size : 20px;
      line-height : 20px;
   }
   .hdSchoolName
   {
      display : flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }
}
@media (min-width: 481px) and (max-width: 767px) 
{
   .hdSchoolLogo
   {
      height : 60px;
   }
   .hdSchoolNameChinese
   {
      font-size : 30px;
      line-height : 40px;
   }
   .hdSchoolNameEnglish
   {
      font-size : 20px;
      line-height : 20px;
   }
}
@media (min-width: 768px) and (max-width: 979px) {}
@media (min-width: 980px) and (max-width:1199px) {}
@media (min-width: 1200px) and (max-width:1919px) {}
@media (min-width: 1920px) 
{
   .hdSchoolLogo
   {
      margin-right : 20px;
   }
}