@charset "UTF-8";
body {
  overflow-x: hidden;
  position: relative;
  padding-top: 73px;
  font-family: "PingFang TC", "LiHei Pro", Helvetica, Arial, sans-serif, "微軟正黑體", "Microsoft JhengHei"; }

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

a {
  cursor: pointer; }

h2 {
  font-size: 42px; }

hr {
  border: 0;
  height: 1px;
  background-color: #777;
  color: #777; }

/*nav================================================== */
.navbar {
  margin-bottom: 0px;
  border-radius: 0px;
  border: 0px;
  padding: 10px 0; }

.navbar-default {
  background-color: #1C5111; }

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #fccf09; }

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #fccf09; }

.navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #fccf09;
  border-bottom-color: #fccf09; }

.nav img {
  max-width: 60px;
  height: auto; }

.nav .logo {
  max-width: 62px; }

@media (max-width: 767px) {
  .nav .logo {
    max-width: 60px; } }

.nav_text {
  float: right;
  color: #fff; }

.navbar-default .navbar-nav > li > a {
  color: #fff;
  font-size: 16px; }

.navbar-default .navbar-toggle:before {
  color: #fff; }

.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #ccc; }

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #fff; } }

@media (max-width: 767px) {
  .navbar-header {
    padding-left: 10px; } }

/*gototop================================================== */
#gotop {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 12px 20px;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  cursor: pointer;
  z-index: 500;
  border-radius: 50px; }
  #gotop:hover {
    background: rgba(0, 0, 0, 0.6);
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s; }

/*breadcrumbs================================================== */
.breadcrumb {
  margin-bottom: 0px;
  background-color: transparent; }

/*header================================================== */
/*story================================================== */
.header_pic {
  position: relative; }

.title1, .title2, .title3 {
  position: absolute;
  color: #384A5E; }

.title4, .title5 {
  position: absolute;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  font-weight: 300; }

.logoimg {
  position: absolute;
  width: 16vw;
  -webkit-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0; }

.title1, .title2, .title3 {
  -webkit-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0; }

.title4, .title5 {
  -webkit-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0; }
  @media (max-width: 991px) {
    .title4, .title5 {
      opacity: 1 !important; } }

.aa, .bb, .cc, .dd {
  -webkit-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0; }
  @media (max-width: 991px) {
    .aa, .bb, .cc, .dd {
      opacity: 1 !important; } }

#story_logo {
  width: 150px;
  height: auto;
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom: 60px;
  display: block; }

.story_a, .story_b_text, .story_c_text, .story_d_text {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ede8d2+0,ffffff+100 */
  background: #ede8d2;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ede8d2 0%, #ffffff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ede8d2 0%, #ffffff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#ede8d2), to(#ffffff));
  background: -o-linear-gradient(top, #ede8d2 0%, #ffffff 100%);
  background: linear-gradient(to bottom, #ede8d2 0%, #ffffff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }

.story_a p {
  padding: 10px;
  color: #59595B; }

.story_b_text p, .story_c_text p, .story_d_text p {
  color: #59595B; }

.story_a {
  overflow: auto;
  /* IE7 IE8 Firefox Chrome Safari */
  _width: 100%;
  /* IE6 */ }

.story_a_txt {
  background-color: #ede8d2; }
  .story_a_txt h2 {
    margin: 0;
    padding: 30px 0; }

.story_b {
  padding: 50px; }

@media (min-width: 768px) {
  .story_b_text {
    padding: 1px 100px 0px 100px; }
  .story_c_text {
    padding: 10px 20px 0px 20px; } }

@media (max-width: 767px) {
  .story_b_text {
    padding: 1px 30px 20px 30px; }
  .story_c_text {
    padding: 10px 30px 20px 30px; }
  .story_d_text {
    padding: 0px 0px 80px 0px; } }

@media (max-width: 991px) {
  h2 {
    font-size: 30px; }
  #story_logo {
    padding: 50px 0 40px 0; } }

/*footer================================================== */
.footer {
  background-color: #1C5111;
  padding: 25px 0;
  line-height: 50px; }

.footer_03 p {
  color: #ccc;
  padding-top: 10px; }

.footer a {
  color: #fff; }
  .footer a:hover {
    color: #fccf09; }

.footer img {
  max-width: 50px; }

/*text align================================================== */
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (min-width: 768px) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }
}

@media (min-width: 992px) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (min-width: 1200px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}