@charset "UTF-8";
#hero {
  overflow: hidden;
  padding: 12rem 1.6rem 4rem;
  background: #fff url(../images/top/hero_bg.jpg) bottom center/cover no-repeat;
  filter: drop-shadow(0 0.4rem 0.4rem rgba(0, 0, 0, 0.25));
}
@media screen and (min-width: 768px) {
  #hero {
    padding: 17rem 1.6rem 0;
    background-image: url(../images/top/hero_bg_pc.jpg);
  }
}
#hero .hero_content {
  max-width: 124rem;
  margin-left: auto;
  margin-right: auto;
}
#hero .hero_content h1 {
  background-color: #00a08e;
  text-align: center;
  position: relative;
  font-weight: 900;
  border-radius: 1.8rem;
  padding: 1.5rem 0 1rem;
}
@media screen and (min-width: 768px) {
  #hero .hero_content h1 {
    border-radius: 2.4rem;
  }
}
#hero .hero_content h1 > span {
  display: block;
  color: #fff;
  font-size: 1.6rem;
  letter-spacing: 0.15em;
}
@media screen and (min-width: 768px) {
  #hero .hero_content h1 > span {
    font-size: 3.6rem;
  }
}
#hero .hero_content h1 > strong {
  display: block;
  color: #fabf01;
  font-size: 2.4rem;
  position: relative;
  line-height: 1.5;
  letter-spacing: 0.15em;
}
@media screen and (min-width: 768px) {
  #hero .hero_content h1 > strong {
    letter-spacing: 0.1em;
    font-size: 9rem;
  }
}
#hero .hero_content h1 > strong:before {
  content: attr(data-text);
  color: #fff;
}
@media screen and (max-width: 767px) {
  #hero .hero_content h1 > strong:before {
    text-shadow: -4px -1px 0 #fff, -4px 0px 0 #fff, -4px 1px 0 #fff, -3px -3px 0 #fff, -3px -2px 0 #fff, -3px -1px 0 #fff, -3px 0px 0 #fff, -3px 1px 0 #fff, -3px 2px 0 #fff, -3px 3px 0 #fff, -2px -3px 0 #fff, -2px -2px 0 #fff, -2px -1px 0 #fff, -2px 0px 0 #fff, -2px 1px 0 #fff, -2px 2px 0 #fff, -2px 3px 0 #fff, -1px -4px 0 #fff, -1px -3px 0 #fff, -1px -2px 0 #fff, -1px -1px 0 #fff, -1px 0px 0 #fff, -1px 1px 0 #fff, -1px 2px 0 #fff, -1px 3px 0 #fff, -1px 4px 0 #fff, 0px -4px 0 #fff, 0px -3px 0 #fff, 0px -2px 0 #fff, 0px -1px 0 #fff, 0px 0px 0 #fff, 0px 1px 0 #fff, 0px 2px 0 #fff, 0px 3px 0 #fff, 0px 4px 0 #fff, 1px -4px 0 #fff, 1px -3px 0 #fff, 1px -2px 0 #fff, 1px -1px 0 #fff, 1px 0px 0 #fff, 1px 1px 0 #fff, 1px 2px 0 #fff, 1px 3px 0 #fff, 1px 4px 0 #fff, 2px -3px 0 #fff, 2px -2px 0 #fff, 2px -1px 0 #fff, 2px 0px 0 #fff, 2px 1px 0 #fff, 2px 2px 0 #fff, 2px 3px 0 #fff, 3px -3px 0 #fff, 3px -2px 0 #fff, 3px -1px 0 #fff, 3px 0px 0 #fff, 3px 1px 0 #fff, 3px 2px 0 #fff, 3px 3px 0 #fff, 4px -1px 0 #fff, 4px 0px 0 #fff, 4px 1px 0 #fff;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero_content h1 > strong:before {
    text-shadow: -8px -1px 0 #fff, -8px 0px 0 #fff, -8px 1px 0 #fff, -7px -4px 0 #fff, -7px -3px 0 #fff, -7px -2px 0 #fff, -7px -1px 0 #fff, -7px 0px 0 #fff, -7px 1px 0 #fff, -7px 2px 0 #fff, -7px 3px 0 #fff, -7px 4px 0 #fff, -6px -5px 0 #fff, -6px -4px 0 #fff, -6px -3px 0 #fff, -6px -2px 0 #fff, -6px -1px 0 #fff, -6px 0px 0 #fff, -6px 1px 0 #fff, -6px 2px 0 #fff, -6px 3px 0 #fff, -6px 4px 0 #fff, -6px 5px 0 #fff, -5px -6px 0 #fff, -5px -5px 0 #fff, -5px -4px 0 #fff, -5px -3px 0 #fff, -5px -2px 0 #fff, -5px -1px 0 #fff, -5px 0px 0 #fff, -5px 1px 0 #fff, -5px 2px 0 #fff, -5px 3px 0 #fff, -5px 4px 0 #fff, -5px 5px 0 #fff, -5px 6px 0 #fff, -4px -7px 0 #fff, -4px -6px 0 #fff, -4px -5px 0 #fff, -4px -4px 0 #fff, -4px -3px 0 #fff, -4px -2px 0 #fff, -4px -1px 0 #fff, -4px 0px 0 #fff, -4px 1px 0 #fff, -4px 2px 0 #fff, -4px 3px 0 #fff, -4px 4px 0 #fff, -4px 5px 0 #fff, -4px 6px 0 #fff, -4px 7px 0 #fff, -3px -7px 0 #fff, -3px -6px 0 #fff, -3px -5px 0 #fff, -3px -4px 0 #fff, -3px -3px 0 #fff, -3px -2px 0 #fff, -3px -1px 0 #fff, -3px 0px 0 #fff, -3px 1px 0 #fff, -3px 2px 0 #fff, -3px 3px 0 #fff, -3px 4px 0 #fff, -3px 5px 0 #fff, -3px 6px 0 #fff, -3px 7px 0 #fff, -2px -7px 0 #fff, -2px -6px 0 #fff, -2px -5px 0 #fff, -2px -4px 0 #fff, -2px -3px 0 #fff, -2px -2px 0 #fff, -2px -1px 0 #fff, -2px 0px 0 #fff, -2px 1px 0 #fff, -2px 2px 0 #fff, -2px 3px 0 #fff, -2px 4px 0 #fff, -2px 5px 0 #fff, -2px 6px 0 #fff, -2px 7px 0 #fff, -1px -8px 0 #fff, -1px -7px 0 #fff, -1px -6px 0 #fff, -1px -5px 0 #fff, -1px -4px 0 #fff, -1px -3px 0 #fff, -1px -2px 0 #fff, -1px -1px 0 #fff, -1px 0px 0 #fff, -1px 1px 0 #fff, -1px 2px 0 #fff, -1px 3px 0 #fff, -1px 4px 0 #fff, -1px 5px 0 #fff, -1px 6px 0 #fff, -1px 7px 0 #fff, -1px 8px 0 #fff, 0px -8px 0 #fff, 0px -7px 0 #fff, 0px -6px 0 #fff, 0px -5px 0 #fff, 0px -4px 0 #fff, 0px -3px 0 #fff, 0px -2px 0 #fff, 0px -1px 0 #fff, 0px 0px 0 #fff, 0px 1px 0 #fff, 0px 2px 0 #fff, 0px 3px 0 #fff, 0px 4px 0 #fff, 0px 5px 0 #fff, 0px 6px 0 #fff, 0px 7px 0 #fff, 0px 8px 0 #fff, 1px -8px 0 #fff, 1px -7px 0 #fff, 1px -6px 0 #fff, 1px -5px 0 #fff, 1px -4px 0 #fff, 1px -3px 0 #fff, 1px -2px 0 #fff, 1px -1px 0 #fff, 1px 0px 0 #fff, 1px 1px 0 #fff, 1px 2px 0 #fff, 1px 3px 0 #fff, 1px 4px 0 #fff, 1px 5px 0 #fff, 1px 6px 0 #fff, 1px 7px 0 #fff, 1px 8px 0 #fff, 2px -7px 0 #fff, 2px -6px 0 #fff, 2px -5px 0 #fff, 2px -4px 0 #fff, 2px -3px 0 #fff, 2px -2px 0 #fff, 2px -1px 0 #fff, 2px 0px 0 #fff, 2px 1px 0 #fff, 2px 2px 0 #fff, 2px 3px 0 #fff, 2px 4px 0 #fff, 2px 5px 0 #fff, 2px 6px 0 #fff, 2px 7px 0 #fff, 3px -7px 0 #fff, 3px -6px 0 #fff, 3px -5px 0 #fff, 3px -4px 0 #fff, 3px -3px 0 #fff, 3px -2px 0 #fff, 3px -1px 0 #fff, 3px 0px 0 #fff, 3px 1px 0 #fff, 3px 2px 0 #fff, 3px 3px 0 #fff, 3px 4px 0 #fff, 3px 5px 0 #fff, 3px 6px 0 #fff, 3px 7px 0 #fff, 4px -7px 0 #fff, 4px -6px 0 #fff, 4px -5px 0 #fff, 4px -4px 0 #fff, 4px -3px 0 #fff, 4px -2px 0 #fff, 4px -1px 0 #fff, 4px 0px 0 #fff, 4px 1px 0 #fff, 4px 2px 0 #fff, 4px 3px 0 #fff, 4px 4px 0 #fff, 4px 5px 0 #fff, 4px 6px 0 #fff, 4px 7px 0 #fff, 5px -6px 0 #fff, 5px -5px 0 #fff, 5px -4px 0 #fff, 5px -3px 0 #fff, 5px -2px 0 #fff, 5px -1px 0 #fff, 5px 0px 0 #fff, 5px 1px 0 #fff, 5px 2px 0 #fff, 5px 3px 0 #fff, 5px 4px 0 #fff, 5px 5px 0 #fff, 5px 6px 0 #fff, 6px -5px 0 #fff, 6px -4px 0 #fff, 6px -3px 0 #fff, 6px -2px 0 #fff, 6px -1px 0 #fff, 6px 0px 0 #fff, 6px 1px 0 #fff, 6px 2px 0 #fff, 6px 3px 0 #fff, 6px 4px 0 #fff, 6px 5px 0 #fff, 7px -4px 0 #fff, 7px -3px 0 #fff, 7px -2px 0 #fff, 7px -1px 0 #fff, 7px 0px 0 #fff, 7px 1px 0 #fff, 7px 2px 0 #fff, 7px 3px 0 #fff, 7px 4px 0 #fff, 8px -1px 0 #fff, 8px 0px 0 #fff, 8px 1px 0 #fff;
  }
}
#hero .hero_content h1 > strong span {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  #hero .hero_content h1 > strong span {
    text-shadow: -2px -1px 0 #00a08e, -2px 0px 0 #00a08e, -2px 1px 0 #00a08e, -1px -2px 0 #00a08e, -1px -1px 0 #00a08e, -1px 0px 0 #00a08e, -1px 1px 0 #00a08e, -1px 2px 0 #00a08e, 0px -2px 0 #00a08e, 0px -1px 0 #00a08e, 0px 0px 0 #00a08e, 0px 1px 0 #00a08e, 0px 2px 0 #00a08e, 1px -2px 0 #00a08e, 1px -1px 0 #00a08e, 1px 0px 0 #00a08e, 1px 1px 0 #00a08e, 1px 2px 0 #00a08e, 2px -1px 0 #00a08e, 2px 0px 0 #00a08e, 2px 1px 0 #00a08e;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero_content h1 > strong span {
    text-shadow: -3px -1px 0 #00a08e, -3px 0px 0 #00a08e, -3px 1px 0 #00a08e, -2px -2px 0 #00a08e, -2px -1px 0 #00a08e, -2px 0px 0 #00a08e, -2px 1px 0 #00a08e, -2px 2px 0 #00a08e, -1px -3px 0 #00a08e, -1px -2px 0 #00a08e, -1px -1px 0 #00a08e, -1px 0px 0 #00a08e, -1px 1px 0 #00a08e, -1px 2px 0 #00a08e, -1px 3px 0 #00a08e, 0px -3px 0 #00a08e, 0px -2px 0 #00a08e, 0px -1px 0 #00a08e, 0px 0px 0 #00a08e, 0px 1px 0 #00a08e, 0px 2px 0 #00a08e, 0px 3px 0 #00a08e, 1px -3px 0 #00a08e, 1px -2px 0 #00a08e, 1px -1px 0 #00a08e, 1px 0px 0 #00a08e, 1px 1px 0 #00a08e, 1px 2px 0 #00a08e, 1px 3px 0 #00a08e, 2px -2px 0 #00a08e, 2px -1px 0 #00a08e, 2px 0px 0 #00a08e, 2px 1px 0 #00a08e, 2px 2px 0 #00a08e, 3px -1px 0 #00a08e, 3px 0px 0 #00a08e, 3px 1px 0 #00a08e;
  }
}
#hero .hero_content h1 .label {
  position: absolute;
  display: flex;
  aspect-ratio: 40/10;
  background: url(../images/top/hero_label.png) center/contain no-repeat;
  top: 0;
  left: 0;
  transform: translateX(-1rem) translateY(-70%) rotate(-5deg);
  letter-spacing: 0.2em;
  align-items: center;
  justify-content: center;
  color: #00a08e;
  font-weight: 900;
  font-size: 1.4rem;
  filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.5));
  width: 23rem;
}
@media screen and (min-width: 768px) {
  #hero .hero_content h1 .label {
    transform: translateX(-20%) translateY(-20%) rotate(-5deg);
    width: 41rem;
    font-size: 3.2rem;
    letter-spacing: 0.15em;
    filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.5));
  }
}
@media screen and (min-width: 768px) {
  #hero .hero_content .talk {
    display: flex;
    justify-content: space-between;
    margin-top: 21rem;
  }
}
#hero .hero_content .talk .char {
  display: block;
  background: center/contain no-repeat;
  position: relative;
}
@media screen and (max-width: 767px) {
  #hero .hero_content .talk .char {
    height: 15rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero_content .talk .char {
    height: 33rem;
  }
}
#hero .hero_content .talk .char::before {
  content: "";
  position: absolute;
  display: block;
  animation: blink-twice 4s infinite;
}
#hero .hero_content .talk .char-1 {
  background-image: url(../images/top/hero_char1.png);
}
@media screen and (max-width: 767px) {
  #hero .hero_content .talk .char-1 {
    width: 30rem;
    margin-top: 9rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero_content .talk .char-1 {
    width: 27rem;
    margin-left: 2rem;
  }
}
#hero .hero_content .talk .char-1::before {
  aspect-ratio: 1;
  background: url(../images/top/hero_char1-line.png) center/contain no-repeat;
  width: 3rem;
  top: 0;
  left: 50%;
  transform: translateY(2rem) translateX(4rem);
}
@media screen and (min-width: 768px) {
  #hero .hero_content .talk .char-1::before {
    width: 6.2rem;
    transform: translateY(6rem) translateX(10rem);
  }
}
@keyframes blink-twice {
  0%, 100% {
    opacity: 1;
  }
  5%, 15% {
    opacity: 0;
  }
  10%, 20% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
}
#hero .hero_content .talk .char-2 {
  background-image: url(../images/top/hero_char2.png);
  margin-left: auto;
  margin-right: 0;
}
@media screen and (max-width: 767px) {
  #hero .hero_content .talk .char-2 {
    width: 28rem;
    margin-top: 5rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero_content .talk .char-2 {
    width: 27rem;
    margin-right: 5rem;
  }
}
#hero .hero_content .talk .char-2::before {
  aspect-ratio: 76/106;
  background: url(../images/top/hero_char2-line.png) center/contain no-repeat;
  width: 3rem;
  top: 0;
  left: 50%;
  transform: translateY(2rem) translateX(4rem);
  animation-delay: 300ms;
}
@media screen and (min-width: 768px) {
  #hero .hero_content .talk .char-2::before {
    width: 7.6rem;
    transform: translateY(3rem) translateX(10rem);
  }
}
#hero .hero_content .talk .char .talk-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  font-weight: 900;
  line-height: 1.5;
  color: #00a08e;
  text-align: center;
  font-size: 1.6rem;
  transform: translateY(-80%);
  transition: 0.3s;
}
@media screen and (min-width: 768px) {
  #hero .hero_content .talk .char .talk-box {
    font-size: 3rem;
  }
}
@media screen and (min-width: 1350px) {
  #hero .hero_content .talk .char .talk-box {
    font-size: 3.6rem;
  }
}
#hero .hero_content .talk .char .talk-box-11 {
  z-index: 2;
  aspect-ratio: 375/200;
  background: url(../images/top/talk-box-11.png) bottom center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  #hero .hero_content .talk .char .talk-box-11 {
    width: 17.5rem;
    padding-bottom: 2rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero_content .talk .char .talk-box-11 {
    width: 30rem;
    left: -6rem;
    top: -2rem;
    padding-bottom: 3rem;
  }
}
@media screen and (min-width: 1350px) {
  #hero .hero_content .talk .char .talk-box-11 {
    left: -15rem;
    width: 37.5rem;
  }
}
#hero .hero_content .talk .char .talk-box-12 {
  aspect-ratio: 36/17;
  background: url(../images/top/talk-box-12.png) bottom center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  #hero .hero_content .talk .char .talk-box-12 {
    width: 16.5rem;
    left: 15rem;
    padding-bottom: 1.5rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero_content .talk .char .talk-box-12 {
    width: 30rem;
    left: 18rem;
    top: 2rem;
    padding-bottom: 3rem;
  }
}
@media screen and (min-width: 1350px) {
  #hero .hero_content .talk .char .talk-box-12 {
    width: 36rem;
  }
}
#hero .hero_content .talk .char .talk-box-21 {
  aspect-ratio: 175/71;
  background: url(../images/top/talk-box-21.png) bottom center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  #hero .hero_content .talk .char .talk-box-21 {
    width: 17.5rem;
    left: -4rem;
    padding-bottom: 1rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero_content .talk .char .talk-box-21 {
    width: 32rem;
    left: -30rem;
    top: 3rem;
    padding-bottom: 1rem;
  }
}
@media screen and (min-width: 1350px) {
  #hero .hero_content .talk .char .talk-box-21 {
    width: 37rem;
  }
}
#hero .hero_content .talk .char .talk-box-22 {
  z-index: 2;
  aspect-ratio: 145/97;
  background: url(../images/top/talk-box-22.png) bottom center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  #hero .hero_content .talk .char .talk-box-22 {
    width: 14.5rem;
    left: 12rem;
    padding-bottom: 1.5rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero_content .talk .char .talk-box-22 {
    width: 28rem;
    left: 1rem;
    top: -2rem;
    padding-bottom: 1rem;
  }
}
@media screen and (min-width: 1350px) {
  #hero .hero_content .talk .char .talk-box-22 {
    width: 32rem;
  }
}
#hero .hero_content .groups {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 1rem;
}
@media screen and (min-width: 768px) {
  #hero .hero_content .groups {
    position: absolute;
    bottom: 0;
    width: -moz-fit-content;
    width: fit-content;
    left: 50%;
    transform: translate(-50%);
  }
}
#hero .hero_content .groups .item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
@media screen and (max-width: 767px) {
  #hero .hero_content .groups .item {
    width: 10rem;
    padding-bottom: 2rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero_content .groups .item {
    width: 22rem;
    padding-bottom: 9rem;
  }
  #hero .hero_content .groups .item:nth-child(2) {
    margin-left: -4rem;
    margin-right: -4rem;
  }
}
#hero .hero_content .groups .item:after {
  content: "";
  position: absolute;
  width: 220%;
  left: 50%;
  top: -1rem;
  aspect-ratio: 250/195;
  background: url(../images/top/hero_item_bg.png) top center/cover no-repeat;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  #hero .hero_content .groups .item:after {
    top: -6rem;
    width: 240%;
  }
}
#hero .hero_content .groups strong {
  position: relative;
  z-index: 2;
  display: block;
  line-height: 1.5;
  color: #fabf01;
  text-shadow: -3px -1px 0 #00a08e, -3px 0px 0 #00a08e, -3px 1px 0 #00a08e, -2px -2px 0 #00a08e, -2px -1px 0 #00a08e, -2px 0px 0 #00a08e, -2px 1px 0 #00a08e, -2px 2px 0 #00a08e, -1px -3px 0 #00a08e, -1px -2px 0 #00a08e, -1px -1px 0 #00a08e, -1px 0px 0 #00a08e, -1px 1px 0 #00a08e, -1px 2px 0 #00a08e, -1px 3px 0 #00a08e, 0px -3px 0 #00a08e, 0px -2px 0 #00a08e, 0px -1px 0 #00a08e, 0px 0px 0 #00a08e, 0px 1px 0 #00a08e, 0px 2px 0 #00a08e, 0px 3px 0 #00a08e, 1px -3px 0 #00a08e, 1px -2px 0 #00a08e, 1px -1px 0 #00a08e, 1px 0px 0 #00a08e, 1px 1px 0 #00a08e, 1px 2px 0 #00a08e, 1px 3px 0 #00a08e, 2px -2px 0 #00a08e, 2px -1px 0 #00a08e, 2px 0px 0 #00a08e, 2px 1px 0 #00a08e, 2px 2px 0 #00a08e, 3px -1px 0 #00a08e, 3px 0px 0 #00a08e, 3px 1px 0 #00a08e;
}
@media screen and (max-width: 767px) {
  #hero .hero_content .groups strong {
    font-size: 2.8rem;
  }
}
@media screen and (min-width: 768px) {
  #hero .hero_content .groups strong {
    line-height: 1.2;
    font-size: 6.5rem;
  }
}
#hero .hero_content .groups span {
  color: #00a08e;
  position: relative;
  z-index: 2;
  font-weight: 900;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  #hero .hero_content .groups span {
    font-size: 3.2rem;
  }
}

