@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap");
.heading {
  color: #373738;
  padding-top: 50px;
  padding-bottom: 50px;
}
.heading .big-head {
  font-size: 2rem;
  font-weight: bold;
}
.heading .divider {
  border-bottom: 3px solid #00c7b1;
  width: 200px;
  padding-top: 5px;
}

.header {
  padding-top: 60px;
}

.img-mobile {
  display: none;
}

.sec1 {
  padding-bottom: 30px;
  display: flex;
}
.sec1 .sec1-content {
  padding-left: 30px;
}
.sec1 .sec1-content .sec1-title {
  color: #054449;
  font-size: 1.8rem;
  font-weight: bold;
}
.sec1 .sec1-content .sec1-text {
  color: #58595b;
  font-size: 1.2rem;
}

.sec2 {
  padding-bottom: 30px;
}
.sec2 .sec2-text {
  padding-top: 10px;
  color: #054449;
  font-size: 1.8rem;
  font-weight: bold;
}
.sec2 .flip {
  perspective: 1000px;
  -webkit-perspective: 1000px;
  width: 248px;
  height: 274px;
}
.sec2 .flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.8s;
  -webkit-transform-style: preserve-3d;
}
.sec2 .flip:hover .flip-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.sec2 .flip-front, .sec2 .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.sec2 .flip-front {
  z-index: 2;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}
.sec2 .flip-back {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
}

.sec2-mobile {
  display: none;
}

.form-wrap {
  background-color: #d7fff9 !important;
}

@media screen and (max-width: 768px) {
  .img-normal {
    display: none !important;
  }
  .img-mobile {
    display: unset !important;
  }
  .sec1 {
    display: block !important;
  }
  .sec1 .col-md-4 {
    max-width: 40%;
    margin: auto;
  }
  .sec1 .sec1-content {
    max-width: 100% !important;
    text-align: center;
    margin: auto;
    padding-left: unset !important;
  }
  .sec1 .sec1-content .sec1-title {
    font-size: 1rem !important;
  }
  .sec1 .sec1-content .sec1-text {
    font-size: unset !important;
  }
  .sec2 {
    display: none !important;
  }
  .sec2-mobile {
    display: unset !important;
  }
}