@media only screen and (max-width : 1000px) {
    body {
        font-family: '微軟正黑體';
        color: #47a3da;
    }
    
    .container{
        position: absolute;
        width: 100%;
        left: 0%;   
        top: 0%;
        background-color: #555555;
        height: 120px;
    }
    
    .header{
        width: 100%;
        height: 0px;
        margin: 0 auto;
        position: absolute;
        display: block;
        line-height: 1.5;                
        background-color: #555555;
        text-align: center;
    }

    .header h1{
        margin-right: 10px;
        position: relative;
        color: #FFFFFF;        
        font-size: large;   
        top: 6px;
    }

    .header h2{
        position: relative;
        color: #FFFFFF;
        font-size: x-small;        
        top: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .header img{
        position: absolute;
        height: 25px;
        top: 18px;
        right: 15px;
    }

    .content{       
        max-width: 100%;
        width: 100%;
        left: 0;
        padding-top: 10px;
        margin: 0 auto;
        text-align: center;    
    }

    .content p{
        color: #FFFFFF;
        text-align: left;
        padding-left: 10px;
        padding-right: 10px;
    }

    .content img{    
        margin: 0 auto;    
        width: 100%;         
        max-width: 100%;   
        height: 400px;
        object-fit: contain;
    }

    .nav-trigger {
      /* critical styles - hide the checkbox input */
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }

    label[for="nav-trigger"] {
        /* critical positioning styles */
        position: fixed;
        top: 15px;
        left: 10px;
        /* non-critical apperance styles */
        height: 30px;
        width: 30px;
        cursor: pointer;
        background-image: url("../images/MENU_BOTTON.gif");
        background-size: cover;
        z-index: 10;
    }   

    .nav-trigger + label, .nav {
        transition: left 0.3s;
    }

    .nav-trigger:checked + label {
        left: 200px;
    }

    .nav-trigger:checked ~ .nav {
        left: 0px; 
    }

    .nav{
        background-color: #555555;	
        padding-top: 6px;
        padding-left: 0px;
        position: fixed;
        left: -240px;
        top: 0;
        width: 240px;
        height: 100%;
        z-index:1;
    }

    .nav a{
        line-height: 2;
        text-align: left;
        font-size: 15px;
    }

    .nav li a{        
        text-align: left;        
        padding-right: 15px;
        color: #DDDDDD;
    }

    .nav li.selected a{
        color: #FFFFFF;
    }

    #inner {
        display: block;
        top: 120px;
        width: 100%;
        height: 420px;
        position: absolute;
        background-color: #FFFFFF;
        padding-top: 0px;
    }

    #foot{    
        background-color: #555555;
        text-align: left;
        font-size: x-small;
        position: absolute;
        top: 520px;       
        height: 120px;
    }
}