#campaign {
  text-align: center;
}
#campaign .notice_title {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 1.2rem;
  margin-bottom: 2.4rem;
}
#campaign .notice_title::before {
  position: relative;
  z-index: 2;
  content: "";
  display: block;
  aspect-ratio: 1;
  background: url(../images/top/notice-icon.png) center/contain no-repeat;
  width: 2.5rem;
}
@media screen and (min-width: 768px) {
  #campaign .notice_title::before {
    width: 7.8rem;
  }
}
#campaign .notice_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 34rem;
  height: 1.5rem;
  background: url(../images/top/notice_title_bg.png) bottom center/contain no-repeat;
}
@media screen and (min-width: 768px) {
  #campaign .notice_title::after {
    width: 68rem;
    bottom: 1rem;
    left: 4rem;
  }
}
#campaign .notice_title span {
  position: relative;
  z-index: 2;
  line-height: 1.5;
  font-weight: 900;
  color: #00a08e;
  font-size: 1.8rem;
  text-shadow: -2px -1px 0 #fff, -2px 0px 0 #fff, -2px 1px 0 #fff, -1px -2px 0 #fff, -1px -1px 0 #fff, -1px 0px 0 #fff, -1px 1px 0 #fff, -1px 2px 0 #fff, 0px -2px 0 #fff, 0px -1px 0 #fff, 0px 0px 0 #fff, 0px 1px 0 #fff, 0px 2px 0 #fff, 1px -2px 0 #fff, 1px -1px 0 #fff, 1px 0px 0 #fff, 1px 1px 0 #fff, 1px 2px 0 #fff, 2px -1px 0 #fff, 2px 0px 0 #fff, 2px 1px 0 #fff;
}
@media screen and (min-width: 768px) {
  #campaign .notice_title span {
    font-size: 3.6rem;
  }
}
#campaign .notice_content {
  color: #00a08e;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 2.4rem 1.2rem;
  border: 1px solid #00a08e;
  border-radius: 2.4rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  #campaign .notice_content {
    margin-bottom: 2rem;
  }
}
@media screen and (min-width: 768px) {
  #campaign .notice_content {
    padding: 4.8rem 6.4rem;
    margin-bottom: 4.8rem;
  }
  #campaign .notice_content:after {
    content: "";
    aspect-ratio: 30/40;
    background: url(../images/top/notice_bg.png) bottom center/contain no-repeat;
    position: absolute;
    width: 30rem;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(90%);
  }
}
#campaign .notice_content .note {
  font-weight: 400;
  font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
  #campaign .notice_content .note {
    font-size: 2rem;
  }
}
#campaign .notice_content .top,
#campaign .notice_content .bot {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  #campaign .notice_content .top,
  #campaign .notice_content .bot {
    font-size: 3.2rem;
  }
}
#campaign .notice_content .top strong,
#campaign .notice_content .bot strong {
  font-weight: 900;
}
#campaign .notice_content .top .yellow,
#campaign .notice_content .bot .yellow {
  color: #fabf01;
  padding-left: 0.4em;
}
@media screen and (max-width: 767px) {
  #campaign .notice_content .top .yellow,
  #campaign .notice_content .bot .yellow {
    text-shadow: -2px -1px 0 #00a08e, -2px 0px 0 #00a08e, -2px 1px 0 #00a08e, -1px -2px 0 #00a08e, -1px -1px 0 #00a08e, -1px 0px 0 #00a08e, -1px 1px 0 #00a08e, -1px 2px 0 #00a08e, 0px -2px 0 #00a08e, 0px -1px 0 #00a08e, 0px 0px 0 #00a08e, 0px 1px 0 #00a08e, 0px 2px 0 #00a08e, 1px -2px 0 #00a08e, 1px -1px 0 #00a08e, 1px 0px 0 #00a08e, 1px 1px 0 #00a08e, 1px 2px 0 #00a08e, 2px -1px 0 #00a08e, 2px 0px 0 #00a08e, 2px 1px 0 #00a08e;
  }
}
@media screen and (min-width: 768px) {
  #campaign .notice_content .top .yellow,
  #campaign .notice_content .bot .yellow {
    text-shadow: -3px -1px 0 #00a08e, -3px 0px 0 #00a08e, -3px 1px 0 #00a08e, -2px -2px 0 #00a08e, -2px -1px 0 #00a08e, -2px 0px 0 #00a08e, -2px 1px 0 #00a08e, -2px 2px 0 #00a08e, -1px -3px 0 #00a08e, -1px -2px 0 #00a08e, -1px -1px 0 #00a08e, -1px 0px 0 #00a08e, -1px 1px 0 #00a08e, -1px 2px 0 #00a08e, -1px 3px 0 #00a08e, 0px -3px 0 #00a08e, 0px -2px 0 #00a08e, 0px -1px 0 #00a08e, 0px 0px 0 #00a08e, 0px 1px 0 #00a08e, 0px 2px 0 #00a08e, 0px 3px 0 #00a08e, 1px -3px 0 #00a08e, 1px -2px 0 #00a08e, 1px -1px 0 #00a08e, 1px 0px 0 #00a08e, 1px 1px 0 #00a08e, 1px 2px 0 #00a08e, 1px 3px 0 #00a08e, 2px -2px 0 #00a08e, 2px -1px 0 #00a08e, 2px 0px 0 #00a08e, 2px 1px 0 #00a08e, 2px 2px 0 #00a08e, 3px -1px 0 #00a08e, 3px 0px 0 #00a08e, 3px 1px 0 #00a08e;
  }
}
#campaign .notice_content .top {
  margin-bottom: 2.4rem;
}
@media screen and (min-width: 768px) {
  #campaign .notice_content .top {
    margin-bottom: 4.8rem;
  }
}
#campaign .notice_content .top .calendar::before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  margin-right: 0.3em;
  aspect-ratio: 1;
  background: url(../images/top/notice-icon-calendar.png) center/contain no-repeat;
  width: 2.2rem;
  height: 2.2rem;
}
@media screen and (min-width: 768px) {
  #campaign .notice_content .top .calendar::before {
    width: 4.5rem;
    height: 4.5rem;
  }
}
#campaign .notice_content .bot {
  margin-bottom: 1.2rem;
}
@media screen and (min-width: 768px) {
  #campaign .notice_content .bot {
    margin-bottom: 2.4rem;
  }
}
#campaign .notice_content .bot .yellow {
  padding-right: 0.4em;
}
#campaign .notice_content .bot .clock {
  display: flex;
  align-items: center;
  justify-content: center;
}
#campaign .notice_content .bot .clock::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  background: url(../images/top/notice-icon-clock.png) center/contain no-repeat;
  width: 2.2rem;
}
@media screen and (min-width: 768px) {
  #campaign .notice_content .bot .clock::before {
    width: 4.5rem;
  }
}
#campaign .notice_title_mid {
  font-weight: 900;
  text-align: center;
  color: #00a08e;
}
@media screen and (min-width: 768px) {
  #campaign .notice_title_mid {
    margin-bottom: 4.8rem;
    font-size: 3.6rem;
  }
}
@media screen and (max-width: 767px) {
  #campaign .notice_title_mid {
    margin-bottom: 2rem;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding-left: 5rem;
  }
  #campaign .notice_title_mid:after {
    content: "";
    aspect-ratio: 30/40;
    background: url(../images/top/notice_bg.png) bottom center/contain no-repeat;
    width: 11rem;
  }
}
#campaign .actions {
  margin-bottom: 6rem;
}
@media screen and (min-width: 768px) {
  #campaign .actions {
    margin-bottom: 11rem;
  }
}
#campaign .notice_title_bot {
  font-weight: 900;
  text-align: center;
  color: #00a08e;
  font-size: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
}
@media screen and (min-width: 768px) {
  #campaign .notice_title_bot {
    font-size: 4.8rem;
    margin-bottom: -5rem;
  }
}
#campaign .notice_title_bot:after {
  content: "";
  display: block;
  aspect-ratio: 125/118;
  background: url(../images/top/notice_title_bot_arrow.png) bottom center/contain no-repeat;
  width: 6.5rem;
}
@media screen and (min-width: 768px) {
  #campaign .notice_title_bot:after {
    width: 12.5rem;
  }
}

