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;
}

.isNotIndexPage .variableContent
{
   padding : 0 2rem 0 2rem;
}
.pageHeading.noStyle {
    margin: 1rem 0 1rem 0;
}


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

body
{
   /*background-image : url(/download/Resource/BGImage/bigSky.jpg);*/

   background-image : url(/download/Resource/BGImage/BG.jpg);
   background-repeat: no-repeat;
   background-size: cover;
}

.slcHeader
{
   background-image : url(/download/Resource/BGImage/BG3.png);
   background-position: top right;
   background-repeat: no-repeat;
   /*background-size: 100% 100%;*/
   background-size : cover;
   display : flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}
.slcSubMenu
{
   
}
.slcSchoolLogoAndNames
{
   display : flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: center;
}
.slcSchoolLogo
{
   width : auto;
}
.slcSchoolNames{}
.slcSchoolNameChinese{}
.slcSchoolNameEnglish{}

.slcFooter
{
   padding : 20px;
   background-color: rgb(48,146,222);
   background-image: linear-gradient(to bottom, rgb(49,152,229), rgb(46,140,214));
   border-radius: 8px;
   
}







@media (max-width: 480px) 
{
   .isNotIndexPage .variableContent
   {
      padding : 0 0.5rem 0 0.5rem;;
   }
   .slcHeader
   {
      padding : 10px;
     display : block;
   }
   .slcSchoolLogoAndNames
   {
      justify-content: center;
   }

   .slcSchoolLogo
   {
      height : 60px;
      margin-right : 20px;
   }

   .slcSchoolNames
   {
      font-size : 25px;
      line-height : 30px;
      text-align: center;
   }
}
@media (min-width: 481px) and (max-width: 767px) 
{
   .isNotIndexPage .variableContent
   {
      padding : 0 1rem 0 1rem;;
   }
   .slcHeader
   {
      padding : 15px;
      display : block;
   }
   .slcSchoolLogo
   {
      height : 80px;

      margin-right : 20px;
   }
   .slcSchoolNames
   {
      font-size : 30px;
      line-height : 40px;
   }
}
@media (min-width: 768px) and (max-width: 979px) 
{
   .slcHeader
   {
      padding : 20px;
   }
   .slcSchoolLogo
   {
      height : 100px;
      margin-right : 20px;
   }
   .slcSchoolNames
   {
      font-size : 40px;
      line-height : 50px;
   }
}
@media (min-width: 980px) and (max-width:1199px) 
{
   .slcHeader
   {
      padding : 20px;
   }
   .slcSchoolLogo
   {
      height : 100px;
      margin-right : 20px;
   }
   .slcSchoolNames
   {
      font-size : 40px;
      line-height : 50px;
   }
}
@media (min-width: 1200px) and (max-width:1919px) 
{
   .slcHeader
   {
      padding : 20px;
   }
   .slcSchoolLogo
   {
      height : 120px;
      margin-right : 20px;
   }
   .slcSchoolNames
   {
      font-size : 50px;
      line-height : 60px;
   }
}
@media (min-width: 1920px) 
{
   .slcHeader
   {
      padding : 20px;
   }
   .slcSchoolLogo
   {
      height : 120px;
      margin-right : 20px;
   }
   .slcSchoolNames
   {
      font-size : 50px;
      line-height : 60px;
   }
}