@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Merriweather|Source+Sans+Pro|Dancing+Script|Fira+Sans+Extra+Condensed|Rambla);

html,
body {
  width: 100%;
  min-height: 100%;
  height: auto;
  padding: 0px;
  margin: 0px;
  text-align: left;
  overflow: visible;
  font-size: 99%;
  color: #000;
  background: url(../_img/layout/bg.jpg) #eee top center no-repeat;
  line-height: 1.2;
  font-family: 'Source Sans Pro', '微軟正黑體' , sans-serif;
  -webkit-tap-highlight-color: transparent;
  text-align: justify; }

/*共用屬性*/
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

* {
  -webkit-overflow-scrolling: touch; }

a {
  text-decoration: none;
  color: inherit; }

a:active, a:hover {
  outline: none; }

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto; }

input[type="text"] {
  -webkit-appearance: none;
  border-radius: 0; }

/*泛用表格*/
/*定義區塊*/
.container {
  margin: auto;
  position: relative;
  z-index: 100;
  width: 970px;
  padding-left: 10px;
  padding-right: 10px; }

.row {
  margin-left: -10px;
  margin-right: -10px; }

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  position: relative;
  min-height: 1px;
  float: left;
  padding-left: 10px;
  padding-right: 10px; }

.col-12 {
  width: 100%; }

.col-11 {
  width: 91.66666667%; }

.col-10 {
  width: 83.33333333%; }

.col-9 {
  width: 720px; }

.col-8 {
  width: 66.66666667%; }

.col-7 {
  width: 58.33333333%; }

.col-6 {
  width: 50%; }

.col-5 {
  width: 41.66666667%; }

.col-4 {
  width: 33.33333333%; }

.col-3 {
  width: 230px; }

.col-2 {
  width: 16.66666667%; }

.col-1 {
  width: 8.33333333%; }

header {
  color: #fff; }
  header #logo {
    background: #0A3250;
    font-family: 'Merriweather', serif;
    padding: 10px 20px;
    height: 80px;
    line-height: 1.5; }
    header #logo h1 {
      font-size: 20px; }
      header #logo h1 b {
        font-size: 24px; }
    header #logo h2 {
      color: #EAB801;
      font-size: 16px; }
  header #slogan {
    background: #104D79;
    font-style: italic;
    height: 40px;
    padding: 10px 20px; }
  header nav {
    background: #104D79; }
    header nav .menu {
      font-size: 0; }
      header nav .menu li {
        font-size: 15px;
        line-height: 180%;
        display: inline-block;
        width: calc(100% / 8);
        text-align: center;
        height: 30px;
        border-left: 1px solid #87A6BC; }
        header nav .menu li:hover, header nav .menu li.active {
          background: #9FC5DF;
          color: #104D79; }
        header nav .menu li:first-child {
          border-left: none; }
      header nav .menu a {
        display: block; }

#content {
  background: url(../_img/layout/content_bg.png) left top;
  background-size: contain; }
  #content #left {
    color: #fff;
    padding: 20px 10px;
    min-height: 600px;
    text-align: left; }
    #content #left li {
      opacity: .8;
      font-weight: normal; }
      #content #left li:hover {
        opacity: 1;
        color: #fff; }
      #content #left li.active {
        opacity: 1;
        font-weight: bold;
        color: #fff; }
    #content #left .submenu {
      text-align: right;
      font-style: italic;
      line-height: 200%;
      cursor: pointer; }
      #content #left .submenu.active {
        font-weight: bold;
        color: red; }
      #content #left .submenu .dropdown {
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s; }
        #content #left .submenu .dropdown .sub_menu {
          -webkit-transition: all linear .3s;
          -o-transition: all linear .3s;
          transition: all linear .3s;
          padding-top: 0;
          color: #9FC5DF;
          max-height: 0;
          overflow: hidden;
          line-height: 120%; }
          #content #left .submenu .dropdown .sub_menu li {
            padding: 5px 0; }
          #content #left .submenu .dropdown .sub_menu.active {
            max-height: 200px;
            font-weight: normal; }
          #content #left .submenu .dropdown .sub_menu a {
            display: block;
            padding-right: 2px; }
      #content #left .submenu .on {
        color: #fff;
        font-weight: bold; }
  #content #right {
    min-height: 600px;
    padding: 20px;
    font-size: 15px; }
    #content #right a:hover {
      opacity: .8;
      text-decoration: underline; }
    #content #right h3 {
      color: #104D79;
      font-size: 20px;
      font-family: 'Rambla', serif;
      line-height: 200%;
	  margin-bottom: 15px; }
    #content #right h4 {
      font-weight: bold;
      margin-bottom: 10px; }
    #content #right h5 {
      font-family: 'Merriweather', serif;
      font-size: 20px;
      color: #333;
      margin-bottom: 10px; }
  #content:after {
    display: block;
    height: 0;
    clear: both;
    content: "";
    visibility: hidden; }