#service {
  text-align: center;
  color: #00a08e;
  background-color: #e4f8f7;
  background-image: radial-gradient(rgba(255, 255, 255, 0.123) 0.1rem, transparent 0.1rem);
  background-size: 0.3rem 0.3rem; /* khoảng cách giữa các điểm */
  background-repeat: repeat;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  #service {
    font-size: 2rem;
    padding: 5rem 1.6rem;
    background-image: radial-gradient(rgba(74, 247, 203, 0.123) 0.3rem, transparent 0.3rem);
    background-size: 1.2rem 1.2rem; /* khoảng cách giữa các điểm */
  }
}
#service .call_title {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 2.4rem;
  font-weight: 900;
  font-size: 2rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  #service .call_title {
    font-size: 3.6rem;
    margin-top: 7rem;
    margin-bottom: 4.8rem;
  }
}
#service .call_title::before {
  content: "";
  display: block;
  aspect-ratio: 16/20;
  background: url(../images/top/call_title_bg.png) center/contain no-repeat;
  position: absolute;
  width: 6rem;
  top: 50%;
  left: 0;
  transform: translateY(-70%) translateX(-100%);
}
@media screen and (min-width: 768px) {
  #service .call_title::before {
    width: 16rem;
  }
}
#service .call_title strong {
  padding-right: 0.2em;
}
@media screen and (max-width: 767px) {
  #service .call_title strong {
    font-size: 2.4rem;
    text-shadow: -3px -1px 0 #fabf01, -3px 0px 0 #fabf01, -3px 1px 0 #fabf01, -2px -2px 0 #fabf01, -2px -1px 0 #fabf01, -2px 0px 0 #fabf01, -2px 1px 0 #fabf01, -2px 2px 0 #fabf01, -1px -3px 0 #fabf01, -1px -2px 0 #fabf01, -1px -1px 0 #fabf01, -1px 0px 0 #fabf01, -1px 1px 0 #fabf01, -1px 2px 0 #fabf01, -1px 3px 0 #fabf01, 0px -3px 0 #fabf01, 0px -2px 0 #fabf01, 0px -1px 0 #fabf01, 0px 0px 0 #fabf01, 0px 1px 0 #fabf01, 0px 2px 0 #fabf01, 0px 3px 0 #fabf01, 1px -3px 0 #fabf01, 1px -2px 0 #fabf01, 1px -1px 0 #fabf01, 1px 0px 0 #fabf01, 1px 1px 0 #fabf01, 1px 2px 0 #fabf01, 1px 3px 0 #fabf01, 2px -2px 0 #fabf01, 2px -1px 0 #fabf01, 2px 0px 0 #fabf01, 2px 1px 0 #fabf01, 2px 2px 0 #fabf01, 3px -1px 0 #fabf01, 3px 0px 0 #fabf01, 3px 1px 0 #fabf01;
  }
}
@media screen and (min-width: 768px) {
  #service .call_title strong {
    font-size: 4.8rem;
    text-shadow: -5px -1px 0 #fabf01, -5px 0px 0 #fabf01, -5px 1px 0 #fabf01, -4px -3px 0 #fabf01, -4px -2px 0 #fabf01, -4px -1px 0 #fabf01, -4px 0px 0 #fabf01, -4px 1px 0 #fabf01, -4px 2px 0 #fabf01, -4px 3px 0 #fabf01, -3px -4px 0 #fabf01, -3px -3px 0 #fabf01, -3px -2px 0 #fabf01, -3px -1px 0 #fabf01, -3px 0px 0 #fabf01, -3px 1px 0 #fabf01, -3px 2px 0 #fabf01, -3px 3px 0 #fabf01, -3px 4px 0 #fabf01, -2px -4px 0 #fabf01, -2px -3px 0 #fabf01, -2px -2px 0 #fabf01, -2px -1px 0 #fabf01, -2px 0px 0 #fabf01, -2px 1px 0 #fabf01, -2px 2px 0 #fabf01, -2px 3px 0 #fabf01, -2px 4px 0 #fabf01, -1px -5px 0 #fabf01, -1px -4px 0 #fabf01, -1px -3px 0 #fabf01, -1px -2px 0 #fabf01, -1px -1px 0 #fabf01, -1px 0px 0 #fabf01, -1px 1px 0 #fabf01, -1px 2px 0 #fabf01, -1px 3px 0 #fabf01, -1px 4px 0 #fabf01, -1px 5px 0 #fabf01, 0px -5px 0 #fabf01, 0px -4px 0 #fabf01, 0px -3px 0 #fabf01, 0px -2px 0 #fabf01, 0px -1px 0 #fabf01, 0px 0px 0 #fabf01, 0px 1px 0 #fabf01, 0px 2px 0 #fabf01, 0px 3px 0 #fabf01, 0px 4px 0 #fabf01, 0px 5px 0 #fabf01, 1px -5px 0 #fabf01, 1px -4px 0 #fabf01, 1px -3px 0 #fabf01, 1px -2px 0 #fabf01, 1px -1px 0 #fabf01, 1px 0px 0 #fabf01, 1px 1px 0 #fabf01, 1px 2px 0 #fabf01, 1px 3px 0 #fabf01, 1px 4px 0 #fabf01, 1px 5px 0 #fabf01, 2px -4px 0 #fabf01, 2px -3px 0 #fabf01, 2px -2px 0 #fabf01, 2px -1px 0 #fabf01, 2px 0px 0 #fabf01, 2px 1px 0 #fabf01, 2px 2px 0 #fabf01, 2px 3px 0 #fabf01, 2px 4px 0 #fabf01, 3px -4px 0 #fabf01, 3px -3px 0 #fabf01, 3px -2px 0 #fabf01, 3px -1px 0 #fabf01, 3px 0px 0 #fabf01, 3px 1px 0 #fabf01, 3px 2px 0 #fabf01, 3px 3px 0 #fabf01, 3px 4px 0 #fabf01, 4px -3px 0 #fabf01, 4px -2px 0 #fabf01, 4px -1px 0 #fabf01, 4px 0px 0 #fabf01, 4px 1px 0 #fabf01, 4px 2px 0 #fabf01, 4px 3px 0 #fabf01, 5px -1px 0 #fabf01, 5px 0px 0 #fabf01, 5px 1px 0 #fabf01;
  }
}
#service .call_group {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  #service .call_group {
    flex-direction: column;
    gap: 2.4rem;
    padding: 0 2.4rem;
    margin-bottom: 2.4rem;
  }
}
@media screen and (min-width: 768px) {
  #service .call_group {
    flex-wrap: wrap;
    gap: 4.8rem;
    font-size: 2rem;
    margin-bottom: 4.8rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1635px) {
  #service .call_group {
    max-width: 111rem;
    margin-left: auto;
    margin-right: auto;
  }
}
#service .call_group .item {
  border: 1px solid #00a08e;
  background-color: #fff;
  border-radius: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 2.4rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  #service .call_group .item {
    padding: 4.8rem 1rem;
    gap: 4.8rem;
    width: 36rem;
  }
}
#service .call_group .item::before {
  content: "";
  aspect-ratio: 1;
  display: block;
  background: var(--call) center/contain no-repeat;
  width: 10rem;
}
@media screen and (min-width: 768px) {
  #service .call_group .item::before {
    width: 12.7rem;
  }
}
#service .call_group .item p {
  font-weight: 900;
}
#service .call_group .item-1 {
  --call: url(../images/top/call-1.png);
}
#service .call_group .item-2 {
  --call: url(../images/top/call-2.png);
}
#service .call_group .item-3 {
  --call: url(../images/top/call-3.png);
}
#service .call_group .item-4 {
  --call: url(../images/top/call-4.png);
}
#service .call_note {
  font-weight: 900;
}
#service .call_note .tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}
@media screen and (min-width: 768px) {
  #service .call_note .tags {
    gap: 1.2rem;
  }
}
#service .call_note .tags .x {
  display: block;
  aspect-ratio: 1;
  color: transparent;
  width: 1.4rem;
  background: url(../images/top/call-x.png) center/contain no-repeat;
}
@media screen and (min-width: 768px) {
  #service .call_note .tags .x {
    width: 2.8rem;
  }
}
#service .call_note .tags .tag {
  background-color: #00a08e;
  color: #fabf01;
  font-size: 1.4rem;
  border-radius: 2.4rem;
  padding: 0.6rem 1rem 0.8rem;
}
@media screen and (min-width: 768px) {
  #service .call_note .tags .tag {
    width: 25rem;
    border-radius: 3rem;
    font-size: 2.8rem;
  }
}

