#logo_area {
  position: absolute;
  z-index: 1;
  width: 100%;
  max-width: none;
}
.main_banner_section {
  height: auto;
}
#wrap {
  position: relative;
}
.anniversary {
  position: absolute;
  right: 133px;
  top: 0px;
  text-align: right;
}
.anniversary img {
  height: 57px;
}
@media (max-width: 768px) {
  .anniversary {
    right: 115px;
    top: 0px;
  }
  .anniversary img {
    height: 36px;
  }
  .HSB_logo {
    height: 60px;
    width: 297px;
    background-position: top 0 left 0;
  }
  .HSB_logo img {
    height: 48px;
  }
}

body {
  background: #d7e5db;
  color: #606264;
  font-size: 1.5rem;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.eng,
.eng p {
  color: #4f4c4c;
}
body.eng,
.eng h1,
.eng h2,
.eng h3,
.eng h4,
.eng h5,
.eng p {
}
body.chi,
.chi h1,
.chi h2,
.chi h3,
.chi h4,
.chi h5,
.chi p {
}
body.schi,
.schi h1,
.schi h2,
.schi h3,
.schi h4,
.schi h5,
.schi p {
}
.schi .symbol {
}
p {
  font-size: 1.5rem;
  line-height: 1.8;
  font-weight: 400;
}

.text-left {
  text-align: left;
}
.text-white {
  color: #ffffff !important;
}
#app {
  overflow-y: hidden;
}
.title {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 1280px;
  max-width: 100%;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
.title .title-img {
  height: 40px;
  width: 320px;
  margin: 0 1rem 0 1rem;
}
.eng .title .title-img {
  height: 30px;
  width: 100%;
  margin: 0 1rem 0 1rem;
}
.hr-left,
.hr-right {
  width: 900px;
  height: 2px;
}
.light-green {
  color: #a6ce39;
}
.dark-green {
  color: #155545;
}
.dark-grey {
  color: #4f4f5a;
}
.bold {
  font-weight: bold;
}
.big {
  font-size: 1.75rem;
  letter-spacing: 1px;
}
.bigger {
  font-size: 2rem;
  letter-spacing: 1px;
}
.biggest {
  font-size: 3rem;
  letter-spacing: 1px;
}
.smaller {
  font-size: smaller;
}
.larger {
  font-size: larger;
}
.tnc-ul a {
  color: #4f4c4c;
  text-decoration: underline;
}
.tnc-ul a:hover {
  opacity: 0.7;
}
#landing {
  height: 100%;
  max-height: 850px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
}
#landing.chi {
  background-image: url(../images/hase_p17_landing_c.jpg);
}
#landing.schi {
  background-image: url(../images/hase_p17_landing_s.jpg);
}
#landing.eng {
  background-image: url(../images/hase_p17_landing_e.jpg);
}
#promo-icon {
  max-width: 300px;
  height: 300px;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.top-container {
  display: flex !important;
  justify-content: flex-end;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
.top-container .top-terms {
  color: #4f4c4c;
  width: 100%;
  max-height: max-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  justify-items: auto;
  align-self: flex-end;
  padding: 15px 15px;
  background: rgba(255, 255, 255, 0.5);
}
.top-container .top-terms p {
  display: block;
  font-size: 0.95rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.top-container .top-terms p span {
  font-size: 1.1rem;
}
#intro-section,
#swipe-section .container,
#promo-section .container {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2rem;
  text-align: center;
}
.eng #promo-section .content p {
}
#promo-section .content-grid {
  display: flex;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
  flex-direction: column;
}
#promo-section .left,
#promo-section .right {
  width: 100%;
  text-align: center;
  align-content: center;
}
#swipe-section {
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#swipe-section .terms {
  transform: scale(1.1);
}
.main {
  background-image: url(./promo-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center left;
  position: relative;
  z-index: 0;
}
#tnc-section {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2rem;
  padding-bottom: 4rem;
}
#tnc-section p,
#tnc-section ol {
  font-size: 1rem;
}
#tnc-section ol {
  margin-left: 1.1rem;
}
.intro img {
  width: 100%;
  max-width: 480px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.intro p {
  margin-left: auto;
  margin-right: auto;
  max-width: 750px;
  text-align: center;
  font-weight: 400;

  transform: scale(1.1);
}
.intro p span {
  font-weight: bold;
  color: #46b54c;
}
.more-button {
  width: fit-content;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
}
.more-button img {
  max-width: 400px;
}
a.btn-link {
  position: relative;
}
.click-btn {
  margin-left: auto;
  margin-right: auto;
  background: #46b54c;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  height: 4.5rem;
  width: 300px;
  display: flex;
  position: relative;
  left: -0.5rem;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 10px;
  transition-duration: 0.8s;
  transition-property: background-color;
}
.click-btn::after {
  content: "";
  height: 4.5rem;
  width: 300px;
  margin-top: 1.5rem;
  margin-left: 1.5rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 10px;
  background: #155541;
  position: absolute;
  z-index: -1;
  transition-duration: 0.8s;
  transition-property: background-color;
}
.click-btn span {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.eng .click-btn {
  font-size: 1.25rem;
  line-height: 1.1;
  text-align: left;
}
.click-btn svg {
  max-width: 35px;
}
.click-btn svg {
  margin-left: 1rem;
}
a.btn-link:hover > .click-btn {
  background: #155541;
}
a.btn-link:hover > .click-btn::after {
  background: #46b54c;
}
a.btn-link:hover > .click-btn svg#icon-readmore g path {
  stroke: #46b54c !important;
}
a.btn-link:hover > .click-btn svg#icon-meeting g path {
  stroke: #46b54c !important;
}
a.btn-link:hover > .click-btn svg#icon-callus g path {
  stroke: #46b54c !important;
}
.desktop-special {
  width: 1280px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  margin-top: 5rem;
  margin-bottom: 5rem;
  justify-content: center;
  justify-content: space-between;
}
.desktop-special .item {
  background: url(./swipe-bg.svg);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
  display: flex;
  justify-content: center;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  margin: 0.15rem;
  transition-duration: 0.8s;
  transition-property: all;
}
.desktop-special .item .content .icon {
  max-width: 80px;
}
.desktop-special .item .details {
  display: none;
}
.desktop-special .item:hover {
  opacity: 1;
  transform: scale(1.8) !important;
  z-index: 11;
  justify-content: center;
}
.item-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item-container .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.item-container .content .top {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 1.5rem;
}
.eng .item-container .content .top {
  margin-top: 1.35rem;
  margin-bottom: 0.75rem;
}
.item-container .content .top h3 {
  text-align: center;
  position: relative;
  z-index: 10;
  width: fit-content;
  font-size: 1.2rem;
  padding: 0 5px 0 5px;
  color: #ffffff;
}
.eng .item-container .content .top h3 {
  font-size: 0.9rem;
  line-height: 1;
}
.desktop-special .item:hover {
  background: none;
}
.desktop-special .item:hover > .item-container {
  display: none;
}
.desktop-special .item:hover > .details {
  display: flex;
}
.mobile-swiper {
  margin-top: 1rem;
  margin-bottom: 2rem;
  max-width: 550px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.swiper-button {
  display: flex;
  max-width: 90%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: -50%;
  margin-bottom: 50%;
}
.swiper-button-prev {
  background-image: url(./swipe-left.png) !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.swiper-button-next {
  background-image: url(./swipe-right.png) !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  content: none !important;
}
.swiper-pagination {
  position: relative;
  padding-top: 2rem;
}
.swiper-pagination-bullet-active {
  background: #46b54c;
}
.swiper-pagination-bullet {
  width: var(
    --swiper-pagination-bullet-width,
    var(--swiper-pagination-bullet-size, 15px)
  );
  height: var(
    --swiper-pagination-bullet-height,
    var(--swiper-pagination-bullet-size, 15px)
  );
  background: var(--swiper-pagination-bullet-inactive-color, #46b54c);
}
.desktop-call-us {
  color: #155545;
  font-weight: bold;
  display: flex;
  width: 300px;
  height: 3rem;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
  cursor: default;
}
.desktop-call-us svg {
  max-width: 35px;
  margin-right: 0.5rem;
}
.desktop-call-us:hover {
  pointer-events: none;
  cursor: default;
}
@media (max-width: 431px) {
  .intro p,
  #swipe-section .terms {
    transform: scale(1);
  }
  .sm-visible {
    display: none;
  }
}
@media (max-width: 768px) {
  #landing.chi,
  #landing.schi,
  #landing.eng {
    background-size: cover;
    background-position: center right;
    background-image: url(../images/hase_p17_landing.jpg);
  }
  .small-visible {
    display: block;
  }
  p {
    font-size: 1.75rem;
    line-height: 1.5;
  }
  .eng #promo-section .content p {
    line-height: 1.5;
  }
  .smaller {
    font-size: 1.5rem;
  }
  .smaller.eng {
    font-size: 1rem;
  }
  .bigger {
    font-size: 2rem;
    letter-spacing: 1px;
  }
  .biggest {
    font-size: 2.25rem;
    letter-spacing: 1px;
    line-height: 1;
  }
  #intro-section,
  #swipe-section,
  #promo-section .container {
    max-width: 90%;
  }
  #swipe-section {
    padding-top: 0rem;
  }
  #promo-section .container {
    padding-top: 1rem;
  }

  #promo-icon {
    margin-top: 1rem;
    height: 250px;
  }
  #tnc-section p {
    font-size: 0.6rem;
  }
  #tnc-section ol {
    font-size: 0.6rem;
    margin-left: 0.7rem;
  }
}
@media (min-width: 1025px) {
  .mobile-only,
  .sm-visible {
    display: none;
  }
  .desktop-call-us {
    display: flex;
  }
  #swipe-section .content p.terms {
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
  }
}
@media (min-width: 1099px) {
  .mobile-swiper {
    display: none;
  }
}
@media (max-width: 1099px) {
  .mobile-swiper {
    display: block;
  }
  .desktop-special {
    display: none;
  }
}
@media (max-width: 1024px) {
  #intro-section,
  #swipe-section,
  #promo-section .container {
    max-width: 90%;
  }
  .desktop-call-us {
    display: none;
  }
}
@media (min-width: 1200px) {
  .desktop-special .item {
    margin: 0.5rem;
    transform: scale(1.1);
  }
  #landing {
    height: 850px;
    background-position: center;
  }
  #landing .landing-img {
    display: none;
  }
}
@media (min-width: 1600px) {
}
@media (min-width: 1920px) {
}