﻿body {
   font-family: Microsoft JhengHei;
   font-size: 14pt;
   line-height: 1.7;
   /*padding-top: 71px;*/ /* 固定表頭 */
}

.font_title_bold {
   font-weight: bold;
   font-size: 26pt;
   line-height: 1.3;
}

.font_second_title_bold {
   font-weight: bold;
   font-size: 20pt;
   line-height: 1.3;
}

.main {
   max-width: 1366px;
   width: 100%;
   display: flexbox;
   margin-left: auto;
   margin-right: auto;
   background-color: #e7eef4;
}



.top_menu {
   font-weight: bold;
   background-color: #e7eef4;
   max-width: 1366px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   background-image: url(../images/logo-bg.png);
   background-repeat: no-repeat;
   background-position: 30px 9px;
   xheight: 100px; /* 表頭高度 */
}

   .top_menu .collapse {
      padding-right: 60px;
   }

      .top_menu .collapse .nav {
         width: 100%;
         display: flex;
         justify-content: space-around;
      }

   .top_menu .root_menu {
      font-size: 18pt;
      color: #455c6b !important;
      margin-left: 15px;
      white-space: nowrap;
      line-height: 1;
   }

      .top_menu .root_menu:hover {
         cursor: pointer;
         color: #129ab0 !important;
      }
/*針對整體做動畫*/
/** {
   -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;
}*/
/*
  但是全體做動畫有個缺點，當在LOGO裡面做圖的時候，文字隱藏的時候，
  網站剛讀取會有動畫效果!超像bug的所以如果有在LOGO設圖片，要針對LOGO的地方動畫速度歸 0
*/
/*針對 .navbar 作一些想要的修正*/
.navbar-scroll.navbar {
   /*padding: 10px 0 10px 0;*/
   border-radius: 0px;
}
/*也是針對想要的畫面做修正*/
.navbar-scroll.navbar-fixed-top {
   /*padding: 10px 0 10px 0;*/
   box-shadow: 0 18px 20px -12px rgba(0, 0, 0, 0.35);
}

/*@media (min-width: 768px) {
   .top_menu .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0;
      color: #0b608b;
   }
}*/
/* lg 關掉mouseover */
@media (min-width: 992px) {
   .top_menu .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0;
   }
}

.top_menu .sub_menu a {
   font-size: 14pt;
}

   .top_menu .sub_menu a:hover {
      background-color: white;
      color: #129ab0;
      text-decoration: underline;
   }

.banner {
   position: relative;
   background-repeat: no-repeat;
   background-position: bottom;
   text-align: center;
}

   .banner .title {
      color: #ffffff;
      white-space: nowrap;
      line-height: 0.89;
      font-weight: bold;
      font-size: 26pt;
   }

.path {
   bottom: 0;
   color: #333333;
   background-color: rgba(181,199,211,0.4);
   /*padding-left: 20px;*/
   /*padding-left: 40px;*/
   text-align: left;
   line-height: 1.5;
   /*margin-top: 20px;*/
   -webkit-backdrop-filter: blur(9px);
   backdrop-filter: blur(9px);
}

   .path a {
      color: #333333;
   }

   .path div:first-child {
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      background-color: #b5c7d3;
      vertical-align: middle;
      padding: 10px 0 0 50px;
   }

   .path .separator {
      padding-left: 10px;
      padding-right: 10px;
   }
/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
   .path {
      padding-left: 2px;
   }
}
/* Large devices (laptops/desktops, 992px and up) */
@media (min-width: 992px) {
   .path {
      padding-left: 40px;
   }
}
/* Medium devices (tablets, 768px-979px) */
@media (min-width: 768px) and (max-width: 979px) {
   .path {
      padding-left: 20px;
   }
}


.frame {
   display: flex;
   background-size: contain;
   background-repeat: no-repeat;
   background-position-y: bottom;
   background-position-x: center;
   min-height: 500px;
}


.frame_left_menu {
   padding: 30px 0 14px 29px;
   width: 280px;
   background-color: #376887;
}

   .frame_left_menu ul {
      list-style: none;
      margin-left: -40px;
   }

   .frame_left_menu a {
      color: #ffffff;
      font-size: 18pt;
      text-decoration: none;
   }

      .frame_left_menu a:hover {
         /*background-color: white;
         color: black;*/
         color: #fcbb01;
      }

   .frame_left_menu .frame_left_menu_active {
      list-style-type: none;
      padding: 10px 10px 10px 20px;
      font-size: 18pt;
      font-weight: bold;
      color: #ffffff;
      box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35);
      background-color: #129ab0;
   }

   .frame_left_menu .frame_left_menu_item {
      list-style-type: none;
      padding: 10px 0 10px 15px;
      font-size: 18pt;
      color: #ffffff;
   }


/*.pan_shortTab {
   display: inline-block;
}*/

.pan_shortTab a:hover {
   color: #F5C920;
}