#point {
  overflow: hidden;
  background: url(../images/top/point_bg.png) top center;
}
@media screen and (min-width: 768px) {
  #point {
    padding-top: 15rem;
  }
}
#point .section_title-point {
  position: relative;
  background: url(../images/top/point_title_bg.png) center/contain no-repeat;
  font-size: 2rem;
  margin-bottom: 4rem;
}
@media screen and (min-width: 768px) {
  #point .section_title-point {
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10rem;
    padding-right: 10rem;
    font-size: 4.8rem;
  }
  #point .section_title-point span {
    display: block;
  }
}
#point .section_title-point::before {
  content: "";
  aspect-ratio: 30/43;
  background: url(../images/top/point_title_char.png) center/contain no-repeat;
  position: absolute;
  top: 50%;
  left: 0;
  width: 6rem;
  transform: translateY(-70%) translateX(-30%);
}
@media screen and (min-width: 768px) {
  #point .section_title-point::before {
    width: 17rem;
    transform: translateY(-65%) translateX(-35%);
  }
}
#point .point_wrap .points {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.8rem;
  filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.25));
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points {
    gap: 10rem;
  }
}
#point .point_wrap .points .point {
  background-color: #fff;
  border-radius: 2.4rem;
  padding: 5rem 1.6rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point {
    padding: 10rem 3rem;
    max-width: 143rem;
  }
}
@media screen and (min-width: 1500px) {
  #point .point_wrap .points .point {
    padding: 10rem 10rem;
  }
}
#point .point_wrap .points .point-3 {
  background-color: #ffffff;
  background-image: radial-gradient(rgba(255, 255, 255, 0.123) 0.1rem, transparent 0.1rem);
  background-size: 0.3rem 0.3rem; /* khoảng cách giữa các điểm */
  background-repeat: repeat;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point-3 {
    background-image: radial-gradient(rgba(74, 247, 203, 0.123) 0.3rem, transparent 0.3rem);
    background-size: 1.2rem 1.2rem; /* khoảng cách giữa các điểm */
  }
}
#point .point_wrap .points .point .point_title {
  font-weight: 900;
  color: #00a08e;
  display: flex;
  position: relative;
}
@media screen and (max-width: 767px) {
  #point .point_wrap .points .point .point_title {
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .point_title {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    align-items: flex-end;
    justify-content: center;
    gap: 4.8rem;
  }
}
#point .point_wrap .points .point .point_title::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 15rem;
  height: 9rem;
  transform: translateX(6%) translateY(-50%);
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .point_title::before {
    width: 30rem;
    height: 23rem;
    transform: translateX(80%) translateY(-40%);
  }
}
#point .point_wrap .points .point .point_title-1::before {
  background: url(../images/top/point-title-1.png) center/contain no-repeat;
  transform: translateX(10%) translateY(-80%);
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .point_title-1::before {
    transform: translateX(90%) translateY(-40%);
  }
}
#point .point_wrap .points .point .point_title-2::before {
  background: url(../images/top/point-title-2.png) center/contain no-repeat;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .point_title-3 {
    margin-bottom: 7rem;
  }
}
#point .point_wrap .points .point .point_title-3::before {
  background: url(../images/top/point-title-3.png) center/contain no-repeat;
}
#point .point_wrap .points .point .point_title-4::before {
  background: url(../images/top/point-title-4.png) center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  #point .point_wrap .points .point .point_title-4::before {
    transform: translateX(30%) translateY(-50%);
  }
}
#point .point_wrap .points .point .point_title .number {
  position: relative;
  aspect-ratio: 1;
  display: block;
  width: 4rem;
  background-color: #fabf01;
  border-radius: 10rem;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .point_title .number {
    width: 9.2rem;
  }
}
#point .point_wrap .points .point .point_title .number span,
#point .point_wrap .points .point .point_title .number strong {
  position: absolute;
}
#point .point_wrap .points .point .point_title .number span {
  top: 0;
  left: 0;
  font-size: 1.2rem;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .point_title .number span {
    font-size: 2.4rem;
    transform: translateX(-45%);
  }
}
#point .point_wrap .points .point .point_title .number strong {
  bottom: 0;
  right: 0;
  font-size: 2.4rem;
  transform: translateY(25%) translateX(50%);
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .point_title .number strong {
    font-size: 6.4rem;
    transform: translateY(25%) translateX(20%);
  }
}
#point .point_wrap .points .point .point_title .txt {
  font-size: 2rem;
  background: url(../images/top/point_txt_bg.png) bottom center/100% 1.4rem no-repeat;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .point_title .txt {
    font-size: 4.8rem;
    line-height: 1;
    padding-bottom: 1rem;
    margin-bottom: -1rem;
    background-size: 100% 2rem;
  }
}
#point .point_wrap .points .point .desc {
  font-weight: 900;
  color: #00a08e;
  text-align: center;
  font-size: 1.8rem;
  margin-top: 4.8rem;
  margin-bottom: 4.8rem;
}
@media screen and (min-width: 1500px) {
  #point .point_wrap .points .point .desc {
    font-size: 2.8rem;
  }
}
#point .point_wrap .points .point .note {
  font-weight: 900;
  color: #00a08e;
  text-align: center;
  margin-top: 4.8rem;
  margin-bottom: 4.8rem;
  letter-spacing: 0.05em;
  font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .note {
    font-size: 2rem;
  }
}
#point .point_wrap .points .point .apps {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .apps {
    gap: 2.4rem;
    justify-content: center;
  }
}
#point .point_wrap .points .point .apps .app {
  background-color: #fff;
  border-radius: 2.4rem;
  border: 0.2rem solid #00a08e;
  filter: drop-shadow(0.4rem 0.4rem 0 #a4ae95);
  display: flex;
  flex-direction: column;
  width: 14.5rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .apps .app {
    width: 38.5rem;
  }
}
#point .point_wrap .points .point .apps .app::before {
  content: "";
  background: var(--app) center/auto 3.3rem no-repeat;
  height: 5.6rem;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .apps .app::before {
    height: 8rem;
    background-size: auto 5.5rem;
  }
}
#point .point_wrap .points .point .apps .app .txt {
  background-color: #00a08e;
  text-align: center;
  font-weight: 900;
  font-size: 3.2rem;
  color: #fff;
  text-shadow: 0.1rem 0.2rem 0 #fabf01;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .apps .app .txt {
    font-size: 9.6rem;
    text-shadow: 0.2rem 0.3rem 0 #fabf01;
  }
}
#point .point_wrap .points .point .apps .app .txt small {
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .apps .app .txt small {
    font-size: 3.2rem;
  }
}
#point .point_wrap .points .point .apps .app-01 {
  --app: url(../images/top/point-app-01.png);
}
#point .point_wrap .points .point .apps .app-02 {
  --app: url(../images/top/point-app-02.png);
}
#point .point_wrap .points .point .apps .app-03 {
  --app: url(../images/top/point-app-03.png);
}
#point .point_wrap .points .point .apps .app-04 {
  --app: url(../images/top/point-app-04.png);
}
#point .point_wrap .points .point .apps .app-05 {
  --app: url(../images/top/point-app-05.png);
}
#point .point_wrap .points .point .apps .app-06 {
  --app: url(../images/top/point-app-06.png);
}
#point .point_wrap .points .point .apps .app-07 {
  --app: url(../images/top/point-app-07.png);
}
#point .point_wrap .points .point .apps .app-07 {
  --app: url(../images/top/point-app-07.png);
}
#point .point_wrap .points .point .apps .app-08 {
  --app: url(../images/top/point-app-08.png);
}
#point .point_wrap .points .point .apps .app-09 {
  --app: url(../images/top/point-app-09.png);
}
#point .point_wrap .points .point .apps .app-10 {
  --app: url(../images/top/point-app-10.png);
}
#point .point_wrap .points .point .apps .app-11 {
  --app: url(../images/top/point-app-11.png);
}
#point .point_wrap .points .point .apps .app-12 {
  --app: url(../images/top/point-app-12.png);
}
#point .point_wrap .points .point .speedies {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .speedies {
    justify-content: center;
  }
}
@media screen and (min-width: 1300px) {
  #point .point_wrap .points .point .speedies {
    gap: 4.8rem;
  }
}
#point .point_wrap .points .point .speedies .speedy {
  background-color: #fff;
  border-radius: 2.4rem;
  border: 0.1rem solid #00a08e;
  filter: drop-shadow(0.5rem 0.5rem 0 #e0f7f6);
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 100%;
  padding: 2.4rem;
  overflow: hidden;
  text-align: center;
  color: #00a08e;
  font-weight: 900;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .speedies .speedy {
    width: 34rem;
    filter: drop-shadow(1rem 1rem 0 #e0f7f6);
  }
}
@media screen and (min-width: 1300px) {
  #point .point_wrap .points .point .speedies .speedy {
    width: 36rem;
  }
}
#point .point_wrap .points .point .speedies .speedy-1 {
  --speedy: url(../images/top/point-21.png);
}
#point .point_wrap .points .point .speedies .speedy-2 {
  --speedy: url(../images/top/point-22.png);
}
#point .point_wrap .points .point .speedies .speedy-3 {
  --speedy: url(../images/top/point-23.png);
}
#point .point_wrap .points .point .speedies .speedy::before {
  content: "";
  background: var(--speedy) center/contain no-repeat;
  height: 12.7rem;
}
#point .point_wrap .points .point .monthly {
  background-color: #00a08e;
  color: #fff;
  font-weight: 900;
  border-radius: 2.4rem;
  padding: 2.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2.4rem;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .monthly {
    font-size: 2.4rem;
    padding: 4rem;
  }
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .monthly .large {
    font-size: 3.6rem;
  }
}
#point .point_wrap .points .point .monthly .large strong {
  color: #fabf01;
  font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .monthly .large strong {
    font-size: 6.4rem;
  }
}
#point .point_wrap .points .point .txt-br {
  border-radius: 2.4rem;
  background-color: #fff;
  border: 0.1rem solid #00a08e;
  text-align: center;
  font-weight: 900;
  color: #00a08e;
  padding: 2.4rem 1.6rem;
  font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
  #point .point_wrap .points .point .txt-br {
    padding: 4.8rem;
    font-size: 2rem;
    filter: drop-shadow(1rem 1rem 0 #e0f7f6);
  }
}

