@charset "UTF-8";

/* *****************************************/
/*    css
/*    V 20240627.2
/*        by AuOzzy
/******************************************/
/* ↓↓↓ ***** bootstrap reboot START ***** ↓↓↓ */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: var(--bs-border-width) solid;
  opacity: 0.25;
}

h6,
h5,
h4,
h3,
h2,
h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-heading-color);
}

h1 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
  }
}

h2 {
  font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
  h2 {
    font-size: 2rem;
  }
}

h3 {
  font-size: calc(1.3rem + 0.6vw);
}

@media (min-width: 1200px) {
  h3 {
    font-size: 1.75rem;
  }
}

h4 {
  font-size: calc(1.275rem + 0.3vw);
}

@media (min-width: 1200px) {
  h4 {
    font-size: 1.5rem;
  }
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul {
  padding-left: 2rem;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 0.875em;
}

mark {
  padding: 0.1875em;
  color: var(--bs-highlight-color);
  background-color: var(--bs-highlight-bg);
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: underline;
}

a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  font-size: 0.875em;
  color: var(--bs-code-color);
  word-wrap: break-word;
}

a>code {
  color: inherit;
}

kbd {
  padding: 0.1875rem 0.375rem;
  font-size: 0.875em;
  color: var(--bs-body-bg);
  background-color: var(--bs-body-color);
  border-radius: 0.25rem;
}

kbd kbd {
  padding: 0;
  font-size: 1em;
}

figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-secondary-color);
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

select:disabled {
  opacity: 1;
}

[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
  display: none !important;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}

@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}