.pan_shortTab_item {
   /*padding: 3px 25px 5px 20px;*/
   /*font-size: 14pt;*/
   font-weight: bold;
   color: #ffffff;
   background-color: #455c6b;
   text-decoration: none;
}


.pan_html {
   padding: 28px 39px 28px 28px;
   /*background-color: #ffffff;*/
}

.frame .frame_main_content {
   width: 100%;
}

.frame_title {
   color: #c34c02;
   padding: 15px 20px 10px 20px;
   border-bottom: #129ab0 5px solid;
   display: inline-block;
   /*margin-left: 20px;*/
   /*margin-left: 40px;*/
}

.frame_content {
   background-color: #ffffff;
   /*margin: 0 20px 0 20px;*/
   /*margin: 0 40px 0 40px;*/
   padding: 30px 20px 10px 20px;
   background-repeat: no-repeat;
   background-position: bottom 20px right 20px;
}


/* Large devices (laptops/desktops, 992px and up) */
@media (min-width: 992px) {
   .frame_title {
      margin-left: 40px;
   }

   .frame_content {
      margin: 0 40px 0 40px;
   }
}
/* Medium devices (tablets, 768px-979px) */
@media (min-width: 768px) and (max-width: 979px) {

   .frame_title {
      margin-left: 20px;
   }

   .frame_content {
      margin: 0 20px 0 20px;
   }
}
/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
   .frame_title {
      margin-left: 2px;
   }

   .frame_content {
      margin: 0 2px 0 2px;
      background-size: 50%;
   }

   .pan_html {
      padding: 0;
   }
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
   .frame_content {
      background-size: 30%;
   }
}

.submenubg {
   position: relative;
   /*background-image: url(../images/about-img-bg.jpg);*/
   /*background-repeat: no-repeat;*/
   text-align: center;
}

   .submenubg .submenu_content {
      /*margin: 30px 30px 0 30px;*/
      padding: 20px 20px 20px 20px;
      opacity: 0.9;
      background-color: #ffffff;
   }

.submenubg .submenu_content .submenucol {
   text-align: center;
   font-size: 16pt;
   padding: 20px 0 20px 0;
}
/* Large devices (laptops/desktops, 992px and up) */
@media (min-width: 992px) {
   .submenubg .submenu_content {
      margin: 30px 40px 0 40px;
   }
}
/* Medium devices (tablets, 768px-979px) */
@media (min-width: 768px) and (max-width: 979px) {
   .submenubg .submenu_content {
      margin: 30px 20px 0 20px;
   }
}

@media (max-width: 767.98px) {
   .submenubg .submenu_content {
      margin: 30px 2px 0 2px;
   }
}


.frame_community a {
   margin-left: 7px;
   margin-right: 7px;
}

.frame_community .a2a_svg, .frame_community .a2a_count {
   border-radius: 14px !important;
}

.button {
   display: inline-block;
   border: 0;
   /*color: #ffffff;
   background-color: #129ab0;*/
   color: #129ab0;
   background-color: #ffffff;
   border: 1px solid #129ab0;
   /*box-shadow: 0 12px 24px -8px #129ab0;*/
   border-radius: 10px;
   padding: 6px 20px 6px 20px;
   font-size: 15pt;
   font-weight: bold;
   white-space: nowrap;
}

   .button:hover {
      color: #ffffff;
      background-color: #129ab0;
      /*color: #129ab0;
      background-color: #ffffff;*/
      /*border: 1px solid #129ab0;*/
      text-decoration: inherit;
      cursor: pointer;
   }

   .button:disabled {
      color: silver;
   }


.file_caption {
   font-weight: bold;
   color: #666666;
}

.file_extension {
   border-radius: 6px;
   border: solid 1px #d42510;
   color: #d42510;
   background-color: white;
   font-size: 11pt;
   padding: 0px 10px 2px 10px;
   margin-left: 10px;
}

.download_file {
   display: inline-block;
   white-space: nowrap;
   padding: 5px 0 5px 0;
}




.google_maps {
   position: relative;
   padding-bottom: 75%; /*// This is the aspect ratio height: 0;*/
   overflow: hidden;
}

   .google_maps iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
   }


#return-to-top {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background: white;
   background: rgba(255, 255, 255, 0.7);
   border: 5px solid rgba(15,76,129, 0.9);
   width: 50px;
   height: 50px;
   display: block;
   text-decoration: none;
   -webkit-border-radius: 35px;
   -moz-border-radius: 35px;
   border-radius: 35px;
   display: none;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

   #return-to-top i {
      color: #0f4c81;
      position: relative;
      left: -6px;
      top: -3px;
      font-size: 22px;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
   }

   #return-to-top:hover {
      /*background: rgba(15,76,129, 0.9);*/
      background: rgba(255,255,255, 0.7);
   }

      #return-to-top:hover i {
         color: #0f4c81;
         top: -10px;
      }