#step {
  position: relative;
  background-color: #e4f8f7;
  overflow: hidden;
  background-image: radial-gradient(rgba(0, 160, 142, 0.1) 0.3rem, transparent 0.3rem);
  background-size: 1.2rem 1.2rem; /* khoảng cách giữa các điểm */
  background-repeat: repeat;
}
@media screen and (min-width: 768px) {
  #step {
    background-image: radial-gradient(rgba(0, 160, 142, 0.1) 0.3rem, transparent 0.3rem);
    background-size: 1.2rem 1.2rem; /* khoảng cách giữa các điểm */
  }
}
#step::after {
  content: "";
  aspect-ratio: 1;
  display: block;
  background: url(../images/top/step_char.png) center/contain no-repeat;
  margin: 0 auto;
  margin-top: 3.6rem;
  width: 16rem;
}
@media screen and (min-width: 768px) {
  #step::after {
    width: 46rem;
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(40%);
  }
}
#step .section_title-step {
  position: relative;
  background: url(../images/top/step_title_bg.png) center/contain no-repeat;
  font-size: 2rem;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4rem;
  padding-right: 4rem;
}
@media screen and (min-width: 768px) {
  #step .section_title-step {
    padding-left: 10rem;
    padding-right: 10rem;
    font-size: 4.8rem;
  }
  #step .section_title-step span {
    display: block;
  }
}
#step .section_title-step::before {
  content: "";
  aspect-ratio: 30/43;
  background: url(../images/top/step_title_char.png) center/contain no-repeat;
  position: absolute;
  top: 50%;
  left: 0;
  width: 6rem;
  transform: translateY(-70%) translateX(-30%);
}
@media screen and (min-width: 768px) {
  #step .section_title-step::before {
    width: 15rem;
    transform: translateY(-65%) translateX(-35%);
  }
}
#step .desc {
  color: #00a08e;
  text-align: center;
  font-weight: 900;
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  #step .desc-bot {
    font-size: 1.6rem;
  }
}
#step .steps {
  display: flex;
}
@media screen and (max-width: 767px) {
  #step .steps {
    background: url(../images/top/steps_bg.png) top 5rem center/contain no-repeat;
    flex-direction: column;
    gap: 7.5rem;
    margin-top: 10rem;
    margin-bottom: 4rem;
  }
}
@media screen and (min-width: 768px) {
  #step .steps {
    background: url(../images/top/steps_bg_pc.png) center/contain no-repeat;
    margin-top: 15rem;
    margin-bottom: 10rem;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 13rem;
    max-width: 137rem;
    margin-left: auto;
    margin-right: auto;
  }
}
#step .steps .step {
  color: #fff;
  background-color: #00a08e;
  border-radius: 2.4rem;
  position: relative;
  padding: 5rem 1.2rem 2.4rem;
  font-weight: 900;
}
@media screen and (min-width: 768px) {
  #step .steps .step {
    width: 55rem;
  }
  #step .steps .step:nth-child(2n+2) {
    transform: translateY(35%);
  }
}
@media screen and (min-width: 1350px) {
  #step .steps .step {
    width: 63rem;
  }
}
#step .steps .step-1 {
  --step: url(../images/top/step-1.png);
}
#step .steps .step-2 {
  --step: url(../images/top/step-2.png);
}
#step .steps .step-3 {
  --step: url(../images/top/step-3.png);
}
#step .steps .step-4 {
  --step: url(../images/top/step-4.png);
}
#step .steps .step-5 {
  --step: url(../images/top/step-5.png);
}
#step .steps .step .number {
  aspect-ratio: 1;
  width: 9.2rem;
  background-color: #00a08e;
  border-radius: 10rem;
  color: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 2rem;
}
#step .steps .step .number strong {
  color: #fabf01;
  font-size: 4rem;
  text-shadow: -1px 0px 0 #fff, 0px -1px 0 #fff, 0px 0px 0 #fff, 0px 1px 0 #fff, 1px 0px 0 #fff;
}
#step .steps .step .number::before, #step .steps .step .number::after {
  position: absolute;
  top: -0.8rem;
  content: "";
  aspect-ratio: 32/50;
  width: 3.2rem;
  display: block;
  background: url(../images/top/step_label.png) center/contain no-repeat;
}
#step .steps .step .number::before {
  left: -3rem;
}
#step .steps .step .number::after {
  right: -3rem;
  transform: rotateY(180deg);
}
#step .steps .step ._content::before {
  content: "";
  background: var(--step) center/contain no-repeat;
  width: 100%;
  height: 10rem;
  display: block;
  margin-bottom: 2rem;
}
#step .steps .step ._content .detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
}
#step .steps .step ._content .detail .ttl {
  font-size: 1.6rem;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  #step .steps .step ._content .detail .ttl {
    font-size: 2.4rem;
  }
}
#step .steps .step ._content .detail p {
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
  #step .steps .step ._content .detail p {
    font-size: 1.6rem;
  }
}

