@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

@media screen and (max-width: 1020px) {

   #div1 { width : 35%;}
   #div2 {  width: 65%;}
}

@media screen and (max-width: 959px) {

   #div1 { width : 28%;}
   #div2 {  width: 72%;}
}

@media screen and (max-width: 639px) {


    html, body {        
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        margin: 0.5em;		
    } 

    #div1 { width : 26%;}

    #div2 {  width:74%;}

    p {
        text-align: left;
        margin-top: 0.5em;
        margin-left: 0.4em;
    }

    h3 {
        font-size: 1.3em;  
    } 

    .tableStyle1 {
        border: 1px solid #0026ff;        
        width: 100%;
    }

    /*處理 table 轉折*/
    .table > tbody > tr > td:before {
        content: "";
        display: none;
    }

    .table > tbody > tr {
        border: 1px solid #ccc;
        width: 95%;
        margin: 10px auto;
        border-radius: 8px;
        background: #fff;
        display: block;
        padding: 10px 10px;
        -webkit-box-shadow: 0 8px 30px -8px rgba(0,0,0,0.15);
        box-shadow: 0 8px 30px -8px rgba(0,0,0,0.15);
    }

        .table > tbody > tr > td {
            border-top: 0;
            display: block;
            line-height: 1.3;
            padding: 0;			
            text-align: center !important;
        }

    .table > thead {
        content: "";
        display: none;
    }

    /* table end */

    /*.img_caption { padding: 0; margin: 0;   }

    .img_caption p{ padding: 0em; margin: 0;                   
                    text-align: center;
    }

    #header > p > img {
        max-width: 50%;
        height: auto;
        display: block;
        margin-left: 10px;
        
    }*/

    img {
        max-width:100%;        
        display: block;
        margin : auto;		
    }

 
		
     /*處理畫面字體大小*/

       .fs a{ padding: 3px 3px; 
             border: 1px solid #096563; 
             color: #096563;
             margin-top : 1px;
             margin-right:1px; 
             text-decoration: none; 
             font-size: 13px; }
			 
      .fs a:hover{ background: #096563; 
                   color: #fff;}

}

@media screen and (max-width: 420px) {

    #div1 { width : 100%;}

     #div2 {  width:100%}

     .tableStyle1 { border : 1px solid #0094ff; 
                    text-align :center;
                    margin-left : 20px;
                    margin-top : 10px;
					margin-bottom : 10px;
                    width : auto; 
                    padding : 1px 1px 1px 1px;                 
             }
			 
			 .tableStyle2 { border : 1px solid #0094ff; 
                    text-align :left;
                    margin-left : 20px;
                    margin-top : 10px;
					margin-bottom : 10px;
                    width : auto; 
                    padding : 1px 1px 1px 1px;                                  
             } 
			 
             th, td{ border-top : 1px solid #0094ff; 
                 padding : 5px 5px 5px 5px;
                 font-size: 1em;
             }
}