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

body{
    background-color : #e1f4f1;
}

a {
    text-decoration : none;
    color: #000000;
}

a:hover
{
    /*text-decoration : underline;*/
}




























.whiteBox

{

  background-color: rgba(255,255,255,0.5);



  border: 1px solid #64C1C4;

  border-radius: 4px;

}





.wlLogoName


{


   display : flex;


   flex-direction: row;


   flex-wrap: wrap;


   justify-content: flex-start;


   


}





.wlLogoName:hover


{


   text-decoration : none;
}


.wlHeader

{
   display : flex;

   flex-direction: row;
   flex-wrap: wrap;

   justify-content: space-between;
   margin-bottom: 5px;

   


   background-repeat: no-repeat;
   background-size: 100% 100%;

}


.wlEclass
{
   width : 320px;



   height : 50px;
   overflow: hidden;

}

.wlSchoolName
{
   display : flex;

   flex-direction: column;

   justify-content: center;
   color : #006891;
   

}

.wlSchoolName h1
{
   
   margin : 0;
}

.wlSchoolNameChinese
{
   font-size : 2.4em;
   line-height : 1.4em;
   margin : 0;
}
.wlSchoolNameEnglish
{
   font-size : 1.2em;
   line-height : 1.2em;
}

.wlFooter
{
   display : flex;
}

.wlbanner
{
    width:30%;
}



@media (max-width: 480px) 
{

   .wlLogoName
   {
      font-size: 12px;
      justify-content: center;
   }
   .wlSchoolName
   {
      text-align : center;
   }
   .wlHeader
   {
      justify-content: center;
   }
      .wlLogo
   {
      height: auto;
      width: 20%;
   }
   .wlbanner
   {
        width:60%;
   }
   .wlEclass
   {
       width : 320px;
       text-align : center;


       height : 60px;
       overflow: hidden;

    }
}
@media (min-width: 481px) and (max-width: 767px) 
{
   .wlLogoName
   {
      justify-content: center;
   }
   .wlSchoolName
   {
      text-align : center;
   }
   .wlHeader
   {
      justify-content: center;
   }
}
@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) 
{

}