#feedback {
  padding-left: 0;
  padding-right: 0;
  padding-top: 8rem;
}
#feedback .section_title-feedback {
  background: url(../images/top/feedback_title_bg.svg) center/contain no-repeat;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4rem;
  padding-right: 4rem;
}
@media screen and (min-width: 768px) {
  #feedback .section_title-feedback {
    padding-left: 10rem;
    padding-right: 10rem;
    font-size: 3.6rem;
  }
  #feedback .section_title-feedback span {
    display: block;
  }
}
#feedback .section_title-feedback::before {
  content: "";
  aspect-ratio: 1;
  background: url(../images/top/faq_char.png) center/contain no-repeat;
  position: absolute;
  top: 50%;
  right: 0;
  width: 10rem;
  transform: translateY(-50%) translateX(40%);
}
@media screen and (min-width: 768px) {
  #feedback .section_title-feedback::before {
    width: 30rem;
    transform: translateY(-40%) translateX(50%);
  }
}
#feedback .section_title-feedback {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4rem;
  padding-right: 4rem;
}
@media screen and (min-width: 768px) {
  #feedback .section_title-feedback {
    padding-left: 10rem;
    padding-right: 10rem;
    font-size: 4.8rem;
  }
  #feedback .section_title-feedback span {
    display: block;
  }
}
#feedback .section_title-feedback::before {
  content: "";
  aspect-ratio: 20/25;
  background: url(../images/top/feedback-char.png) center/contain no-repeat;
  position: absolute;
  top: 50%;
  left: 0;
  width: 10rem;
  transform: translateY(-60%) translateX(-60%);
}
@media screen and (min-width: 768px) {
  #feedback .section_title-feedback::before {
    width: 15rem;
    transform: translateY(-50%) translateX(-50%);
  }
}
#feedback #feedback-slide {
  padding: 5rem 0 7rem;
}
@media screen and (min-width: 768px) {
  #feedback #feedback-slide {
    padding-bottom: 10rem;
  }
}
#feedback #feedback-slide .swiper-pagination-bullet {
  --swiper-pagination-bullet-size: 1.4rem;
  --swiper-pagination-bullet-horizontal-gap: 0.6rem;
  background-color: #d9d9d9;
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #feedback #feedback-slide .swiper-pagination-bullet {
    --swiper-pagination-bullet-size: 3rem;
    --swiper-pagination-bullet-horizontal-gap: 1.2rem;
    margin: 0 1.2rem;
  }
}
#feedback #feedback-slide .swiper-pagination-bullet-active {
  background-color: #19b6ac;
}
#feedback #feedback-slide:not(.swiper-initialized) .swiper-wrapper {
  justify-content: center;
}
#feedback #feedback-slide:not(.swiper-initialized) .swiper-wrapper .swiper-slide:not(:first-child) {
  display: none;
}
#feedback .swiper-wrapper .swiper-slide {
  width: 122rem;
  max-width: 80%;
}
#feedback .swiper-wrapper .swiper-slide .feedback {
  background-color: #fff;
  border-radius: 2.4rem;
  padding: 2.4rem;
}
@media screen and (max-width: 767px) {
  #feedback .swiper-wrapper .swiper-slide .feedback {
    filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.15));
  }
}
@media screen and (min-width: 768px) {
  #feedback .swiper-wrapper .swiper-slide .feedback {
    filter: drop-shadow(0 0 2rem rgba(0, 0, 0, 0.15));
  }
}
#feedback .swiper-wrapper .swiper-slide .feedback-1 {
  --feedback: url(../images/top/feedback-1.jpg);
}
#feedback .swiper-wrapper .swiper-slide .feedback-2 {
  --feedback: url(../images/top/feedback-2.jpg);
}
#feedback .swiper-wrapper .swiper-slide .feedback-3 {
  --feedback: url(../images/top/feedback-3.jpg);
}
#feedback .swiper-wrapper .swiper-slide .feedback-4 {
  --feedback: url(../images/top/feedback-4.jpg);
}
#feedback .swiper-wrapper .swiper-slide .feedback-5 {
  --feedback: url(../images/top/feedback-5.jpg);
}
#feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail {
  display: flex;
}
@media screen and (max-width: 767px) {
  #feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail {
    flex-direction: column;
    gap: 2.4rem;
  }
}
@media screen and (min-width: 768px) {
  #feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail {
    gap: 4rem;
  }
}
#feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail:before {
  content: "";
  display: block;
  border-radius: 2.4rem;
  background-color: rgba(0, 0, 0, 0.1);
  background: #e6e6e6 var(--feedback) center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  #feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail:before {
    width: 100%;
    height: 16.5rem;
  }
}
@media screen and (min-width: 768px) {
  #feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail:before {
    width: 48rem;
  }
}
#feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail .detail {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
@media screen and (min-width: 768px) {
  #feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail .detail {
    gap: 2.4rem;
    width: 65rem;
  }
}
#feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail .detail .name {
  font-weight: 500;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  #feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail .detail .name {
    font-size: 2.4rem;
  }
}
#feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail .detail .info {
  display: flex;
  gap: 1.6rem;
}
#feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail .detail .info span {
  color: #fff;
  font-weight: 500;
  font-size: 1.4rem;
  background-color: #19b6ac;
  border-radius: 1.2rem;
  padding: 0 1.2rem;
}
@media screen and (min-width: 768px) {
  #feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail .detail .info span {
    font-size: 2rem;
  }
}
#feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail .detail .txt {
  font-weight: 500;
  letter-spacing: 0.05em;
  background-color: #e2f7f6;
  font-size: 1.4rem;
  border-radius: 1.2rem;
  padding: 2rem;
}
@media screen and (min-width: 768px) {
  #feedback .swiper-wrapper .swiper-slide .feedback .feedback-detail .detail .txt {
    font-size: 2rem;
    padding: 2.4rem;
  }
}

