@charset "UTF-8";
.tcon{
    background-color: rgb(246,246,246);
}
.secret{
    background-color: rgb(255,184,5);
}
.appstore{
    width: 38%;
}
.googleplay{
    width: 47%;
}
.green{
    color: rgb(5,142,45);
}
.dblue{
    color: rgb(7,36,89);
}
.t212{
    background-color: rgb(212,212,212);
}


a,a:hover{
    text-decoration: none;
    color:white;
}
.table-text{
    font-size: 1rem;
}
.m_money-product__item .m_money-product__label.money-mgmt{
    background-color: #71cda8;
}

body{
  font-size: 2vw;
}
#BackTop {
  position: fixed;
  right: 2rem;
  bottom: 5%;
  width: 50px;
  cursor: pointer;
  z-index: 100;
}
#index-page img{
  max-width: 100%;
}

#index-page .col-sm-4,.col-sm-5{
  padding: 0;
}
#index-page .nav-link,.navbar-brand{
  padding: 0.3em 0.5em;
}
.navbar .navbar-nav .nav-link,
.navbar .navbar-brand .nav-link
{
  font-size:18px !important;
  padding: 0.3em 0.5em;
}
#index-page .banner{
  position: relative;
  height: 25em;
  width: 100%;
  overflow: hidden;
  margin: 0;
}
#index-page .banner .cloud{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

#index-page .banner div .title .fst-img{
  width:90%;
}

#index-page .title-img{
  margin-top: 1vw;
  margin-bottom: 2vw;
}
#index-page .banner .btn-group-banner{
  width:100%;
}
#index-page .banner .btn-group-banner{
  height: 4vw;
}
#index-page .banner .btn-group-banner img{
  height: 100%;
}
#index-page .title{
  text-align: right;
  padding-top: 1.2em;
}
#index-page .two-cellphone{
  position: relative;
}
#index-page .two-cellphone img{
  height:80%;
  position: absolute;
  z-index: 9;
}
#index-page .two-cellphone img:nth-child(1){
  position: absolute;
  bottom:7%;
  right:0;
  z-index: 9;
}
#index-page .two-cellphone img:nth-child(2){
  position: absolute;
  bottom:-3%;
  right:5em;
  z-index: 9;
}
#index-page .title-img img {
  width:80%;
}

#index-page .why-use-app{
  font-weight: bolder;
  font-size: 1.4em;
  line-height: 2.2em;
  color:#353744;
  -webkit-text-stroke:0.5px #353744;
   letter-spacing:1.2px;
}
#index-page .why-use-app img{
  height:2em;
}
#index-page .why-use-app::first-letter{
  font-size: 1.3em;
  -webkit-text-stroke:0.7px #353744;
}
#index-page .why-use-app span{
  font-size: 1.3em;
  color:#59BA9B;
  -webkit-text-stroke:0.015em #59BA9B;
}
#index-page .why-use-app span:last-child{
  color:#f38e79;
  -webkit-text-stroke:0.7px #f38e79;
}
#index-page section.feature{
  position: relative;
  background: transparent;
  text-align: center;
  background:#69c4ab;
  overflow: hidden;
}
#index-page section.feature .top-img{
  width:100%;
  height:18vw;
  background:center no-repeat url("/images/faq_img/landscape_bottom3x.png");
  background-color: white;
  background-size: 100% 140%;
  background-position-y: top;
}
#index-page .feature .col-sm{
  padding:0;
}
#index-page .feature .row{
  width: 65%;
}
#index-page .feature-item h2,#index-page .feature-item p,#index-page .feature-item a{
  color:white ;
  font-weight: bolder;
}
#index-page .feature-item{
  position: relative;
  z-index: 3;
}
#index-page .feature-item h2{
  font-size: 1em;
  line-height: 0.5em;
  z-index: 5;
  padding-bottom: 0.4em;
  background:center no-repeat url("/images/landing-page/green-cray.png");
  background-size: 70% 80%;/*寬 高*/
}
#index-page .feature-item p{
  font-size: 0.6em;
  line-height: 1.5em;
}
#index-page .feature-item a{
  text-decoration: underline;
}

#index-page .feature-item img:nth-child(1){
  /* padding: 15px; */
  width: 70%;
  margin-bottom: 1em;
}

#app-instr .row{
  justify-content: center;
}
#app-instr .row img{
  margin-bottom: 1.5em;
}


