/* CSS Document */

body {
  background-color:#e6e6e6;
  padding: 0;
  overflow-y: scroll; /*show scroll no matter what*/
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
}
a.link-img:link {
  border:1px solid gray;}
a.link-img:hover {
  border:1px solid #F60;}
a.link-img:visited {
  border:1px solid gray;}
a.link-img:active {
  border:1px solid #fff;}

h1, h2, h3, h4, h5, h6, .navbar, .img-box {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

h1 { /* 大型抬头 */
  padding-top: 2em;
  font-size: 2.2em;
  font-weight: 600;
  font-style: normal;
  color: #222;
  /* text-shadow: 0px -1px #000, 0px 1px #FFF; */
}

h2 { /* 中型抬头 */
  padding-top: 1.6em;
  font-size: 2em;
  font-weight: 600;
  color: #333;
  /* text-shadow: 0px -1px #000, 1px 1px #FFF; */
}

h3 { /* 小型抬头 */
  padding-top: 1.2em;
  font-size: 1.4em;
  font-weight: 600;
  color: #333;
  /* text-shadow: 0px -1px #000, 1px 1px #FFF; */
}

.p-box-title {
  font-size: 1.2em;
  font-weight: 100;
  color: #fff;
  display: block;
}

.p-box-client {
  padding-top: .5em;
  font-size: .8em;
  font-weight: 100;
  font-style: italic;
  color: #ccc;
  display: block;
}

.data-title {
  display: block;
  padding-top: .6em;
  font-size: .8em;
  font-weight: 600;
  color: #333;
}

.data-content {
  display: block;
  padding-top: 0;
  font-size: 1em;
  font-weight: 300;
  color: #333;}

.navbar {
  font-size: 1em;
  font-weight: 200;
  color: #333;
  display: block;
  }

/* <uniquifier>: Use a unique and descriptive class name */
/* <weight>: Use a value from 300 to 700 */

.font-body, .font-thumbnail, .font-title, .font-subtitle, .font-menu {
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  }

.font-body {
  font-weight: 200;
  font-size: 1.1em;
  }

.font-thumbnail {
  font-weight: 200;
  font-size: .8em;
  color: #333;
  }

.font-title {
  font-size: 3em;
  font-weight: 400;
  font-style: normal;
  text-shadow: 0px -1px #000, 0px 1px #FFF;
  }

.font-subtitle {
  font-size: 2em;
  font-weight: 200;
  font-style: normal;
  color: #555;
  text-shadow: 0px -1px #000, 0px 1px #FFF;
  }

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0;
  height: 0;
  overflow: hidden;
  }

.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }

.img-description-filled {
    /*transform: translate(-50%, -50%);*/
    color: #FFF;
    text-shadow: 1px 1px 2px black;
    filter: opacity(100);
}

.img-description {
  /*transform: translate(-50%, -50%);*/
  color: #FFF;
  text-shadow: 1px 1px 2px black;
  filter: opacity(0);
}

.img-container {
  text-align: center;
  height: 80%;
  background-color: #BDBDBD;
}

.img-box:hover .img-description, .img-box:focus .img-description {
  filter: opacity(100);
}

.img-box {
  text-align: center;
  overflow: hidden;
  position: relative;
}

.img-thumb {
  transition: all .5s ease-in-out;
}

.img-box:hover .img-thumb, .img-box:focus .img-thumb {
  transform: scale(1.2);
  filter: brightness(0.4);
}

.menu-icon {
  width: 16px;
  height: 16px;
  margin-right: 25px;
}

.filter-1 .filter-2 .filter-3 .filter-4 {
  display: none;
}

.form-control:focus {
  border-color: #ff0000;
  box-shadow: 0 0 0 0.2rem rgba(256, 0, 0, 0.25);
  } 

.carousel.pointer-event {
    touch-action: pan-y pinch-zoom;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 16 16'%3E%3Cpath d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8'/%3E%3C/svg%3E") !important;
}
  
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 16 16'%3E%3Cpath d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8'/%3E%3C/svg%3E") !important;
}