@charset "utf-8";
/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /*邊框內含*/
  font-family: 'Poppins', 'Noto Sans TC', sans-serif;
}
/* #banner{
    background-image: url(../images/banner001.jpg);
    background-position: center bottom;
    background-size: cover;
    height: 600px;
} */
.about{
  background: rgba(255,255,255,1);
}
.admin{
  background: rgba(255,255,255,1);
}
.process{
  background: rgba(255,255,255,1);
  height: 500px;
  overflow: hidden;
}
.video{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items:center;
}
.video video{
  position: absolute;
  width: 100%;
  height: 100%;
  top:-300px;
  left:0;
  object-fit: cover;
}
.video h2{
  font-family: 'Poppins', 'Noto Sans TC', sans-serif;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  font-size: 10vw;
  text-align: center;
  line-height:60vh;
  /* text-transform:uppercase; */
  background:rgb(0, 0, 0 ,.2);
  mix-blend-mode: screen;
}
.product{
  background: rgba(255,255,255,1);
}
.link{
  background: rgba(255,255,255,1);
}
.navbarBg {
  background: rgba(119, 68, 24, .9);
}
.title{
    color: rgb(119, 68, 24);
    width: 100%;
    /* font-weight: bold; */
}
.subtitle{
    color: rgb(53, 192, 69);
    font-size: 1.4em;
    letter-spacing: 0.1em;
}
.titlew{
    color: rgb(255, 255, 255);
    width: 100%;
    /* font-weight: bold; */
}
.text{
  font-weight: 300;
  font-size: 1em;
  line-height: 1.4em;
  text-align: justify;
  color: #444;
  /* letter-spacing: 0.1em; */
}
.text a{
  font-weight: 500;
  color: rgba(155,205,110,1);
  text-decoration: none;
}
.text a:hover{
  text-decoration: underline;
}
.text2{
  font-weight: 300;
  font-size: 1em;
  line-height: 1.4em;
  text-align: justify;
  color: #666;
}
.toptext {
  text-shadow: 0 2px 5px rgb(51, 51, 51);
}
#goTop {
  /* display: none; */
  position: fixed;
  bottom: 10px;
  right: 5px;
  z-index: 9999;
  font-size: 14px;
  border: none;
  outline: none;
  background: rgba(146,198,236,0);
  color: white;
  cursor: pointer;
  /* padding: 10px; */
  width: 60px;
  height: 60px;
  border-radius: 30px;
  opacity:0;
  text-decoration: none;
}
.social {
  display: block;
  margin-bottom: 10px;
  align-items: center;
}
.social a {
  /* border: 1px solid rgb(53, 192, 69); */
  margin: 0 10px;
  display: inline-block;
  /* transition: all 0.25s ease-in-out; */
}
/* .social a:hover {
  background: #fff;
} */
.social a i {
  color: rgb(53, 192, 69);
  font-size: 2em;
}
.social a:hover i {
  color: rgb(53, 192, 69 ,.7);
}
.inner{
  overflow: hidden;
}
.inner img{
  transition: all 1.5s ease;
}
.inner img:hover{
  transform: scale(2);
  cursor: pointer;
  /* -webkit-filter:grayscale(1); */
} 
/* #goTop:hover {
  background: rgba(146,198,236,0);
} */
@media screen and (max-width:992px){
	#banner{
		margin-top: 86px;
    }
  .navbarBg {
    background: rgba(119, 68, 24,1);
    }
  .video video{
    top:-300px;
    }
  .video h2{
    display: none;
    }
}
@media screen and (max-width:768px){
  .process{
    height: 400px;
    }
  .video video{
    top:-500px;
    }
  .subtitle{
    color: rgb(53, 192, 69);
    font-size: 1.2em;
  }
}
@media screen and (max-width:576px){
  .process{
    height: 300px;
    }
  .video video{
    top:-400px;
    }
}