#app-instr .app-instr-text{
  vertical-align: middle;
}
#app-instr p{
  /* width: 100%; */
  font-size: 0.5em;
  line-height: 2em;
  white-space: nowrap;
}
#app-instr p span{
  display: inline-block;
  font-weight: bolder;
  color:#59ba9b;
  -webkit-text-stroke:0.02em #59ba9b;
  font-size: 2.1em;
}
#faq-sec{
  position: relative;
  font-size: 0.9em;
  padding:5vw 0;
  margin: 5vw 0;
}
#faq-sec .container-lg{
  width:80%;
  margin: 0 auto;
}
#faq-sec .row .a-block{
  padding:0.5em 0.25em;
  cursor: pointer;
}
#faq-sec .row .a-block img{
  width:100%;
}
#faq-sec .row .a-block:hover img{
  filter:brightness(65%);
}
#faq-sec div .txt{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index: 10;
  white-space: nowrap;
  margin: 0;
}
/* #faq-sec div img:hover{
  filter:brightness(50%);
} */
/*
#index-page #faq-sec div:hover{
  color:white;
}
#faq-sec .faqs{
  padding: 1em 15% 0 15%;
}
#faq-sec .row div{
  white-space: nowrap;
  line-height: 9vw;
  cursor: pointer;
}
#faq-sec .row div div:nth-child(1){
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index: 10;
}
#faq-sec .row div div img{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:100%;
  z-index: 9;
}

#faq-sec .row div:nth-child(1){
  background:center/contain no-repeat url("/images/landing-page/faq-img1.png");
}
#faq-sec .row div:nth-child(2){
  background:center/contain no-repeat url("/images/landing-page/faq-img2.png");
}
#faq-sec .row div:nth-child(3){
  background:center/contain no-repeat url("/images/landing-page/faq-img3.png");
}
#faq-sec .row div:nth-child(4){
  background:center/contain no-repeat url("/images/landing-page/faq-img4.png");
}
*/
#faq-sec .rounded-pill{
  position: absolute;
  top:0;
  left:50%;
  transform: translate(-50%,-50%);
  background: #59ba9b;
}
#faq-sec .more{
  font-size: 0.9em;
  width:100%;
  margin-top: 4vw;
}
#faq-sec .more a{
  color:#59ba9b !important;
  text-decoration: underline;
  font-weight:normal;
}
#faq-sec .more:hover{
  color:#59ba9b;
  text-decoration: none;
  cursor:pointer;
}
#btm-cta .row{
  padding:0 28%;
}
#btm-cta .row .btm-cta-img img:nth-child(1){
  width:155px;
}
#btm-cta .row .btn-group-banner{
  flex-wrap: nowrap;
  white-space: nowrap;
}
#index-page .download-app{
    display: flex;
    flex-direction:row;
    justify-content:center;
    align-items: stretch;
    height: 100px;
}
#index-page .icon{
    height:100%;
    background: transparent !important;
}
.invoice-vechicle-btn{
  width:100px;
}
#index-page{
  overflow: hidden;
}
#index-page .download-app-right{
  display: flex;
  flex-direction:column;
  justify-content:space-around;
}
#index-page .download-app-right .slogan{
    font-size: 15px;
    color:rgba(0, 0, 0, 0.43);
}

}
#index-page .download-app-right .appstore-button{
  cursor:pointer;
  width: 120px;
  object-fit: contain;
}
#index-page .download-app-right .appstore-button img{
  height: 100%
}
.download-app-buttons img{
  height:35px;
}
#index-page footer{
  height:28vw;
  background: center/cover no-repeat url("/images/faq_img/landscape_bottom3x.png");
  position: relative;
  /* background-color:#69C4AB; */
}
#index-page footer div{
  position: absolute;
  bottom:20%;
  left:50%;
  transform: translate(-50%,50%);
  width: 100%;
}
.bottom-color{
  background-color:#69C4AB;
  height:5em;
}
footer{
  font-size: 18px;
}
/* animation part */
.ani-r{
  position: relative;
  right:120%;
}
.ani-l{
  position: relative;
  left:120%;
}
.ani-t{
  position: relative;
  bottom:-2em;
}
.ani-fi{
  opacity: 0;
}
.feature .feature-item div{
  overflow: hidden;
}
.why-use-app .a-line{
  overflow: hidden;
}
.fadeIn, .fadeInLeft, .fadeInRight{
	    visibility: hidden;
	}