@charset "UTF-8";

body{
  margin:0;
    font-family: Microsoft JhengHei,微軟正黑體;
    /* font-size: 4.2vw; */
    cursor: default;
    color:gray;
}
.container{
    margin: auto;
    width: 95%;
    max-width: 1000px !important;
    text-align: center;
    color:#333333;
}
#BackTop{
  position: fixed;
  right:2rem;
  bottom:5%;
  width: 50px;
  cursor: pointer;
}
a{
    text-decoration: none;
}
.nav-link{
  padding: 0.3em 0.5em;
}
.banner{
  background-image: url(../images/faq_img/landscape_top3x.png),linear-gradient(-180deg,#8aeacf 0, #8aeacf 98%) !important;
  background-size: cover !important;
  height: 300px !important;
  text-align: center !important;
}
.invoice-vehicle{
  max-width: 350px;
  width:80%;
  min-width: 180px;
  background: ;
  /* -webkit-filter: drop-shadow(3px 3px 3px rgba(135, 155, 151, 0.8));
  filter: drop-shadow(3px 3px 3px rgba(135, 155, 151, 0.8)) */
}
.tutorial{
  max-width: 400px;
  width:90%;
  min-width: 200px;
}

.searchBar {
    margin: 0 auto;
    width: 100%;
    max-width: 900px !important;
    border-radius: 8px;
    border: none;
    background-color: #f5f5f5; /* 灰底 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* 淡陰影 */
    display: flex;
    align-items: center;
    padding: 0.5em 1em; /* 內距 */
    font-family: 微軟正黑體;
}

.searchBar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.1rem;
    color: rgba(0, 0, 0, 0.7);
}

.searchBar input::placeholder {
    color: rgba(0, 0, 0, 0.4); /* 淺灰 placeholder */
}

/* 放大鏡 icon */
.searchBar .icon {
    margin-right: 8px;
    width: 15px !important;
    color: rgba(0, 0, 0, 0.4);
    font-size: 1.2rem;
}

.searchBar:focus{
  outline: none;
}

.categories{
  font-size: 1.3rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap:wrap;
}
.category-button{
  width: 140px;
  min-width:fit-content;
  font-weight: bolder;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
/*  line-height: 2.2em; */
  border-radius: 24px;
  border: solid 1px #dbdbdb;
  background: transparent;
  color:#4e4e4e !important;
  margin-bottom:0.5rem;
  margin-right: 8px;
}

.category-button:focus,
.category-button:hover{
  color:white !important;
  font-weight: bold;
  background-color: #01AFA2;
  outline:none;
  text-decoration: none;
}
.article-title{
  color:black;
}
.userGuide{
  font-weight: bolder;
  font-size: 2rem;
  color:#4e4e4e !important;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search-text {
  color:#01AFA2;
}
.articles{
  margin:0 auto;
  /* padding-left: 2%;
  padding-right: 2%; */
  text-align: left;
  width:90%;
  max-width: 900px;
  min-height:300px;
  font-weight: bolder;
  font-size: 1.5rem;
}

.articleT{
  margin: 0 auto;
  font-size: 1.3rem;
  font-weight: ;
  /* border-bottom:1px gray solid; */
  padding-top:1rem;
  padding-bottom:0.5rem;
  cursor: pointer;
  width:100%;
  border-bottom: 1px solid gray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:flex-end;
}
.articleT a{
  color:black;
  /* text-decoration-color:#59ba9b !important; */
}
.articleT a:hover{
  color:#59ba9b !important;
  /* text-decoration-color:#59ba9b !important; */
}
svg{
  fill:#4e4e4e;
}
a{
  width:100%;
  /* background: yellow; */
}
hr{
    height: 1rem;
    margin: 0;
    border-top: 1px solid gray;
    border-bottom: 0px solid gray;
}
.download-app{
    display: flex;
    flex-direction:row;
    justify-content:center;
}
.icon{
    width:90px;
    background: transparent !important;
}
.download-app-right{
  display: flex;
  flex-direction:column;
  justify-content:space-around;
}
.download-app-right .slogan{
}
.download-app-buttons{
  text-align: left;
}
.download-app-right .appstore-button{
  cursor:pointer;
  width: 90px;
  /* height: 31px; */
  object-fit: contain;
}
.bottom-part{
  width: 100%;
  background-image: url(../images/faq_img/landscape_bottom3x.png);
  background-size: cover ;
  background-repeat: no-repeat,no-repeat;
  /* background-position: center bottom; */
  height: 501px ;
  text-align: center;
  color:black;
  font-size: 20px;
}

.nav-link{
  color: white;
  margin-right: 1rem;
  margin-left: 1rem;
}
.navbar .navbar-nav .nav-link,
.navbar .navbar-brand .nav-link
{
  font-size:18px !important;
  padding: 0.3em 0.5em;
  white-space: nowrap;
}