@import url("reset.css");

@import url(https://fonts.googleapis.com/css?family=Ubuntu); /*font-family: 'Ubuntu', sans-serif; */
@import url(https://fonts.googleapis.com/earlyaccess/cwtexhei.css); /* font-family: 'cwTeXHei',sans-serif; -- for chinese-- */


@media screen and (min-width: 1681px){
    #ground{ 
        width:60.5%;  }
     .s-box{width: 47.5%; margin-right:1%;}
     .s-box div img{width: 98%;}
    /*section h1{width: 25%;font-size: 1.35em;} */
    #TOPIC1-2 img.okinawa-03{
  width: 44.5%;
   float:left;
    margin-right: 0.5em;
    margin-left: 0.5em;
    padding-bottom:0;
    padding-top: 0;
}
}


	@media screen and (max-width: 1680px){
    #ground{ 
        width:60.5%;  }
     .s-box{width: 47.5%; margin-right:1%;}
         .s-box div img{width: 98%;}
       /* section h1{width: 25%;font-size: 1.35em;} */
            #TOPIC1-2 img.okinawa-03{
  width: 44.5%;
   float:left;
    margin-right: 0.5em;
    margin-left: 0.5em;
    padding-bottom:0;
    padding-top: 0;
}
    }
       
        
    @media screen and (max-width: 1140px){
    #ground{ 
        width:60.5%;  }
        .s-box{width: 47.5%; margin-right:1%;}
        .s-box div img{width: 98%;}
      /*  section h1{width: 25%;font-size: 1.35em;} */
    }
        
 @media screen and (max-width: 980px){
    
    #ground{ 
        width:92.4%;  }
        .s-box{width: 47.5%; margin-right:1%; }
        .s-box div img{width: 98%;}
   /*  section h1{width: 30%;font-size: 1.35em;} */
}

    
    @media screen and (max-width: 736px){
    #ground{ 
        width:92.4%;  }
        .s-box{width: 47.5%; margin-right:1%;}
        .s-box div img{width: 98%;}
      /*  section h1{width: 30%;font-size: 1.35em;} */
    }
    
        
    @media screen and (max-width: 480px){   
        #ground{ 
        width:90%;}
        .s-box{width:98%; }
        .s-box div img{width:98%px;}
     /*   section h1{width: 45%; font-size: 1.10em;} */
          #TOPIC1-2 img.okinawa-03{
  width: 100%;
   float:left;
    margin-right:0;
    margin-left: 0;
    padding-bottom:0;
    padding-top: 0;
}
    }
    
    @media screen and (max-width: 320px){
    #ground{ 
        width:93%;  }
    .s-box{width:98%;}
        .s-box div img{width:98%;}
      /*  section h1{width: 43%; font-size: 0.95em;}*/
    }



 #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
 .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
            #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}





    body{ width: 100%;!important; -webkit-text-size-adjust:100%;  -ms-text-size-adjust:100%; margin:0; padding:0;
        font-family: "arial", "verdana","文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
        background: #33cccc; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #33cccc, #33d6ff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #33cccc, #33d6ff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #33cccc,#33d6ff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #33cccc, #33d6ff); /* Standard syntax */
}
     #ground{ 
        display: block; 
        margin-left: auto;
		margin-right: auto;
         
      }
   hr {width: 98%; color:#666666;}

/*------------- header ------------------- */
    header{display: block;  width:100%; margin-bottom: 0.5em; margin-top: 0.5em;  }
    header p { display: block; color:#4d4d4d; text-align: right; font-size: 0.8em; margin-top:0.1em; margin-bottom: 0.3em; }
    header p a{ color:#4d4d4d;}
    header h1 {
        display: block; 
        width:100%; 
       /*-- background-image:url(../images/hd-bg-01.jpg); background-repeat: repeat-x; --*/
       
    }
header h1 img{  width:40% ; }
    header ul {display: block; float: right; color: #4d4d4d; font-size: 0.787em; padding-left: 0.5em; margin-top:1em;}
    header ul li{line-height: 0.8em;  padding-right: 0.5em; }
    header ul li a{color: #4d4d4d; text-decoration: none;}
    .clear{clear: both;}
    
    
    
/*-------------content ---------------------*/
    section {width:98%; display: block; margin-bottom:0.5em; padding: 1%;}
  
    section h1 {display: block;   line-height: 2em; 
        color: white; 
        text-indent:1%;
        margin-bottom: 0.1em;
        font-family: "verdana", "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei",sans-serif; 
        font-size: 1.35em;
        /*font-family: 'Shadows Into Light Two', cursive; font-weight: 600; letter-spacing: 0.1em;*/

    
    }

    section div {margin: auto; background-color:rgba(255,255,255,0.9);}
    section div img {display: block; margin: auto; width:98%; padding-bottom: 1.5em; padding-top: 1em;} /* -----------image is responsive--------------- */
    section div h2 {display: block; font-size: 1.4em;font-family: 'Ubuntu', "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif; 
        line-height: 1.5em; text-align: center;}
    section div p {color:#8c8c8c; font-weight: 200; text-align: center;  } /* ---line ---- */
    section div article {width:98%; margin: auto;}

    section div article h4 { font-family: "verdana","文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif; font-size: 1.2em; color: #595959; text-align: left; line-height: 1.4em; font-weight: 400; padding-left: 1em; }
 section div article h5 { font-family: "verdana","文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif; font-size: 1em; color: #595959; text-align: left; line-height: 1.4em; font-weight: 400; padding-left: 1em; }
    section div article p {font-size: 1em; color: #595959; text-align:left; letter-spacing: 1.5px; line-height:1.3em; padding: 1em 1em; }
    p em{font-size: 1em; color: #595959; }
p em a{ text-decoration: none; color:#595959;}
    
    section div article strong{ font-size:1em; font-weight: 600;font-family: 'Ubuntu', "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;}

    .next { text-align: center;
        color:darkgray; font-size: 1em; line-height: 1.2em; padding-bottom: 1em;
    }

.next-2 { text-align: center;
        color:darkgray; font-size: 1em; line-height: 1.2em; padding-bottom: 1em; text-decoration: none;
    }



.LIST li{margin-top:-1em; padding-left:3em;  }
.LIST li p{color:#808080;}
.next a {color: darkgray; }
hr.style-one {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
hr.style-two{
border: 0;
  border-top: 3px double #cccccc;
}

/* --------- small box ------------- */
.mid{padding: 0px!important; width: 100% !important;}
.s-box{display: block;  float: left; padding-right: 1%; padding-left: 1%;}
.s-box h1{ width: 100% !important;} 
.s-box div article p { display: block; padding-left: 1em;}


.four {background: #33cccc; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #33cccc, #33d6ff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #33cccc, #33d6ff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #33cccc,#33d6ff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #33cccc, #33d6ff); /* Standard syntax */}

.five{ background: #33cccc; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #33cccc, #33d6ff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #33cccc, #33d6ff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #33cccc,#33d6ff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #33cccc, #33d6ff); /* Standard syntax */
margin-right:0;

}


/* ------- box1 -----------*/
.s-one { background: #5cd6d6; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #5cd6d6, #33d6ff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #5cd6d6, #33d6ff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #5cd6d6,#33d6ff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #5cd6d6, #33d6ff); /* Standard syntax */}
/*.h2-one{font-family: 'Shadows Into Light Two', cursive; font-weight: 800; letter-spacing: 0.1em;} */


/* ------box2 ---------*/
.s-two { background: #33cccc; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #33cccc, #33d6ff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #33cccc, #33d6ff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #33cccc,#33d6ff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #33cccc, #33d6ff); /* Standard syntax */}


/* -----------footer ------------- */

footer {text-align: center; font-size:0.78em; color: #666666;  /* background-color: #e6e6e6; */ }
footer p {line-height: 1.36em;}
footer p a {color: #666666;}
footer p a img { height:1.5em !important; padding-left: 0.3em; vertical-align: middle;  }