.banner {
  background-color: #00a08e;
  padding: 4rem 1.6rem;
  overflow: hidden;
  background-image: radial-gradient(rgba(255, 255, 255, 0.123) 0.1rem, transparent 0.1rem);
  background-size: 0.3rem 0.3rem; /* khoảng cách giữa các điểm */
  background-repeat: repeat;
}
@media screen and (min-width: 768px) {
  .banner {
    padding: 5rem 1.6rem;
    background-image: radial-gradient(rgba(255, 255, 255, 0.123) 0.2rem, transparent 0.2rem);
    background-size: 0.6rem 0.6rem; /* khoảng cách giữa các điểm */
  }
}
.banner .banner_wrap {
  position: relative;
}
@media screen and (min-width: 768px) {
  .banner .banner_wrap {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
  }
  .banner .banner_wrap::before {
    content: "";
    aspect-ratio: 127/270;
    height: 27rem;
    background: url(../images/top/banner_char.png) center/contain no-repeat;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%) translateX(110%);
    filter: drop-shadow(1.5rem 2rem 0.4rem rgba(0, 0, 0, 0.2509803922));
  }
}
.banner .banner_title {
  font-weight: 900;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .banner .banner_title {
    position: relative;
    padding-right: 6rem;
    margin-bottom: 3rem;
  }
  .banner .banner_title::before {
    content: "";
    aspect-ratio: 127/270;
    height: 10rem;
    background: url(../images/top/banner_char.png) center/contain no-repeat;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0.5rem 0.5rem 0.1rem rgba(0, 0, 0, 0.2509803922));
  }
}
@media screen and (min-width: 768px) {
  .banner .banner_title {
    margin-bottom: 2.4rem;
    font-size: 3.2rem;
  }
}
.banner .banner_action {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .banner .banner_action {
    flex-direction: column;
    gap: 1.2rem;
    padding-bottom: 1.2rem;
  }
  .banner .banner_action .btn {
    width: 30rem;
  }
}
@media screen and (min-width: 768px) {
  .banner .banner_action {
    gap: 2.8rem;
  }
  .banner .banner_action .btn {
    width: 38rem;
  }
}

