@font-face {
  font-family: "Noto Sans TC";
  src: url("../fonts/NotoSansTC-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans TC";
  src: url("../fonts/NotoSansTC-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
body {
  --header-height: 58px;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  color: #000;
  background-color: #fff;
}
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}
@media (min-width: 992px) {
  body {
    --header-height: 90px;
    font-size: 24px;
  }
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1140px;
  }
}

.fw-bold {
  font-weight: 900 !important;
}

.pink {
  color: #FF6F88;
}

.text-400 {
  color: #565656;
}

.link, a {
  color: #2278D5;
}
.link:hover, a:hover {
  color: #2278D5;
}

.width-content {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.header {
  height: var(--header-height);
}
.header .img-logo {
  max-width: 172px;
}
@media (min-width: 992px) {
  .header .img-logo {
    max-width: 100%;
  }
}

.main-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: var(--header-height);
  margin-left: auto;
  margin-right: auto;
  max-width: 1920px;
}
@media (min-width: 1920px) {
  .main-container {
    max-width: 100%;
  }
}

.float-button {
  position: fixed;
  z-index: 100;
  bottom: 50px;
  right: -3px;
}
@media (min-width: 1200px) {
  .float-button {
    bottom: 40px;
    right: 70px;
  }
}

.hero-section {
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-image: url("../images/img_hero_bg_m.jpg");
  aspect-ratio: 375/362;
}
@media (min-width: 768px) {
  .hero-section {
    background-image: url("../images/img_hero_bg.jpg");
    aspect-ratio: 768/600;
  }
}
@media (min-width: 992px) {
  .hero-section {
    aspect-ratio: 1920/939;
  }
}
.hero-section .img-hero-01 {
  max-width: 89.6vw;
  margin-right: -33px;
}
@media (min-width: 768px) {
  .hero-section .img-hero-01 {
    margin-right: -80px;
  }
}
@media (min-width: 1200px) {
  .hero-section .img-hero-01 {
    max-width: 1058px;
    margin-right: -113px;
  }
}
.hero-section .hero-title-img {
  width: 100%;
  max-width: 83.467vw;
}
@media (min-width: 768px) {
  .hero-section .hero-title-img {
    max-width: 52vw;
  }
}
@media (min-width: 1200px) {
  .hero-section .hero-title-img {
    max-width: 665px;
  }
}

.info-section {
  position: relative;
  width: 100%;
  margin-top: -16px;
}
@media (min-width: 768px) {
  .info-section {
    margin-top: 0px;
  }
}
.info-section .info-section--bg-left {
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 1;
}
.info-section .info-section--bg-right {
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 1;
}
.info-section .info-section-container {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  .info-section .info-section-container {
    margin-top: -60px;
    width: 90%;
  }
}
@media (min-width: 992px) {
  .info-section .info-section-container {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
.info-section .info-section-title {
  width: -webkit-max-content;
  width: max-content;
  max-width: 51.467vw;
}
@media (min-width: 992px) {
  .info-section .info-section-title {
    width: 630px;
  }
}
.info-section .info-box-img-01 {
  position: absolute;
  bottom: 14px;
  left: -31px;
  width: 18.133vw;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}
@media (min-width: 768px) {
  .info-section .info-box-img-01 {
    max-width: 12vw;
  }
}
@media (min-width: 992px) {
  .info-section .info-box-img-01 {
    max-width: 107px;
  }
}
.info-section .info-box-img-02 {
  position: absolute;
  bottom: 0px;
  right: -60px;
  width: 29.6vw;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}
@media (min-width: 768px) {
  .info-section .info-box-img-02 {
    right: -106px;
    max-width: 20vw;
  }
}
@media (min-width: 992px) {
  .info-section .info-box-img-02 {
    right: -137px;
    max-width: 202px;
  }
}
.info-section .btn-primary {
  max-width: 45.067vw;
  height: auto;
  aspect-ratio: 288/82;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../images/btn_primary.png");
}
.info-section .btn-primary:hover, .info-section .btn-primary:active {
  background-image: url("../images/btn_primary_acitve.png");
}
@media (min-width: 768px) {
  .info-section .btn-primary {
    max-width: 23.438vw;
  }
}
@media (min-width: 992px) {
  .info-section .btn-primary {
    max-width: 288px;
  }
}

.info-2-section {
  width: 100%;
  position: relative;
  background-color: #FFEEA4;
}
.info-2-section--bg-top {
  content: "";
  position: absolute;
  width: 100%;
  height: 163px;
  top: 0px;
  left: 0px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  background-image: url("../images/img_section_2_bg_top_m.svg");
  z-index: 0;
}
@media (min-width: 768px) {
  .info-2-section--bg-top {
    background-image: url("../images/img_section_2_bg_top.svg");
  }
}
@media (min-width: 1920px) {
  .info-2-section--bg-top {
    background-size: cover;
  }
}
.info-2-section--bg-bottom {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 153px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  background-image: url("../images/img_section_3_bg_top_m.svg");
  z-index: 15;
}
@media (min-width: 768px) {
  .info-2-section--bg-bottom {
    background-image: url("../images/img_section_3_bg_top.svg");
  }
}
@media (min-width: 1680px) {
  .info-2-section--bg-bottom {
    height: 120px;
    background-position: center top;
    background-size: cover;
  }
}
.info-2-section .info-2-container {
  position: relative;
  width: auto;
  max-width: 529px;
  color: #fff;
  margin: auto;
  z-index: 10;
}
@media (min-width: 768px) {
  .info-2-section .info-2-container {
    max-width: 827px;
  }
}
.info-2-section .info-2-container .info-2-container--bg-left {
  position: absolute;
}
@media (min-width: 768px) {
  .info-2-section .info-2-container .info-2-container--bg-left {
    left: -184px;
    bottom: 300px;
  }
}
@media (min-width: 992px) {
  .info-2-section .info-2-container .info-2-container--bg-left {
    left: -254px;
  }
}
.info-2-section .info-2-container .info-2-container--bg-right {
  position: absolute;
}
@media (min-width: 768px) {
  .info-2-section .info-2-container .info-2-container--bg-right {
    right: -204px;
    bottom: 260px;
  }
}
@media (min-width: 992px) {
  .info-2-section .info-2-container .info-2-container--bg-right {
    right: -324px;
  }
}
.info-2-section .info-2-container .img-section-2-bg-left {
  width: 200px;
}
@media (min-width: 992px) {
  .info-2-section .info-2-container .img-section-2-bg-left {
    width: auto;
  }
}
.info-2-section .info-2-container .img-section-2-bg-right {
  width: 220px;
}
@media (min-width: 992px) {
  .info-2-section .info-2-container .img-section-2-bg-right {
    width: auto;
  }
}
.info-2-section .info-2-container--top {
  width: 100%;
}
@media (min-width: 768px) {
  .info-2-section .info-2-container--top {
    width: calc(100% + 75px);
    margin-left: -37px;
  }
}
@media (min-width: 992px) {
  .info-2-section .info-2-container--top {
    width: -webkit-max-content;
    width: max-content;
    margin-left: -66px;
  }
}
.info-2-section .info-2-container--body {
  width: 91.4vw;
  margin-left: 4.4vw;
  background-color: #fff;
}
@media (min-width: 528px) {
  .info-2-section .info-2-container--body {
    width: 484px;
    margin-left: 23px;
  }
}
@media (min-width: 768px) {
  .info-2-section .info-2-container--body {
    width: calc(100% - 46px);
    margin-left: 3%;
  }
}
@media (min-width: 992px) {
  .info-2-section .info-2-container--body {
    width: auto;
    margin-left: auto;
  }
}
.info-2-section .info-2-container--bottom {
  margin-left: 0px;
}
@media (min-width: 768px) {
  .info-2-section .info-2-container--bottom {
    width: calc(100% + 72px);
    margin-left: -35px;
  }
}
@media (min-width: 992px) {
  .info-2-section .info-2-container--bottom {
    margin-left: -64px;
    width: 952px;
  }
}
.info-2-section .info-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 10px;
  background-color: #FFF5C7;
}
.info-2-section .info-box--image {
  margin-top: -15px;
}
@media (min-width: 768px) {
  .info-2-section .info-box--image {
    margin-top: -30px;
  }
}
.info-2-section .btn-more {
  display: block;
  width: 100%;
  height: 65px;
  aspect-ratio: 227/65;
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../images/btn_more.png");
}
.info-2-section .btn-more:hover, .info-2-section .btn-more:active {
  background-image: url("../images/btn_more_active.png");
}
@media (min-width: 768px) {
  .info-2-section .btn-more {
    max-width: 180px;
  }
}
@media (min-width: 992px) {
  .info-2-section .btn-more {
    max-width: 288px;
  }
}

.info-3-section {
  width: 100%;
  position: relative;
  background-color: #fff;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 730px auto;
  background-image: url("../images/img_section_3_bg_city.png");
}
@media (min-width: 992px) {
  .info-3-section {
    padding-bottom: 200px;
    background-size: contain;
  }
}
.info-3-section::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 163px;
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../images/img_section_3_bg_bottom.svg");
}
@media (min-width: 1920px) {
  .info-3-section::before {
    background-position: center top;
    background-size: cover;
  }
}

.info-3-container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 360px;
  width: 90vw;
  margin: auto;
  font-size: 16px;
}
@media (min-width: 768px) {
  .info-3-container {
    width: 627px;
  }
}
@media (min-width: 992px) {
  .info-3-container {
    font-size: 24px;
    width: 978px;
  }
}
.info-3-container .info-3-container--top {
  height: auto;
  width: 100%;
  aspect-ratio: 72/16.5;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("../images/img_section_3_bg_m_1.png");
}
@media (min-width: 768px) {
  .info-3-container .info-3-container--top {
    font-size: 15px;
    height: 136px;
    background-image: url("../images/img_section_3_bg_p_1.png");
  }
}
@media (min-width: 992px) {
  .info-3-container .info-3-container--top {
    font-size: 24px;
    height: 232px;
    background-image: url("../images/img_section_3_bg_1.png");
  }
}
.info-3-container .info-3-container--body {
  background-repeat: repeat;
  background-size: contain;
  background-image: url("../images/img_section_3_bg_m_2.png");
}
@media (min-width: 768px) {
  .info-3-container .info-3-container--body {
    background-image: url("../images/img_section_3_bg_p_2.png");
  }
}
@media (min-width: 992px) {
  .info-3-container .info-3-container--body {
    background-image: url("../images/img_section_3_bg_2.png");
  }
}
.info-3-container .info-3-container--body--prefix {
  margin-top: -88px;
}
@media (min-width: 768px) {
  .info-3-container .info-3-container--body--prefix {
    margin-top: -140px;
  }
}
@media (min-width: 992px) {
  .info-3-container .info-3-container--body--prefix {
    margin-top: -190px;
  }
}
.info-3-container .info-3-container--footer {
  height: 34px;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-image: url("../images/img_section_3_bg_m_3.png");
}
@media (min-width: 768px) {
  .info-3-container .info-3-container--footer {
    height: 55px;
    background-image: url("../images/img_section_3_bg_p_3.png");
  }
}
@media (min-width: 992px) {
  .info-3-container .info-3-container--footer {
    background-image: url("../images/img_section_3_bg_3.png");
  }
}
.info-3-container .row {
  margin-left: 0;
}
.info-3-container .row .col-left, .info-3-container .row .col-right {
  width: 100%;
}
@media (min-width: 768px) {
  .info-3-container .row {
    margin-left: -18px;
  }
  .info-3-container .row .col-left {
    width: 166px;
  }
  .info-3-container .row .col-right {
    width: calc(100% - 166px);
  }
}
@media (min-width: 992px) {
  .info-3-container .row {
    margin-left: -28px;
  }
  .info-3-container .row .col-left {
    width: 270px;
  }
  .info-3-container .row .col-right {
    width: calc(100% - 270px);
  }
}
.info-3-container .row .col-right-text {
  display: inline-block;
  min-width: 75px;
  text-align: start;
}
.info-3-container .row .col-right-text--span {
  display: inline-block;
  width: 73px;
}
@media (min-width: 992px) {
  .info-3-container .row .col-right-text--span {
    width: 105px;
  }
}
.info-3-container .row .font-small {
  color: #565656;
  font-size: 14px;
}
@media (min-width: 992px) {
  .info-3-container .row .font-small {
    font-size: 20px;
  }
}
.info-3-container hr {
  border-top: 1px solid #9E9E9E;
}
.info-3-container .info-3-container--child {
  position: absolute;
  bottom: -115px;
  right: -68px;
}
.info-3-container .info-3-container--child .img-section-3-1 {
  width: 120px;
}
@media (min-width: 992px) {
  .info-3-container .info-3-container--child .img-section-3-1 {
    right: -122px;
    width: auto;
  }
}
.info-3-container .img-title-1 {
  width: 61px;
}
@media (min-width: 768px) {
  .info-3-container .img-title-1 {
    width: 110px;
  }
}
@media (min-width: 992px) {
  .info-3-container .img-title-1 {
    width: auto;
  }
}
.info-3-container .img-title-2 {
  width: 254px;
}
@media (min-width: 768px) {
  .info-3-container .img-title-2 {
    width: 282px;
  }
}
@media (min-width: 992px) {
  .info-3-container .img-title-2 {
    width: auto;
  }
}
.info-3-container .img-title-3 {
  width: 304px;
}
@media (min-width: 768px) {
  .info-3-container .img-title-3 {
    width: 395px;
  }
}
@media (min-width: 992px) {
  .info-3-container .img-title-3 {
    width: auto;
  }
}

.campaign-section .is-active .info-title-img-dropdown {
  transform: rotate(180deg);
}
.campaign-section .info-title-img {
  cursor: pointer;
  width: 141px;
}
@media (min-width: 768px) {
  .campaign-section .info-title-img {
    width: 170px;
  }
}
@media (min-width: 992px) {
  .campaign-section .info-title-img {
    width: auto;
  }
}
.campaign-section .info-title-img-dropdown {
  cursor: pointer;
  width: 30px;
  margin-top: 16px;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
@media (min-width: 992px) {
  .campaign-section .info-title-img-dropdown {
    width: auto;
    margin-top: 30px;
  }
}
.campaign-section .font-warning {
  font-size: 14px;
}
@media (min-width: 768px) {
  .campaign-section .font-warning {
    font-size: 26px;
  }
}

.footer {
  display: flex;
  align-items: center;
  font-size: 13px;
  background-color: #FFB31A;
  height: auto;
  padding: 4px 0px;
}
@media (min-width: 768px) {
  .footer {
    height: 67px;
  }
}
@media (min-width: 992px) {
  .footer {
    font-size: 20px;
    height: 105px;
  }
}
/*# sourceMappingURL=app.css.map */