legend+* {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

summary {
  display: list-item;
  cursor: pointer;
}

progress {
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}

/* ↑↑↑ ***** bootstrap reboot END ***** ↑↑↑ */
/* ↓↓↓ ***** RESET START ***** ↓↓↓ */
p,
h1,
h2,
h3,
h4,
h5,
h6,
a {
  margin: 0;
  text-decoration: none;
}

img {
  display: block;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* ↑↑↑ ***** RESET END ***** ↑↑↑ */
/* ↓↓↓ ***** ROOT START ***** ↓↓↓ */
:root {
  --spacing: 104px;
  --spacing-half: calc(104px / 2);
}

@media screen and (max-width: 768px) {
  :root {
    --spacing: 56px;
    --spacing-half: calc(56px / 2);
  }
}

:root {
  --spacing-1x: 8px;
  --spacing-2x: 16px;
  --spacing-4x: 32px;
  --spacing-8x: 64px;
  --spacing-16x: 128px;
}

:root {
  --Gray-01: #1a1a1a;
  --Gray-02: #333333;
  --Gray-03: #cccccc;
  --Gray-04: #e5e5e5;
  --Gray-05: #f6f6f6;
  --Gray-06: #ffffff;
  --dark-blue: #3046b6;
  --light-blue: #c4f1ff;
  --medium-blue: #82a4e4;
  --deep-blue: #063478;
  --common-blue: #4368c8;
  --auxiliary-color-1: #04be02;
  --auxiliary-color-2: #ea4e3d;
  --auxiliary-color-3: #ffaa09;
  --status-color-1: #3bac66;
  --status-color-2: #ffaa09;
  --status-color-3: #ea4f3d;
  --theme-color: #c4d8ff;
  --primary-color: #c4d8ff;
  --secondary-color: #d8d8d8;
  --light-color: #666666;
  --border-color: #333333;
  --background-color: #000000;
  --panel-color: #222222;
  --primary-button-text-color: #7ff800;
  --light-green: #c5e2d2;
  --medium-green: #71b394;
  --highlight-yellow: #f9fd4e;
  --text-highlight: #866638;
  --text-highlight2: #ff6f54;
  --text-highlight3: #fffe8f;
}

/* ↑↑↑ ***** ROOT END ***** ↑↑↑ */
/* ↓↓↓ ***** FONT START ***** ↓↓↓ */
body {
  font-family: Microsoft JhengHei, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC,
    miui, Hiragino Sans GB, sans-serif;
  font-display: swap;
  font-weight: 600;
  color: #686868;
}

.txt-Gray-01 {
  color: #1a1a1a;
}

.txt-Gray-02 {
  color: #333333;
}

.txt-Gray-03 {
  color: #cccccc;
}

.txt-Gray-04 {
  color: #e5e5e5;
}

.txt-Gray-05 {
  color: #f6f6f6;
}

.txt-Gray-06 {
  color: #ffffff;
}

.txt-dark-blue {
  color: #3046b6;
}

.txt-light-blue {
  color: #c4f1ff;
}

.txt-medium-blue {
  color: #82a4e4;
}

.txt-deep-blue {
  color: #063478;
}

.txt-common-blue {
  color: #4368c8;
}

.txt-auxiliary-color-1 {
  color: #04be02;
}

.txt-auxiliary-color-2 {
  color: #ea4e3d;
}

.txt-auxiliary-color-3 {
  color: #ffaa09;
}

.txt-status-color-1 {
  color: #3bac66;
}

.txt-status-color-2 {
  color: #ffaa09;
}

.txt-status-color-3 {
  color: #ea4f3d;
}

.txt-theme-color {
  color: #c4d8ff;
}

.txt-primary-color {
  color: #c4d8ff;
}

.txt-secondary-color {
  color: #d8d8d8;
}

.txt-light-color {
  color: #666666;
}

.txt-border-color {
  color: #333333;
}

.txt-background-color {
  color: #000000;
}

.txt-panel-color {
  color: #222222;
}

.txt-primary-button-text-color {
  color: #7ff800;
}

.txt-light-green {
  color: #c5e2d2;
}

.txt-medium-green {
  color: #71b394;
}

.txt-highlight-yellow {
  color: #f9fd4e;
}

.txt-text-highlight {
  color: #866638;
}

.txt-text-highlight2 {
  color: #ff6f54;
}

.txt-text-highlight3 {
  color: #fffe8f;
}

/* ↑↑↑ ***** FONT END ***** ↑↑↑ */
/* ↓↓↓ ***** COMMON START ***** ↓↓↓ */
html,
body {
  height: 100%;
}

@media (max-width: 750px) {

  html,
  body {
    overflow: hidden;
  }
}

html {
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#121927),
      color-stop(50%, #1a2234));
  background: linear-gradient(#121927 0%, #1a2234 50%);
}

body {
  position: relative;
  width: 100%;
  margin: auto;
  background-color: #fff;
  background-image: url(../images/bg-desktop.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@media (max-width: 1024px) {
  body {
    width: clamp(320px, 100%, 750px);
    background-image: none;
  }
}

.device-mobile body {
  width: clamp(320px, 100%, 750px);
  background-image: none;
}

@media (max-width: 750px) {
  body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

img {
  width: 100%;
  height: auto;
}

a {
  color: currentColor;
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}

/* ↑↑↑ ***** COMMON END ***** ↑↑↑ */
@-webkit-keyframes enlarge {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    width: calc(100% + 30px);
    height: calc(100% + 30px);
  }
}

@keyframes enlarge {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    width: calc(100% + 30px);
    height: calc(100% + 30px);
  }
}

@-webkit-keyframes iconActiveEffect {
  0% {
    scale: 1;
  }

  50% {
    scale: 0.9;
  }

  100% {
    scale: 1;
  }
}

@keyframes iconActiveEffect {
  0% {
    scale: 1;
  }

  50% {
    scale: 0.9;
  }

  100% {
    scale: 1;
  }
}

/* ↓↓↓ ***** COMPONENT START ***** ↓↓↓ */
.tw_btn {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: none;
  background-color: transparent;
  color: var(--common-blue);
  font-weight: 600;
  line-height: 1;
  -webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out,
    border 0.3s ease-in-out, text-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border 0.3s ease-in-out,
    text-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
    color 0.3s ease-in-out, border 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
    color 0.3s ease-in-out, border 0.3s ease-in-out, text-shadow 0.3s ease-in-out,
    -webkit-box-shadow 0.3s ease-in-out;
}

.tw_btn .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.tw_btn .tw_img {
  -webkit-transition: -webkit-filter 0.3s ease-in-out;
  transition: -webkit-filter 0.3s ease-in-out;
  transition: filter 0.3s ease-in-out;
  transition: filter 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out;
}

.tw_btn:hover .tw_img {
  -webkit-filter: saturate(2);
  filter: saturate(2);
}

.tw_btn:active {
  -webkit-transform: translate(1px, 1px);
  -ms-transform: translate(1px, 1px);
  transform: translate(1px, 1px);
}

.tw_btn:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(var(--x) * 1px) calc(var(--y) * 1px),
      hsla(0, 0%, 100%, 0.8),
      transparent 5vmin),
    transparent;
  background-attachment: fixed;
  pointer-events: none;
  border-radius: 80px;
  padding: 5px;
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box,
    -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box,
    -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.tw_btn:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(var(--x) * 1px) calc(var(--y) * 1px),
      hsla(0, 0%, 100%, 0.3),
      transparent 5vmin);
  background-attachment: fixed;
  opacity: var(--active, 0);
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  pointer-events: none;
  border-radius: 80px;
}

.tw_btn:hover {
  --active: 1;
  text-decoration: none;
}

.tw_btn-icon-prepend .icon,
.tw_btn-icon-append .icon {
  width: 20px;
  height: 20px;
}

.tw_img {
  position: relative;
}

.tw_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.icon,
.tw_img {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.icon .default,
.tw_img .default {
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.js-hover .icon .default,
.js-hover .tw_img .default {
  opacity: 0;
}

.icon .hover,
.tw_img .hover {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.js-hover .icon .hover,
.js-hover .tw_img .hover {
  opacity: 1;
}

.tw_popup {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.tw_popup.desktop {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 99;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  width: 100%;
  height: 100%;
  z-index: -1;
}

.tw_popup.js-show {
  opacity: 1;
  z-index: 99;
}

.tw_popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tw_popup-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  overflow: auto;
  padding: 2rem;
  background-color: #fff;
  border-radius: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.tw_popup .title {
  font-size: 1.6rem;
  color: #333;
}

.tw_popup .title.title {
  margin-bottom: 0;
}

.tw_popup .subtitle {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: #999;
}

.tw_popup .tw_btn {
  width: 100%;
  border-radius: 1rem;
  background-color: #0766ff;
  color: #fff;
}

.tw_popup .tw_btn-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 50px;
}

.tw_popup .tw_btn.cancel {
  background-color: #fff;
  color: #0766ff;
}

/* ↑↑↑ ***** COMPONENT END ***** ↑↑↑ */
/* ↓↓↓ ***** LAYOUT START ***** ↓↓↓ */
.device-desktop .body_wrap {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.device-mobile .body_wrap {
  position: relative;
  min-height: 100vh;
}

.container {
  margin-left: min(2vw, 15px);
  margin-right: min(2vw, 15px);
}

/* ↑↑↑ ***** LAYOUT END ***** ↑↑↑ */
/* ↓↓↓ ***** ENTRY START ***** ↓↓↓ */
.desktop {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 12.03125%;
  width: min(29.1145833333%, 559px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media (max-width: 1280px) {
  .desktop {
    width: min(33%, 450px);
  }
}

@media (max-width: 1024px) {
  .desktop {
    display: none;
  }
}

.device-mobile .desktop {
  display: none;
}

.desktop .logo {
  width: 85.1520572451%;
  margin-bottom: min(9.3023255814vw, 52px);
}

.desktop .logo img {
  aspect-ratio: 476 / 131;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 476 / 131) {
  .desktop .logo img {
    width: 100%;
    height: 0;
    padding-bottom: 27.5210084034%;
  }
}

.desktop .title {
  width: 100%;
  margin-bottom: min(5.9033989267vw, 33px);
}

.desktop .title img {
  aspect-ratio: 559 / 124;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 559 / 124) {
  .desktop .title img {
    width: 100%;
    height: 0;
    padding-bottom: 22.1824686941%;
  }
}

.desktop .icon {
  width: 67.6207513417%;
  margin-bottom: min(12.343470483vw, 69px);
}

.desktop .icon img {
  aspect-ratio: 378 / 61;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 378 / 61) {
  .desktop .icon img {
    width: 100%;
    height: 0;
    padding-bottom: 16.1375661376%;
  }
}

.desktop .tw_btn {
  width: 83.8998211091%;
}

.desktop .tw_btn img {
  aspect-ratio: 469 / 154;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 469 / 154) {
  .desktop .tw_btn img {
    width: 100%;
    height: 0;
    padding-bottom: 32.8358208955%;
  }
}

.desktop .tw_btn .tw_btn-inner {
  position: relative;
  aspect-ratio: 423 / 106;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 423 / 106) {
  .desktop .tw_btn .tw_btn-inner {
    width: 100%;
    height: 0;
    padding-bottom: 25.0591016548%;
  }
}

.desktop .tw_btn .tw_img {
  position: absolute;
}

.mobile {
  display: none;
}

.device-mobile .mobile {
  display: block;
  height: 100%;
}

@media (max-width: 1024px) {
  .device-desktop .mobile {
    display: block;
  }
}

.mobile_header {
  position: fixed;
  top: 0px;
  z-index: 4;
  width: 100%;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 12px 4%;
}

.device-mobile .mobile_header {
  width: clamp(320px, 100%, 750px);
}

@media (max-width: 1024px) {
  .device-desktop .mobile_header {
    width: clamp(320px, 100%, 750px);
  }
}

.mobile_header .lang {
  max-width: 28px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 7.4666666667%;
  flex: 0 0 7.4666666667%;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

.mobile_header .lang img {
  aspect-ratio: 56 / 56;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 56 / 56) {
  .mobile_header .lang img {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
  }
}

.mobile_header .logo {
  max-width: 186px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 49.6%;
  flex: 0 0 49.6%;
}

.mobile_header .logo img {
  aspect-ratio: 372 / 78;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 372 / 78) {
  .mobile_header .logo img {
    width: 100%;
    height: 0;
    padding-bottom: 20.9677419355%;
  }
}

.mobile_header .service {
  max-width: 35.5px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 9.4666666667%;
  flex: 0 0 9.4666666667%;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

.mobile_header .service img {
  aspect-ratio: 71 / 57;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 71 / 57) {
  .mobile_header .service img {
    width: 100%;
    height: 0;
    padding-bottom: 80.2816901408%;
  }
}

.mobile_swiper {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: var(--mobile-header);
}

.mobile_swiper .swiper {
  width: 100%;
}

.mobile_swiper .swiper-slide {
  position: relative;
  width: 100%;
}

.mobile_swiper .swiper-slide-container {
  max-width: 375px;
  margin: auto;
}

@media screen and (max-height: 740.2px) {
  .mobile_swiper .swiper-slide-container {
    max-width: 300px;
  }
}

@media screen and (max-height: 650.2px) {
  .mobile_swiper .swiper-slide-container {
    max-width: 250px;
  }
}

@media (min-width: 768px) {
  .mobile_swiper .swiper-slide-container {
    max-width: 500px;
  }
}

@media (min-width: 1024px) {
  .mobile_swiper .swiper-slide-container {
    max-width: 650px;
  }
}

.mobile_swiper .swiper-slide-inner {
  width: 100%;
  height: 0;
  padding-bottom: 146.6666666667%;
}

@media screen and (max-height: 740.2px) {
  .mobile_swiper .swiper-slide-inner {
    padding-bottom: 146.6666666667%;
  }
}

@media screen and (max-height: 650.2px) {
  .mobile_swiper .swiper-slide-inner {
    padding-bottom: 141.3333333333%;
  }
}

.mobile_swiper .swiper-slide .slide-img img {
  height: 46.2568472307%;
  aspect-ratio: 750/960;
  -o-object-position: center 55%;
  object-position: center 55%;
}

.mobile_swiper .slide-01 .slide-title {
  position: relative;
  width: 100%;
}

.mobile_swiper .slide-01 .slide-title::before {
  content: "";
  display: block;
  aspect-ratio: 750 / 76;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 750 / 76) {
  .mobile_swiper .slide-01 .slide-title::before {
    width: 100%;
    height: 0;
    padding-bottom: 10.1333333333%;
  }
}

.mobile_swiper .slide-01 .slide-title-img {
  width: 85.3333333333%;
  margin: auto;
}

.mobile_swiper .slide-01 .slide-title img {
  aspect-ratio: 640/155;
}

.mobile_swiper .slide-02 .slide-title {
  position: relative;
  width: 100%;
}

.mobile_swiper .slide-02 .slide-title::before {
  content: "";
  display: block;
  aspect-ratio: 750 / 75;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 750 / 75) {
  .mobile_swiper .slide-02 .slide-title::before {
    width: 100%;
    height: 0;
    padding-bottom: 10%;
  }
}

.mobile_swiper .slide-02 .slide-title-img {
  width: 61.8666666667%;
  margin: auto;
}

.mobile_swiper .slide-02 .slide-title img {
  aspect-ratio: 464/156;
}

.mobile_swiper .slide-03 .slide-title {
  position: relative;
  width: 100%;
}

.mobile_swiper .slide-03 .slide-title::before {
  content: "";
  display: block;
  aspect-ratio: 750 / 35;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 750 / 35) {
  .mobile_swiper .slide-03 .slide-title::before {
    width: 100%;
    height: 0;
    padding-bottom: 4.6666666667%;
  }
}

.mobile_swiper .slide-03 .slide-title-img {
  width: 92.6666666667%;
  margin: auto;
}

.mobile_swiper .slide-03 .slide-title img {
  aspect-ratio: 695/187;
}

.mobile_swiper .slide-04 .slide-title {
  position: relative;
  width: 100%;
}

.mobile_swiper .slide-04 .slide-title::before {
  content: "";
  display: block;
  aspect-ratio: 750 / 35;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 750 / 35) {
  .mobile_swiper .slide-04 .slide-title::before {
    width: 100%;
    height: 0;
    padding-bottom: 4.6666666667%;
  }
}

.mobile_swiper .slide-04 .slide-title-img {
  width: 93.2%;
  margin: auto;
}

.mobile_swiper .slide-04 .slide-title img {
  aspect-ratio: 699/189;
}

.mobile_swiper .slide-05 .slide-title {
  position: relative;
  width: 100%;
}

.mobile_swiper .slide-05 .slide-title::before {
  content: "";
  display: block;
  aspect-ratio: 750 / 9;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 750 / 9) {
  .mobile_swiper .slide-05 .slide-title::before {
    width: 100%;
    height: 0;
    padding-bottom: 1.2%;
  }
}

.mobile_swiper .slide-05 .slide-title-img {
  width: 93.4666666667%;
  margin: auto;
}

.mobile_swiper .slide-05 .slide-title img {
  aspect-ratio: 701/219;
}

.mobile_btns {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 375px;
  margin: auto;
  padding-bottom: 1rem;
  pointer-events: none;
}

@media screen and (max-height: 740.2px) {
  .mobile_btns {
    max-width: 300px;
  }
}

@media screen and (max-height: 650.2px) {
  .mobile_btns {
    max-width: 250px;
  }
}

@media (min-width: 768px) {
  .mobile_btns {
    max-width: 500px;
  }
}

@media (min-width: 1024px) {
  .mobile_btns {
    max-width: 650px;
  }
}

.mobile_btns .tw_btn {
  pointer-events: all;
  width: 80.5333333333%;
  margin: auto;
  padding: 0;
}

.mobile_btns .tw_btn-inner {
  position: relative;
  aspect-ratio: 558 / 140;
  width: 100%;
  height: auto;
  width: 100%;
}

@supports not (aspect-ratio: 558 / 140) {
  .mobile_btns .tw_btn-inner {
    width: 100%;
    height: 0;
    padding-bottom: 25.0896057348%;
  }
}

.mobile_btns .tw_img {
  position: absolute;
  width: 100%;
}

.mobile_btns .tw_img img {
  aspect-ratio: 640 / 186;
  width: 100%;
  height: auto;
}

@supports not (aspect-ratio: 640 / 186) {
  .mobile_btns .tw_img img {
    width: 100%;
    height: 0;
    padding-bottom: 29.0625%;
  }
}

.mobile_lines {
  position: fixed;
  top: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 10;
  width: clamp(320px, 100%, 750px);
  height: 100%;
}

.mobile_lines .mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.mobile_lines .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: clamp(320px, 100%, 750px);
  background-color: #fff;
  padding: 2rem;
  border-radius: 1rem 1rem 0 0;
}

.mobile_lines .title {
  font-size: 1rem;
  color: #333;
}

.mobile_lines .subtitle {
  font-size: 0.8rem;
  color: #999;
}

.mobile_lines .tw_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border-radius: 1rem;
  background-color: #0766ff;
  color: #fff;
}

.mobile_lines .tw_btn.cancel {
  background-color: #fff;
  color: #0766ff;
}

.bg-style {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 999;
}

.is-validated .bg-style {
  display: none;
}

/* ↑↑↑ ***** ENTRY END ***** ↑↑↑ */
/* animate.css - https://animate.style/ */
/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

.animated {
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.repeat-1 {
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}

.animated.repeat-2 {
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}

.animated.repeat-3 {
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}

.animated.delay-1s {
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}

.animated.delay-2s {
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}

.animated.delay-3s {
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}

.animated.delay-4s {
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}

.animated.delay-5s {
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}

.animated.faster {
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}

.animated.fast {
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}

.animated.slow {
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}

.animated.slower {
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}

@media print,
(prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animated[class*="Out"] {
    opacity: 0;
  }
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}