@media screen and (min-width: 768px) {
  #step + .banner .banner_wrap::before {
    right: auto;
    left: 1.5rem;
    transform: translateY(-50%) translateX(-110%) rotateY(180deg);
  }
}

#faq {
  background: url(../images/top/point_bg.png) top center;
}
#faq .section_title_faq {
  background: url(../images/top/faq_title_bg.svg) center/contain no-repeat;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4rem;
  padding-right: 4rem;
}
@media screen and (min-width: 768px) {
  #faq .section_title_faq {
    padding-left: 10rem;
    padding-right: 10rem;
    font-size: 3.6rem;
  }
  #faq .section_title_faq span {
    display: block;
  }
}
#faq .section_title_faq::before {
  content: "";
  aspect-ratio: 1;
  background: url(../images/top/faq_char.png) center/contain no-repeat;
  position: absolute;
  top: 50%;
  right: 0;
  width: 10rem;
  transform: translateY(-50%) translateX(40%);
}
@media screen and (min-width: 768px) {
  #faq .section_title_faq::before {
    width: 30rem;
    transform: translateY(-40%) translateX(50%);
  }
}
#faq .faq_wrap {
  max-width: 97rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
}
#faq .faq_wrap .faq {
  background-color: #00a08e;
  border-radius: 2.4rem;
  padding: 2.4rem 1.6rem;
}
@media screen and (min-width: 768px) {
  #faq .faq_wrap .faq {
    padding: 2.4rem;
  }
}
#faq .faq_wrap .faq .ques {
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
  gap: 1.2rem;
}
@media screen and (min-width: 768px) {
  #faq .faq_wrap .faq .ques {
    font-size: 2.4rem;
    padding: 0 2.4rem;
  }
}
#faq .faq_wrap .faq .ques::before {
  content: "Q.";
  font-size: 2.4rem;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  #faq .faq_wrap .faq .ques::before {
    font-size: 3.2rem;
  }
}
#faq .faq_wrap .faq .answ {
  font-weight: 900;
  border-radius: 2rem;
  background-color: #fff;
  color: #00a08e;
  letter-spacing: 0.1em;
  padding: 1.2rem 1.6rem;
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
@media screen and (max-width: 767px) {
  #faq .faq_wrap .faq .answ {
    font-size: 1.3rem;
  }
}
@media screen and (min-width: 768px) {
  #faq .faq_wrap .faq .answ {
    gap: 1.8rem;
    padding: 1.2rem 2.4rem;
    align-items: center;
  }
}
#faq .faq_wrap .faq .answ::before {
  content: "A.";
  font-size: 2.4rem;
  line-height: 1.5;
  text-shadow: -1px 0px 0 #000000, 0px -1px 0 #000000, 0px 0px 0 #000000, 0px 1px 0 #000000, 1px 0px 0 #000000;
}
@media screen and (min-width: 768px) {
  #faq .faq_wrap .faq .answ::before {
    font-size: 3.2rem;
  }
}