* {
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif
}

.hAuthorDiv {
  padding: 0 1rem;
}

.hImg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.hArrow {
  width: 100%;
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
  margin-bottom: 6px;
}

.hSecFlow {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}

.hSecFlowText {
  font-size: 1.5rem;
  line-height: 1.75;
  text-align: center;
  max-width: 280px;
  margin: 0 auto;
}

.hSecFlowBtns {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 1rem;
  align-items: center;
  justify-items: center;
  justify-content: center;
  /*  */
  margin: 2rem 0 4rem;
}
@media only screen and (min-width: 480px) {
  .hSecFlowBtns {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: center;
    justify-content: space-between;
    margin: 2rem 0 0;
  }
}
/* grid-template-columns: repeat(auto-fill, 360px); */

.hButton {
  font-size: 1.125rem;
  letter-spacing: 2.2px;
  color: white;
  background-color: #11111166;
  padding: 1rem 1rem;
  border: 1px solid #aaa;
  margin: 1rem 0;
  min-width: 145px;
  transition: 0.2s all;
}

.hButton:hover {
  background-color: #000000aa;
}

.hContactText {
  color: white;
  font-size: 1.25rem;
  line-height: 2;
}

.title-intro-time {
  font-size: 4rem !important;
}

@media only screen and (max-width: 640px) {
  .title-intro-time {
    margin: 16px 16px !important;
    line-height: 1.5;
    font-size: 2rem !important;
  }

  .hSecFlowBtns{
    margin: 10px 0;
  }
}

@media only screen and (max-width: 640px) {
  .alt h2 {
    padding: 1rem 0 0 !important;
  }
}

.d-none{
  display: none;
}
.d-flex{
  display: flex;
}

.f-wrap{
  flex-wrap: wrap;
}

.jcc{
  justify-content: center;
}

.aic{
  align-items: center;
}

.case-title{
  margin-bottom: 50px;
}

.case-title h2{
  margin-bottom: 20px;
}

.case-title p{
  font-size: 1.25rem;
}

.ass{
  align-self: start;
}

.ais{
  align-items: start;
}

.qr-card{
  padding: 20px;
  width: 50%;
}
.qr-card img{
  max-width: 200px;
  margin: auto;
}

.qr-card p{
  text-align: center;

}

.sns>a{
  flex: 0 1 33.33%;
  width: 33.33%;
}

@media (max-width: 768px){
  .qr-card{
    width: 100%;
  }

  .sns>a{
    flex: 0 1 100%;
    width: 100%;
  }
}

img{
  display: block;
}

.text-center{
  text-align: center;
}