/*-----font-----*/
.serif {
  font-family: 'Merriweather', serif; }

.pcenter {
  text-align: center; }

.pright {
  text-align: right; }

.pleft {
  text-align: left; }

.f20 {
  font-size: 18px; }

.pd {
  padding-top: 20px; }

.pd2 {
  margin-bottom: 5px; }
  
.pd3 {
  padding-top: 30px; }

b {
  font-weight: bold; }

.f6 {
  color: #666; }

/*----index-----*/
.index {
  font-size: 0; }
  .index .intro {
    display: inline-block;
    vertical-align: top;
    width: 70%;
    font-size: 1rem;
    padding-right: 10px; }
    .index .intro p {
      margin-bottom: 1rem; }
  .index .img_right {
    display: inline-block;
    vertical-align: top;
    width: 30%;
    font-size: 1rem;
    text-align: right; }
    .index .img_right img {
      margin-bottom: 4px; }
  .index .name {
    font-family: 'Dancing Script', cursive;
	margin-top: 5px;
	text-align: center; }

.index_news {
  margin-top: 20px;
  padding: 0 0 20px;
  border-top: 4px solid #2F668F; }
  .index_news dl {
    margin-top: 20px; }
    .index_news dl dt {
      color: #104D79;
      font-family: 'Merriweather', serif;
      font-size: 20px; }
    .index_news dl dd {
      padding-left: 15px;
      position: relative;
      margin: 5px 0; }
      .index_news dl dd:before {
        content: '';
        width: 8px;
        height: 4px;
        background: #104D79;
        position: absolute;
        left: 0;
        top: 8px; }

/*----index end-----*/
.post_docs {
  font-size: 0;
  margin-bottom: 30px; }
  .post_docs figure {
    display: inline-block;
    vertical-align: top;
    width: 150px; }
  .post_docs article {
    display: inline-block;
    vertical-align: top;
    font-size: 0.98rem; }
    .post_docs article h5 {
      font-size: 18px;
      font-weight: bold; }
    .post_docs article h6 {
      font-size: 15px;
      color: #003377; }
    .post_docs article ul {
      list-style-type: square;
      margin-left: 20px; }

.post {
  margin-bottom: 30px; }
  .post ul {
    list-style-type: square;
    margin-left: 20px; }
    .post ul li {
      margin-bottom: 3px; }
  .post figure { 
	margin-top: 17px;
	margin-bottom: 20px; }
	
.post_number {
  margin-bottom: 30px; }
  .post_number ul {
    list-style-type: decimal;
    margin-left: 20px; }
    .post_number ul li {
      margin-bottom: 7px; }

.photo_album figcaption {
  margin-top: 5px; }

.photo_album section {
  margin-bottom: 20px;
  clear: both; }

.table {
  margin-bottom: 30px; }
  .table td {
    padding: 10px;
    border-bottom: 1px solid #fff;
    vertical-align: middle; }
  .table td:first-child {
    background: #777;
    color: #fff;
    text-align: right;
    width: 170px;
    border-right: 1px solid #fff; }
  .table td:last-child {
    background: #ddd; }

.courses .title {
  background: #777;
  color: #fff;
  text-align: center; }

.courses td {
  background: #ddd;
  padding: 13px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  text-align: left;
  vertical-align: middle; }

.courses td:first-child {
  background: #777;
  color: #fff;
  text-align: center;
  width: 43px;
  border-right: 1px solid #fff; }

.courses article {
  font-size: 0;
  margin-bottom: 30px; }
  .courses article h6 {
    font-size: 20px;
    font-weight: normal;
    line-height: 100%;
	margin-bottom: 8px; }
  .courses article figure {
    display: inline-block;
    width: 30%;
    vertical-align: top; }
  .courses article section {
    display: inline-block;
    width: 70%;
    vertical-align: top;
    font-size: 1rem;
    padding-left: 10px; }

.contact {
  font-size: 0; }
  .contact .information {
    display: inline-block;
    vertical-align: top;
    width: 60%;
    font-size: 0.98rem; }
  .contact .googlemap {
    display: inline-block;
    vertical-align: top;
    width: 40%;
    font-size: 1rem; }

footer {
  background: #182D37;
  color: #fff;
  text-align: right;
  height: 70px;
  padding: 10px; }
  footer b {
    font-weight: normal; }
  footer .fa {
    background: #2F668F;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    text-align: center;
    line-height: 1.8;
    margin-right: 5px; }
  footer .pd {
    margin-right: 50px; }
  footer .copyright {
    font-size: 13px;
    margin-top: 10px;
    color: #A3ABAF; }
    footer .copyright span {
      color: #5E6C73; }

@media screen and (max-device-width: 667px) {
  .index_news {
    font-size: 12px; } }

/*# sourceMappingURL=style.css.map */