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
{
    background: linear-gradient(135deg, rgba(235,241,246,0.5) 0%,rgba(171,211,238,0.5) 50%,rgba(137,195,235,0.5) 51%,rgba(213,235,251,0.5) 100%);
}

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

.variableContent {
    padding: 1em 0;
}

.kcStayMiddleMaxWidth, .mcShell
{
    margin : 0 auto;
}


.kcHeader
{
    position : relative;
}
.kcLogo
{
    max-width : 100%;
    height : auto;
}
.kcFooter
{
    padding : 2rem 1rem;
    background-color : #2F91BE;
    
}


.kcSubMenu
{
    position : absolute;
    right : 0;
    top : 1rem;
}

@media (max-width: 480px) 
{
    .kcSubMenu
    {
        top : 0;
        display:none;
    }    

    .kcStayMiddleMaxWidth, .isNotIndexPage .mcShell
    {
        max-width : 98vw;
    }
}
@media (min-width: 481px) and (max-width: 767px) 
{
    .kcSubMenu
    {
        position : static;
    }
    .kcStayMiddleMaxWidth, .isNotIndexPage .mcShell
    {
        max-width : 98vw;
    }
}
@media (min-width: 768px) and (max-width: 979px) 
{
    .kcSubMenu
    {
        position : static;
    }
    .kcStayMiddleMaxWidth, .isNotIndexPage .mcShell
    {
        max-width : 98vw;
    }
}
@media (min-width: 980px) and (max-width:1199px) 
{
    .kcStayMiddleMaxWidth, .isNotIndexPage .mcShell
    {
        max-width : 95vw;
    }
}
@media (min-width: 1200px) and (max-width:1849px) {
    .kcStayMiddleMaxWidth, .isNotIndexPage .mcShell
    {
        max-width : 90vw;
    }
}
@media (min-width: 1850px) 
{
    .kcStayMiddleMaxWidth, .isNotIndexPage .mcShell
    {
        max-width : 70vw;
       
    }
}