@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Noto+Sans+TC:300,400,500,600,700,900');
body, html{
    font-family:'Lato', 'Noto Sans TC',sans-serif;
    }
.fw-Medium  {
    font-weight: 500 !important
}

.fw-Black {
    font-weight: 900 !important
}
nav{
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 10%);
}
header nav{
    background: rgba(255,255,255,0.7);

}
  header .systemtit{
  font-size: 1.25rem; 
color: #222222;
      font-weight: 400;
    letter-spacing: 1px;
          right: 5%;
    position: absolute;
} 
a.logo{
    display: flex;
    align-items: center;
}
/*******************************************576******************/
@media (min-width: 576px) {
    nav{
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0%);
}
    header nav{
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0.5+0,0+30,0+63,0.45+100 */
background: -moz-linear-gradient(45deg,  rgba(255,255,255,0.5) 0%, rgba(179,179,179,0) 30%, rgba(95,95,95,0) 63%, rgba(0,0,0,0.45) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(255,255,255,0.5) 0%,rgba(179,179,179,0) 30%,rgba(95,95,95,0) 63%,rgba(0,0,0,0.45) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(255,255,255,0.5) 0%,rgba(179,179,179,0) 30%,rgba(95,95,95,0) 63%,rgba(0,0,0,0.45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#73000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
    header .systemtit {
        font-size: 1.15rem;
        color: #FFFFFF;
    }



}
/*******************************************768******************/
@media (min-width: 768px) {
    header .systemtit {
        font-size: 1.35rem;
    }

 
}
/****************************************max***576******************/
@media (max-width:576px) {
    header .logo img{
        width: 50%;
    }
    
}