@import "https://fonts.googleapis.com/css2?family=Dongle&family=Prompt:wght@100;500&display=swap";
.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.flex {
  display: flex; }

.clearall {
  background: 0;
  border: 0;
  margin: 0;
  padding: 0; }

.width80 {
  width: 80%; }

.width100 {
  width: 100%; }

.end {
  display: flex;
  justify-content: flex-end; }

.centerX {
  justify-content: center; }

.centerY {
  align-items: center; }

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center; }

.flex-1 {
  flex: 1; }

.flex-2 {
  flex: 2; }

.center {
  text-align: center; }

.text_left {
  text-align: left; }

.text_right {
  text-align: right; }

.w10 {
  width: 10px; }

.h20 {
  height: 20px; }

.h40 {
  height: 40px; }

.vh10 {
  height: 10vh; }

.vh20 {
  height: 20vh; }

.relative {
  position: relative; }

.topic--1 {
  padding: 0 0.5rem; }
  .topic--1 p:first-of-type {
    margin-top: 5rem;
    font-size: 2.5rem;
    font-weight: bold;
    color: #00222e; }
  .topic--1 p {
    font-size: 1.5rem; }
  .topic--1 p:last-of-type {
    font-weight: bold;
    font-size: 1.5rem; }

.topic--2 {
  padding: 0 0.5rem; }
  .topic--2 p {
    color: #FFFFFF; }
    .topic--2 p:first-of-type {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--2 p {
      font-size: 1.2rem; }

.topic--3 {
  padding: 0 0.5rem; }
  .topic--3 p {
    color: #FFFFFF; }
    .topic--3 p:first-of-type {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--3 p {
      font-size: 1.2rem; }

.topic--4 {
  padding: 0 0.5rem; }
  .topic--4 p {
    color: #FFFFFF; }
    .topic--4 p:first-of-type {
      margin-top: 10rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--4 p {
      font-size: 1.2rem; }

.topic--5 {
  padding: 0 0.5rem; }
  .topic--5 p {
    color: #00222e; }
    .topic--5 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--5 p {
      font-size: 1.2rem; }

.topic--6 {
  padding: 0 0.5rem; }
  .topic--6 p {
    color: #FFFFFF; }
    .topic--6 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--6 p {
      font-size: 1.2rem; }

.topic--7 {
  padding: 0 0.5rem; }
  .topic--7 p {
    font-size: 1.5rem; }
    .topic--7 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold;
      color: #00222e;
      letter-spacing: 0.5rem; }
      @media (max-width: 600px) {
        .topic--7 p:first-of-type {
          font-size: 1.5rem !important;
          letter-spacing: 0.2rem; } }

@media (max-width: 600px) {
  .topic--1 p:first-of-type,
  .topic--2 p:first-of-type,
  .topic--3 p:first-of-type,
  .topic--4 p:first-of-type,
  .topic--5 p:first-of-type,
  .topic--6 p:first-of-type,
  .topic--7 p:first-of-type {
    font-size: 2rem; }
  .topic--1 p,
  .topic--2 p,
  .topic--3 p,
  .topic--4 p,
  .topic--5 p,
  .topic--6 p,
  .topic--7 p {
    font-size: 1rem; } }
.mouseclick, .content--2--box .icon path,
.content--2--box .icon svg {
  animation: tranform 2s;
  animation-iteration-count: infinite; }
@keyframes tranform {
  0% {
    transform: translateX(-1px); }
  50% {
    transform: translateX(9px); }
  100% {
    transform: translateX(-1px); } }
.miracle {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .miracle span:last-of-type {
    color: #70b646; }

.coffeemall {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .coffeemall span:last-of-type {
    color: #ff6f02; }

.resq {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .resq span:last-of-type {
    color: #70b646; }

.su {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .su span:last-of-type {
    color: #0f726f; }

.gifx {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .gifx span:last-of-type {
    color: #e40025; }

.halala {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .halala span:last-of-type {
    color: #ff6f02; }

.border-top {
  border-top: 3px solid #FFFFFF;
  max-width: 850px;
  margin: 0 auto;
  opacity: 70%;
  width: 80%; }

.curves-fix {
  position: absolute;
  bottom: -5px;
  z-index: 5; }

#logo1 {
  display: none; }

#logo2_mb {
  display: none; }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.flex {
  display: flex; }

.clearall {
  background: 0;
  border: 0;
  margin: 0;
  padding: 0; }

.width80 {
  width: 80%; }

.width100 {
  width: 100%; }

.end {
  display: flex;
  justify-content: flex-end; }

.centerX {
  justify-content: center; }

.centerY {
  align-items: center; }

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center; }

.flex-1 {
  flex: 1; }

.flex-2 {
  flex: 2; }

.center {
  text-align: center; }

.text_left {
  text-align: left; }

.text_right {
  text-align: right; }

.w10 {
  width: 10px; }

.h20 {
  height: 20px; }

.h40 {
  height: 40px; }

.vh10 {
  height: 10vh; }

.vh20 {
  height: 20vh; }

.relative {
  position: relative; }

.topic--1 {
  padding: 0 0.5rem; }
  .topic--1 p:first-of-type {
    margin-top: 5rem;
    font-size: 2.5rem;
    font-weight: bold;
    color: #00222e; }
  .topic--1 p {
    font-size: 1.5rem; }
  .topic--1 p:last-of-type {
    font-weight: bold;
    font-size: 1.5rem; }

.topic--2 {
  padding: 0 0.5rem; }
  .topic--2 p {
    color: #FFFFFF; }
    .topic--2 p:first-of-type {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--2 p {
      font-size: 1.2rem; }

.topic--3 {
  padding: 0 0.5rem; }
  .topic--3 p {
    color: #FFFFFF; }
    .topic--3 p:first-of-type {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--3 p {
      font-size: 1.2rem; }

.topic--4 {
  padding: 0 0.5rem; }
  .topic--4 p {
    color: #FFFFFF; }
    .topic--4 p:first-of-type {
      margin-top: 10rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--4 p {
      font-size: 1.2rem; }

.topic--5 {
  padding: 0 0.5rem; }
  .topic--5 p {
    color: #00222e; }
    .topic--5 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--5 p {
      font-size: 1.2rem; }

.topic--6 {
  padding: 0 0.5rem; }
  .topic--6 p {
    color: #FFFFFF; }
    .topic--6 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--6 p {
      font-size: 1.2rem; }

.topic--7 {
  padding: 0 0.5rem; }
  .topic--7 p {
    font-size: 1.5rem; }
    .topic--7 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold;
      color: #00222e;
      letter-spacing: 0.5rem; }
      @media (max-width: 600px) {
        .topic--7 p:first-of-type {
          font-size: 1.5rem !important;
          letter-spacing: 0.2rem; } }

@media (max-width: 600px) {
  .topic--1 p:first-of-type,
  .topic--2 p:first-of-type,
  .topic--3 p:first-of-type,
  .topic--4 p:first-of-type,
  .topic--5 p:first-of-type,
  .topic--6 p:first-of-type,
  .topic--7 p:first-of-type {
    font-size: 2rem; }
  .topic--1 p,
  .topic--2 p,
  .topic--3 p,
  .topic--4 p,
  .topic--5 p,
  .topic--6 p,
  .topic--7 p {
    font-size: 1rem; } }
.mouseclick, .content--2--box .icon path,
.content--2--box .icon svg {
  animation: tranform 2s;
  animation-iteration-count: infinite; }
@keyframes tranform {
  0% {
    transform: translateX(-1px); }
  50% {
    transform: translateX(9px); }
  100% {
    transform: translateX(-1px); } }
.miracle {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .miracle span:last-of-type {
    color: #70b646; }

.coffeemall {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .coffeemall span:last-of-type {
    color: #ff6f02; }

.resq {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .resq span:last-of-type {
    color: #70b646; }

.su {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .su span:last-of-type {
    color: #0f726f; }

.gifx {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .gifx span:last-of-type {
    color: #e40025; }

.halala {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .halala span:last-of-type {
    color: #ff6f02; }

.border-top {
  border-top: 3px solid #FFFFFF;
  max-width: 850px;
  margin: 0 auto;
  opacity: 70%;
  width: 80%; }

.curves-fix {
  position: absolute;
  bottom: -5px;
  z-index: 5; }

#logo1 {
  display: none; }

#logo2_mb {
  display: none; }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.bg-video {
  width: 100%;
  position: relative;
  overflow: hidden; }
  @media (max-width: 600px) {
    .bg-video--float p {
      font-size: 1.2rem !important; }
      .bg-video--float p:not(:first-of-type) {
        font-size: 1rem !important; } }
  @media (max-width: 425px) {
    .bg-video p {
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin: 0 1rem; }
      .bg-video p:first-of-type {
        margin-top: 2rem; } }
  .bg-video--float {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start; }
    @media (max-width: 900px) {
      .bg-video--float p {
        font-size: 1.4rem !important; } }
    @media (max-width: 600px) {
      .bg-video--float p {
        font-size: 1.2rem !important; } }
    @media (max-width: 425px) {
      .bg-video--float p {
        color: #FFFFFF !important; } }
    .bg-video--float p {
      color: #FFFFFF;
      font-size: 1.7rem; }
  .bg-video--video--bg {
    width: 100%;
    height: 100%;
    filter: brightness(0.6); }
    @media (max-width: 900px) {
      .bg-video--video--bg {
        width: 160%; } }
    @media (max-width: 600px) {
      .bg-video--video--bg {
        width: 180%; } }
    @media (max-width: 425px) {
      .bg-video--video--bg {
        width: 250% !important; } }

.top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20; }
  @media (max-width: 900px) {
    .top--nav {
      padding: 1rem !important; } }
  @media (max-width: 600px) {
    .top--nav {
      padding: 0.5rem 1rem !important; } }
  .top--nav {
    position: relative;
    padding: 1.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 1200px; }
    @media (max-width: 900px) {
      .top--nav--logo {
        display: none !important; }
      .top--nav--menu {
        display: none !important; } }
    .top--nav--logo {
      display: flex;
      align-items: center;
      font-weight: bold;
      text-align: left;
      font-size: 1.2rem;
      color: inherit; }
      .top--nav--logo a {
        margin-left: 0.4rem; }
    .top--nav--menu {
      display: flex;
      align-items: center;
      justify-content: flex-end; }
      .top--nav--menu a {
        margin-left: 2rem;
        cursor: pointer;
        font-size: 0.9rem;
        color: #FFFFFF;
        border-bottom: 2.5px solid transparent; }
        .top--nav--menu a:hover {
          border-bottom: 2.5px solid #24afdd;
          transition: 0.1s;
          color: #00A9E0;
          font-size: 1rem; }
    .top--nav--phone {
      display: none;
      background: 0;
      border: 0; }
      @media (max-width: 900px) {
        .top--nav--phone {
          display: block; } }
      .top--nav--phone--flex {
        display: flex; }
        .top--nav--phone--flex div:last-of-type {
          flex: 1;
          position: absolute;
          left: 1rem; }
          .top--nav--phone--flex div:last-of-type img {
            width: 5rem; }
      .top--nav--phone svg {
        font-size: 1.5rem; }
    .top--nav--dropdown {
      background: #000000;
      opacity: 85%;
      display: none;
      position: absolute;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0; }
      .top--nav--dropdown--menu {
        margin-top: 10%;
        display: flex;
        flex-direction: column; }
        @media (max-width: 600px) {
          .top--nav--dropdown--menu .times {
            font-size: 1.5rem !important; }
          .top--nav--dropdown--menu a {
            font-size: 1rem !important; } }
        @media (max-width: 425px) {
          .top--nav--dropdown--menu .times {
            font-size: 1rem !important; }
          .top--nav--dropdown--menu a {
            font-size: 0.9rem !important; } }
        .top--nav--dropdown--menu .times {
          font-size: 2rem;
          color: #FFFFFF;
          position: absolute;
          right: 1rem;
          top: 1rem; }
        .top--nav--dropdown--menu a {
          padding: 1.5rem;
          color: #FFFFFF;
          font-size: 1.2rem; }
          .top--nav--dropdown--menu a:hover {
            background-color: #24afdd;
            color: #FFFFFF;
            transition: 0.2s;
            font-style: italic; }

.top2 {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  background: #FFFFFF;
  box-shadow: 0 0 0.6rem #333333; }
  @media (max-width: 900px) {
    .top2--nav {
      padding: 1rem !important; } }
  @media (max-width: 600px) {
    .top2--nav {
      padding: 0.5rem 1rem !important; } }
  .top2--nav {
    padding: 1.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
    max-width: 1200px;
    cursor: pointer; }
    .top2--nav--logo {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      text-align: left;
      font-size: 1.2rem;
      color: inherit; }
      .top2--nav--logo a {
        margin-left: 0.4rem; }
    .top2--nav--menu {
      display: flex;
      align-items: center;
      justify-content: flex-end; }
      .top2--nav--menu a {
        margin-left: 2rem;
        cursor: pointer;
        font-size: 0.9rem;
        color: #000000; }
        .top2--nav--menu a:hover {
          border-bottom: 2.5px solid #24afdd;
          transition: 0.1s;
          color: #00A9E0;
          font-size: 1rem; }

.top_branch {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
  background: #FFFFFF;
  box-shadow: 0 0 0.6rem #333333; }
  @media (max-width: 900px) {
    .top_branch--nav {
      padding: 1rem !important; } }
  @media (max-width: 600px) {
    .top_branch--nav {
      padding: 0.5rem 1rem !important; } }
  .top_branch--nav {
    position: relative;
    padding: 1.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 1200px; }
    @media (max-width: 900px) {
      .top_branch--nav--logo {
        display: none !important; }
      .top_branch--nav--menu {
        display: none !important; } }
    .top_branch--nav--logo {
      display: flex;
      align-items: center;
      font-weight: bold;
      text-align: left;
      font-size: 1.2rem;
      color: inherit; }
      .top_branch--nav--logo a {
        margin-left: 0.4rem; }
    .top_branch--nav--menu {
      display: flex;
      align-items: center;
      justify-content: flex-end; }
      .top_branch--nav--menu a {
        margin-left: 2rem;
        cursor: pointer;
        font-size: 0.9rem;
        color: #000000;
        border-bottom: 2.5px solid transparent; }
        .top_branch--nav--menu a:hover {
          border-bottom: 2.5px solid #24afdd;
          transition: 0.1s;
          color: #00A9E0;
          font-size: 1rem; }
    .top_branch--nav--phone {
      display: none;
      background: 0;
      border: 0; }
      @media (max-width: 900px) {
        .top_branch--nav--phone {
          display: block; } }
      .top_branch--nav--phone--flex {
        display: flex; }
        .top_branch--nav--phone--flex div:last-of-type {
          flex: 1;
          position: absolute;
          left: 1rem; }
          .top_branch--nav--phone--flex div:last-of-type img {
            width: 5rem; }
      .top_branch--nav--phone svg {
        font-size: 1.5rem; }
    .top_branch--nav--dropdown {
      background: #000000;
      opacity: 85%;
      display: none;
      position: absolute;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0; }
      .top_branch--nav--dropdown--menu {
        margin-top: 10%;
        display: flex;
        flex-direction: column; }
        @media (max-width: 600px) {
          .top_branch--nav--dropdown--menu .times {
            font-size: 1.5rem !important; }
          .top_branch--nav--dropdown--menu a {
            font-size: 1rem !important; } }
        @media (max-width: 425px) {
          .top_branch--nav--dropdown--menu .times {
            font-size: 1rem !important; }
          .top_branch--nav--dropdown--menu a {
            font-size: 0.9rem !important; } }
        .top_branch--nav--dropdown--menu .times {
          font-size: 2rem;
          color: #FFFFFF;
          position: absolute;
          right: 1rem;
          top: 1rem; }
        .top_branch--nav--dropdown--menu a {
          padding: 1.5rem;
          color: #FFFFFF;
          font-size: 1.2rem; }
          .top_branch--nav--dropdown--menu a:hover {
            background-color: #24afdd;
            color: #FFFFFF;
            transition: 0.2s;
            font-style: italic; }

.logo--ovc {
  width: 7rem;
  margin-right: 2px; }

.card {
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 20rem;
  cursor: pointer; }
  @media (max-width: 900px) {
    .card--side {
      width: 100% !important; }
      .card--side--front--img {
        left: 0% !important; }
        .card--side--front--img img {
          transform: scale(1) !important; } }
  @media (max-width: 425px) {
    .card--side--back {
      left: -5% !important; } }
  @media (max-width: 350px) {
    .card--side--front--img {
      left: -10% !important; }
    .card--side--back {
      left: -5% !important; } }
  .card--side {
    color: #000000;
    height: 25rem;
    transition: all 0.8s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 95%;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important; }
    .card--side--front {
      position: relative;
      display: flex;
      justify-content: center; }
      .card--side--front--img {
        position: absolute;
        left: 10%;
        top: 15%; }
        .card--side--front--img img {
          transform: scale(1.2); }
    .card--side--back {
      background: #FFFFFF;
      height: 100%;
      transform: rotateY(180deg);
      box-shadow: 0 0 10px #cccccc;
      padding: 1rem; }
      .card--side--back p {
        margin-top: 1.2rem;
        margin-bottom: 1rem; }
      .card--side--back img {
        width: 100%; }
      .card--side--back button {
        margin-top: 1rem;
        font-size: 0.9rem;
        color: #FFFFFF;
        background: #00A9E0;
        width: 50%;
        border: 0;
        border-radius: 5px;
        padding: 10px;
        cursor: pointer; }
        .card--side--back button:hover {
          transform: translateY(-2px);
          background: #00c0ff;
          transition: 0.4s; }
        .card--side--back button:active {
          background: #009dd1; }
  .card:hover .card--side--front {
    transform: rotateY(180deg); }
  .card:hover .card--side--back {
    transform: rotateY(0deg); }

.gallery {
  overflow-y: scroll;
  max-height: 30rem; }
  @media (max-width: 600px) {
    .gallery {
      max-height: 20rem !important; } }
  @media (max-width: 425px) {
    .gallery {
      max-height: 10rem !important; } }
  .gallery img {
    width: 100%; }

.scroll {
  display: flex;
  overflow: hidden; }
  .scroll img {
    width: 100%; }

.drodown-block {
  display: block; }

.modal {
  display: none;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  z-index: 20;
  width: 100%;
  top: 0; }
  .modal--center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh; }
    .modal--center--content {
      background: #FFFFFF;
      width: 20%;
      border-radius: 5px;
      margin: 0 1rem;
      padding: 2rem;
      position: relative;
      text-align: center;
      box-shadow: 0 0 1rem #333333; }
      @media (min-width: 1200px) {
        .modal--center--content {
          width: 20% !important; } }
      @media (max-width: 1200px) {
        .modal--center--content {
          width: 40% !important; } }
      @media (max-width: 600px) {
        .modal--center--content {
          width: 60% !important; } }
      .modal--center--content .times {
        position: absolute;
        top: 5px;
        right: 10px;
        cursor: pointer; }
        .modal--center--content .times svg {
          font-size: 1.2rem; }
          .modal--center--content .times svg:hover {
            color: #333333; }
      .modal--center--content--flex p {
        font-size: 1rem; }
      .modal--center--content--flex div {
        display: flex; }
      .modal--center--content--flex .btn_close {
        margin-top: 1rem;
        margin-right: 0.5rem;
        font-size: 0.9rem;
        color: #FFFFFF;
        background: #00A9E0;
        width: 50%;
        border: 0;
        border-radius: 5px;
        padding: 10px;
        cursor: pointer; }
        .modal--center--content--flex .btn_close:hover {
          transform: translateY(-2px);
          background: #00c0ff;
          transition: 0.4s; }
        .modal--center--content--flex .btn_close:active {
          background: #009dd1; }
      .modal--center--content--flex .btn_open {
        margin-top: 1rem;
        font-size: 0.9rem;
        color: #FFFFFF;
        background: #00A9E0;
        width: 50%;
        border: 0;
        border-radius: 5px;
        padding: 10px;
        cursor: pointer; }
        .modal--center--content--flex .btn_open:hover {
          transform: translateY(-2px);
          background: #00c0ff;
          transition: 0.4s; }
        .modal--center--content--flex .btn_open:active {
          background: #009dd1; }

.modal-open {
  display: block; }

@media (max-width: 600px) {
  .media_block {
    display: block !important; } }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.flex {
  display: flex; }

.clearall {
  background: 0;
  border: 0;
  margin: 0;
  padding: 0; }

.width80 {
  width: 80%; }

.width100 {
  width: 100%; }

.end {
  display: flex;
  justify-content: flex-end; }

.centerX {
  justify-content: center; }

.centerY {
  align-items: center; }

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center; }

.flex-1 {
  flex: 1; }

.flex-2 {
  flex: 2; }

.center {
  text-align: center; }

.text_left {
  text-align: left; }

.text_right {
  text-align: right; }

.w10 {
  width: 10px; }

.h20 {
  height: 20px; }

.h40 {
  height: 40px; }

.vh10 {
  height: 10vh; }

.vh20 {
  height: 20vh; }

.relative {
  position: relative; }

.topic--1 {
  padding: 0 0.5rem; }
  .topic--1 p:first-of-type {
    margin-top: 5rem;
    font-size: 2.5rem;
    font-weight: bold;
    color: #00222e; }
  .topic--1 p {
    font-size: 1.5rem; }
  .topic--1 p:last-of-type {
    font-weight: bold;
    font-size: 1.5rem; }

.topic--2 {
  padding: 0 0.5rem; }
  .topic--2 p {
    color: #FFFFFF; }
    .topic--2 p:first-of-type {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--2 p {
      font-size: 1.2rem; }

.topic--3 {
  padding: 0 0.5rem; }
  .topic--3 p {
    color: #FFFFFF; }
    .topic--3 p:first-of-type {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--3 p {
      font-size: 1.2rem; }

.topic--4 {
  padding: 0 0.5rem; }
  .topic--4 p {
    color: #FFFFFF; }
    .topic--4 p:first-of-type {
      margin-top: 10rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--4 p {
      font-size: 1.2rem; }

.topic--5 {
  padding: 0 0.5rem; }
  .topic--5 p {
    color: #00222e; }
    .topic--5 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--5 p {
      font-size: 1.2rem; }

.topic--6 {
  padding: 0 0.5rem; }
  .topic--6 p {
    color: #FFFFFF; }
    .topic--6 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--6 p {
      font-size: 1.2rem; }

.topic--7 {
  padding: 0 0.5rem; }
  .topic--7 p {
    font-size: 1.5rem; }
    .topic--7 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold;
      color: #00222e;
      letter-spacing: 0.5rem; }
      @media (max-width: 600px) {
        .topic--7 p:first-of-type {
          font-size: 1.5rem !important;
          letter-spacing: 0.2rem; } }

@media (max-width: 600px) {
  .topic--1 p:first-of-type,
  .topic--2 p:first-of-type,
  .topic--3 p:first-of-type,
  .topic--4 p:first-of-type,
  .topic--5 p:first-of-type,
  .topic--6 p:first-of-type,
  .topic--7 p:first-of-type {
    font-size: 2rem; }
  .topic--1 p,
  .topic--2 p,
  .topic--3 p,
  .topic--4 p,
  .topic--5 p,
  .topic--6 p,
  .topic--7 p {
    font-size: 1rem; } }
.mouseclick, .content--2--box .icon path,
.content--2--box .icon svg {
  animation: tranform 2s;
  animation-iteration-count: infinite; }
@keyframes tranform {
  0% {
    transform: translateX(-1px); }
  50% {
    transform: translateX(9px); }
  100% {
    transform: translateX(-1px); } }
.miracle {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .miracle span:last-of-type {
    color: #70b646; }

.coffeemall {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .coffeemall span:last-of-type {
    color: #ff6f02; }

.resq {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .resq span:last-of-type {
    color: #70b646; }

.su {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .su span:last-of-type {
    color: #0f726f; }

.gifx {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .gifx span:last-of-type {
    color: #e40025; }

.halala {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .halala span:last-of-type {
    color: #ff6f02; }

.border-top {
  border-top: 3px solid #FFFFFF;
  max-width: 850px;
  margin: 0 auto;
  opacity: 70%;
  width: 80%; }

.curves-fix {
  position: absolute;
  bottom: -5px;
  z-index: 5; }

#logo1 {
  display: none; }

#logo2_mb {
  display: none; }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.main {
  position: relative;
  overflow: hidden; }

.content--base, .ProductDetail, .ProductDetail__vending {
  max-width: 1200px;
  margin: 0 auto; }
.content--1 {
  max-width: 1200px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  text-align: center;
  padding: 0.5rem; }
  .content--1 img {
    width: 100%;
    margin-right: 20%; }
.content--2 {
  margin-top: 10rem;
  text-align: center;
  display: flex;
  position: relative; }
  @media (max-width: 900px) {
    .content--2 {
      display: block !important; }
      .content--2--box {
        margin: 0 auto !important;
        width: 50% !important;
        margin-bottom: 5rem !important; } }
  @media (max-width: 600px) {
    .content--2--box {
      width: 80% !important; } }
  .content--2--box {
    position: relative;
    background: #FFFFFF;
    color: #000000;
    margin: 0 2rem;
    padding: 3rem 1rem 1rem 1rem;
    margin-bottom: 10rem;
    border-radius: 5px;
    box-shadow: 0 0 10px #e6e6e6;
    border-bottom: 5px solid #24afdd; }
    .content--2--box svg,
    .content--2--box path {
      color: #000000;
      font-size: 2.1rem; }
    .content--2--box p {
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden; }
      .content--2--box p:first-child {
        font-size: 1.5rem;
        font-weight: 600;
        color: #24afdd; }
    .content--2--box .icon a,
    .content--2--box .icon path,
    .content--2--box .icon svg {
      color: #24afdd;
      font-size: 1rem; }
    .content--2--box:hover {
      background: #24afdd;
      color: #FFFFFF;
      transition: 0.4s;
      transform: scale(1.2); }
      @media (max-width: 600px) {
        .content--2--box:hover {
          transform: scale(1); } }
      .content--2--box:hover p {
        -webkit-line-clamp: inherit; }
        .content--2--box:hover p:first-child {
          color: #FFFFFF;
          transition: 0.4s; }
      .content--2--box:hover svg,
      .content--2--box:hover path {
        color: #24afdd;
        font-size: 2.1rem;
        transition: 0.4s; }
      .content--2--box:hover .icon a,
      .content--2--box:hover .icon path,
      .content--2--box:hover .icon svg {
        display: none; }
    .content--2--box--head {
      background: #FFFFFF;
      box-shadow: 0 0 10px #e6e6e6;
      position: absolute;
      top: -2rem;
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      border-radius: 100px; }
  .content--2--bg-line {
    display: none;
    position: absolute;
    background: #0045a7;
    background: linear-gradient(90deg, #0045a7 0%, #3ca5fc 100%);
    width: 100%;
    top: 25%;
    z-index: -1;
    height: 5rem;
    border-radius: 100px; }
.content--box--4 {
  position: relative;
  background: #141414;
  height: 100%;
  padding-top: 1rem;
  color: #FFFFFF;
  clip-path: polygon(50% 0%, 100% 10%, 100% 100%, 0 100%, 0 10%); }
  @media (max-width: 900px) {
    .content--box--4 {
      clip-path: polygon(50% 0%, 100% 2%, 100% 100%, 0 100%, 0 2%) !important; } }
  @media (max-width: 600px) {
    .content--box--4 {
      clip-path: polygon(50% 0%, 100% 1%, 100% 100%, 0 100%, 0 1%) !important; } }
.content--5 {
  background: #FFFFFF; }
.content--6 {
  margin-top: 5rem;
  text-align: center;
  display: flex;
  position: relative;
  flex-wrap: wrap;
  width: 100%; }
  @media (max-width: 900px) {
    .content--6--box {
      width: 40% !important; } }
  @media (max-width: 600px) {
    .content--6 {
      display: block !important; }
      .content--6--box {
        width: 80% !important;
        padding: 0 !important; } }
  .content--6--box {
    position: relative;
    background: #FFFFFF;
    color: #000000;
    margin: 0 auto;
    padding: 1rem 1rem 1rem 1rem;
    margin-bottom: 5rem;
    border-radius: 5px;
    width: 30%; }
    .content--6--box svg,
    .content--6--box path {
      color: #000000;
      font-size: 2.1rem; }
    .content--6--box p {
      font-size: 1.2rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden; }
      .content--6--box p:first-of-type {
        font-size: 1.5rem;
        font-weight: 590;
        color: #000000;
        line-height: 1.8rem;
        margin-bottom: 0.5rem; }
      .content--6--box p:not(:first-of-type) {
        text-indent: 1rem; }
    .content--6--box:hover {
      border-bottom: 5px solid #24afdd;
      transition: 0.2s;
      transform: scale(1.01); }
      @media (max-width: 600px) {
        .content--6--box:hover {
          transform: scale(1); } }
      .content--6--box:hover p {
        -webkit-line-clamp: unset; }
        .content--6--box:hover p:first-of-type {
          color: #24afdd; }
      .content--6--box:hover img {
        filter: contrast(1);
        transition: 0.2s; }
    .content--6--box--head img {
      width: 70%;
      filter: contrast(0.8);
      -webkit-clip-path: inset(10px round 60px 20px 30px 10px);
      clip-path: inset(10px round 70px 20px 30px 10px); }
  .content--6--bg-line {
    display: none;
    position: absolute;
    background: #0045a7;
    background: linear-gradient(90deg, #0045a7 0%, #3ca5fc 100%);
    width: 100%;
    top: 25%;
    z-index: -1;
    height: 5rem;
    border-radius: 100px; }
.content--wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 3rem;
  margin-bottom: 3rem; }
  @media (max-width: 900px) {
    .content--wrap--box {
      width: 40% !important; } }
  @media (max-width: 600px) {
    .content--wrap--box {
      width: 50% !important; } }
  @media (max-width: 425px) {
    .content--wrap--box {
      width: 70% !important; } }
  .content--wrap--box {
    width: 30%;
    text-align: center;
    margin: 5rem 1rem; }
.content--wrap--2 {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap; }
  @media (max-width: 900px) {
    .content--wrap--2 div {
      width: 25% !important; } }
  @media (max-width: 600px) {
    .content--wrap--2 div {
      width: 50% !important; } }
  .content--wrap--2--link {
    position: relative;
    width: 20%; }
    .content--wrap--2--link img {
      cursor: pointer;
      flex: 1;
      width: 100%;
      margin-bottom: 1rem;
      filter: brightness(0.8); }
      .content--wrap--2--link img:hover {
        transform: scale(1.1);
        opacity: 100%;
        transition: 0.4s;
        filter: contrast(1); }
.content--team {
  margin-bottom: 20vh; }
  @media (max-width: 425px) {
    .content--team {
      display: none; } }
  .content--team button {
    background: 0;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer; }
    .content--team button img {
      width: 100%;
      opacity: 40%; }
    .content--team button:hover img {
      opacity: 100%;
      transform: scale(1.05);
      transition: 0.2s; }
  .content--team--text {
    width: 50%;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 1rem; }
    .content--team--text span:first-of-type {
      font-size: 1.2rem; }
    .content--team--text span:last-of-type {
      opacity: 40%; }
    .content--team--text p {
      margin-top: 1rem;
      font-size: 1rem; }
.content--team--phone {
  display: none;
  padding: 0.5rem;
  text-align: center; }
  @media (max-width: 425px) {
    .content--team--phone {
      display: block; } }
  .content--team--phone img {
    width: 70%;
    border-radius: 0.5rem;
    margin: 0 auto; }
  .content--team--phone--text {
    width: 80%;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 1rem; }
    .content--team--phone--text span:first-of-type {
      font-size: 1.2rem; }
    .content--team--phone--text span:last-of-type {
      opacity: 40%; }
    .content--team--phone--text p {
      margin-top: 1rem;
      font-size: 1rem; }

.footer {
  background: #262626;
  color: #FFFFFF;
  padding: 5rem 0; }
  @media (max-width: 900px) {
    .footer {
      display: none; }
      .footer--content--flex {
        display: block !important;
        text-align: left !important; }
        .footer--content--flex--logo--footer {
          display: flex;
          justify-content: center; }
        .footer--content--flex--link {
          text-align: left !important; }
        .footer--content--flex div {
          margin-top: 2rem !important; } }
  .footer--content--flex {
    display: flex;
    text-align: center;
    text-align: left; }
    .footer--content--flex div {
      flex: 1.7;
      margin: 0 1rem; }
      .footer--content--flex div:first-of-type {
        flex: 1; }
      .footer--content--flex div:last-of-type {
        flex: 1; }
      .footer--content--flex div p {
        font-size: 0.9rem;
        margin-top: 1rem; }
        .footer--content--flex div p:first-of-type {
          font-size: 1.2rem;
          margin-top: 0rem; }
    .footer--content--flex--logo--footer {
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: center; }
      .footer--content--flex--logo--footer img {
        width: 15rem;
        margin-bottom: 2rem; }
    .footer--content--flex--link {
      text-align: center; }
      @media (max-width: 600px) {
        .footer--content--flex--link {
          text-align: left !important; } }
      .footer--content--flex--link--flex a,
      .footer--content--flex--link--flex svg {
        font-size: 1.5rem;
        color: inherit; }
      .footer--content--flex--link img {
        width: 35%;
        margin-top: 2rem; }
  .footer--content--footest a {
    color: inherit;
    font-size: 1rem; }
  .footer--content--footest p:last-of-type {
    font-size: 0.7rem;
    color: inherit;
    opacity: 60%;
    margin-top: 0.2rem; }

.footer--2 {
  display: none;
  background: #262626;
  color: #FFFFFF;
  padding: 5rem 0; }
  @media (max-width: 900px) {
    .footer--2--content--flex {
      display: block !important;
      text-align: left !important; }
      .footer--2--content--flex--logo--footer {
        display: flex;
        justify-content: center; }
        .footer--2--content--flex--logo--footer div {
          text-align: center; }
          .footer--2--content--flex--logo--footer div img {
            width: 12rem !important; }
      .footer--2--content--flex--link {
        text-align: left !important; }
      .footer--2--content--flex div {
        margin-top: 2rem !important; } }
  @media (max-width: 900px) {
    .footer--2 {
      display: block; } }
  .footer--2--content--flex {
    display: flex;
    text-align: center;
    text-align: left; }
    .footer--2--content--flex div {
      flex: 1.7;
      margin: 0 1rem; }
      .footer--2--content--flex div:first-of-type {
        flex: 1; }
      .footer--2--content--flex div:last-of-type {
        flex: 1; }
      .footer--2--content--flex div p {
        font-size: 0.9rem;
        margin-top: 1rem; }
        .footer--2--content--flex div p:first-of-type {
          font-size: 1.2rem;
          margin-top: 0rem; }
    .footer--2--content--flex--logo--footer {
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: center; }
      .footer--2--content--flex--logo--footer img {
        width: 15rem;
        margin-bottom: 2rem; }
    .footer--2--content--flex--link {
      text-align: center;
      margin-left: 1rem;
      margin-top: 1rem; }
      @media (max-width: 600px) {
        .footer--2--content--flex--link {
          text-align: left; } }
      .footer--2--content--flex--link--flex a,
      .footer--2--content--flex--link--flex svg {
        font-size: 1.5rem;
        color: inherit; }
      .footer--2--content--flex--link img {
        width: 35%;
        margin-top: 2rem; }
  .footer--2--content--footest {
    text-align: center !important; }
    .footer--2--content--footest a {
      color: inherit;
      font-size: 1rem; }
    .footer--2--content--footest p:last-of-type {
      font-size: 0.7rem;
      color: inherit;
      opacity: 60%;
      margin-top: 0.2rem; }
  .footer--2 .qr_support {
    width: 30%;
    margin: 0 auto;
    margin-left: 1rem;
    margin-top: 1rem; }

.productContent {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 0.5rem;
  width: 70%; }
  @media (max-width: 900px) {
    .productContent {
      width: 85% !important; } }
  @media (max-width: 600px) {
    .productContent {
      display: block !important; } }
  .productContent--img {
    flex: 1;
    text-align: center; }
    .productContent--img img {
      width: 65%; }
      @media (max-width: 600px) {
        .productContent--img img {
          width: 60%; } }
  .productContent--img--block {
    flex: 1;
    text-align: center;
    display: none; }
    @media (max-width: 600px) {
      .productContent--img--block {
        display: block !important; } }
    .productContent--img--block img {
      width: 65%; }
  .productContent--img--none {
    flex: 1;
    text-align: center;
    display: block; }
    @media (max-width: 600px) {
      .productContent--img--none {
        display: none !important; } }
    .productContent--img--none img {
      width: 65%; }
  .productContent--text {
    flex: 1;
    padding: 1rem;
    margin-left: 3rem; }
    @media (max-width: 600px) {
      .productContent--text {
        margin: 0 !important; } }
    .productContent--text div {
      margin: 0 auto;
      width: 90%; }
      .productContent--text div p {
        color: #666666;
        margin-top: 1rem;
        font-size: 1rem; }
        .productContent--text div p:first-of-type {
          font-size: 1.6rem;
          font-weight: bold;
          color: #000000; }
        .productContent--text div p:nth-child(2) {
          font-size: 1.2rem;
          margin-top: 0rem;
          font-weight: bold;
          color: #000000; }
        .productContent--text div p:last-of-type {
          font-size: 1.5rem;
          color: #ff0055; }
        .productContent--text div p span {
          text-decoration: line-through;
          color: #666666;
          font-size: 1rem; }
    .productContent--text--btn {
      display: flex; }
      .productContent--text--btn button:first-of-type {
        margin-right: 0.5rem; }

.productContent__2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; }
  @media (max-width: 600px) {
    .productContent__2 {
      display: block !important; } }
  .productContent__2__box {
    width: 20%;
    text-align: center; }
    @media (max-width: 600px) {
      .productContent__2__box {
        margin: 0 auto;
        width: 90% !important;
        padding: 0 !important; } }
    .productContent__2__box_div {
      padding: 0.5rem; }
      .productContent__2__box_div img {
        width: 80%; }
        @media (max-width: 600px) {
          .productContent__2__box_div img {
            width: 90%; } }

.aboutUs {
  margin: 0 auto;
  max-width: 1200px; }
  .aboutUs__1 {
    margin-top: 20vh;
    display: flex;
    align-items: center;
    padding: 2rem 0; }
    @media (max-width: 600px) {
      .aboutUs__1 {
        display: block !important; } }
    .aboutUs__1__picture {
      flex: 1;
      text-align: right;
      clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      position: relative; }
      .aboutUs__1__picture img {
        width: 100%;
        display: block; }
        @media (max-width: 600px) {
          .aboutUs__1__picture img {
            margin-bottom: 1rem; } }
    .aboutUs__1__content {
      flex: 1;
      padding: 0 2rem; }
      .aboutUs__1__content p:nth-child(1) {
        font-size: 1.8rem;
        margin-bottom: 1rem;
        text-align: center; }
        @media (max-width: 425px) {
          .aboutUs__1__content p:nth-child(1) {
            font-size: 1.5rem !important; } }
      .aboutUs__1__content p:nth-child(2) {
        text-align: left;
        text-indent: 2rem;
        font-size: 1rem;
        font-style: italic; }
  .aboutUs__2 {
    display: flex;
    align-items: center;
    padding: 2rem 0; }
    @media (max-width: 600px) {
      .aboutUs__2 {
        display: block !important; } }
    .aboutUs__2__picture {
      flex: 1;
      text-align: right;
      clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      position: relative; }
      .aboutUs__2__picture img {
        width: 100%;
        display: block; }
        @media (max-width: 600px) {
          .aboutUs__2__picture img {
            margin-top: 1rem; } }
    .aboutUs__2__content {
      flex: 1;
      padding: 0 2rem;
      text-align: center; }
      .aboutUs__2__content p:nth-child(1) {
        font-size: 1.8rem;
        margin-bottom: 1rem; }
        @media (max-width: 425px) {
          .aboutUs__2__content p:nth-child(1) {
            font-size: 1.5rem !important; } }
      .aboutUs__2__content p:nth-child(2) {
        text-indent: 2rem;
        font-size: 1.5rem;
        font-style: italic; }
        @media (max-width: 425px) {
          .aboutUs__2__content p:nth-child(2) {
            font-size: 1.1rem !important;
            text-indent: unset; } }
  .aboutUs__3 {
    margin-top: 5rem;
    text-align: center; }
    .aboutUs__3 p:nth-child(1) {
      font-size: 1.8rem;
      margin-bottom: 5rem; }
      @media (max-width: 425px) {
        .aboutUs__3 p:nth-child(1) {
          font-size: 1.5rem !important; } }
    .aboutUs__3__content {
      display: flex; }
      @media (max-width: 600px) {
        .aboutUs__3__content {
          display: block; } }
      .aboutUs__3__content__box {
        flex: 1;
        text-align: center;
        padding: 0 1rem; }
        @media (max-width: 600px) {
          .aboutUs__3__content__box {
            margin-bottom: 1rem; }
            .aboutUs__3__content__box img {
              width: 40% !important; } }
        .aboutUs__3__content__box img {
          width: 60%;
          border-radius: 100%;
          margin-bottom: 1rem;
          border: 5px solid #FFFFFF; }
        .aboutUs__3__content__box p {
          font-size: 1.2rem; }

.ProductDetail, .ProductDetail__vending {
  padding: 1rem; }
  .ProductDetail_img {
    text-align: center; }
    .ProductDetail_img img {
      width: 50%; }
  .ProductDetail__content__1 {
    display: flex;
    align-items: center; }
    @media (max-width: 900px) {
      .ProductDetail__content__1 {
        display: block !important;
        text-align: center; } }
    .ProductDetail__content__1 img {
      text-align: center;
      width: 50%;
      flex: 1; }
    .ProductDetail__content__1__text, .ProductDetail__content__2__text {
      text-align: left; }
      .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img {
        width: 30%; }
      .ProductDetail__content__1__text p:first-of-type, .ProductDetail__content__2__text p:first-of-type {
        font-size: 1.8rem;
        text-align: center; }
        @media (max-width: 600px) {
          .ProductDetail__content__1__text p:first-of-type, .ProductDetail__content__2__text p:first-of-type {
            font-size: 1.5rem !important; } }
      .ProductDetail__content__1__text p:not(:first-of-type), .ProductDetail__content__2__text p:not(:first-of-type) {
        margin-top: 1rem;
        text-indent: 3rem;
        font-size: 1rem;
        line-height: 2.2rem;
        color: #666666; }
      .ProductDetail__content__1__text p:nth-child(3), .ProductDetail__content__2__text p:nth-child(3) {
        color: #666666;
        font-size: 1rem; }
      .ProductDetail__content__1__text p:nth-child(4), .ProductDetail__content__2__text p:nth-child(4) {
        margin-top: 0rem;
        text-indent: unset;
        margin-left: 4rem;
        color: #666666;
        font-size: 1.2rem; }
  .ProductDetail__content__2 {
    margin-top: 20vh;
    display: flex;
    align-items: center; }
    @media (max-width: 900px) {
      .ProductDetail__content__2 {
        display: block !important;
        text-align: center; } }
    .ProductDetail__content__2 img {
      width: 40%; }
      @media (max-width: 900px) {
        .ProductDetail__content__2 img {
          width: 70%; } }
    .ProductDetail__content__2__text p:nth-child(2) {
      font-size: 1.4rem; }
    .ProductDetail__content__2__text p:nth-child(3) {
      font-size: 1rem;
      margin-top: 0.5rem;
      margin-left: 1rem; }
    .ProductDetail__content__2__text p:nth-child(4) {
      font-size: 1.4rem;
      margin: 0 !important; }
    .ProductDetail__content__2__text p:nth-child(5) {
      font-size: 1rem;
      margin-top: 0.5rem;
      margin-left: 1rem; }
    .ProductDetail__content__2__text p:not(:first-of-type) {
      text-indent: unset; }
  .ProductDetail__content__3 {
    margin-top: 20vh; }
    .ProductDetail__content__3__img {
      display: flex;
      margin-bottom: 10vh; }
      @media (max-width: 900px) {
        .ProductDetail__content__3__img {
          display: block !important;
          text-align: center; }
          .ProductDetail__content__3__img img {
            width: 50% !important; } }
      .ProductDetail__content__3__img img {
        flex: 1;
        width: 100%; }
    .ProductDetail__content__3__text {
      display: flex; }
      @media (max-width: 900px) {
        .ProductDetail__content__3__text {
          display: block !important; } }
      .ProductDetail__content__3__text_1 {
        flex: 1; }
        .ProductDetail__content__3__text_1 p {
          color: #666666; }
          .ProductDetail__content__3__text_1 p:nth-child(1) {
            font-size: 1.4rem;
            font-weight: bold;
            color: #000000; }
          .ProductDetail__content__3__text_1 p:nth-child(2) {
            font-size: 1.1rem;
            margin-top: 0.5rem; }
          .ProductDetail__content__3__text_1 p:nth-child(3) {
            margin-top: 0.5rem;
            margin-left: 1.5rem;
            color: #666666; }
      .ProductDetail__content__3__text_2 {
        flex: 1; }
        @media (max-width: 900px) {
          .ProductDetail__content__3__text_2 {
            margin-top: 1rem; } }
        .ProductDetail__content__3__text_2 p:nth-child(1) {
          font-size: 1.4rem;
          font-weight: bold; }
        .ProductDetail__content__3__text_2 p:nth-child(2) {
          font-size: 1.1rem;
          margin-top: 0.5rem; }
        .ProductDetail__content__3__text_2 p:nth-child(3) {
          margin-top: 0.5rem;
          margin-left: 0.9rem;
          color: #666666; }
        .ProductDetail__content__3__text_2 p:nth-child(4) {
          font-size: 1.1rem;
          margin-top: 0.5rem; }
        .ProductDetail__content__3__text_2 p:nth-child(5) {
          margin-top: 0.5rem;
          margin-left: 0.9rem;
          color: #666666; }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.btn-contactus {
  font-size: 0.9rem;
  color: #FFFFFF;
  background: #00A9E0;
  width: 15rem;
  border: 0;
  border-radius: 20px;
  padding: 10px;
  cursor: pointer; }
  .btn-contactus:hover {
    transform: translateY(-2px);
    background: #00c0ff;
    transition: 0.4s; }
  .btn-contactus:active {
    background: #009dd1; }
  @media (max-width: 600px) {
    .btn-contactus {
      font-size: 0.9rem !important; }
      .btn-contactus svg {
        font-size: 1.2rem !important; } }
  @media (max-width: 425px) {
    .btn-contactus {
      width: 50% !important;
      font-size: 0.8rem !important; }
      .btn-contactus svg {
        font-size: 1.2rem !important; } }
  @media (max-width: 350px) {
    .btn-contactus {
      width: 70% !important; } }

.btn-pay {
  font-size: 0.9rem;
  color: #FFFFFF;
  background: #ff0055;
  width: 100%;
  border: 0;
  border-radius: 20px;
  padding: 10px;
  cursor: pointer;
  margin-top: 1rem; }
  .btn-pay:hover {
    transform: translateY(-2px);
    background: #ff1f69;
    transition: 0.4s; }
  .btn-pay:active {
    background: #f00050; }

.btn-detail {
  font-size: 0.9rem;
  color: #FFFFFF;
  background: #00A9E0;
  width: 100%;
  border: 0;
  border-radius: 20px;
  padding: 10px;
  cursor: pointer;
  margin-top: 1rem; }
  .btn-detail:hover {
    transform: translateY(-2px);
    background: #00c0ff;
    transition: 0.4s; }
  .btn-detail:active {
    background: #009dd1; }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.flex {
  display: flex; }

.clearall {
  background: 0;
  border: 0;
  margin: 0;
  padding: 0; }

.width80 {
  width: 80%; }

.width100 {
  width: 100%; }

.end {
  display: flex;
  justify-content: flex-end; }

.centerX {
  justify-content: center; }

.centerY {
  align-items: center; }

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center; }

.flex-1 {
  flex: 1; }

.flex-2 {
  flex: 2; }

.center {
  text-align: center; }

.text_left {
  text-align: left; }

.text_right {
  text-align: right; }

.w10 {
  width: 10px; }

.h20 {
  height: 20px; }

.h40 {
  height: 40px; }

.vh10 {
  height: 10vh; }

.vh20 {
  height: 20vh; }

.relative {
  position: relative; }

.topic--1 {
  padding: 0 0.5rem; }
  .topic--1 p:first-of-type {
    margin-top: 5rem;
    font-size: 2.5rem;
    font-weight: bold;
    color: #00222e; }
  .topic--1 p {
    font-size: 1.5rem; }
  .topic--1 p:last-of-type {
    font-weight: bold;
    font-size: 1.5rem; }

.topic--2 {
  padding: 0 0.5rem; }
  .topic--2 p {
    color: #FFFFFF; }
    .topic--2 p:first-of-type {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--2 p {
      font-size: 1.2rem; }

.topic--3 {
  padding: 0 0.5rem; }
  .topic--3 p {
    color: #FFFFFF; }
    .topic--3 p:first-of-type {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--3 p {
      font-size: 1.2rem; }

.topic--4 {
  padding: 0 0.5rem; }
  .topic--4 p {
    color: #FFFFFF; }
    .topic--4 p:first-of-type {
      margin-top: 10rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--4 p {
      font-size: 1.2rem; }

.topic--5 {
  padding: 0 0.5rem; }
  .topic--5 p {
    color: #00222e; }
    .topic--5 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--5 p {
      font-size: 1.2rem; }

.topic--6 {
  padding: 0 0.5rem; }
  .topic--6 p {
    color: #FFFFFF; }
    .topic--6 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--6 p {
      font-size: 1.2rem; }

.topic--7 {
  padding: 0 0.5rem; }
  .topic--7 p {
    font-size: 1.5rem; }
    .topic--7 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold;
      color: #00222e;
      letter-spacing: 0.5rem; }
      @media (max-width: 600px) {
        .topic--7 p:first-of-type {
          font-size: 1.5rem !important;
          letter-spacing: 0.2rem; } }

@media (max-width: 600px) {
  .topic--1 p:first-of-type,
  .topic--2 p:first-of-type,
  .topic--3 p:first-of-type,
  .topic--4 p:first-of-type,
  .topic--5 p:first-of-type,
  .topic--6 p:first-of-type,
  .topic--7 p:first-of-type {
    font-size: 2rem; }
  .topic--1 p,
  .topic--2 p,
  .topic--3 p,
  .topic--4 p,
  .topic--5 p,
  .topic--6 p,
  .topic--7 p {
    font-size: 1rem; } }
.mouseclick, .content--2--box .icon path,
.content--2--box .icon svg {
  animation: tranform 2s;
  animation-iteration-count: infinite; }
@keyframes tranform {
  0% {
    transform: translateX(-1px); }
  50% {
    transform: translateX(9px); }
  100% {
    transform: translateX(-1px); } }
.miracle {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .miracle span:last-of-type {
    color: #70b646; }

.coffeemall {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .coffeemall span:last-of-type {
    color: #ff6f02; }

.resq {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .resq span:last-of-type {
    color: #70b646; }

.su {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .su span:last-of-type {
    color: #0f726f; }

.gifx {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .gifx span:last-of-type {
    color: #e40025; }

.halala {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .halala span:last-of-type {
    color: #ff6f02; }

.border-top {
  border-top: 3px solid #FFFFFF;
  max-width: 850px;
  margin: 0 auto;
  opacity: 70%;
  width: 80%; }

.curves-fix {
  position: absolute;
  bottom: -5px;
  z-index: 5; }

#logo1 {
  display: none; }

#logo2_mb {
  display: none; }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.flex {
  display: flex; }

.clearall {
  background: 0;
  border: 0;
  margin: 0;
  padding: 0; }

.width80 {
  width: 80%; }

.width100 {
  width: 100%; }

.end {
  display: flex;
  justify-content: flex-end; }

.centerX {
  justify-content: center; }

.centerY {
  align-items: center; }

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center; }

.flex-1 {
  flex: 1; }

.flex-2 {
  flex: 2; }

.center {
  text-align: center; }

.text_left {
  text-align: left; }

.text_right {
  text-align: right; }

.w10 {
  width: 10px; }

.h20 {
  height: 20px; }

.h40 {
  height: 40px; }

.vh10 {
  height: 10vh; }

.vh20 {
  height: 20vh; }

.relative {
  position: relative; }

.topic--1 {
  padding: 0 0.5rem; }
  .topic--1 p:first-of-type {
    margin-top: 5rem;
    font-size: 2.5rem;
    font-weight: bold;
    color: #00222e; }
  .topic--1 p {
    font-size: 1.5rem; }
  .topic--1 p:last-of-type {
    font-weight: bold;
    font-size: 1.5rem; }

.topic--2 {
  padding: 0 0.5rem; }
  .topic--2 p {
    color: #FFFFFF; }
    .topic--2 p:first-of-type {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--2 p {
      font-size: 1.2rem; }

.topic--3 {
  padding: 0 0.5rem; }
  .topic--3 p {
    color: #FFFFFF; }
    .topic--3 p:first-of-type {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--3 p {
      font-size: 1.2rem; }

.topic--4 {
  padding: 0 0.5rem; }
  .topic--4 p {
    color: #FFFFFF; }
    .topic--4 p:first-of-type {
      margin-top: 10rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--4 p {
      font-size: 1.2rem; }

.topic--5 {
  padding: 0 0.5rem; }
  .topic--5 p {
    color: #00222e; }
    .topic--5 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--5 p {
      font-size: 1.2rem; }

.topic--6 {
  padding: 0 0.5rem; }
  .topic--6 p {
    color: #FFFFFF; }
    .topic--6 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--6 p {
      font-size: 1.2rem; }

.topic--7 {
  padding: 0 0.5rem; }
  .topic--7 p {
    font-size: 1.5rem; }
    .topic--7 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold;
      color: #00222e;
      letter-spacing: 0.5rem; }
      @media (max-width: 600px) {
        .topic--7 p:first-of-type {
          font-size: 1.5rem !important;
          letter-spacing: 0.2rem; } }

@media (max-width: 600px) {
  .topic--1 p:first-of-type,
  .topic--2 p:first-of-type,
  .topic--3 p:first-of-type,
  .topic--4 p:first-of-type,
  .topic--5 p:first-of-type,
  .topic--6 p:first-of-type,
  .topic--7 p:first-of-type {
    font-size: 2rem; }
  .topic--1 p,
  .topic--2 p,
  .topic--3 p,
  .topic--4 p,
  .topic--5 p,
  .topic--6 p,
  .topic--7 p {
    font-size: 1rem; } }
.mouseclick, .content--2--box .icon path,
.content--2--box .icon svg {
  animation: tranform 2s;
  animation-iteration-count: infinite; }
@keyframes tranform {
  0% {
    transform: translateX(-1px); }
  50% {
    transform: translateX(9px); }
  100% {
    transform: translateX(-1px); } }
.miracle {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .miracle span:last-of-type {
    color: #70b646; }

.coffeemall {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .coffeemall span:last-of-type {
    color: #ff6f02; }

.resq {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .resq span:last-of-type {
    color: #70b646; }

.su {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .su span:last-of-type {
    color: #0f726f; }

.gifx {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .gifx span:last-of-type {
    color: #e40025; }

.halala {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .halala span:last-of-type {
    color: #ff6f02; }

.border-top {
  border-top: 3px solid #FFFFFF;
  max-width: 850px;
  margin: 0 auto;
  opacity: 70%;
  width: 80%; }

.curves-fix {
  position: absolute;
  bottom: -5px;
  z-index: 5; }

#logo1 {
  display: none; }

#logo2_mb {
  display: none; }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.bg-video {
  width: 100%;
  position: relative;
  overflow: hidden; }
  @media (max-width: 600px) {
    .bg-video--float p {
      font-size: 1.2rem !important; }
      .bg-video--float p:not(:first-of-type) {
        font-size: 1rem !important; } }
  @media (max-width: 425px) {
    .bg-video p {
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin: 0 1rem; }
      .bg-video p:first-of-type {
        margin-top: 2rem; } }
  .bg-video--float {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start; }
    @media (max-width: 900px) {
      .bg-video--float p {
        font-size: 1.4rem !important; } }
    @media (max-width: 600px) {
      .bg-video--float p {
        font-size: 1.2rem !important; } }
    @media (max-width: 425px) {
      .bg-video--float p {
        color: #FFFFFF !important; } }
    .bg-video--float p {
      color: #FFFFFF;
      font-size: 1.7rem; }
  .bg-video--video--bg {
    width: 100%;
    height: 100%;
    filter: brightness(0.6); }
    @media (max-width: 900px) {
      .bg-video--video--bg {
        width: 160%; } }
    @media (max-width: 600px) {
      .bg-video--video--bg {
        width: 180%; } }
    @media (max-width: 425px) {
      .bg-video--video--bg {
        width: 250% !important; } }

.top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20; }
  @media (max-width: 900px) {
    .top--nav {
      padding: 1rem !important; } }
  @media (max-width: 600px) {
    .top--nav {
      padding: 0.5rem 1rem !important; } }
  .top--nav {
    position: relative;
    padding: 1.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 1200px; }
    @media (max-width: 900px) {
      .top--nav--logo {
        display: none !important; }
      .top--nav--menu {
        display: none !important; } }
    .top--nav--logo {
      display: flex;
      align-items: center;
      font-weight: bold;
      text-align: left;
      font-size: 1.2rem;
      color: inherit; }
      .top--nav--logo a {
        margin-left: 0.4rem; }
    .top--nav--menu {
      display: flex;
      align-items: center;
      justify-content: flex-end; }
      .top--nav--menu a {
        margin-left: 2rem;
        cursor: pointer;
        font-size: 0.9rem;
        color: #FFFFFF;
        border-bottom: 2.5px solid transparent; }
        .top--nav--menu a:hover {
          border-bottom: 2.5px solid #24afdd;
          transition: 0.1s;
          color: #00A9E0;
          font-size: 1rem; }
    .top--nav--phone {
      display: none;
      background: 0;
      border: 0; }
      @media (max-width: 900px) {
        .top--nav--phone {
          display: block; } }
      .top--nav--phone--flex {
        display: flex; }
        .top--nav--phone--flex div:last-of-type {
          flex: 1;
          position: absolute;
          left: 1rem; }
          .top--nav--phone--flex div:last-of-type img {
            width: 5rem; }
      .top--nav--phone svg {
        font-size: 1.5rem; }
    .top--nav--dropdown {
      background: #000000;
      opacity: 85%;
      display: none;
      position: absolute;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0; }
      .top--nav--dropdown--menu {
        margin-top: 10%;
        display: flex;
        flex-direction: column; }
        @media (max-width: 600px) {
          .top--nav--dropdown--menu .times {
            font-size: 1.5rem !important; }
          .top--nav--dropdown--menu a {
            font-size: 1rem !important; } }
        @media (max-width: 425px) {
          .top--nav--dropdown--menu .times {
            font-size: 1rem !important; }
          .top--nav--dropdown--menu a {
            font-size: 0.9rem !important; } }
        .top--nav--dropdown--menu .times {
          font-size: 2rem;
          color: #FFFFFF;
          position: absolute;
          right: 1rem;
          top: 1rem; }
        .top--nav--dropdown--menu a {
          padding: 1.5rem;
          color: #FFFFFF;
          font-size: 1.2rem; }
          .top--nav--dropdown--menu a:hover {
            background-color: #24afdd;
            color: #FFFFFF;
            transition: 0.2s;
            font-style: italic; }

.top2 {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  background: #FFFFFF;
  box-shadow: 0 0 0.6rem #333333; }
  @media (max-width: 900px) {
    .top2--nav {
      padding: 1rem !important; } }
  @media (max-width: 600px) {
    .top2--nav {
      padding: 0.5rem 1rem !important; } }
  .top2--nav {
    padding: 1.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
    max-width: 1200px;
    cursor: pointer; }
    .top2--nav--logo {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      text-align: left;
      font-size: 1.2rem;
      color: inherit; }
      .top2--nav--logo a {
        margin-left: 0.4rem; }
    .top2--nav--menu {
      display: flex;
      align-items: center;
      justify-content: flex-end; }
      .top2--nav--menu a {
        margin-left: 2rem;
        cursor: pointer;
        font-size: 0.9rem;
        color: #000000; }
        .top2--nav--menu a:hover {
          border-bottom: 2.5px solid #24afdd;
          transition: 0.1s;
          color: #00A9E0;
          font-size: 1rem; }

.top_branch {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
  background: #FFFFFF;
  box-shadow: 0 0 0.6rem #333333; }
  @media (max-width: 900px) {
    .top_branch--nav {
      padding: 1rem !important; } }
  @media (max-width: 600px) {
    .top_branch--nav {
      padding: 0.5rem 1rem !important; } }
  .top_branch--nav {
    position: relative;
    padding: 1.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 1200px; }
    @media (max-width: 900px) {
      .top_branch--nav--logo {
        display: none !important; }
      .top_branch--nav--menu {
        display: none !important; } }
    .top_branch--nav--logo {
      display: flex;
      align-items: center;
      font-weight: bold;
      text-align: left;
      font-size: 1.2rem;
      color: inherit; }
      .top_branch--nav--logo a {
        margin-left: 0.4rem; }
    .top_branch--nav--menu {
      display: flex;
      align-items: center;
      justify-content: flex-end; }
      .top_branch--nav--menu a {
        margin-left: 2rem;
        cursor: pointer;
        font-size: 0.9rem;
        color: #000000;
        border-bottom: 2.5px solid transparent; }
        .top_branch--nav--menu a:hover {
          border-bottom: 2.5px solid #24afdd;
          transition: 0.1s;
          color: #00A9E0;
          font-size: 1rem; }
    .top_branch--nav--phone {
      display: none;
      background: 0;
      border: 0; }
      @media (max-width: 900px) {
        .top_branch--nav--phone {
          display: block; } }
      .top_branch--nav--phone--flex {
        display: flex; }
        .top_branch--nav--phone--flex div:last-of-type {
          flex: 1;
          position: absolute;
          left: 1rem; }
          .top_branch--nav--phone--flex div:last-of-type img {
            width: 5rem; }
      .top_branch--nav--phone svg {
        font-size: 1.5rem; }
    .top_branch--nav--dropdown {
      background: #000000;
      opacity: 85%;
      display: none;
      position: absolute;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0; }
      .top_branch--nav--dropdown--menu {
        margin-top: 10%;
        display: flex;
        flex-direction: column; }
        @media (max-width: 600px) {
          .top_branch--nav--dropdown--menu .times {
            font-size: 1.5rem !important; }
          .top_branch--nav--dropdown--menu a {
            font-size: 1rem !important; } }
        @media (max-width: 425px) {
          .top_branch--nav--dropdown--menu .times {
            font-size: 1rem !important; }
          .top_branch--nav--dropdown--menu a {
            font-size: 0.9rem !important; } }
        .top_branch--nav--dropdown--menu .times {
          font-size: 2rem;
          color: #FFFFFF;
          position: absolute;
          right: 1rem;
          top: 1rem; }
        .top_branch--nav--dropdown--menu a {
          padding: 1.5rem;
          color: #FFFFFF;
          font-size: 1.2rem; }
          .top_branch--nav--dropdown--menu a:hover {
            background-color: #24afdd;
            color: #FFFFFF;
            transition: 0.2s;
            font-style: italic; }

.logo--ovc {
  width: 7rem;
  margin-right: 2px; }

.card {
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 20rem;
  cursor: pointer; }
  @media (max-width: 900px) {
    .card--side {
      width: 100% !important; }
      .card--side--front--img {
        left: 0% !important; }
        .card--side--front--img img {
          transform: scale(1) !important; } }
  @media (max-width: 425px) {
    .card--side--back {
      left: -5% !important; } }
  @media (max-width: 350px) {
    .card--side--front--img {
      left: -10% !important; }
    .card--side--back {
      left: -5% !important; } }
  .card--side {
    color: #000000;
    height: 25rem;
    transition: all 0.8s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 95%;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important; }
    .card--side--front {
      position: relative;
      display: flex;
      justify-content: center; }
      .card--side--front--img {
        position: absolute;
        left: 10%;
        top: 15%; }
        .card--side--front--img img {
          transform: scale(1.2); }
    .card--side--back {
      background: #FFFFFF;
      height: 100%;
      transform: rotateY(180deg);
      box-shadow: 0 0 10px #cccccc;
      padding: 1rem; }
      .card--side--back p {
        margin-top: 1.2rem;
        margin-bottom: 1rem; }
      .card--side--back img {
        width: 100%; }
      .card--side--back button {
        margin-top: 1rem;
        font-size: 0.9rem;
        color: #FFFFFF;
        background: #00A9E0;
        width: 50%;
        border: 0;
        border-radius: 5px;
        padding: 10px;
        cursor: pointer; }
        .card--side--back button:hover {
          transform: translateY(-2px);
          background: #00c0ff;
          transition: 0.4s; }
        .card--side--back button:active {
          background: #009dd1; }
  .card:hover .card--side--front {
    transform: rotateY(180deg); }
  .card:hover .card--side--back {
    transform: rotateY(0deg); }

.gallery {
  overflow-y: scroll;
  max-height: 30rem; }
  @media (max-width: 600px) {
    .gallery {
      max-height: 20rem !important; } }
  @media (max-width: 425px) {
    .gallery {
      max-height: 10rem !important; } }
  .gallery img {
    width: 100%; }

.scroll {
  display: flex;
  overflow: hidden; }
  .scroll img {
    width: 100%; }

.drodown-block {
  display: block; }

.modal {
  display: none;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  z-index: 20;
  width: 100%;
  top: 0; }
  .modal--center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh; }
    .modal--center--content {
      background: #FFFFFF;
      width: 20%;
      border-radius: 5px;
      margin: 0 1rem;
      padding: 2rem;
      position: relative;
      text-align: center;
      box-shadow: 0 0 1rem #333333; }
      @media (min-width: 1200px) {
        .modal--center--content {
          width: 20% !important; } }
      @media (max-width: 1200px) {
        .modal--center--content {
          width: 40% !important; } }
      @media (max-width: 600px) {
        .modal--center--content {
          width: 60% !important; } }
      .modal--center--content .times {
        position: absolute;
        top: 5px;
        right: 10px;
        cursor: pointer; }
        .modal--center--content .times svg {
          font-size: 1.2rem; }
          .modal--center--content .times svg:hover {
            color: #333333; }
      .modal--center--content--flex p {
        font-size: 1rem; }
      .modal--center--content--flex div {
        display: flex; }
      .modal--center--content--flex .btn_close {
        margin-top: 1rem;
        margin-right: 0.5rem;
        font-size: 0.9rem;
        color: #FFFFFF;
        background: #00A9E0;
        width: 50%;
        border: 0;
        border-radius: 5px;
        padding: 10px;
        cursor: pointer; }
        .modal--center--content--flex .btn_close:hover {
          transform: translateY(-2px);
          background: #00c0ff;
          transition: 0.4s; }
        .modal--center--content--flex .btn_close:active {
          background: #009dd1; }
      .modal--center--content--flex .btn_open {
        margin-top: 1rem;
        font-size: 0.9rem;
        color: #FFFFFF;
        background: #00A9E0;
        width: 50%;
        border: 0;
        border-radius: 5px;
        padding: 10px;
        cursor: pointer; }
        .modal--center--content--flex .btn_open:hover {
          transform: translateY(-2px);
          background: #00c0ff;
          transition: 0.4s; }
        .modal--center--content--flex .btn_open:active {
          background: #009dd1; }

.modal-open {
  display: block; }

@media (max-width: 600px) {
  .media_block {
    display: block !important; } }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.flex {
  display: flex; }

.clearall {
  background: 0;
  border: 0;
  margin: 0;
  padding: 0; }

.width80 {
  width: 80%; }

.width100 {
  width: 100%; }

.end {
  display: flex;
  justify-content: flex-end; }

.centerX {
  justify-content: center; }

.centerY {
  align-items: center; }

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center; }

.flex-1 {
  flex: 1; }

.flex-2 {
  flex: 2; }

.center {
  text-align: center; }

.text_left {
  text-align: left; }

.text_right {
  text-align: right; }

.w10 {
  width: 10px; }

.h20 {
  height: 20px; }

.h40 {
  height: 40px; }

.vh10 {
  height: 10vh; }

.vh20 {
  height: 20vh; }

.relative {
  position: relative; }

.topic--1 {
  padding: 0 0.5rem; }
  .topic--1 p:first-of-type {
    margin-top: 5rem;
    font-size: 2.5rem;
    font-weight: bold;
    color: #00222e; }
  .topic--1 p {
    font-size: 1.5rem; }
  .topic--1 p:last-of-type {
    font-weight: bold;
    font-size: 1.5rem; }

.topic--2 {
  padding: 0 0.5rem; }
  .topic--2 p {
    color: #FFFFFF; }
    .topic--2 p:first-of-type {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--2 p {
      font-size: 1.2rem; }

.topic--3 {
  padding: 0 0.5rem; }
  .topic--3 p {
    color: #FFFFFF; }
    .topic--3 p:first-of-type {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--3 p {
      font-size: 1.2rem; }

.topic--4 {
  padding: 0 0.5rem; }
  .topic--4 p {
    color: #FFFFFF; }
    .topic--4 p:first-of-type {
      margin-top: 10rem;
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--4 p {
      font-size: 1.2rem; }

.topic--5 {
  padding: 0 0.5rem; }
  .topic--5 p {
    color: #00222e; }
    .topic--5 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--5 p {
      font-size: 1.2rem; }

.topic--6 {
  padding: 0 0.5rem; }
  .topic--6 p {
    color: #FFFFFF; }
    .topic--6 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold; }
    .topic--6 p {
      font-size: 1.2rem; }

.topic--7 {
  padding: 0 0.5rem; }
  .topic--7 p {
    font-size: 1.5rem; }
    .topic--7 p:first-of-type {
      font-size: 2.5rem;
      font-weight: bold;
      color: #00222e;
      letter-spacing: 0.5rem; }
      @media (max-width: 600px) {
        .topic--7 p:first-of-type {
          font-size: 1.5rem !important;
          letter-spacing: 0.2rem; } }

@media (max-width: 600px) {
  .topic--1 p:first-of-type,
  .topic--2 p:first-of-type,
  .topic--3 p:first-of-type,
  .topic--4 p:first-of-type,
  .topic--5 p:first-of-type,
  .topic--6 p:first-of-type,
  .topic--7 p:first-of-type {
    font-size: 2rem; }
  .topic--1 p,
  .topic--2 p,
  .topic--3 p,
  .topic--4 p,
  .topic--5 p,
  .topic--6 p,
  .topic--7 p {
    font-size: 1rem; } }
.mouseclick, .content--2--box .icon path,
.content--2--box .icon svg {
  animation: tranform 2s;
  animation-iteration-count: infinite; }
@keyframes tranform {
  0% {
    transform: translateX(-1px); }
  50% {
    transform: translateX(9px); }
  100% {
    transform: translateX(-1px); } }
.miracle {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .miracle span:last-of-type {
    color: #70b646; }

.coffeemall {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .coffeemall span:last-of-type {
    color: #ff6f02; }

.resq {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .resq span:last-of-type {
    color: #70b646; }

.su {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .su span:last-of-type {
    color: #0f726f; }

.gifx {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .gifx span:last-of-type {
    color: #e40025; }

.halala {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center; }
  .halala span:last-of-type {
    color: #ff6f02; }

.border-top {
  border-top: 3px solid #FFFFFF;
  max-width: 850px;
  margin: 0 auto;
  opacity: 70%;
  width: 80%; }

.curves-fix {
  position: absolute;
  bottom: -5px;
  z-index: 5; }

#logo1 {
  display: none; }

#logo2_mb {
  display: none; }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.main {
  position: relative;
  overflow: hidden; }

.content--base, .ProductDetail, .ProductDetail__vending {
  max-width: 1200px;
  margin: 0 auto; }
.content--1 {
  max-width: 1200px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  text-align: center;
  padding: 0.5rem; }
  .content--1 img {
    width: 100%;
    margin-right: 20%; }
.content--2 {
  margin-top: 10rem;
  text-align: center;
  display: flex;
  position: relative; }
  @media (max-width: 900px) {
    .content--2 {
      display: block !important; }
      .content--2--box {
        margin: 0 auto !important;
        width: 50% !important;
        margin-bottom: 5rem !important; } }
  @media (max-width: 600px) {
    .content--2--box {
      width: 80% !important; } }
  .content--2--box {
    position: relative;
    background: #FFFFFF;
    color: #000000;
    margin: 0 2rem;
    padding: 3rem 1rem 1rem 1rem;
    margin-bottom: 10rem;
    border-radius: 5px;
    box-shadow: 0 0 10px #e6e6e6;
    border-bottom: 5px solid #24afdd; }
    .content--2--box svg,
    .content--2--box path {
      color: #000000;
      font-size: 2.1rem; }
    .content--2--box p {
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden; }
      .content--2--box p:first-child {
        font-size: 1.5rem;
        font-weight: 600;
        color: #24afdd; }
    .content--2--box .icon a,
    .content--2--box .icon path,
    .content--2--box .icon svg {
      color: #24afdd;
      font-size: 1rem; }
    .content--2--box:hover {
      background: #24afdd;
      color: #FFFFFF;
      transition: 0.4s;
      transform: scale(1.2); }
      @media (max-width: 600px) {
        .content--2--box:hover {
          transform: scale(1); } }
      .content--2--box:hover p {
        -webkit-line-clamp: inherit; }
        .content--2--box:hover p:first-child {
          color: #FFFFFF;
          transition: 0.4s; }
      .content--2--box:hover svg,
      .content--2--box:hover path {
        color: #24afdd;
        font-size: 2.1rem;
        transition: 0.4s; }
      .content--2--box:hover .icon a,
      .content--2--box:hover .icon path,
      .content--2--box:hover .icon svg {
        display: none; }
    .content--2--box--head {
      background: #FFFFFF;
      box-shadow: 0 0 10px #e6e6e6;
      position: absolute;
      top: -2rem;
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      border-radius: 100px; }
  .content--2--bg-line {
    display: none;
    position: absolute;
    background: #0045a7;
    background: linear-gradient(90deg, #0045a7 0%, #3ca5fc 100%);
    width: 100%;
    top: 25%;
    z-index: -1;
    height: 5rem;
    border-radius: 100px; }
.content--box--4 {
  position: relative;
  background: #141414;
  height: 100%;
  padding-top: 1rem;
  color: #FFFFFF;
  clip-path: polygon(50% 0%, 100% 10%, 100% 100%, 0 100%, 0 10%); }
  @media (max-width: 900px) {
    .content--box--4 {
      clip-path: polygon(50% 0%, 100% 2%, 100% 100%, 0 100%, 0 2%) !important; } }
  @media (max-width: 600px) {
    .content--box--4 {
      clip-path: polygon(50% 0%, 100% 1%, 100% 100%, 0 100%, 0 1%) !important; } }
.content--5 {
  background: #FFFFFF; }
.content--6 {
  margin-top: 5rem;
  text-align: center;
  display: flex;
  position: relative;
  flex-wrap: wrap;
  width: 100%; }
  @media (max-width: 900px) {
    .content--6--box {
      width: 40% !important; } }
  @media (max-width: 600px) {
    .content--6 {
      display: block !important; }
      .content--6--box {
        width: 80% !important;
        padding: 0 !important; } }
  .content--6--box {
    position: relative;
    background: #FFFFFF;
    color: #000000;
    margin: 0 auto;
    padding: 1rem 1rem 1rem 1rem;
    margin-bottom: 5rem;
    border-radius: 5px;
    width: 30%; }
    .content--6--box svg,
    .content--6--box path {
      color: #000000;
      font-size: 2.1rem; }
    .content--6--box p {
      font-size: 1.2rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden; }
      .content--6--box p:first-of-type {
        font-size: 1.5rem;
        font-weight: 590;
        color: #000000;
        line-height: 1.8rem;
        margin-bottom: 0.5rem; }
      .content--6--box p:not(:first-of-type) {
        text-indent: 1rem; }
    .content--6--box:hover {
      border-bottom: 5px solid #24afdd;
      transition: 0.2s;
      transform: scale(1.01); }
      @media (max-width: 600px) {
        .content--6--box:hover {
          transform: scale(1); } }
      .content--6--box:hover p {
        -webkit-line-clamp: unset; }
        .content--6--box:hover p:first-of-type {
          color: #24afdd; }
      .content--6--box:hover img {
        filter: contrast(1);
        transition: 0.2s; }
    .content--6--box--head img {
      width: 70%;
      filter: contrast(0.8);
      -webkit-clip-path: inset(10px round 60px 20px 30px 10px);
      clip-path: inset(10px round 70px 20px 30px 10px); }
  .content--6--bg-line {
    display: none;
    position: absolute;
    background: #0045a7;
    background: linear-gradient(90deg, #0045a7 0%, #3ca5fc 100%);
    width: 100%;
    top: 25%;
    z-index: -1;
    height: 5rem;
    border-radius: 100px; }
.content--wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 3rem;
  margin-bottom: 3rem; }
  @media (max-width: 900px) {
    .content--wrap--box {
      width: 40% !important; } }
  @media (max-width: 600px) {
    .content--wrap--box {
      width: 50% !important; } }
  @media (max-width: 425px) {
    .content--wrap--box {
      width: 70% !important; } }
  .content--wrap--box {
    width: 30%;
    text-align: center;
    margin: 5rem 1rem; }
.content--wrap--2 {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap; }
  @media (max-width: 900px) {
    .content--wrap--2 div {
      width: 25% !important; } }
  @media (max-width: 600px) {
    .content--wrap--2 div {
      width: 50% !important; } }
  .content--wrap--2--link {
    position: relative;
    width: 20%; }
    .content--wrap--2--link img {
      cursor: pointer;
      flex: 1;
      width: 100%;
      margin-bottom: 1rem;
      filter: brightness(0.8); }
      .content--wrap--2--link img:hover {
        transform: scale(1.1);
        opacity: 100%;
        transition: 0.4s;
        filter: contrast(1); }
.content--team {
  margin-bottom: 20vh; }
  @media (max-width: 425px) {
    .content--team {
      display: none; } }
  .content--team button {
    background: 0;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer; }
    .content--team button img {
      width: 100%;
      opacity: 40%; }
    .content--team button:hover img {
      opacity: 100%;
      transform: scale(1.05);
      transition: 0.2s; }
  .content--team--text {
    width: 50%;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 1rem; }
    .content--team--text span:first-of-type {
      font-size: 1.2rem; }
    .content--team--text span:last-of-type {
      opacity: 40%; }
    .content--team--text p {
      margin-top: 1rem;
      font-size: 1rem; }
.content--team--phone {
  display: none;
  padding: 0.5rem;
  text-align: center; }
  @media (max-width: 425px) {
    .content--team--phone {
      display: block; } }
  .content--team--phone img {
    width: 70%;
    border-radius: 0.5rem;
    margin: 0 auto; }
  .content--team--phone--text {
    width: 80%;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 1rem; }
    .content--team--phone--text span:first-of-type {
      font-size: 1.2rem; }
    .content--team--phone--text span:last-of-type {
      opacity: 40%; }
    .content--team--phone--text p {
      margin-top: 1rem;
      font-size: 1rem; }

.footer {
  background: #262626;
  color: #FFFFFF;
  padding: 5rem 0; }
  @media (max-width: 900px) {
    .footer {
      display: none; }
      .footer--content--flex {
        display: block !important;
        text-align: left !important; }
        .footer--content--flex--logo--footer {
          display: flex;
          justify-content: center; }
        .footer--content--flex--link {
          text-align: left !important; }
        .footer--content--flex div {
          margin-top: 2rem !important; } }
  .footer--content--flex {
    display: flex;
    text-align: center;
    text-align: left; }
    .footer--content--flex div {
      flex: 1.7;
      margin: 0 1rem; }
      .footer--content--flex div:first-of-type {
        flex: 1; }
      .footer--content--flex div:last-of-type {
        flex: 1; }
      .footer--content--flex div p {
        font-size: 0.9rem;
        margin-top: 1rem; }
        .footer--content--flex div p:first-of-type {
          font-size: 1.2rem;
          margin-top: 0rem; }
    .footer--content--flex--logo--footer {
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: center; }
      .footer--content--flex--logo--footer img {
        width: 15rem;
        margin-bottom: 2rem; }
    .footer--content--flex--link {
      text-align: center; }
      @media (max-width: 600px) {
        .footer--content--flex--link {
          text-align: left !important; } }
      .footer--content--flex--link--flex a,
      .footer--content--flex--link--flex svg {
        font-size: 1.5rem;
        color: inherit; }
      .footer--content--flex--link img {
        width: 35%;
        margin-top: 2rem; }
  .footer--content--footest a {
    color: inherit;
    font-size: 1rem; }
  .footer--content--footest p:last-of-type {
    font-size: 0.7rem;
    color: inherit;
    opacity: 60%;
    margin-top: 0.2rem; }

.footer--2 {
  display: none;
  background: #262626;
  color: #FFFFFF;
  padding: 5rem 0; }
  @media (max-width: 900px) {
    .footer--2--content--flex {
      display: block !important;
      text-align: left !important; }
      .footer--2--content--flex--logo--footer {
        display: flex;
        justify-content: center; }
        .footer--2--content--flex--logo--footer div {
          text-align: center; }
          .footer--2--content--flex--logo--footer div img {
            width: 12rem !important; }
      .footer--2--content--flex--link {
        text-align: left !important; }
      .footer--2--content--flex div {
        margin-top: 2rem !important; } }
  @media (max-width: 900px) {
    .footer--2 {
      display: block; } }
  .footer--2--content--flex {
    display: flex;
    text-align: center;
    text-align: left; }
    .footer--2--content--flex div {
      flex: 1.7;
      margin: 0 1rem; }
      .footer--2--content--flex div:first-of-type {
        flex: 1; }
      .footer--2--content--flex div:last-of-type {
        flex: 1; }
      .footer--2--content--flex div p {
        font-size: 0.9rem;
        margin-top: 1rem; }
        .footer--2--content--flex div p:first-of-type {
          font-size: 1.2rem;
          margin-top: 0rem; }
    .footer--2--content--flex--logo--footer {
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: center; }
      .footer--2--content--flex--logo--footer img {
        width: 15rem;
        margin-bottom: 2rem; }
    .footer--2--content--flex--link {
      text-align: center;
      margin-left: 1rem;
      margin-top: 1rem; }
      @media (max-width: 600px) {
        .footer--2--content--flex--link {
          text-align: left; } }
      .footer--2--content--flex--link--flex a,
      .footer--2--content--flex--link--flex svg {
        font-size: 1.5rem;
        color: inherit; }
      .footer--2--content--flex--link img {
        width: 35%;
        margin-top: 2rem; }
  .footer--2--content--footest {
    text-align: center !important; }
    .footer--2--content--footest a {
      color: inherit;
      font-size: 1rem; }
    .footer--2--content--footest p:last-of-type {
      font-size: 0.7rem;
      color: inherit;
      opacity: 60%;
      margin-top: 0.2rem; }
  .footer--2 .qr_support {
    width: 30%;
    margin: 0 auto;
    margin-left: 1rem;
    margin-top: 1rem; }

.productContent {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 0.5rem;
  width: 70%; }
  @media (max-width: 900px) {
    .productContent {
      width: 85% !important; } }
  @media (max-width: 600px) {
    .productContent {
      display: block !important; } }
  .productContent--img {
    flex: 1;
    text-align: center; }
    .productContent--img img {
      width: 65%; }
      @media (max-width: 600px) {
        .productContent--img img {
          width: 60%; } }
  .productContent--img--block {
    flex: 1;
    text-align: center;
    display: none; }
    @media (max-width: 600px) {
      .productContent--img--block {
        display: block !important; } }
    .productContent--img--block img {
      width: 65%; }
  .productContent--img--none {
    flex: 1;
    text-align: center;
    display: block; }
    @media (max-width: 600px) {
      .productContent--img--none {
        display: none !important; } }
    .productContent--img--none img {
      width: 65%; }
  .productContent--text {
    flex: 1;
    padding: 1rem;
    margin-left: 3rem; }
    @media (max-width: 600px) {
      .productContent--text {
        margin: 0 !important; } }
    .productContent--text div {
      margin: 0 auto;
      width: 90%; }
      .productContent--text div p {
        color: #666666;
        margin-top: 1rem;
        font-size: 1rem; }
        .productContent--text div p:first-of-type {
          font-size: 1.6rem;
          font-weight: bold;
          color: #000000; }
        .productContent--text div p:nth-child(2) {
          font-size: 1.2rem;
          margin-top: 0rem;
          font-weight: bold;
          color: #000000; }
        .productContent--text div p:last-of-type {
          font-size: 1.5rem;
          color: #ff0055; }
        .productContent--text div p span {
          text-decoration: line-through;
          color: #666666;
          font-size: 1rem; }
    .productContent--text--btn {
      display: flex; }
      .productContent--text--btn button:first-of-type {
        margin-right: 0.5rem; }

.productContent__2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; }
  @media (max-width: 600px) {
    .productContent__2 {
      display: block !important; } }
  .productContent__2__box {
    width: 20%;
    text-align: center; }
    @media (max-width: 600px) {
      .productContent__2__box {
        margin: 0 auto;
        width: 90% !important;
        padding: 0 !important; } }
    .productContent__2__box_div {
      padding: 0.5rem; }
      .productContent__2__box_div img {
        width: 80%; }
        @media (max-width: 600px) {
          .productContent__2__box_div img {
            width: 90%; } }

.aboutUs {
  margin: 0 auto;
  max-width: 1200px; }
  .aboutUs__1 {
    margin-top: 20vh;
    display: flex;
    align-items: center;
    padding: 2rem 0; }
    @media (max-width: 600px) {
      .aboutUs__1 {
        display: block !important; } }
    .aboutUs__1__picture {
      flex: 1;
      text-align: right;
      clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      position: relative; }
      .aboutUs__1__picture img {
        width: 100%;
        display: block; }
        @media (max-width: 600px) {
          .aboutUs__1__picture img {
            margin-bottom: 1rem; } }
    .aboutUs__1__content {
      flex: 1;
      padding: 0 2rem; }
      .aboutUs__1__content p:nth-child(1) {
        font-size: 1.8rem;
        margin-bottom: 1rem;
        text-align: center; }
        @media (max-width: 425px) {
          .aboutUs__1__content p:nth-child(1) {
            font-size: 1.5rem !important; } }
      .aboutUs__1__content p:nth-child(2) {
        text-align: left;
        text-indent: 2rem;
        font-size: 1rem;
        font-style: italic; }
  .aboutUs__2 {
    display: flex;
    align-items: center;
    padding: 2rem 0; }
    @media (max-width: 600px) {
      .aboutUs__2 {
        display: block !important; } }
    .aboutUs__2__picture {
      flex: 1;
      text-align: right;
      clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      position: relative; }
      .aboutUs__2__picture img {
        width: 100%;
        display: block; }
        @media (max-width: 600px) {
          .aboutUs__2__picture img {
            margin-top: 1rem; } }
    .aboutUs__2__content {
      flex: 1;
      padding: 0 2rem;
      text-align: center; }
      .aboutUs__2__content p:nth-child(1) {
        font-size: 1.8rem;
        margin-bottom: 1rem; }
        @media (max-width: 425px) {
          .aboutUs__2__content p:nth-child(1) {
            font-size: 1.5rem !important; } }
      .aboutUs__2__content p:nth-child(2) {
        text-indent: 2rem;
        font-size: 1.5rem;
        font-style: italic; }
        @media (max-width: 425px) {
          .aboutUs__2__content p:nth-child(2) {
            font-size: 1.1rem !important;
            text-indent: unset; } }
  .aboutUs__3 {
    margin-top: 5rem;
    text-align: center; }
    .aboutUs__3 p:nth-child(1) {
      font-size: 1.8rem;
      margin-bottom: 5rem; }
      @media (max-width: 425px) {
        .aboutUs__3 p:nth-child(1) {
          font-size: 1.5rem !important; } }
    .aboutUs__3__content {
      display: flex; }
      @media (max-width: 600px) {
        .aboutUs__3__content {
          display: block; } }
      .aboutUs__3__content__box {
        flex: 1;
        text-align: center;
        padding: 0 1rem; }
        @media (max-width: 600px) {
          .aboutUs__3__content__box {
            margin-bottom: 1rem; }
            .aboutUs__3__content__box img {
              width: 40% !important; } }
        .aboutUs__3__content__box img {
          width: 60%;
          border-radius: 100%;
          margin-bottom: 1rem;
          border: 5px solid #FFFFFF; }
        .aboutUs__3__content__box p {
          font-size: 1.2rem; }

.ProductDetail, .ProductDetail__vending {
  padding: 1rem; }
  .ProductDetail_img {
    text-align: center; }
    .ProductDetail_img img {
      width: 50%; }
  .ProductDetail__content__1 {
    display: flex;
    align-items: center; }
    @media (max-width: 900px) {
      .ProductDetail__content__1 {
        display: block !important;
        text-align: center; } }
    .ProductDetail__content__1 img {
      text-align: center;
      width: 50%;
      flex: 1; }
    .ProductDetail__content__1__text, .ProductDetail__content__2__text {
      text-align: left; }
      .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img {
        width: 30%; }
      .ProductDetail__content__1__text p:first-of-type, .ProductDetail__content__2__text p:first-of-type {
        font-size: 1.8rem;
        text-align: center; }
        @media (max-width: 600px) {
          .ProductDetail__content__1__text p:first-of-type, .ProductDetail__content__2__text p:first-of-type {
            font-size: 1.5rem !important; } }
      .ProductDetail__content__1__text p:not(:first-of-type), .ProductDetail__content__2__text p:not(:first-of-type) {
        margin-top: 1rem;
        text-indent: 3rem;
        font-size: 1rem;
        line-height: 2.2rem;
        color: #666666; }
      .ProductDetail__content__1__text p:nth-child(3), .ProductDetail__content__2__text p:nth-child(3) {
        color: #666666;
        font-size: 1rem; }
      .ProductDetail__content__1__text p:nth-child(4), .ProductDetail__content__2__text p:nth-child(4) {
        margin-top: 0rem;
        text-indent: unset;
        margin-left: 4rem;
        color: #666666;
        font-size: 1.2rem; }
  .ProductDetail__content__2 {
    margin-top: 20vh;
    display: flex;
    align-items: center; }
    @media (max-width: 900px) {
      .ProductDetail__content__2 {
        display: block !important;
        text-align: center; } }
    .ProductDetail__content__2 img {
      width: 40%; }
      @media (max-width: 900px) {
        .ProductDetail__content__2 img {
          width: 70%; } }
    .ProductDetail__content__2__text p:nth-child(2) {
      font-size: 1.4rem; }
    .ProductDetail__content__2__text p:nth-child(3) {
      font-size: 1rem;
      margin-top: 0.5rem;
      margin-left: 1rem; }
    .ProductDetail__content__2__text p:nth-child(4) {
      font-size: 1.4rem;
      margin: 0 !important; }
    .ProductDetail__content__2__text p:nth-child(5) {
      font-size: 1rem;
      margin-top: 0.5rem;
      margin-left: 1rem; }
    .ProductDetail__content__2__text p:not(:first-of-type) {
      text-indent: unset; }
  .ProductDetail__content__3 {
    margin-top: 20vh; }
    .ProductDetail__content__3__img {
      display: flex;
      margin-bottom: 10vh; }
      @media (max-width: 900px) {
        .ProductDetail__content__3__img {
          display: block !important;
          text-align: center; }
          .ProductDetail__content__3__img img {
            width: 50% !important; } }
      .ProductDetail__content__3__img img {
        flex: 1;
        width: 100%; }
    .ProductDetail__content__3__text {
      display: flex; }
      @media (max-width: 900px) {
        .ProductDetail__content__3__text {
          display: block !important; } }
      .ProductDetail__content__3__text_1 {
        flex: 1; }
        .ProductDetail__content__3__text_1 p {
          color: #666666; }
          .ProductDetail__content__3__text_1 p:nth-child(1) {
            font-size: 1.4rem;
            font-weight: bold;
            color: #000000; }
          .ProductDetail__content__3__text_1 p:nth-child(2) {
            font-size: 1.1rem;
            margin-top: 0.5rem; }
          .ProductDetail__content__3__text_1 p:nth-child(3) {
            margin-top: 0.5rem;
            margin-left: 1.5rem;
            color: #666666; }
      .ProductDetail__content__3__text_2 {
        flex: 1; }
        @media (max-width: 900px) {
          .ProductDetail__content__3__text_2 {
            margin-top: 1rem; } }
        .ProductDetail__content__3__text_2 p:nth-child(1) {
          font-size: 1.4rem;
          font-weight: bold; }
        .ProductDetail__content__3__text_2 p:nth-child(2) {
          font-size: 1.1rem;
          margin-top: 0.5rem; }
        .ProductDetail__content__3__text_2 p:nth-child(3) {
          margin-top: 0.5rem;
          margin-left: 0.9rem;
          color: #666666; }
        .ProductDetail__content__3__text_2 p:nth-child(4) {
          font-size: 1.1rem;
          margin-top: 0.5rem; }
        .ProductDetail__content__3__text_2 p:nth-child(5) {
          margin-top: 0.5rem;
          margin-left: 0.9rem;
          color: #666666; }

.flow, .content--1 img, .content--team--text, .content--team--phone--text, .btn-contactus, .btn-pay, .btn-detail {
  animation: light 3s; }
@keyframes light {
  from {
    opacity: 0%; }
  to {
    opacity: 100%; } }
.slide_top, .productContent--img, .productContent--img--none, .ProductDetail_img img, .ProductDetail__content__2 img, .ProductDetail__content__3__img img {
  animation: top 2s; }
@keyframes top {
  from {
    transform: translateY(100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_down, .ProductDetail__content__1 img {
  animation: down 2s; }
@keyframes down {
  from {
    transform: translateY(-100px);
    opacity: 0%; }
  to {
    transform: translateY(1px);
    opacity: 100%; } }
.slide_right, .ProductDetail__content__1__text p img, .ProductDetail__content__2__text p img, .ProductDetail__content__1__text p, .ProductDetail__content__2__text p {
  animation: slide_right 2s; }
@keyframes slide_right {
  from {
    transform: translateX(-100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.slide_left, .productContent--text, .ProductDetail__content__2__text p, .ProductDetail__content__3__text_1, .ProductDetail__content__3__text_1 p, .ProductDetail__content__3__text_2 p {
  animation: slide_left 2s; }
@keyframes slide_left {
  from {
    transform: translateX(100px);
    opacity: 0%; }
  to {
    transform: translateX(1px);
    opacity: 100%; } }
.header__animate {
  transition: 0.4s;
  background-color: white;
  color: #000000;
  box-shadow: 0 0 0.6rem #333333; }

.header__animate__off {
  background-color: none;
  transition: 0.4s;
  box-shadow: none; }
  .header__animate__off svg {
    color: #FFFFFF; }

.animate-dropdown, .drodown-block {
  animation: width 0.8s; }
@keyframes width {
  from {
    width: 0%; }
  to {
    width: 100%; } }
.animate-dropdown-off, .drodown-close {
  animation: width-off 1s; }
@keyframes width-off {
  from {
    width: 100%; }
  to {
    width: 0%; } }
.animate-modal, .modal-open .modal--center--content {
  animation: popup 0.8s; }
@keyframes popup {
  from {
    transform: translateY(-5rem);
    opacity: 0%; }
  to {
    transform: translateY(0);
    opacity: 100%; } }
.AN_white {
  color: #FFFFFF !important;
  transition: 0.4s; }

.AN_black {
  color: #000000 !important;
  transition: 0.4s; }

.HOVER_JS {
  border-bottom: 2.5px solid #24afdd !important;
  transition: 0.1s !important;
  color: #00A9E0 !important;
  font-size: 1rem !important; }

.btn-contactus {
  font-size: 0.9rem;
  color: #FFFFFF;
  background: #00A9E0;
  width: 15rem;
  border: 0;
  border-radius: 20px;
  padding: 10px;
  cursor: pointer; }
  .btn-contactus:hover {
    transform: translateY(-2px);
    background: #00c0ff;
    transition: 0.4s; }
  .btn-contactus:active {
    background: #009dd1; }
  @media (max-width: 600px) {
    .btn-contactus {
      font-size: 0.9rem !important; }
      .btn-contactus svg {
        font-size: 1.2rem !important; } }
  @media (max-width: 425px) {
    .btn-contactus {
      width: 50% !important;
      font-size: 0.8rem !important; }
      .btn-contactus svg {
        font-size: 1.2rem !important; } }
  @media (max-width: 350px) {
    .btn-contactus {
      width: 70% !important; } }

.btn-pay {
  font-size: 0.9rem;
  color: #FFFFFF;
  background: #ff0055;
  width: 100%;
  border: 0;
  border-radius: 20px;
  padding: 10px;
  cursor: pointer;
  margin-top: 1rem; }
  .btn-pay:hover {
    transform: translateY(-2px);
    background: #ff1f69;
    transition: 0.4s; }
  .btn-pay:active {
    background: #f00050; }

.btn-detail {
  font-size: 0.9rem;
  color: #FFFFFF;
  background: #00A9E0;
  width: 100%;
  border: 0;
  border-radius: 20px;
  padding: 10px;
  cursor: pointer;
  margin-top: 1rem; }
  .btn-detail:hover {
    transform: translateY(-2px);
    background: #00c0ff;
    transition: 0.4s; }
  .btn-detail:active {
    background: #009dd1; }

.box--link--open {
  display: block; }

.box--link--off {
  display: none; }

html {
  scroll-behavior: smooth; }

* {
  font-family: "prompt", sans-serif !important;
  font-style: 'prompt' !important; }

body {
  margin: 0 auto !important;
  padding: 0 !important;
  font-family: "prompt", sans-serif !important;
  font-style: 'prompt' !important;
  background: #FFFFFF; }

.noselect {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; }

p {
  margin: 0 auto; }

label {
  font-weight: normal !important; }

img {
  height: auto !important;
  align-self: flex-start; }

input,
button {
  outline: none !important;
  font-family: "prompt", sans-serif !important; }

button,
a {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

input[type="text"],
input[type="number"] {
  -webkit-appearance: none; }

button,
input[type="text"],
input[type="number"],
input[type="password"],
select,
textarea {
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

textarea {
  resize: none; }

a {
  text-decoration: none; }

.clearfix::after {
  content: "";
  clear: both;
  display: table; }

/*# sourceMappingURL=main.css.map */