a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
* {
  box-sizing: border-box;
}
html {
  font-size: 10px;
}
@media (min-width: 2000px) {
  html {
    font-size: 80%;
  }
}
@media (min-width: 2500px) {
  html {
    font-size: 100%;
  }
}
@media screen and (max-width: 2000px) {
  html {
    scroll-behavior: smooth;
  }
}
@media (max-width: 1580px) {
  html {
    font-size: 8px;
  }
}
@media (max-width: 1200px) {
  html {
    font-size: 10px;
  }
}
body {
  font-family: Inter, sans-serif;
  font-size: 1.8rem;
  color: #3a3a3a;
  line-height: 1.5;
  overflow: hidden auto;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 1200px) {
  body {
    font-size: 1.6rem;
  }
}
::-webkit-scrollbar {
  width: 7px;
}
@media (max-width: 1200px) {
  ::-webkit-scrollbar {
    width: 3px;
  }
}
::-webkit-scrollbar-track {
  background: 0 0;
}
::-webkit-scrollbar-thumb {
  background: #c3c3c3;
  border-radius: 2rem;
}
a {
  text-decoration: none;
  color: inherit;
}
button,
input,
select,
textarea {
  font-family: Inter, sans-serif;
  font-size: 1.4rem;
  line-height: 1.2;
  padding: 0;
  border: none;
  outline: 0;
  resize: none;
  vertical-align: middle;
}
.container {
  position: relative;
  width: 100%;
  max-width: 144.6rem;
  height: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (max-width: 1580px) {
  .container {
    max-width: 80%;
  }
}
@media (max-width: 1368px) {
  .container {
    max-width: 90%;
  }
}
@media (max-width: 1200px) {
  .container {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .container {
    padding: 0 0.8rem;
  }
}
.no-scroll {
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hidden;
  overscroll-behavior: none;
}
.section {
  background-color: #fff;
  position: relative;
  padding: 6rem 0;
}
@media (max-width: 1500px) {
  .section {
    padding: 6.4rem 0;
  }
}
@media (max-width: 1200px) {
  .section {
    padding: 5.6rem 0;
  }
}
@media screen and (max-width: 768px) {
  .section {
    padding: 2.8rem 0;
  }
}
.section-12 {
  position: relative;
  padding: 12rem 0;
}
@media (max-width: 1500px) {
  .section-12 {
    padding: 8rem 0;
  }
}
@media (max-width: 1200px) {
  .section-12 {
    padding: 5.6rem 0;
  }
}
@media screen and (max-width: 768px) {
  .section-12 {
    padding: 2.8rem 0;
  }
}
.btn-purple-linear {
  white-space: nowrap;
  display: block;
  width: max-content;
  position: relative;
  border-radius: 10rem;
  padding: 1.6rem 3.2rem;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  background-size: 300% 300%;
  z-index: 12;
  transition: 0.3s;
  margin: 4rem 0;
  animation: animatedgradient 6s ease alternate infinite;
}
@media screen and (max-width: 1200px) {
  .btn-purple-linear {
    margin: 2rem 0;
  }
}
@media screen and (max-width: 576px) {
  .btn-purple-linear {
    margin: 1rem 0;
  }
}
.btn-purple-linear::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  width: calc(100% + 1.6rem);
  height: calc(100% + 1.6rem);
  border-radius: 10rem;
  background-color: #f41e92;
  transform: translate(-50%, -50%);
  opacity: 0.2;
  transition: 0.3s;
}
.btn-purple-linear::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 10rem;
  background: linear-gradient(272deg, #f41e92 -34.1%, #7c0fd1 115.23%);
  transform: translate(-50%, -50%);
}
.btn-purple-linear .txt {
  position: relative;
  z-index: 2;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-purple-linear .ani-arow {
  position: relative;
  width: 1rem;
  display: block;
  left: 1rem;
}
.btn-purple-linear .ani-arow .icon-inner {
  display: block;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  cursor: pointer;
}
.btn-purple-linear .ani-arow .icon-arrow {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin: -2rem 1rem 1rem 1rem;
  animation: btn-arrow-ani 2s infinite;
}
@media screen and (min-width: 1201px) {
  .btn-purple-linear:hover {
    box-shadow: 0 0.4rem 1.6rem 0 #ce18c5;
  }
  .btn-purple-linear:hover::before {
    opacity: 0;
  }
}
@keyframes animatedgradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes btn-arrow-ani {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-8px, -8px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(8px, 8px);
  }
}
.sec-header {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .sec-header {
    max-width: 100%;
  }
}
.sec-header-route {
  position: absolute;
  top: 50%;
  transform: translateY(-20%);
}
@media screen and (max-width: 1200px) {
  .sec-header-route svg {
    width: 10rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-header-route svg {
    width: 7rem;
  }
}
@media screen and (max-width: 650px) {
  .sec-header-route {
    top: unset;
    bottom: 0;
    transform: translateY(100%);
  }
  .sec-header-route svg {
    width: 4rem;
    height: 4rem;
  }
}
.sec-header-route-1 {
  left: 5%;
}
.sec-header-route-2 {
  right: 5%;
}
.sec-tt {
  font-size: 4rem;
  font-weight: 700;
  transition: 0.3s;
  overflow: hidden;
  line-height: 1.2;
}
@media only screen and (max-width: 1200px) {
  .sec-tt {
    font-size: 3.5rem;
  }
}
@media only screen and (max-width: 800px) {
  .sec-tt {
    font-size: 3rem;
  }
}
@media (max-width: 1200px) {
  .sec-tt {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-tt br {
    display: none;
  }
}
.sec-tt.sec-subtt {
  font-size: 2.1rem;
}
@media only screen and (max-width: 1200px) {
  .sec-tt.sec-subtt {
    font-size: 1.9rem;
  }
}
@media only screen and (max-width: 800px) {
  .sec-tt.sec-subtt {
    font-size: 1.7rem;
  }
}
.sec-tt.fz-64 {
  font-size: 6.4rem;
}
@media only screen and (max-width: 1200px) {
  .sec-tt.fz-64 {
    font-size: 3.9rem;
  }
}
@media only screen and (max-width: 800px) {
  .sec-tt.fz-64 {
    font-size: 2.9rem;
  }
}
.sec-tt.fz-56 {
  font-size: 5.6rem;
}
@media only screen and (max-width: 1200px) {
  .sec-tt.fz-56 {
    font-size: 5.1rem;
  }
}
@media only screen and (max-width: 800px) {
  .sec-tt.fz-56 {
    font-size: 4rem;
  }
}
.subtt {
  font-size: 3.2rem;
  font-weight: 600;
  color: #f5851e;
  margin-bottom: 2.4rem;
}
@media only screen and (max-width: 1200px) {
  .subtt {
    font-size: 2.7rem;
  }
}
@media only screen and (max-width: 800px) {
  .subtt {
    font-size: 2.2rem;
  }
}
.sec-tt-flex {
  align-items: center;
  -webkit-align-items: center;
  gap: 0.8rem;
  margin-bottom: 4rem;
}
@media screen and (max-width: 1200px) {
  .sec-tt-flex {
    margin-bottom: 3.2rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-tt-flex {
    margin-bottom: 2.4rem;
  }
}
.sec-tt-flex .sec-tt {
  margin-bottom: 0 !important;
}
.txt-center {
  text-align: center;
}
.txt-underline {
  display: inline-block;
  position: relative;
}
.txt-underline.hl-blue-sky::before {
  border-color: #2686ec;
}
.txt-underline.hl-white-sky::before {
  border-color: #fff;
}
@media screen and (max-width: 1200px) {
  .txt-underline {
    display: inline;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }
}
.txt-underline::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #3a3a3a;
}
.txt-under {
  text-decoration: underline;
  text-underline-offset: 0.6rem;
}
.sec-desc {
  margin-top: 2.4rem;
  overflow: hidden;
  color: #8b8b8b;
}
.sec-desc p {
  margin-bottom: 1.6rem;
}
.sec-desc p:last-child {
  margin-bottom: 0;
}
.sec-btn {
  margin-top: 3.2rem;
}
.sec-quote {
  font-style: italic;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #7c0fd1;
  margin-bottom: 3.2rem;
}
@media only screen and (max-width: 1200px) {
  .sec-quote {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 800px) {
  .sec-quote {
    font-size: 1.7rem;
  }
}
.btn-group {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.btn {
  padding: 1.6rem 3.2rem;
  border-radius: 5rem;
  width: 100%;
  max-width: max-content;
  border-radius: 0.5rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  transition: 0.5s;
  cursor: pointer;
  position: relative;
  z-index: 3;
  overflow: hidden;
}
.btn::after {
  content: "";
  background: #7c0fd1;
  position: absolute;
  width: calc(100% + 0.5rem);
  height: 100%;
  border-radius: 5px;
  top: 0;
  left: -0.25rem;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: center right;
  transition: transform 0.5s ease;
}
@media (min-width: 1201px) {
  .btn:hover::after {
    transform: scale(1);
    transform-origin: center left;
  }
}
@media (min-width: 1201px) {
  .btn[type="submit"]:hover {
    background-color: #7c0fd1;
  }
  .btn[type="submit"]:hover::after {
    transform: scale(1);
    transform-origin: center left;
  }
}
.btn img {
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 1rem;
}
.btn.btn-orange {
  background: var(
    --gradient-button,
    linear-gradient(101deg, #ffa318 -38.94%, #f6851c 44.05%, #f31f10 132.4%)
  );
}
.btn.btn-black {
  background: #3a3a3a;
  color: #fff;
}
@media (min-width: 1201px) {
  .btn.btn-black:hover {
    color: #f5851e;
  }
}
.btn.btn-black::after {
  background: #fff;
}
.btn.btn-transparent {
  background: 0 0;
  color: #fff;
  border: 0.1rem solid #fff;
}
.btn.btn-small {
  padding: 0.8rem 1.6rem;
  font-size: 1.4rem;
}
.btn.btn-white {
  background-color: transparent;
  border: 1px solid rgba(0, 64, 132, 0.3);
  color: #7c0fd1;
}
@media (min-width: 1201px) {
  .btn.btn-white:hover {
    color: #fff;
    border-color: transparent;
  }
}
.btn.btn-white::after {
  background: #f5851e;
}
.btn.btn-white-b {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}
.btn.btn-white-b::after {
  background-color: #f5851e;
}
@media screen and (min-width: 1201px) {
  .btn.btn-white-b:hover {
    border-color: #f5851e;
  }
}
.btn.btn-nor {
  padding: 1.2rem 2rem;
  background: #fff;
  border: 1px solid rgba(9, 25, 41, 0.3);
  color: #3a3a3a;
}
@media screen and (min-width: 1201px) {
  .btn.btn-nor:hover {
    color: #fff;
  }
}
body.web-design .btn::after {
  background-color: #7c0fd1;
}
@media screen and (min-width: 1201px) {
  body.web-design .btn-more:hover {
    background-color: #7c0fd1;
  }
}
.btn-more {
  padding: 1.6rem 3.2rem;
  font-weight: 600;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(9, 25, 41, 0.3);
  border-radius: 0.4rem;
  width: max-content;
  margin: 0 auto;
  margin-top: 4rem;
  cursor: pointer;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .btn-more {
    padding: 0.8rem 1.6rem;
  }
}
@media screen and (min-width: 1201px) {
  .btn-more:hover {
    background-color: #7c0fd1;
    color: #fff;
  }
}
.view-more {
  font-size: 1.6rem;
  font-weight: 500;
  color: #3a3a3a;
  position: relative;
  text-transform: uppercase;
  transition: 0.3s;
  padding-right: 2.4rem;
}
.view-more::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 2rem;
  height: 0.9rem;
  background: url(../assets/images/view-arrow.svg) no-repeat;
  background-size: cover;
  transition: 0.3s ease;
}
@media (min-width: 1201px) {
  .view-more:hover {
    color: #7c0fd1;
  }
  .view-more:hover::before {
    transform: translate(0.5rem, -50%);
  }
}
.ani-arrow {
  cursor: pointer;
  position: relative;
  transition: 0.3s;
  pointer-events: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  color: #f5851e;
  margin-top: 3.2rem;
  padding-right: 6.4rem;
  font-weight: 600;
  max-width: max-content;
}
.ani-arrow::after,
.ani-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  transition: 0.6s cubic-bezier(0.61, 0.22, 0.23, 1);
  -webkit-transition: 0.6s cubic-bezier(0.61, 0.22, 0.23, 1);
  width: 4.4rem;
  height: 2.5rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
@media (min-width: 1201px) {
  .ani-arrow:hover::after {
    transform: translate(50%, -50%) scale(0);
    -webkit-transform: translate(50%, -50%) scale(0);
    opacity: 0;
    visibility: hidden;
  }
  .ani-arrow:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%) scale(1);
    -webkit-transform: translate(0, -50%) scale(1);
    -o-transform: translate(0, -50%) scale(1);
    transition: 0.6s cubic-bezier(0.61, 0.22, 0.23, 1);
    -webkit-transition: 0.6s cubic-bezier(0.61, 0.22, 0.23, 1);
    -o-transition: 0.6s cubic-bezier(0.61, 0.22, 0.23, 1);
  }
}
.ani-arrow::before {
  background: url(../assets/images/arrow-ani.png) no-repeat;
  background-size: contain;
  background-size: 2rem 1.2rem;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0);
  -webkit-transform: translate(-50%, -50%) scale(0);
}
.ani-arrow::after {
  background: url(../assets/images/arrow-ani.png) no-repeat;
  background-size: contain;
  background-size: 2rem 1.2rem;
  background-position: center;
}
.ani-arrow.read-more {
  padding-right: 3rem;
}
.ani-arrow.read-more::after,
.ani-arrow.read-more::before {
  width: 2rem;
  height: 1.2rem;
}
.ani-arrow.read-more::after {
  background-size: 2rem 1.2rem;
}
.ani-arrow.read-white {
  transition: 0.6s;
  color: #fff;
  margin-top: 0;
  padding-right: 3rem;
}
.ani-arrow.read-white.ani-arrow::after,
.ani-arrow.read-white.ani-arrow::before {
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}
@media screen and (min-width: 1201px) {
  .img-hv:hover img {
    transform: translate(-50%, -50%) scale(1.1);
  }
}
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row-ctn {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  align-items: stretch;
  -webkit-align-items: stretch;
  width: calc(100% + 3rem);
  margin-left: -1.5rem;
}
@media (max-width: 1200px) {
  .row-ctn {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
  }
}
strong {
  font-weight: 700;
}
img {
  object-fit: cover;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  transition: 1s;
}
.dot {
  margin: 2.4rem 0;
  padding-left: 4.2rem;
  position: relative;
}
.dot:nth-child(1) {
  margin-top: 0;
}
.dot:last-child {
  margin-left: 0;
}
.dot::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 1.1rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 0.3rem solid #f5851e;
}
.hl-pri {
  color: #7c0fd1;
  transition: 0.3s;
}
.hl-sec {
  color: #f5851e;
  transition: 0.3s;
}
.hl-sec-2 {
  color: #f5851e;
  transition: 0.3s;
}
.hl-red {
  color: #e72a2a;
  transition: 0.3s;
}
.hl-purple {
  color: #7c0fd1;
  transition: 0.3s;
}
.hl-blue-sky {
  color: #2686ec;
  transition: 0.3s;
}
.fw-700 {
  font-weight: 700;
}
.fw-600 {
  font-weight: 600;
}
.fw-500 {
  font-weight: 500;
}
.fw-400 {
  font-weight: 400;
}
.fw-300 {
  font-weight: 300;
}
.hover-item .name {
  transition: 0.3s;
}
.hover-item .img {
  overflow: hidden;
}
.hover-item .img img {
  transition: 0.5s ease;
}
.hover-item span {
  display: block;
}
@media screen and (min-width: 1201px) {
  .hover-item:hover .name {
    color: #f5851e;
  }
  .hover-item:hover .img img {
    transform: scale(1.05);
  }
}
.wow {
  animation-duration: 1s;
}
.scrollbar-cus {
  overflow: hidden auto;
}
@media screen and (min-width: 1201px) {
  .scrollbar-cus {
    padding-right: 0.8rem;
  }
}
.scrollbar-cus::-webkit-scrollbar {
  width: 0.3rem;
}
.scrollbar-cus::-webkit-scrollbar-track {
  background: #1a5492;
}
.scrollbar-cus::-webkit-scrollbar-thumb {
  background: #f5851e;
  border-radius: 0;
}
.scrollbar-cus.scrollbar-cus-sec::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.scrollbar-cus.scrollbar-cus-sec::-webkit-scrollbar-thumb {
  background: #f5851e;
  border-radius: 0;
}
.mg-auto {
  margin-left: auto;
  margin-right: auto;
}
.txt-bg {
  display: block;
  width: 100%;
  max-width: max-content;
  padding: 0.8rem 1.6rem;
  color: #fff;
  border-radius: 0.8rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
@media screen and (max-width: 375px) {
  .txt-bg {
    padding: 0.4rem 0.8rem;
  }
}
.txt-bg-ani {
  background: 0 0 !important;
  box-shadow: unset;
  position: relative;
}
.txt-bg-ani.active::before {
  width: 100%;
}
.txt-bg-ani.bg-digital::before {
  background-color: #7c0fd1;
}
.txt-bg-ani.bg-lms::before {
  background-color: #f41e92;
}
.txt-bg-ani.bg-nhtq::before {
  background-color: #f5851e;
}
.txt-bg-ani.bg-software::before {
  background-color: #2686ec;
}
.txt-bg-ani.bg-host::before {
  background-color: #1ec0f2;
}
.txt-bg-ani.bg-green::before {
  background-color: #0dba35;
}
.txt-bg-ani.bg-white::before {
  background-color: #fff;
}
.txt-bg-ani::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 0;
  height: 100%;
  transition: 0.5s ease-in-out;
  background-color: #7c0fd1;
  border-radius: 0.8rem;
}
.txt-bg-ani .txt {
  position: relative;
  z-index: 2;
}
.txt-bg.txt-bg-win {
  border: 1px solid #7c0fd1;
  border-radius: 0.8rem;
  font-size: 3.2rem;
  color: #7c0fd1;
}
@media only screen and (max-width: 1200px) {
  .txt-bg.txt-bg-win {
    font-size: 2.7rem;
  }
}
@media only screen and (max-width: 800px) {
  .txt-bg.txt-bg-win {
    font-size: 2.2rem;
  }
}
.txt-bg.txt-upper {
  padding-top: 1rem;
  padding-bottom: 0.6rem;
}
.bg-nhtq {
  background-color: #f5851e;
}
.bg-host {
  background-color: #1ec0f2;
}
.bg-software {
  background-color: #2686ec;
}
.bg-digital {
  background-color: #7c0fd1;
}
.bg-lms {
  background-color: #f41e92;
}
.bg-red {
  background-color: #e01507;
}
.bg-white {
  background-color: #fff;
  color: #7c0fd1;
}
.txt-digital {
  color: #7c0fd1;
}
.txt-software {
  color: #2686ec;
}
.txt-lms {
  color: #f41e92;
}
.txt-nhtq {
  color: #f5851e;
}
.txt-host {
  color: #1ec0f2;
}
.txt-green {
  color: #01b940;
}
.txt-green-2 {
  color: #09f057;
}
.txt-yellow {
  color: #ffcb01;
}
.txt-red {
  color: #e72a2a;
}
.txt-warning {
  color: #ffb241;
}
@media screen and (min-width: 601px) {
  .sec-tt-hl-svg {
    padding-bottom: 2rem;
  }
  .hl-svg {
    position: relative;
  }
  .hl-svg::before {
    content: "";
    position: absolute;
    bottom: -42%;
    right: 0;
    width: 100%;
    height: 2rem;
    background: url(../assets/images/dvs/hl-svg-nhtq.png) no-repeat;
    background-size: 100% 100%;
  }
}
.btn-second {
  padding: 2.4rem 4rem;
  display: inline-block;
  z-index: 1;
  box-shadow: 0.8rem 0.8rem 4rem rgba(245, 133, 30, 0.24);
  border-radius: 0.8rem;
  color: #fff;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  gap: 1.6rem;
  font-weight: 700;
  font-size: 2.4rem;
  width: fit-content;
  height: 8.2rem;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
}
@media only screen and (max-width: 1200px) {
  .btn-second {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 800px) {
  .btn-second {
    font-size: 1.7rem;
  }
}
@media screen and (max-width: 720px) {
  .btn-second {
    gap: 0.4rem;
  }
}
.btn-second::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
    100.87deg,
    #ffbe18 -38.94%,
    #ff9635 44.05%,
    #f31f10 132.4%
  );
  z-index: -1;
  transition: 0.45s ease-in-out all;
}
.btn-second::after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(270deg, #7c0fd1 0, #b34ae6 100%);
  transition: transform 0.5s ease 0s;
  z-index: -1;
  width: 100%;
  transform: scaleX(0);
  transform-origin: center right;
}
.btn-second:hover::after {
  transform: scale(1);
  transform-origin: center left;
}
@media screen and (max-width: 1200px) {
  .btn-second {
    height: 6rem;
  }
}
@media screen and (max-width: 600px) {
  .btn-second {
    padding: 1.2rem;
    height: auto;
    font-size: 1.4rem;
  }
}
.btn-second .icon {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
}
@media screen and (max-width: 720px) {
  .btn-second .icon {
    width: 1.6rem;
    height: 1.6rem;
  }
}
.btn-second.btn-trans {
  background: 0 0;
  font-weight: 700;
  font-size: 2.4rem;
  color: #3a3a3a;
  box-shadow: unset;
  border: 0.1rem solid rgba(58, 58, 58, 0.3);
  filter: drop-shadow(0.8rem 8px 4rem rgba(245, 133, 30, 0.24));
}
@media only screen and (max-width: 1200px) {
  .btn-second.btn-trans {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 800px) {
  .btn-second.btn-trans {
    font-size: 1.7rem;
  }
}
.btn-second.btn-trans::before {
  display: none;
}
.btn-second.btn-trans:hover .txt {
  color: #fff;
}
.btn-second.btn-trans .txt {
  transition: 0.45s ease-in-out all;
}
@media screen and (max-width: 1200px) {
  .btn.btn-orange {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 550px) {
  .btn.btn-orange {
    text-align: center;
    padding: 1.6rem 2.4rem;
  }
}
.pd-100 {
  padding-top: 10rem;
}
.pd-125 {
  padding-top: 12.5rem;
}
.pd-170 {
  padding-top: 17rem;
}
.pd-120 {
  padding-top: 12rem;
}
.pd-70 {
  padding-top: 7rem;
}
.pd-180 {
  padding-top: 18rem;
}
.mg-200 {
  margin-top: 20rem;
}
.mg-50 {
  margin-top: 5rem;
}
.mg-40 {
  margin-top: 4rem;
}
.txt-upper {
  text-transform: uppercase;
}
.media-tt {
  font-size: 4rem;
}
@media screen and (max-width: 1200px) {
  .media-tt {
    font-size: 2.4rem;
  }
}
.text-desc-dc {
  font-size: 3.2rem;
  text-align: center;
}
.text-desc-sm {
  font-size: 1.6rem;
  text-align: center;
  max-width: 45.4rem;
}
@keyframes textLinear {
  100% {
    background-position: 300% center;
  }
}
.text-gradient {
  background-image: linear-gradient(
    to right,
    #fecd1f,
    #f5851e,
    #f5851e,
    #fecd1f,
    #f5851e,
    #fecd1f
  );
  background-size: 150% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient.fs-big {
  font-size: 4.8rem;
}
@media screen and (max-width: 1200px) {
  .text-gradient.fs-big {
    font-size: 3.2rem;
    line-height: 1.2;
  }
}
@media screen and (max-width: 768px) {
  .text-gradient.fs-big {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 576px) {
  .text-gradient.fs-big {
    font-size: 1.8rem;
  }
}
.text-gradient.fs-normal {
  font-size: 4rem;
}
@media screen and (max-width: 1200px) {
  .text-gradient.fs-normal {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 768px) {
  .text-gradient.fs-normal {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 576px) {
  .text-gradient.fs-normal {
    font-size: 1.6rem;
  }
}
.text-gradient.active {
  animation: textLinear 2s linear infinite;
}
.text-gradient.text-gradient-link {
  transition: 1s;
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  position: relative;
}
@media screen and (min-width: 1201px) {
  .text-gradient.text-gradient-link:hover {
    transform: scale(1.03);
  }
}
.text-gradient.text-gradient-link::before {
  content: "";
  position: absolute;
  bottom: 0.7rem;
  left: 0;
  width: 100%;
  height: 0.1rem;
  border-bottom: 0.2rem solid transparent;
  background: linear-gradient(269deg, #f5851e -2.58%, #fecd1f 104.94%);
}
@media screen and (max-width: 1200px) {
  .text-gradient.text-gradient-link::before {
    bottom: -0.2rem;
  }
}
@media screen and (max-width: 576px) {
  .text-gradient.text-gradient-link::before {
    border-width: 0.1rem;
  }
}
.font-italic {
  font-style: italic;
}
.txt-upper {
  text-transform: uppercase;
}
.txt-white {
  color: #fff;
}
.d-flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.d-flex.a-start {
  align-items: flex-start;
  -webkit-align-items: flex-start;
}
.d-flex.f-column {
  flex-direction: column;
}
.d-flex.f-stretch {
  align-items: stretch;
  -webkit-align-items: stretch;
}
.d-flex.f-between {
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.d-flex.f-center {
  align-items: center;
  -ms-align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.d-flex.f-center.f-between {
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.d-flex.f-start {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}
.d-flex.f-end {
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
.d-flex.f-ctn {
  width: calc(100% + 2.4rem);
  margin-left: -1.2rem;
}
@media (max-width: 1200px) {
  .d-flex.f-ctn {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
  }
}
@media (max-width: 768px) {
  .d-flex.f-ctn {
    width: calc(100% + 0.8rem);
    margin-left: -0.4rem;
  }
}
.d-flex.f-nowrap {
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
}
.row-6 {
  width: calc(100% * (6 / 12));
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .row-6 {
    width: 80%;
  }
}
@media screen and (max-width: 500px) {
  .row-6 {
    width: 100%;
  }
}
.col {
  padding: 0 1.2rem;
}
@media (max-width: 1200px) {
  .col {
    padding: 0 0.75rem;
  }
}
@media (max-width: 768px) {
  .col {
    padding: 0 0.4rem;
  }
}
.col-1 {
  width: calc(100% / 12);
}
.col-2 {
  width: calc(100% * (2 / 12));
}
.col-3 {
  width: calc(100% * (3 / 12));
}
.col-4 {
  width: calc(100% * (4 / 12));
}
.col-5 {
  width: calc(100% * (5 / 12));
}
.col-6 {
  width: calc(100% * (6 / 12));
}
.col-7 {
  width: calc(100% * (7 / 12));
}
.col-8 {
  width: calc(100% * (8 / 12));
}
.col-9 {
  width: calc(100% * (9 / 12));
}
.col-10 {
  width: calc(100% * (10 / 12));
}
.col-11 {
  width: calc(100% * (11 / 12));
}
.col-12 {
  width: 100%;
}
@keyframes hotline-movement {
  100% {
    background-position-x: 100%;
  }
}
.hd-search {
  flex: 1;
  margin: 0;
  margin-left: 1.6rem;
  padding-left: 0.8rem;
  border-left: 0.1rem solid #e0e0e0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}
@media screen and (max-width: 1200px) {
  .hd-search {
    margin-left: 0;
    padding-left: 0;
    border-left: unset;
    flex: 0;
  }
}
.hd-search.hd-search-mobile {
  display: none;
}
@media screen and (max-width: 1200px) {
  .hd-search.hd-search-mobile {
    display: block;
  }
}
.hd-search-wrap {
  padding: 0.8rem;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  position: relative;
  border-radius: 0.6rem;
  transition: 0.3s;
}
@media screen and (max-width: 1200px) {
  .hd-search-wrap {
    width: 3.2rem;
    height: 3.2rem;
    background-color: #f7f7f7;
    border-radius: 0.2rem;
    padding: 0.5rem;
  }
}
@media screen and (min-width: 1201px) {
  .hd-search-wrap:hover {
    background-color: #f8f0ff;
  }
}
.hd-search-icon {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.hd-search-box {
  position: fixed;
  top: 10.2rem;
  transform: translateY(1rem);
  left: 0;
  width: 100%;
  z-index: 2;
  font-size: 1.6rem;
  color: #8b8b8b;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s linear;
}
@media screen and (max-width: 1200px) {
  .hd-search-box {
    top: 7.2rem;
    width: 100%;
  }
}
@media screen and (max-width: 850px) {
  .hd-search-box {
    font-size: 1.5rem;
  }
}
.hd-search-box.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hd-search-box.active .hd-search-box-wrap {
  pointer-events: auto;
}
.hd-search-box .container {
  max-width: 144.6rem;
}
.hd-search-box-wrap {
  width: 41.6666666667%;
  margin-left: auto;
  background-color: #fff;
  border-radius: 0.8rem;
  padding: 0.8rem;
  box-shadow: 0 1.6rem 4rem -1rem rgba(50, 50, 93, 0.32),
    0 0.8rem 2.4rem -1.5rem rgba(0, 0, 0, 0.24),
    inset 0 0.1rem 0.1rem rgba(255, 255, 255, 0.1);
}
@media screen and (max-width: 1200px) {
  .hd-search-box-wrap {
    width: 50%;
  }
}
@media screen and (max-width: 850px) {
  .hd-search-box-wrap {
    width: 100%;
  }
}
.hd-search-form {
  position: relative;
}
.hd-search-form.hasValue .hd-search-form-remove {
  opacity: 1;
}
.hd-search-form .form {
  flex: 1;
}
.hd-search-form .form input {
  background-color: #fff;
  transition: 0.3s;
  height: 4.8rem;
  border: 0.1rem solid #e0e0e0;
  border-radius: 0.6rem;
}
@media screen and (max-width: 450px) {
  .hd-search-form .form input {
    height: 3.6rem;
  }
}
.hd-search-form .form .search-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 4.8rem;
  max-width: 4.8rem;
  flex-shrink: 0;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0 !important;
  background: url(../assets/images/header/icon-search.svg) no-repeat;
  background-size: 2.4rem 2.4rem;
  background-position: center;
}
@media screen and (max-width: 450px) {
  .hd-search-form .form .search-btn {
    width: 3.6rem;
    background-size: 1.6rem 1.6rem;
  }
}
@media screen and (min-width: 1201px) {
  .hd-search-form .form .search-btn:hover {
    background: url(../assets/images/header/icon-search-pri.svg) no-repeat
      rgba(0, 0, 0, 0.04);
    background-size: 2.4rem 2.4rem;
    background-position: center;
  }
}
@media screen and (min-width: 1201px) and (max-width: 450px) {
  .hd-search-form .form .search-btn:hover {
    background-size: 1.6rem 1.6rem;
  }
}
.hd-search-form .form .search-key {
  width: calc(100% - 4.8rem);
  margin-left: auto;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-right: 5.6rem;
  color: #3a3a3a;
  font-weight: 500;
}
@media screen and (max-width: 450px) {
  .hd-search-form .form .search-key {
    width: calc(100% - 3.6rem);
    padding-left: 0.8rem;
    padding-right: 4.8rem;
  }
}
.hd-search-form .form .search-key::placeholder {
  display: block;
  font-size: 1.6rem;
  font-weight: 400;
}
@media screen and (max-width: 450px) {
  .hd-search-form .form .search-key::placeholder {
    font-size: 1.4rem;
  }
}
.hd-search-form .form .search-key:focus {
  border-color: #7c0fd1;
}
.hd-search-form .form .search-key:focus ~ .search-btn {
  border-color: #7c0fd1;
  background: url(../assets/images/header/icon-search-pri.svg) no-repeat;
  background-size: 2.4rem 2.4rem;
  background-position: center;
}
@media screen and (max-width: 450px) {
  .hd-search-form .form .search-key:focus ~ .search-btn {
    background-size: 1.6rem 1.6rem;
  }
}
@media screen and (min-width: 1201px) {
  .hd-search-form .form .search-key:focus ~ .search-btn:hover {
    background: url(../assets/images/header/icon-search-pri.svg) no-repeat
      rgba(0, 0, 0, 0.04);
    background-size: 2.4rem 2.4rem;
    background-position: center;
  }
}
@media screen and (min-width: 1201px) and (max-width: 450px) {
  .hd-search-form .form .search-key:focus ~ .search-btn:hover {
    background-size: 1.6rem 1.6rem;
  }
}
.hd-search-form-remove {
  position: absolute;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  transition: 0.3s;
  opacity: 0;
  font-weight: 500;
}
@media screen and (max-width: 450px) {
  .hd-search-form-remove {
    right: 1rem;
  }
}
@media screen and (min-width: 1201px) {
  .hd-search-form-remove:hover {
    color: #7c0fd1;
  }
}
.hd-search-history {
  padding: 1.6rem;
  margin-top: 0.8rem;
}
@media screen and (max-width: 850px) {
  .hd-search-history {
    padding: 0.8rem 0;
  }
}
.hd-search-history-list {
  margin-top: -0.8rem;
}
.hd-search-history-list .suggest-item {
  padding-right: 4.2rem !important;
}
.hd-search-history-list .suggest-item .history-remove {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s;
  font-weight: 400;
  font-size: 1.4rem;
}
@media screen and (min-width: 1201px) {
  .hd-search-history-list .suggest-item .history-remove:hover {
    color: #7c0fd1;
  }
}
.hd-search-suggest:not(:last-child) {
  margin-bottom: 2.4rem;
}
.hd-search-suggest-item:not(:last-child) {
  margin-bottom: 1.6rem;
}
.hd-search-suggest .label {
  font-weight: 600;
}
.hd-search-suggest .suggest-list {
  margin-top: 0.8rem;
}
.hd-search-suggest .suggest-item {
  padding: 0.8rem;
  margin-bottom: 0.2rem;
  align-items: center;
  -webkit-align-items: center;
  line-height: 1.2;
  transition: 0.3s;
  border-radius: 0.6rem;
  position: relative;
}
@media screen and (max-width: 450px) {
  .hd-search-suggest .suggest-item {
    padding-left: 1.2rem;
  }
}
@media screen and (min-width: 1201px) {
  .hd-search-suggest .suggest-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
}
.hd-search-suggest .suggest-item .icon {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.8rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.hd-search-suggest .suggest-item .name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media screen and (max-width: 1200px) {
  .hd-bar {
    margin-left: 1.2rem;
  }
}
@media screen and (max-width: 450px) {
  .hd .mona-logo {
    width: 80%;
  }
  .hd .mona-logo img {
    content: url(../assets/images/header/mona-logo-less.svg);
  }
}
.sec-com {
  --padding-section: 8rem;
  --padding-section-tl: 4.8rem;
  --padding-section-mobile: 2.4rem;
  padding: var(--padding-section) 0;
}
@media screen and (max-width: 1200px) {
  .sec-com {
    padding: var(--padding-section-tl) 0;
  }
}
@media screen and (max-width: 576px) {
  .sec-com {
    padding: var(--padding-section-mobile) 0;
  }
}
.sec-com-bg {
  background-color: var(--digitalDeepColor);
  color: #fff;
  overflow: hidden;
}
.sec-com-header {
  position: relative;
  z-index: 5;
}
.sec-com-logo {
  height: 2.5rem;
  margin-bottom: 3.2rem;
}
@media screen and (max-width: 1200px) {
  .sec-com-logo {
    margin-bottom: 1.6rem;
  }
}
.sec-com-logo .link {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 100%;
  height: 100%;
}
.sec-com-logo .link img {
  object-fit: contain;
}
.sec-com-tt {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.3;
}
@media screen and (max-width: 1727px) {
  .sec-com-tt {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 1200px) {
  .sec-com-tt {
    font-size: 2.4rem;
  }
}
.sec-com-desc-ar {
  --sec-com-desc-ar: #3e036c;
  padding: 3rem 3.8rem;
  background-color: var(--sec-com-desc-ar);
  color: #fff;
  text-align: center;
  font-size: 2.4rem;
  border-radius: 2.4rem;
  border: 0.2rem solid rgba(255, 255, 255, 0.2);
  position: relative;
}
.sec-com-tt-sub {
  font-size: 3.2rem;
  font-weight: 600;
}
@media screen and (max-width: 1727px) {
  .sec-com-tt-sub {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 1200px) {
  .sec-com-tt-sub {
    font-size: 1.8rem;
  }
}
.sec-com-desc-ar.has-arrow::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 14%;
  transform: translateY(100%);
  width: 3.2rem;
  height: 2.4rem;
  background: url(../assets/images/dvs/sec-com-desc-ar.png) no-repeat;
  background-size: contain;
  background-position: center;
}
img {
  vertical-align: middle;
}
.sec-com-frame {
  position: relative;
  padding: 15.5rem 0;
}
.sec-com-frame-item {
  position: absolute;
  width: 100%;
}
.sec-com-frame-item-top {
  top: 0;
}
.sec-com-frame-item-bottom {
  bottom: 0;
}
.sec-com-frame-item-bottom .sec-com-frame-ani-left {
  top: -88%;
  left: 2%;
}
.sec-com-frame-item-bottom .sec-com-frame-ani-right {
  top: -88%;
  right: 2%;
}
@keyframes frame-ani {
  100% {
    offset-distance: 100%;
  }
}
.sec-com-frame-ani {
  position: absolute;
  mix-blend-mode: color-dodge;
  width: 15%;
}
.sec-com-frame-ani-left {
  left: 0;
  top: -107%;
}
.sec-com-frame-ani-right {
  right: 0;
  top: -107%;
}
.sec-com-frame-ani-mid {
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  width: 70%;
}
img {
  vertical-align: middle;
}
.font-bebas {
  font-family: "Bebas Neue";
}
.hl-host {
  color: #1ec0f2;
}
.txt-bg-wrap {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: max-content;
}
@media screen and (max-width: 600px) {
  .txt-bg-wrap {
    width: 100%;
    max-width: max-content;
  }
}
.txt-bg-wrap.txt-saying {
  font-family: "SVN-Just Saying", sans-serif;
  font-size: 3.2rem;
  line-height: 1.2;
}
@media only screen and (max-width: 1200px) {
  .txt-bg-wrap.txt-saying {
    font-size: 2.7rem;
  }
}
@media only screen and (max-width: 800px) {
  .txt-bg-wrap.txt-saying {
    font-size: 2.2rem;
  }
}
.bg-big {
  padding: 4.8rem;
  background: linear-gradient(
    100.87deg,
    #ffa318 -38.94%,
    #f7851c 44.05%,
    #f31f10 132.4%
  );
  border-radius: 2.4rem;
  font-size: 3.2rem;
  width: 83.3333333333%;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .bg-big {
    font-size: 2.4rem;
    border-radius: 1.6rem;
  }
}
@media screen and (max-width: 900px) {
  .bg-big {
    width: 100%;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 768px) {
  .bg-big {
    padding: 2.4rem;
    border-radius: 1.6rem;
    font-size: 1.6rem;
  }
}
.bg-big-txt {
  margin-bottom: 2.4rem;
}
.bg-big-txt:last-child {
  margin-bottom: 0;
}
.txt-t {
  width: 5rem;
}
@media screen and (max-width: 768px) {
  .txt-t {
    width: 2.4rem;
  }
}
.bg-nhtq {
  background-color: #f5851e;
}
.bg-host {
  background-color: #1ec0f2;
}
.bg-software {
  background-color: #2686ec;
}
.bg-digital {
  background-color: #7c0fd1;
}
.bg-lms {
  background-color: #f41e92;
}
.bg-red {
  background-color: #e01507;
}
.bg-white {
  background-color: #fff;
  color: #7c0fd1;
}
.txt-digital {
  color: #7c0fd1;
}
.txt-lms {
  color: #f41e92;
}
.txt-nhtq {
  color: #f5851e;
}
.txt-host {
  color: #1ec0f2;
}
.txt-ita {
  font-style: italic;
}
.txt-respon {
  padding: 3.2rem 5.4rem;
  border-radius: 1.6rem;
  background-color: #f9f1ff;
  max-width: 73.7rem;
  margin: 0 auto;
  margin-bottom: 2.4rem;
}
@media screen and (max-width: 1200px) {
  .txt-respon {
    padding: 1.6rem 2.4rem;
    border-radius: 0.8rem;
  }
}
.txt-logo-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.txt-logo-flex .logo,
.txt-logo-flex img {
  height: 6.8rem;
  width: max-content;
  max-width: 100%;
  margin-left: 1.6rem;
  margin-right: 1.6rem;
  object-fit: contain;
}
.sec-sub-bg {
  width: max-content;
  margin: 0 auto;
  margin-bottom: 1rem;
  padding: 0.8rem 3rem;
  position: relative;
  -webkit-mask-image: url(../assets/images/dvs/sec-sub-bg-lms.png);
  mask-image: url(../assets/images/dvs/sec-sub-bg-lms.png);
  -webkit-mask-size: cover;
  mask-size: cover;
  mask-position: bottom;
  -webkit-mask-position: bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  font-size: 2.4rem;
  font-weight: 500;
  font-style: italic;
  color: #fff;
}
@media only screen and (max-width: 1200px) {
  .sec-sub-bg {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 800px) {
  .sec-sub-bg {
    font-size: 1.7rem;
  }
}
.txt-quote {
  max-width: max-content;
}
.txt-quote.w_290 .txt-quote-wrap {
  width: 29rem;
}
@media screen and (max-width: 1200px) {
  .txt-quote.w_290 .txt-quote-wrap {
    width: 14rem;
  }
}
.txt-quote.w_290 .txt-quote-wrap .txt {
  color: #3a3a3a;
  top: 3.2rem;
  left: 50%;
  transform: translateX(-50%) rotate(4.38deg);
}
@media screen and (max-width: 1200px) {
  .txt-quote.w_290 .txt-quote-wrap .txt {
    top: 1.2rem;
    padding: 0 1.2rem;
  }
}
.txt-quote.w_596 .txt-quote-wrap {
  width: 59.6rem;
  font-size: 3.2rem;
}
@media screen and (max-width: 1200px) {
  .txt-quote.w_596 .txt-quote-wrap {
    font-size: 1.5rem;
    width: 30rem;
  }
}
.txt-quote.w_596 .txt-quote-wrap .txt {
  color: #3a3a3a;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-13deg);
}
.txt-quote-wrap {
  width: 42.4rem;
  position: relative;
  font-size: 2.4rem;
  text-align: center;
  color: #8b8b8b;
}
@media only screen and (max-width: 1200px) {
  .txt-quote-wrap {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 800px) {
  .txt-quote-wrap {
    font-size: 1.7rem;
  }
}
@media screen and (max-width: 1200px) {
  .txt-quote-wrap {
    font-size: 1.5rem;
    width: 30rem;
  }
}
@media screen and (max-width: 768px) {
  .txt-quote-wrap {
    font-size: 1.3rem;
    width: 25rem;
  }
}
.txt-quote-wrap .txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  left: 47%;
  top: 3.6rem;
  transform: translateX(-50%) rotate(-2.69deg);
  width: 100%;
  padding: 0 4.2rem;
  z-index: 2;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .txt-quote-wrap .txt {
    padding: 0 2.4rem;
    top: 2.4rem;
  }
}
@media screen and (min-width: 1201px) {
  .txt-quote-wrap .txt-ani {
    opacity: 0;
    transform: translateY(100%);
    transition: 0.7s linear;
  }
  .txt-quote-wrap .txt-ani.active {
    opacity: 1;
    transform: translateY(0);
  }
}
.mg-auto {
  margin-left: auto;
  margin-right: auto;
}
.btn.btn-big {
  font-size: 3.2rem;
  border-radius: 1.2rem;
  background: var(
    --gradient-button,
    linear-gradient(130deg, #ffa318 0, #f6851c 48.44%, #f31f10 100%)
  );
  box-shadow: 0 0 13.748148918151855px 0 #f5851e;
  line-height: 1.5;
}
@media screen and (max-width: 850px) {
  .btn.btn-big {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 600px) {
  .btn.btn-big {
    font-size: 1.6rem;
  }
}
.show-on-sp {
  display: none;
}
.show-on-pc {
  display: block;
}
@media screen and (max-width: 1200px) {
  .show-on-sp {
    display: block;
  }
  .show-on-pc {
    display: none;
  }
}
.c-btn {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  white-space: nowrap;
  gap: 0.8rem;
  padding: 1.6rem 3.2rem;
  font-size: 1.8rem;
  font-weight: 700;
  background-color: #f5851e;
  color: #fff;
  border-radius: 0.8rem;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.c-btn > * {
  position: relative;
  z-index: 2;
}
.c-btn.ln-orange {
  background: linear-gradient(
    100.87deg,
    #ffa318 -38.94%,
    #f7851c 44.05%,
    #f31f10 132.4%
  );
}
.c-btn::after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  background: #fff;
  transition: all 0.4s ease;
  z-index: 1;
  pointer-events: none;
}
@media screen and (min-width: 1201px) {
  .c-btn:hover {
    color: #f5851e;
  }
  .c-btn:hover::after {
    left: 0;
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .c-btn {
    white-space: normal;
  }
}
iframe {
  vertical-align: middle;
}
.txt-border-style {
  padding: 1.6rem 4rem;
  border-radius: 0.4rem;
  border: 1.5px dashed var(--primary-mona-lms-main, #f41e92);
  background: var(--primary-mona-lms-10, #ffe3f2);
  font-size: 3.2rem;
  text-align: center;
  color: #f41e92;
  max-width: max-content;
}
@media screen and (max-width: 1200px) {
  .txt-border-style {
    font-size: 1.8rem;
    padding: 1.2rem 2.4rem;
  }
}
.shpar-mess {
  position: absolute;
  opacity: 0;
  left: 0;
  width: 100%;
}
@media screen and (max-width: 600px) {
  .sec-com-frame {
    padding: 8rem 0;
  }
}
.select2-container--default .select2-selection--single {
  border-radius: unset;
  border: unset;
  background-color: transparent;
  border-bottom: 0.1rem solid #e0e0e0;
  height: auto;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  padding: 0;
  padding: 1.2rem 0;
  font-size: 1.4rem;
  color: #3a3a3a;
  line-height: 1.5;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: #5f5f5f;
}
.select2-dropdown {
  border: unset;
  overflow: hidden;
}
.select2-container--open .select2-dropdown--below {
  border-radius: 0.8rem;
  box-shadow: 0.1rem 0.1rem 1rem #7c0fd1;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 0.4rem;
}
.select2-container--default .select2-results__option--selected {
  background-color: #7c0fd1;
  color: #fff;
}
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #a32dff;
}
.select2-results__option {
  font-size: 1.4rem;
  line-height: 1.5;
}
.select2-results__option--selectable {
  transition: 0.2s;
}
.notis {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 50;
}
.notis-icon {
  width: 6rem;
  height: 6rem;
  position: relative;
  border-radius: 0.8rem;
  background-color: #000;
  border: 0.3rem solid #5f5f5f;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  position: relative;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .notis-icon {
    width: 7rem;
    height: 7rem;
  }
}
.notis-icon video {
  width: 4rem;
  height: 4rem;
}
@media screen and (max-width: 767px) {
  .notis-icon video {
    width: 3rem;
    height: 3rem;
  }
}
.notis-list {
  position: absolute;
  bottom: calc(100% + 1rem);
  min-width: 26.5rem;
  max-width: 26.5rem;
  transition: 0.2s ease-in-out;
}
.notis-list.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-120%);
}
.notis-item {
  padding: 0.8rem;
  border-radius: 0.8rem;
  background-color: rgba(58, 58, 58, 0.8);
}
.notis-item.c-animated {
  animation: fadeInLeft 0.3s ease-in-out;
}
.notis-item:not(:first-child) {
  margin-top: 0.8rem;
}
.notis-item.media {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
}
.notis-item.media .notis-title {
  font-weight: 400;
  color: #e0e0e0;
  padding-left: 0;
  -webkit-line-clamp: 2;
}
.notis-item.media .notis-title::before {
  display: none;
}
.notis-item.media .notis-title span {
  font-weight: 700;
  color: #fff;
}
.notis-item.media .notis-content {
  margin-left: 1rem;
}
.notis-item.hide {
  transform: translateY(-5rem);
  opacity: 0;
  transition: 0.8s ease-in-out;
}
.notis-img {
  width: 6.4rem;
  height: 4.8rem;
  border-radius: 0.8rem;
  flex-shrink: 0;
  display: block;
  position: relative;
  overflow: hidden;
}
.notis-img:has(i)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}
.notis-img i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
.notis-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  padding-left: 1.4rem;
  display: inline-block;
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: 0.3s ease-in-out;
}
.notis-title span {
  transition: 0.3s ease-in-out;
}
@media (hover: hover) {
  .notis-title:hover {
    color: #f5851e !important;
  }
  .notis-title:hover span {
    color: #f5851e !important;
  }
}
.notis-title::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 100rem;
  background-color: #14ef6c;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4rem;
  position: absolute;
  left: 0;
  top: 0.6rem;
}
.notis-des {
  font-size: 1.4rem;
  color: #e0e0e0;
  padding-left: 1.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notis {
  z-index: 150;
  bottom: 3rem;
  transition: 0.3s ease-in-out;
}
.notis.notis-hidden {
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
}
.notis.hide .notis-list {
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.notis.hide .notis-icon-song {
  display: none;
}
.notis.hide .notis-icon-img {
  transform: rotate(90deg) !important;
}
@media screen and (max-width: 550px) {
  .notis {
    bottom: 1.5rem;
  }
}
.notis-icon {
  position: relative;
  width: 6rem;
  height: 6rem;
}
.notis-icon-img {
  width: 2.8rem;
  height: unset;
  position: relative;
  transition: 0.5s ease-in-out;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
@media screen and (max-width: 550px) {
  .notis-icon-img {
    width: 2.5rem;
  }
}
.notis-icon-img > img {
  object-fit: unset;
  height: auto;
}
.notis-icon-song {
  position: absolute;
  left: 85%;
  top: 11.5%;
  height: 65%;
  width: 1.2rem;
}
.notis-icon-song img {
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.notis-icon.c-animated .notis-icon-img {
  transform: rotate(-45deg);
}
.notis-icon.c-animated .notis-icon-song img:nth-child(1) {
  animation: song-1 2.5s ease-out infinite both 0.5s;
}
.notis-icon.c-animated .notis-icon-song img:nth-child(2) {
  animation: song-2 2.5s ease-out infinite both 0.5s;
}
.notis-icon.c-animated .notis-icon-song img:nth-child(3) {
  animation: song-3 2.5s ease-out infinite both 0.5s;
}
@keyframes song-1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  100%,
  50% {
    transform: translate3d(5px, 0, 0) scale(2);
    opacity: 0;
  }
}
@keyframes song-2 {
  0%,
  19% {
    opacity: 0;
  }
  20% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  100%,
  70% {
    transform: translate3d(5px, 0, 0) scale(2);
    opacity: 0;
  }
}
@keyframes song-3 {
  0%,
  39% {
    opacity: 0;
  }
  40% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  100%,
  90% {
    transform: translate3d(5px, 0, 0) scale(2);
    opacity: 0;
  }
}
@media screen and (max-width: 550px) {
  .notis-icon {
    width: 5rem;
    height: 5rem;
  }
}
.notis-number {
  position: absolute;
  width: 2rem;
  height: 2rem;
  font-size: 1.2rem;
  border-radius: 100rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  color: #fff;
  background-color: #f5851e;
  top: -1rem;
  right: -1rem;
}
.notis-list {
  max-width: 24.5rem;
  min-width: 24.5rem;
}
.notis-item.hides {
  animation: backOutLeft 2s forwards;
}
.notis-img img {
  width: 100% !important;
  height: 100% !important;
}
.notis-title {
  font-weight: 400;
  font-size: 1.2rem;
}
.notis-title::before {
  top: 0.5rem;
}
@media screen and (max-width: 550px) {
  .notis-title {
    font-size: 1.2rem;
    font-weight: 600;
  }
}
.notis-title p {
  display: inline;
}
@media screen and (max-width: 550px) {
  .notis-des {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 1200px) {
  .web-monablog .notis {
    bottom: 11%;
  }
}
@media screen and (max-width: 650px) {
  .web-monablog .notis {
    bottom: 15%;
  }
}
.notis-item.media .notis-title {
  color: #fff;
}
.blog-info-tag span:before {
  content: ",";
  position: absolute;
  bottom: 6px;
  right: 0;
  height: 100%;
  font-size: 16px;
  width: auto;
  padding-right: 5px;
}
.blog-info-tag span {
  position: relative;
  display: inline-block;
  padding-right: 10px;
}
.blog-info-tag span:last-child:before {
  display: none;
}
.zalo-chat-widget {
  bottom: 94px !important;
  right: 26px !important;
  z-index: 20 !important;
}
.sidebar-blog-detail-right.widget_media_image {
  margin-bottom: 2.4rem;
  border-radius: 1.2rem;
  overflow: hidden;
}
.sidebar-blog.widget_media_image {
  margin-bottom: 2.4rem;
  border-radius: 1.2rem;
  overflow: hidden;
}
.wpcf7 form .wpcf7-response-output {
  border: 0;
  margin: 15px 0;
  padding: 0;
  font-weight: 700;
  font-size: 12px;
}
.wpcf7 form.sent .wpcf7-response-output {
  color: #46b450;
}
.wpcf7 form.invalid .wpcf7-response-output {
  color: red;
}
#wpcf7-6515f8495e935-wrapper,
#wpcf7-651d5279d7d22-wrapper,
#wpcf7-651d527a0db81-wrapper,
#wpcf7-651d527a120b6-wrapper,
#wpcf7-651d527a121cb-wrapper {
  display: none !important;
  visibility: hidden !important;
}
.ft-license-col .widget_nav_menu .mona-head-title.mona-widget-title {
  display: none;
}
.ft-license-col .widget_nav_menu ul {
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .ft-license-col .widget_nav_menu ul {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
  }
}
.ft-license-col .widget_nav_menu ul li {
  padding: 0.4rem 2rem;
}
.ft-col .widget_nav_menu .mona-head-title.mona-widget-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #7c0fd1;
}
@media screen and (max-width: 1200px) {
  .ft-col .widget_nav_menu .mona-head-title.mona-widget-title {
    font-size: 1.6rem;
  }
}
.solution-col .ft-col.col.col-6 {
  width: 50%;
}
@media screen and (max-width: 360px) {
  .solution-col .ft-col.col.col-6 {
    width: 100%;
  }
}
.ft-col .widget_nav_menu ul {
  margin-top: 1.6rem;
}
.ft-col .widget_nav_menu ul li.current-menu-item a {
  font-weight: 600;
  color: #f58635;
}
.ft-col .widget_nav_menu ul li a {
  display: block;
  padding: 0.8rem 0;
  transition: 0.3s;
}
.ft-col.col-6 .hd-menu-info > * {
  align-items: center;
}
.blog-large-content .mona-content > * {
  color: #5f5f5f;
}
.blog-large-content .mona-content .specifies {
  color: #7c0fd1 !important;
}
.blog-large-content .mona-content ol,
.blog-large-content .mona-content ul {
  padding-left: 0;
}
.blog-large-content .hr-box.hr-idea img {
  height: 100%;
}
.blog-large-content .hr-box.hr-idea .hr-box-img {
  transform: unset;
}
.blog-large-content .hr-box.hr-idea .hr-box-img-ab {
  top: 0;
}
.blog-large-content .mona-content blockquote {
  background: #f7f7f7;
  border-radius: 0.8rem;
  color: #5f5f5f;
  border-left: 1rem solid #7c0fd1;
  padding: 2.64rem 3.6rem;
  transition: 0.3s ease-in-out;
}
.blog-large-content .mona-content blockquote:hover {
  border-left-color: #f5851e;
  background: #ffeedf;
}
.blog-large-content .mona-content blockquote:hover a {
  color: #f5851e !important;
}
.blog-large-content .mona-content blockquote strong {
  color: #3a3a3a;
  font-size: 1.8rem;
}
@media only screen and (max-width: 1200px) {
  .blog-large-content .mona-content blockquote strong {
    font-size: 1.6rem;
  }
}
.blog-large-content .mona-content img + h2,
.blog-large-content .mona-content img + h3,
.blog-large-content .mona-content img + h4 {
  margin-top: 2.6rem;
}
.blog-large-content .mona-content h2 {
  margin: 2.4rem 0;
  font-size: 4rem;
  font-weight: 700;
  color: #7c0fd1;
}
.blog-large-content .mona-content h3 {
  margin: 2.4rem 0;
  font-size: 2.4rem;
  font-weight: 600;
  color: #7c0fd1;
}
.blog-large-content .mona-content h4 {
  margin: 2.4rem 0;
  font-weight: 600;
  color: #7c0fd1;
  font-size: 1.125em;
}
.blog-large-content .hr-box-btn a,
.blog-large-content .hr-box > * {
  color: #fff !important;
}
@media only screen and (min-width: 1201px) {
  .blog-large-content.monaWithoutAsideBlog {
    width: calc(100% / 12 * 9);
  }
}
@media only screen and (max-width: 1200px) {
  .blog-large-content .mona-content h3 {
    margin-top: 2.4rem;
    margin-bottom: 0.8rem;
    font-size: 2rem;
  }
  .blog-large-content .mona-content h2 {
    margin-top: 2.4rem;
    margin-bottom: 0.8rem;
    font-size: 2.4rem;
  }
  .blog-large-content .mona-content h4 {
    margin-bottom: 0.8rem;
  }
  .blog-large-content .mona-content blockquote {
    margin: 2.4rem 0;
  }
}
@media only screen and (max-width: 800px) {
  .blog-large-content .mona-content h3 {
    font-size: 1.7rem;
  }
  .blog-large-content .mona-content h2 {
    font-size: 3rem;
  }
  .blog-large-content .mona-content blockquote {
    padding: 1.2rem 1.6rem;
  }
}
.widget.sidebar-blog-detail.toc_widget .mona-head-title.mona-widget-title {
  display: none;
}
.widget.sidebar-blog-detail.toc_widget span.toc_number {
  display: none;
}
.widget.sidebar-blog-detail.toc_widget ul li a {
  display: block;
  padding: 1rem 0;
  opacity: 1;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
  font-weight: 400;
  font-size: 1.6rem;
  color: #354a60;
}
.widget.sidebar-blog-detail.toc_widget ul li a::before {
  content: "";
  position: absolute;
  left: -2.4rem;
  height: 100%;
  transition: 0.3s;
  opacity: 0;
  width: 0.2rem;
  background: #7c0fd1;
  height: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s ease-in-out;
}
.widget.sidebar-blog-detail.toc_widget ul li a.current::before {
  height: 100%;
  opacity: 1;
}
.widget.sidebar-blog-detail.toc_widget ul li a.current {
  color: #7c0fd1;
  font-weight: 500;
}
.inspiration-img .img img {
  height: 100%;
  width: 100%;
}
.wpcf7-not-valid-tip {
  position: absolute;
}
.wpcf7-response-output {
  position: absolute;
}
.wpcf7-spinner {
  position: absolute;
}
.blogr-regis .blogr-regis-control .wpcf7-not-valid-tip {
  left: 20px;
  font-size: 10px;
  font-weight: 700;
  bottom: -20px;
}
.blogr-regis .blogr-regis-control .btn-submit {
  position: relative;
}
.blogr-regis .blogr-regis-control .wpcf7-spinner {
  bottom: 15px;
  left: -70px;
}
@media only screen and (max-width: 1200px) {
  .blogr-regis .blogr-regis-control .wpcf7-spinner {
    bottom: 15px;
  }
}
@media only screen and (max-width: 550px) {
  .blogr-regis .blogr-regis-control .wpcf7-spinner {
    bottom: 10px;
  }
}
.monaCategorySearchingTagJS {
  cursor: pointer;
}
.aside-body-item.asideActive {
  opacity: 1;
  color: #f58635;
}
.banner-blog-info .info-name .avt {
  border-radius: unset;
}
.blog-large-author .author-header .avt {
  border-radius: unset;
}
.mona-mess-empty {
  text-align: center;
  font-size: 2rem;
}
.form-cus textarea {
  height: 10rem;
}
.mona-hiden {
  display: none;
}
.blogt-content .description.mona-content {
  color: #5f5f5f;
}
.btn-hidden-submit {
  display: none;
}
.blogr-regis .blogr-regis-gr .inner::before {
  z-index: 10;
}
.blogr-regis .wpcf7 {
  width: 100%;
}
.blogr-regis .blogr-regis-form {
  margin: auto;
}
.blogr-regis .wpcf7 form.invalid .wpcf7-response-output {
  text-align: center;
  width: 100%;
  margin: 1rem 0;
}
.blogr-regis .wpcf7 form.sent .wpcf7-response-output {
  color: #46b450;
  text-align: center;
  width: 100%;
  margin: 1rem 0;
}
.seoadv-form .wpcf7-form {
  position: relative;
}
.seoadv-form .seoadv-buttons {
  position: relative;
  margin-bottom: 1rem;
}
.seoadv-form .wpcf7-spinner {
  right: -1%;
  bottom: 50%;
  transform: translateY(50%);
  z-index: 10;
}
.seoadv-form .wpcf7-not-valid-tip {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  right: 0;
  bottom: -1.5rem;
}
.seoadv-form .wpcf7-response-output {
  margin: 1rem 0 !important;
  padding: 0 !important;
  text-align: center;
  bottom: -30px;
  width: 100%;
  font-size: 10px !important;
}
.seoadv-form .wpcf7-form-control-wrap {
  position: relative;
  width: 100%;
}
.blogf-menu-item.active .blogf-menu-link {
  color: #f5851e;
}
.blogf-menu-item.active .blogf-menu-link::before {
  height: 3.6rem;
}
.blogrc2-form .blogrc2-submit {
  position: relative;
}
.blogrc2-form .wpcf7-spinner {
  left: -50px;
  bottom: 50%;
  transform: translateY(50%);
  z-index: 10;
  margin: 0;
}
@media only screen and (max-width: 1200px) {
  .blogrc2-form .wpcf7-spinner {
    bottom: 50%;
    transform: translateY(50%);
  }
}
.blogrc2-form .wpcf7-not-valid-tip {
  font-size: 10px;
  font-weight: 700;
  bottom: -25px;
}
.blogrc2-form .wpcf7-response-output {
  width: 100%;
  text-align: center;
  margin: 1rem 0 !important;
  font-size: 10px !important;
}
.blogt-wrap.searching-wrapper {
  min-height: 100% !important;
}
.postTagJS {
  cursor: pointer;
}
.postTagJS input {
  display: none;
}
.postTagJS input:checked ~ .postTagName {
  color: #fff;
  background: #7c0fd1;
}
.mona-contact.fix .mona-contact-form .wpcf7 .wpcf7-not-valid-tip {
  bottom: -15px;
  font-size: 10px;
  font-weight: 700;
  right: 0;
}
.mona-contact.fix .mona-contact-form .wpcf7 form {
  position: relative;
}
.mona-contact.fix
  .mona-contact-form
  .wpcf7
  form.invalid
  .wpcf7-response-output {
  color: red;
  text-align: center;
  width: 100%;
  margin: 0;
  bottom: -30px;
  z-index: 10;
}
.mona-contact.fix .mona-contact-form .wpcf7 form.sent .wpcf7-response-output {
  color: #46b450;
  z-index: 10;
  bottom: -22px;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
}
.mona-contact.fix .mona-contact-form .wpcf7 .wpcf7-spinner {
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  right: 5%;
}
.mona-contact.fix
  .wpcf7-form-control-wrap.your-service.is-loading-btn.loading::before {
  height: 2.4rem !important;
  width: 2.4rem !important;
  right: 5% !important;
  left: unset !important;
  margin: 0 !important;
}
.pj-detail-solution-col ul li::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 1.1rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 0.3rem solid #f58635;
}
.pj-detail-solution-col ul li::before {
  border-color: #7c0fd1;
}
.mona_project-template-single-project-nhtq-template
  .pj-detail-solution-col
  ul
  li::before {
  border-color: #f58635;
}
.pj-detail-solution-col ul li {
  margin: 2.4rem 0;
  padding-left: 4.2rem;
  position: relative;
}
.lmsa-content-box .pj-detail-solution-content ul li {
  margin: 0.8rem 0;
  font-size: 1.8rem;
  color: #5f5f5f;
  margin: 2.4rem 0;
  padding-left: 4.2rem;
  position: relative;
}
@media only screen and (max-width: 1200px) {
  .lmsa-content-box .pj-detail-solution-content ul li {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 800px) {
  .lmsa-content-box .pj-detail-solution-content ul li {
    font-size: 1.5rem;
  }
}
.lmsa-content-box .pj-detail-solution-content ul li::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 1.1rem;
  border-radius: 50%;
  border: 0.3rem solid #ffa51f;
  width: 1rem;
  height: 1rem;
}
.mona-contact.fix
  .mona-contact-form
  .wpcf7
  form.invalid
  .wpcf7-response-output {
  color: red;
  text-align: center;
  width: 100%;
  margin: 0;
  bottom: -22px;
  z-index: 10;
  font-size: 10px;
}
.mona_project-template-single-project-lms-template .lmsf-ani .txt-wrap {
  font-family: inherit;
}
.mona_project-template-single-project-lms-template .lmsf-font {
  font-size: 32rem;
  font-weight: 700;
  line-height: 0.9;
  text-align: center;
}
.seofaq-tbody.monaAnswer p {
  font-size: 1.8rem;
  color: #3a3a3a;
  margin: 1.6rem 0;
}
@media only screen and (max-width: 1200px) {
  .seofaq-tbody.monaAnswer p {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 800px) {
  .seofaq-tbody.monaAnswer p {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 1060px) {
  .seofaq-tbody.monaAnswer ul {
    width: 60rem;
    max-width: 100%;
    margin: 2.4rem auto;
  }
}
.seofaq-tbody.monaAnswer ul li {
  padding-left: 4rem;
  position: relative;
}
.seofaq-tbody.monaAnswer ul li:not(:last-child) {
  margin-bottom: 1.6rem;
}
.seofaq-tbody.monaAnswer ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(40%);
  width: 1.2rem;
  height: 1.2rem;
  border: 0.3rem solid #f5851e;
  border-radius: 50%;
}
.seofaq-tbody.monaAnswer ul li::before {
  width: 1rem;
  height: 1rem;
  border-width: 0.2rem;
  top: 0.6rem;
  transform: unset;
  left: 1rem;
}
.blogf-sale.unset {
  background: unset;
}
#template-website-gallery > * {
  display: none;
  cursor: pointer;
}
#template-website-gallery > .active {
  display: block;
}
.relative-mona,
.sample-nine-func-form form {
  position: relative;
}
.sample-nine-func-form form .wpcf7-spinner {
  position: absolute;
  z-index: 10;
  right: -10px;
  bottom: 8px;
}
.sample-nine-func-form form .wpcf7-response-output {
  position: absolute;
  margin: 0 !important;
  padding: 0 !important;
  bottom: -25px;
  text-align: center;
  width: 100%;
}
.sample-nine-func-form .form-cus input,
.sample-nine-func-form .form-cus textarea {
  color: #444;
}
.sample-nine-func-form .form-cus .wpcf7-not-valid-tip {
  position: absolute;
  font-size: 10px;
  right: 0;
  font-weight: 700;
  bottom: -15px;
}
.sample-nine-func-form .form-cus input,
.sample-nine-func-form .form-cus textarea {
  color: #4c0f7c;
  font-size: 1.6rem;
  border-bottom: 0.1rem solid #e0e0e0;
}
.booking-content .des ul {
  list-style-type: disc;
  list-style: inside;
}
.pj-cate .cate-sm-item.active a {
  color: #fff;
  background: #7c0fd1;
}
.sers-tag-btn {
  max-width: max-content;
}
.sers-tag-btn.has-text .icon {
  width: auto;
  height: auto;
}
.sers-tag-btn .icon {
  width: 30%;
  height: auto;
}
.sers-tag-btn.no-text .icon {
  width: 100%;
  height: auto;
}
.sers-tag.fix .sers-tag-btn:hover .icon img {
  filter: unset;
}
.sers-tag-btn img {
  transition: none;
  opacity: 0.6;
  object-fit: contain;
}
.sers-tag-btn:hover img {
  opacity: 1;
}
.ab-eight-link-mona {
  margin-top: 1rem;
}
.mona_seo_service_extension.mona-content {
  margin-top: 2.4rem;
  font-size: 1.8rem;
  color: #5f5f5f;
}
.mona_seo_service_extension.mona-content ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(40%);
  width: 1.2rem;
  height: 1.2rem;
  border: 0.3rem solid #f5851e;
  border-radius: 50%;
}
.mona_seo_service_extension.mona-content ol,
.mona_seo_service_extension.mona-content ul {
  padding-left: 0;
}
.seoachi-link-mona {
  margin: 4rem auto 0;
}
.seoachi-link-mona .btn-second {
  padding: 1.4rem 2rem;
  font-size: 1.8rem;
  height: 6.2rem;
}
.blogdt-tag .text {
  display: flex;
  align-items: center;
}
.blogdt-top .blogdt-tag .time {
  padding-top: 1rem;
}
@media (max-width: 768px) {
  .popup-service .popup-wrap {
    min-width: 90vw;
  }
}
@media (max-width: 600px) {
  .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 1.5rem;
  }
}
.popup-service .btn-second {
  font-size: 2.2rem;
}
@media (max-width: 800px) {
  .popup-service .btn-second {
    font-size: 1.4rem;
  }
}
.popup .seoadv-gr.seo-modified {
  height: unset;
  border: none;
}
.mona-content blockquote a {
  margin-left: 0;
}
.hd-menu .menu-item .new-hotline-wrap {
  background-size: 100% 100%;
  width: 24.6rem;
  height: 4.8rem;
  position: relative;
  transform: translateX(-4rem);
}
.hd-menu.show-on-mobile .menu-item .new-hotline-wrap {
  transform: translateX(0);
}
.hd-menu .menu-item .new-hotline-wrap .hotline-panda {
  position: absolute;
  right: -6rem;
  top: 0.9rem;
  width: 6.2rem;
  height: 6.2rem;
}
.hd-menu .menu-item .new-hotline-item {
  display: block;
  width: 100%;
  height: 100%;
  font-size: unset;
  color: #fff;
  border-radius: unset;
  padding: unset;
  background-position-x: 0;
  animation: hotline-movement 10s infinite linear;
  background-image: url(/template/assets/images/header/hotline-sky.png),
    linear-gradient(151deg, #208cff 2.08%, #6dddff 100%);
  background-repeat: no-repeat;
  -webkit-mask-image: url(/template/assets/images/header/hotline-mask.png);
  mask-image: url(/template/assets/images/header/hotline-mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-size: cover;
  position: relative;
}
.hd-menu .menu-item .new-hotline-item:hover {
  background-color: unset;
}
.hd-menu .menu-item .new-hotline-item .hotline-number {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  width: calc(100% - 10rem);
  height: 100%;
  object-fit: contain;
  margin-left: 2rem;
}
.hd-menu .menu-item .new-hotline-item .hotline-decor {
  position: absolute;
  right: 1.6rem;
  top: 0.1rem;
  width: 4.6rem;
  height: 4.6rem;
}
.hd-menu .menu-item .new-hotline-wrap.night {
  background-image: url(/template/assets/images/header/hotline-bg-night.png);
}
.hd-menu .menu-item .new-hotline-item.night {
  background-image: url(/template/assets/images/header/hotline-night-sky.png);
}
.hd-menu .menu-item .new-hotline-item.night .hotline-number {
  margin-left: 5.8rem;
}
.hd-menu .menu-item .new-hotline-item.night .hotline-decor {
  right: unset;
  left: 0.3rem;
}
@keyframes hotline-movement {
  to {
    background-position-x: 100%;
  }
}
@media screen and (max-width: 1300px) {
  .hd-menu .menu-item .new-hotline-wrap {
    width: 23rem;
    height: 4.5rem;
  }
  .hd-menu .menu-item .new-hotline-item .hotline-number {
    width: 65%;
    margin-left: 0;
  }
  .hd-menu .menu-item .new-hotline-item .hotline-decor {
    width: 4rem;
    height: 4rem;
    top: 50%;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 1750px) {
  .hd-menu .menu-item .new-hotline-wrap .hotline-panda {
    top: 1rem;
  }
}
@media screen and (max-width: 1250px) {
  .hd-menu .menu-item .new-hotline-wrap .hotline-panda {
    top: -0.3rem;
  }
}
@media screen and (max-width: 1200px) {
  .hd-menu .menu-item .new-hotline-wrap .hotline-panda {
    top: 0;
    object-fit: contain;
  }
}
@media screen and (min-width: 2500px) {
  .site-software .hd-logo {
    width: 22%;
  }
  .site-software .mona-logo img {
    max-width: 90%;
  }
  .hd-menu .menu-item .new-hotline-wrap {
    width: 19rem;
    height: 4.8rem;
  }
  .hd-menu .menu-item .new-hotline-item .hotline-number {
    width: 65%;
    margin-left: 0;
  }
}
@media screen and (min-width: 2800px) {
  .site-software .hd-logo {
    width: 22%;
  }
  .hd-menu .menu-item .new-hotline-wrap {
    width: 25rem;
    height: 4.8rem;
  }
}
@media screen and (min-width: 3200px) {
  .hd-menu .menu-item .new-hotline-wrap .hotline-panda {
    top: 1.1rem;
  }
}
@media screen and (min-width: 3400px) {
  .site-software .hd-logo {
    width: 24%;
  }
}
.site-media .hd-logo {
  width: 26%;
}
@media screen and (min-width: 2000px) {
  .hd-menu .menu-item .new-hotline-wrap {
    width: 18rem;
    height: 4.2rem;
  }
  .hd-menu .menu-item .new-hotline-item .hotline-number {
    width: calc(100% - 7rem);
    margin-left: 1rem;
  }
  .hd-menu .menu-item .new-hotline-wrap .hotline-panda {
    width: 5rem;
    height: 5rem;
    top: 1.8rem;
  }
  .hd-menu .menu-item .new-hotline-item .hotline-decor {
    width: 4rem;
    height: 4rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .site-media .hd-logo {
    width: 24%;
  }
  .home-banner-video-team {
    width: 40%;
  }
}
@media screen and (min-width: 2300px) {
  .site-media .hd-logo {
    width: 28%;
  }
}
@media screen and (min-width: 2500px) {
  .site-media .hd-logo {
    width: 22%;
  }
}
@media screen and (min-width: 2800px) {
  .site-media .hd-logo {
    width: 28%;
  }
}
@media screen and (max-width: 1680px) {
  .site-media .hd-logo {
    width: 24%;
  }
  .site-media .hd-menu .menu-item .new-hotline-wrap {
    width: 18.5rem;
  }
  .hd-menu .menu-item .new-hotline-item .hotline-number {
    width: calc(100% - 6rem);
    margin-left: 0.5rem;
  }
}
@media screen and (max-width: 1580px) {
  .site-media .hd-logo {
    width: 28%;
  }
  .site-media .hd-menu .menu-item .new-hotline-wrap {
    width: 24.5rem;
    height: 5rem;
  }
  .site-media .hd-menu .menu-item .new-hotline-item .hotline-decor {
    top: 50%;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 1580px) {
  .site-media .hd-logo {
    width: 26%;
  }
  .site-media .hd-menu .menu-item .new-hotline-wrap .hotline-panda {
    top: 1.1rem;
  }
}
@media screen and (max-width: 1480px) {
  .site-media .hd-logo {
    width: 24%;
  }
}
@media screen and (max-width: 1470px) {
  .site-media .hd-logo {
    width: 26%;
  }
}
@media screen and (max-width: 1420px) {
  .site-media .hd-logo {
    width: 23%;
  }
  .site-media .hd-menu .menu-item .new-hotline-item .hotline-decor {
    empty-cells: 2.2rem;
  }
}
@media screen and (max-width: 1380px) {
  .site-media .hd-menu .menu-item .new-hotline-item .hotline-number {
    width: calc(100% - 7rem);
  }
  .site-media .hd-menu .menu-item .new-hotline-wrap {
    width: 22rem;
  }
}
@media screen and (max-width: 1300px) {
  .site-media .hd-menu .menu-item .new-hotline-wrap {
    width: 18rem;
    height: 4.5rem;
  }
  .site-media .hd-menu .menu-item .new-hotline-item .hotline-number {
    width: calc(100% - 5rem);
  }
  .site-media .hd-menu .menu-item .new-hotline-wrap .hotline-panda {
    top: 1rem;
  }
}
@media screen and (max-width: 1250px) {
  .site-media .hd-menu .menu-item .new-hotline-wrap .hotline-panda {
    top: -0.3rem;
  }
}
@media screen and (max-width: 1200px) {
  .mega-menu-on-mobile {
    padding-bottom: 2rem;
  }
  .hd-menu .menu-item .new-hotline-wrap .hotline-panda {
    top: 1.5rem;
  }
  .site-media .hd-menu .menu-item .new-hotline-item .hotline-number {
    width: calc(100% - 5rem);
    margin-left: 0.3rem;
  }
  .mega-menu-child .menu-item .new-hotline-item .hotline-number,
  .mega-menu-on-mobile .menu-item .new-hotline-item .hotline-number {
    width: calc(100% - 8rem) !important;
    margin-left: 1.5rem !important;
  }
  .site-media .hd-menu .menu-item .new-hotline-wrap .hotline-panda {
    top: 0.5rem;
  }
  .site-media .mega-menu-on-mobile .menu-item .new-hotline-wrap .hotline-panda {
    top: 0.5rem;
  }
  .mega-menu-on-mobile .hd-contact.hd-menu.show-on-mobile {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 500px) {
  .slider-main-channel {
    width: 8rem;
    height: 8rem;
  }
}
.hd-menu .menu-item .menu-item-link {
  white-space: nowrap;
}
.hd-menu.d-flex .menu-list {
  flex-wrap: nowrap;
}
.hd-menu,
.mega-menu-box-wrap {
  box-shadow: unset;
}
.render-3_freelancer .ab-eight-content-inner {
  font-size: 3.2rem;
  padding: 4.8rem;
}
.page-template-customers-template .mona-buddy {
  position: relative;
}
.page-template-customers-template .mona-buddy .video-main {
  background: linear-gradient(180deg, rgba(233, 244, 255, 0) 0, #aed5ff 100%);
  position: relative;
  padding-top: 52rem;
  margin-top: -35rem;
  padding-bottom: 2rem;
}
@media screen and (max-width: 1200px) {
  .page-template-customers-template .mona-buddy .video-main {
    padding-top: 45rem;
    padding-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .page-template-customers-template .mona-buddy .video-main {
    padding-bottom: 1.5rem;
  }
}
@media screen and (max-width: 600px) {
  .page-template-customers-template .mona-buddy .video-main {
    padding-top: 42rem;
  }
}
.page-template-customers-template .mona-buddy .video {
  position: relative;
  width: calc(66.6666666667% - 0.8rem);
  margin: 0 auto;
  padding-top: 37%;
  background-color: #7c0fd1;
  border-top-left-radius: 2.4rem;
  border-top-right-radius: 2.4rem;
  border: 1rem solid #7c0fd1;
}
@media screen and (max-width: 1200px) {
  .page-template-customers-template .mona-buddy .video {
    border-top-left-radius: 1.6rem;
    border-top-right-radius: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .page-template-customers-template .mona-buddy .video {
    border-radius: 0.8rem;
    width: 100%;
    padding-top: 57%;
    margin-left: 0;
  }
}
.page-template-customers-template .mona-buddy .video .splide__slide {
  border-top-left-radius: 2.4rem;
  border-top-right-radius: 2.4rem;
  overflow: hidden;
}
@media screen and (max-width: 1200px) {
  .page-template-customers-template .mona-buddy .video .splide__slide {
    border-top-left-radius: 1.6rem;
    border-top-right-radius: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .page-template-customers-template .mona-buddy .video .splide__slide {
    border-radius: 0.8rem;
  }
}
.page-template-customers-template .mona-buddy .video-tt {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -85%);
  border-radius: 24px;
  background: linear-gradient(178deg, #208cff 0, #8f32d7 100%);
  box-shadow: 8px 8px 40px 0 rgba(32, 140, 255, 0.24),
    8px 8px 40px 0 rgba(143, 50, 215, 0.24);
  padding: 2.4rem;
  width: 70%;
  font-size: 4rem;
  color: #fff;
  text-align: center;
  font-weight: 700;
  z-index: 2;
}
@media only screen and (max-width: 1200px) {
  .page-template-customers-template .mona-buddy .video-tt {
    font-size: 3.5rem;
  }
}
@media only screen and (max-width: 800px) {
  .page-template-customers-template .mona-buddy .video-tt {
    font-size: 3rem;
  }
}
@media screen and (max-width: 1480px) {
  .page-template-customers-template .mona-buddy .video-tt {
    font-size: 3.8rem;
  }
}
@media screen and (max-width: 1300px) {
  .page-template-customers-template .mona-buddy .video-tt {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 1200px) {
  .page-template-customers-template .mona-buddy .video-tt {
    font-size: 2.4rem;
    border-radius: 1.6rem;
    padding: 1.6rem;
  }
}
@media screen and (max-width: 900px) {
  .page-template-customers-template .mona-buddy .video-tt {
    width: 80%;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 768px) {
  .page-template-customers-template .mona-buddy .video-tt {
    border-radius: 0.8rem;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 450px) {
  .page-template-customers-template .mona-buddy .video-tt {
    font-size: 1.4rem;
    padding: 0.8rem;
  }
}
.page-template-customers-template .mona-buddy .video-re {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page-template-customers-template .mona-buddy .panda-buddy {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  bottom: 0;
  right: 0;
  transform: translateX(68%);
  width: 47%;
}
@media screen and (max-width: 1200px) {
  .page-template-customers-template .mona-buddy .panda-buddy {
    width: 40%;
    bottom: -1rem;
  }
}
@media screen and (max-width: 768px) {
  .page-template-customers-template .mona-buddy .panda-buddy {
    display: none;
  }
}
.page-template-customers-template .mona-buddy .video-thumb-mask-p {
  position: relative;
  z-index: 4;
  padding: 3.5rem 0;
  padding-top: 2.6rem;
  margin-top: -5.5rem;
  -webkit-mask-image: url(../../template/assets/images/video/video-thumb-mask.png);
  mask-image: url(../../template/assets/images/video/video-thumb-mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mask-position: bottom;
  -webkit-mask-position: bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: #dcf7ff;
  filter: drop-shadow(0 -11px 32px rgba(0, 0, 0, 0.25));
  -webkit-filter: drop-shadow(0 1.1rem 3.2rem rgba(0, 0, 0, 0.25));
}
@media screen and (max-width: 1200px) {
  .page-template-customers-template .mona-buddy .video-thumb-mask-p {
    -webkit-mask-image: unset;
    mask-image: unset;
    margin-top: 0;
    padding: 1.5rem 0;
    filter: unset;
    -webkit-filter: unset;
  }
}
.page-template-customers-template .mona-buddy .video-thumb {
  position: relative;
  z-index: 4;
  -webkit-mask-image: url(../../template/assets/images/video/video-thumb-mask.png);
  mask-image: url(../../template/assets/images/video/video-thumb-mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mask-position: bottom;
  -webkit-mask-position: bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: #dcf7ff;
  filter: drop-shadow(0 -11px 32px rgba(0, 0, 0, 0.25));
  -webkit-filter: drop-shadow(0 1.1rem 3.2rem rgba(0, 0, 0, 0.25));
}
@media screen and (max-width: 1200px) {
  .page-template-customers-template .mona-buddy .video-thumb {
    -webkit-mask-image: unset;
    mask-image: unset;
    filter: unset;
    -webkit-filter: unset;
  }
}
.page-template-customers-template .mona-buddy .video-thumb-mask {
  -webkit-mask-image: url(../../template/assets/images/video/video-thumb-mask.png);
  mask-image: url(../../template/assets/images/video/video-thumb-mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mask-position: 0 3rem;
  -webkit-mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media screen and (max-width: 1200px) {
  .page-template-customers-template .mona-buddy .video-thumb-mask {
    -webkit-mask-image: unset;
    mask-image: unset;
  }
}
.page-template-customers-template .mona-buddy .video-thumb .list {
  display: flex;
}
.page-template-customers-template .mona-buddy .video-thumb .item {
  width: 25%;
  max-width: 45.4rem;
  flex-shrink: 0;
  margin: 0 1.2rem;
}
@media screen and (max-width: 1200px) {
  .page-template-customers-template .mona-buddy .video-thumb .item {
    margin: 0 0.7rem;
  }
}
.page-template-customers-template .mona-buddy .video-thumb .item:first-child {
  margin-left: 0;
}
.page-template-customers-template .mona-buddy .video-thumb .item:last-child {
  margin-right: 0;
}
.page-template-customers-template .mona-buddy .slider-thumb .splide__track {
  padding-bottom: 0;
}
.page-template-customers-template
  .mona-buddy
  .page-template-customers-template
  .mona-buddy
  .video-thumb
  .item,
.page-template-customers-template
  .mona-buddy
  .splide__track--nav
  > .splide__list
  > .splide__slide,
.page-template-customers-template
  .mona-buddy
  .splide__track--nav
  > .splide__list
  > .splide__slide.is-active {
  border: unset;
}
.bg-ab {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page-template-customers-template .mona-buddy .video-main {
  margin-top: 0;
  padding-top: 20rem;
}
@media screen and (max-width: 1200px) {
  .page-template-customers-template .mona-buddy .video-main {
    padding-top: 14rem;
    padding-bottom: 0;
  }
}
@media screen and (max-width: 600px) {
  .page-template-customers-template .mona-buddy .video-main {
    padding-top: 9rem;
  }
}
.feedback-list.d-flex {
  flex-wrap: nowrap;
}
.mona-team.fix.custom {
  margin-top: 9.6rem;
}
.mona-team.fix.custom .mona-team-bot {
  margin-top: 0;
}
.is-loading-btn.loading {
  opacity: 0.5 !important;
  position: relative;
  pointer-events: none !important;
}
.is-loading-btn.loading::before {
  height: 1em;
  width: 1em;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.5em;
  margin-top: -0.5em;
  content: "";
  -webkit-animation: spin 1s ease-in-out infinite;
  animation: spin 1s ease-in-out infinite;
  background: url(/wp-content/themes/monatheme/public/helpers/images/icon-loading-ring.svg)
    center center;
  background-size: cover;
  line-height: 1;
  text-align: center;
  font-size: 2em;
  color: rgba(0, 0, 0, 0.75);
  z-index: 99;
}
.is-loading-group.loading {
  opacity: 0.5 !important;
  position: relative;
  pointer-events: none !important;
}
.is-loading-group.loading::before {
  height: 1em;
  width: 1em;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.5em;
  margin-top: -0.5em;
  content: "";
  -webkit-animation: spin 1s ease-in-out infinite;
  animation: spin 1s ease-in-out infinite;
  background: url(/wp-content/themes/monatheme/public/helpers/images/loader.svg)
    center center;
  background-size: cover;
  line-height: 1;
  text-align: center;
  font-size: 2em;
  color: rgba(0, 0, 0, 0.75);
  z-index: 99;
}
.get-code .hidden-label {
  display: none;
}
.get-code {
  cursor: pointer;
  transition: 0.3s;
}
.ft-hl-gr {
  bottom: 0;
}
.ft-hl-decor .text {
  color: var(--secColor);
}
@media screen and (max-width: 1200px) {
  .ab-one .head {
    margin-bottom: 4rem;
  }
  .ab-eight {
    margin-top: 4rem;
  }
  .render-3_freelancer .ab-eight-content-inner {
    padding: 2.4rem;
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 500px) {
  .render-3_freelancer .ab-eight-content-inner {
    padding: 1.6rem;
    font-size: 1.6rem;
  }
}
.mona-btn-shortcode {
  display: inline-block;
}
.mona-count-down-btn {
  outline: 0;
  border-radius: 0;
  font: inherit;
  cursor: pointer;
  color: #fff;
  padding: 5px 20px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background: #f25b64;
  border: 1px solid #f25b64;
  display: block;
}
.mona-btn-shortcode .mona-count-down-btn {
  color: #fff;
}
.mona-count-down-btn:focus,
.mona-count-down-btn:hover {
  background: #fff;
  color: #f25b64;
  border: 1px solid #f25b64;
}
.get-code .hidden-label {
  display: none;
}
.get-code {
  cursor: pointer;
}
.get-code.done:hover .code {
  display: none;
}
.get-code.done:hover .hidden-label {
  display: inline;
}
.btn-cta {
  padding: 1.6rem 4rem;
  border-radius: 0.4rem;
  display: block;
  max-width: max-content;
  cursor: pointer;
  line-height: 1.2;
  transition: 0.3s;
  position: relative;
  transform-style: preserve-3d;
}
.btn-cta-orange {
  border-radius: 0.4rem;
  border: 0.2rem solid #e85a18;
  background: linear-gradient(
    90deg,
    #f17800 0.43%,
    #f39930 51.12%,
    #ef7c00 99.74%
  );
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16), 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}
.btn-cta::after,
.btn-cta::before {
  content: "";
  position: absolute;
  height: 0%;
  width: 0.1rem;
  box-shadow: -0.1rem -0.1rem 2rem 0 #fff, -0.4rem -0.4rem 0.5rem 0 #fff,
    0.7rem 0.7rem 2rem 0 rgba(0, 0, 0, 0.4),
    0.4rem 0.4rem 0.5rem 0 rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
}
.btn-cta::before {
  right: 0;
  top: 0;
}
.btn-cta::after {
  left: 0;
  bottom: 0;
}
.btn-cta .line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.btn-cta .line::after,
.btn-cta .line::before {
  content: "";
  position: absolute;
  box-shadow: -0.1rem -0.1rem 2rem 0 #fff, -0.4rem -0.4rem 0.5rem 0 #fff,
    0.7rem 0.7rem 2rem 0 rgba(0, 0, 0, 0.4),
    0.4rem 0.4rem 0.5rem 0 rgba(0, 0, 0, 0.3);
}
.btn-cta .line::before {
  left: 0;
  top: 0;
  width: 0%;
  height: 0.05rem;
  transition: all 0.5s ease;
}
.btn-cta .line::after {
  right: 0;
  bottom: 0;
  width: 0%;
  height: 0.05rem;
  transition: all 0.5s ease;
}
.btn-cta .text-small {
  font-size: 1.6rem;
}
@media screen and (max-width: 550px) {
  .btn-cta .text-small {
    font-size: 1.2rem;
  }
}
.btn-cta .text {
  transition: all 0.5s ease;
  display: inline-block;
}
@keyframes ani-btn {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.btn-cta-dot {
  width: 100%;
  max-width: max-content;
  transition: all 0.3s ease-in-out;
  padding: 1.7rem 2.7rem;
  margin: 3.4rem 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10rem;
  background: linear-gradient(77deg, #530d99 17.91%, #d61ef4 90.76%);
  background-size: 300% 300%;
  animation: ani-btn 4s ease alternate infinite;
}
@media screen and (max-width: 1200px) {
  .btn-cta-dot {
    margin: 2.4rem 0;
  }
}
@media screen and (max-width: 850px) {
  .btn-cta-dot {
    margin: 1.6rem 0;
  }
}
@media screen and (max-width: 450px) {
  .btn-cta-dot {
    padding: 1.6rem 2.4rem;
  }
}
.btn-cta-dot .inner {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
@media screen and (max-width: 450px) {
  .btn-cta-dot .inner {
    gap: 0.8rem;
  }
}
.btn-cta-dot .inner .icon {
  display: block;
  width: 3.3rem;
  height: 5.4rem;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 576px) {
  .btn-cta-dot .inner .icon {
    width: 2.3rem;
    height: 3.4rem;
  }
  .btn-cta-dot .inner .icon .ani span {
    width: 2.3rem;
    height: 3.4rem;
  }
}
.btn-cta-dot .inner .text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.btn-cta-dot .inner .text .txt {
  display: block;
  font-size: 2.4rem;
}
@media screen and (max-width: 450px) {
  .btn-cta-dot .inner .text .txt {
    font-size: 1.6rem;
  }
}
.btn-cta-dot .inner .text .txt-gif {
  display: block;
  font-size: 1.4rem;
}
@media screen and (max-width: 450px) {
  .btn-cta-dot .inner .text .txt-gif {
    font-size: 1.2rem;
  }
}
.btn-cta-dot .img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 3.2rem);
  height: calc(100% + 2.4rem);
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 576px) {
  .btn-cta-dot .img {
    display: none;
  }
}
@keyframes btn-new-blur {
  0% {
    filter: blur(0);
  }
  50% {
    filter: blur(1.2rem);
  }
  100% {
    filter: blur(0);
  }
}
.btn-new {
  display: flex;
  justify-content: center;
  gap: 0 1.2rem;
  align-items: center;
  font-size: 3.2rem;
  line-height: 1.2;
  border-radius: 100rem;
  position: relative;
  z-index: 3;
  border-radius: 100rem;
  background: rgba(255, 255, 255, 0.58);
  border: 0.2rem solid #fff;
  margin-top: 4.6rem;
  margin-bottom: 4.6rem;
  padding: 2.4rem 4.8rem;
  max-width: max-content;
}
@media screen and (max-width: 1200px) {
  .btn-new {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 576px) {
  .btn-new {
    font-size: 1.8rem;
    padding: 1.2rem 2.4rem;
  }
}
.btn-new::after,
.btn-new::before {
  animation: btn-new-blur 2.6s ease-in-out infinite;
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100rem;
}
.btn-new::before {
  background: linear-gradient(77deg, #a32dff 17.91%, #d61ef4 90.76%);
}
.btn-new::after {
  background: linear-gradient(0deg, #530d99 0, rgba(227, 15, 130, 0) 100%);
}
.btn-new .inner {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;
}
.btn-new .inner .icon {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 3.5rem;
  height: auto;
  margin-right: 1.2rem;
}
@media screen and (max-width: 1200px) {
  .btn-new .inner .icon {
    width: 2.4rem;
  }
}
@media screen and (max-width: 576px) {
  .btn-new .inner .icon {
    width: 2rem;
  }
}
.btn-new .inner .text {
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}
.btn-new .inner .text .txt-sub {
  font-size: 1.6rem;
}
@media screen and (max-width: 1200px) {
  .btn-new .inner .text .txt-sub {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 576px) {
  .btn-new .inner .text .txt-sub {
    font-size: 1.2rem;
  }
}
.btn-new .img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 5.2rem);
  height: calc(100% + 4.8rem);
}
@media screen and (max-width: 1200px) {
  .btn-new .img {
    width: calc(100% + 4.2rem);
    height: calc(100% + 2.8rem);
  }
}
@media screen and (max-width: 576px) {
  .btn-new .img {
    width: calc(100% + 2.2rem);
  }
}
.btn-commit {
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 35.74rem;
  padding: 1.2rem 2.4rem;
  border-radius: 0.4rem;
  border: 0.1rem dashed #fff;
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 1200px) {
  .btn-commit {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 576px) {
  .btn-commit {
    font-size: 1.4rem;
    padding: 0.8rem 1.6rem;
  }
}
.btn-commit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -70%);
  width: 1.2rem;
  height: 1.5rem;
  background: url(../assets/images/button/icon-commit.svg) no-repeat;
  background-size: contain;
  background-position: center;
}
@keyframes hotline-wrap-ani {
  100% {
    background-position: 100% 0, 0 100%, 0 0, 100% 100%;
  }
}
.btn-hotline {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: max-content;
  margin-left: auto;
  margin-right: auto;
  z-index: 3;
  position: relative;
}
.btn-hotline .tt {
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.8rem;
  display: inline-block;
}
@media screen and (max-width: 1200px) {
  .btn-hotline .tt {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 576px) {
  .btn-hotline .tt {
    font-size: 1.6rem;
  }
}
.btn-hotline .num {
  padding-top: 1.8rem;
  padding-bottom: 1rem;
  padding-left: 4rem;
  padding-right: 4rem;
  border-radius: 0.5rem;
  font-family: "Bebas Neue";
  font-size: 8rem;
  line-height: 1;
  color: #f5851e;
  background: linear-gradient(90deg, #f5851e 50%, transparent 50%),
    linear-gradient(90deg, #f5851e 50%, transparent 50%),
    linear-gradient(0deg, #f5851e 50%, transparent 50%),
    linear-gradient(0deg, #f5851e 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 0.5rem 0.2rem, 0.5rem 0.2rem, 0.2rem 0.5rem, 0.2rem 0.5rem;
  background-position: 0 0, 100% 100%, 0 100%, 100% 0;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .btn-hotline .num {
    font-size: 4.8rem;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
}
@media screen and (max-width: 576px) {
  .btn-hotline .num {
    font-size: 3.2rem;
    padding-top: 1.4rem;
  }
}
.btn-hotline .num::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 0.4rem);
  height: calc(100% - 0.4rem);
  border-radius: 0.5rem;
  background: #340658;
  z-index: 1;
}
.btn-hotline .num .txt {
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 1201px) {
  .btn-hotline:hover .num {
    animation: hotline-wrap-ani 5s linear infinite;
  }
}
@media screen and (min-width: 1201px) {
  .btn-cta:hover {
    background: 0 0;
    color: #e85a18;
    border-color: transparent;
  }
  .btn-cta:hover .text {
    transform: translateY(-0.2rem);
    text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
  }
  .btn-cta:hover::before {
    transition: all 0.5s ease;
    height: 100%;
  }
  .btn-cta:hover::after {
    transition: all 0.5s ease;
    height: 100%;
  }
  .btn-cta:hover .line::before {
    transition: all 0.5s ease;
    width: 100%;
  }
  .btn-cta:hover .line::after {
    transition: all 0.5s ease;
    width: 100%;
  }
}
.hotline-btn-wrap {
  max-width: max-content;
  margin-left: auto;
  margin-right: auto;
}
.hotline-btn-bg {
  position: relative;
}
.hotline-btn-bg::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 4px;
}
.hotline-btn-bg.bg-white {
  background: #fff;
  border-radius: 0.4rem;
}
.hotline-btn-bg.bg-media {
  background: #7c0fd1;
}
.hotline-btn-bg.bg-software {
  background: #2686ec;
}
.hotline-btn {
  padding: 1.6rem 4rem;
  padding-bottom: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: max-content;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  background: #24033f;
  background: linear-gradient(90deg, #2686ec 50%, transparent 50%),
    linear-gradient(90deg, #2686ec 50%, transparent 50%),
    linear-gradient(0deg, #2686ec 50%, transparent 50%),
    linear-gradient(0deg, #2686ec 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 0.5rem 0.2rem, 0.5rem 0.2rem, 0.2rem 0.5rem, 0.2rem 0.5rem;
  background-position: 0 0, 100% 100%, 0 100%, 100% 0;
  font-family: "Bebas Neue";
  line-height: 1;
}
@media screen and (max-width: 550px) {
  .hotline-btn {
    padding: 1.4rem 1.8rem;
    padding-bottom: 0.8rem;
  }
}
.hotline-btn.hotline-btn-media {
  background: linear-gradient(90deg, #a943f9 50%, transparent 50%),
    linear-gradient(90deg, #a943f9 50%, transparent 50%),
    linear-gradient(0deg, #a943f9 50%, transparent 50%),
    linear-gradient(0deg, #a943f9 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 0.5rem 0.2rem, 0.5rem 0.2rem, 0.2rem 0.5rem, 0.2rem 0.5rem;
  background-position: 0 0, 100% 100%, 0 100%, 100% 0;
}
.hotline-btn.hotline-btn-nhtq {
  background: linear-gradient(90deg, #ffa318 50%, transparent 50%),
    linear-gradient(90deg, #ffa318 50%, transparent 50%),
    linear-gradient(0deg, #ffa318 50%, transparent 50%),
    linear-gradient(0deg, #ffa318 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 0.5rem 0.2rem, 0.5rem 0.2rem, 0.2rem 0.5rem, 0.2rem 0.5rem;
  background-position: 0 0, 100% 100%, 0 100%, 100% 0;
}
.hotline-btn.hotline-btn-nhtq .txt {
  background: var(
    --gradient-button,
    linear-gradient(101deg, #ffa318 -38.94%, #f6851c 44.05%, #f31f10 132.4%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes hotline-wrap-ani {
  100% {
    background-position: 100% 0, 0 100%, 0 0, 100% 100%;
  }
}
.hotline-btn.active {
  animation: hotline-wrap-ani 5s linear infinite;
}
.hotline-btn .txt {
  font-size: 5.6rem;
  line-height: 1;
  font-weight: 700;
  background: linear-gradient(4deg, #2686ec 25.85%, #26bcec 71.65%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 600px) {
  .hotline-btn .txt {
    font-size: 4rem;
  }
}
.hotline-btn.hotline-btn-media .txt {
  background: linear-gradient(4deg, #7c0fd1 25.85%, #b557ff 71.65%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hotline-btn-wrap .panda {
  position: relative;
  display: block;
  width: 20%;
  margin-left: auto;
}
.hotline-btn-wrap .svg-ani {
  width: 92%;
  height: auto;
  position: absolute;
  left: -85%;
  top: 0;
}
.form-custom .f-r {
  display: flex;
}
.form-custom .f-r:not(:last-child) {
  margin-bottom: 1rem;
}
.form-custom .f-c {
  width: 100%;
}
.form-custom .f-c .ipt-txt,
.form-custom .f-c input {
  width: 100%;
  padding: 1.2rem 0;
  background-color: transparent;
  border-radius: unset;
  border-bottom: 0.1rem solid #e0e0e0;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #3a3a3a;
}
.form-custom .f-c .ipt-txt::placeholder,
.form-custom .f-c input::placeholder {
  color: #5f5f5f;
}
.section-horizontal-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.section-horizontal-sticky-content,
.section-horizontal-sticky-header {
  width: 100%;
  overflow: hidden;
}
.section-horizontal-scrolling {
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.section-horizontal-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.section-horizontal-item {
  width: 100%;
  max-width: max-content;
  flex-shrink: 0;
}
@media screen and (max-width: 1200px) {
  .section-horizontal-sticky {
    height: auto;
  }
  .section-horizontal-list {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.contact-box {
  position: relative;
  background-color: #f2ecfc;
  padding-bottom: 8rem;
}
.contact-box-map {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 60rem;
  margin-bottom: -12rem;
}
.home-page .contact-box-map {
  margin-top: -18rem;
  height: 80rem;
}
@media screen and (max-width: 1200px) {
  .home-page .contact-box-map {
    margin-top: -10rem;
    height: 55rem;
  }
}
@media screen and (max-width: 576px) {
  .home-page .contact-box-map {
    margin-top: -12rem;
    height: 40rem;
  }
}
.contact-box-wrap {
  width: calc(100% * (10 / 12));
  background-color: #7c0fd1;
  color: #fff;
  border-radius: 3.2rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 3;
  overflow: hidden;
}
.contact-box-bg-decor {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: calc(100% * (8 / 10));
  pointer-events: none;
}
.contact-box-ctn {
  display: flex;
  align-items: flex-end;
  align-items: stretch;
  gap: 1.6rem;
  flex-wrap: nowrap;
  min-height: 80rem;
}
.contact-box-ctn .bolt-ani,
.contact-box-ctn .bolt-ani .ani span {
  width: 1.8rem;
  height: 2.8rem;
}
.contact-box-content {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-box-content-wrap {
  margin-left: 4.2rem;
  margin-top: 4rem;
  max-width: 52rem;
}
.contact-box-form {
  width: calc(100% * (4.5 / 10));
  padding: 2.4rem;
  position: relative;
  z-index: 2;
}
.contact-box-form .wrap {
  background-color: #fff;
  border-radius: 1.6rem;
  overflow: hidden;
  padding: 2.8rem 2.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.contact-box-form .ipt-txt,
.contact-box-form input,
.contact-box-form textarea {
  width: 100%;
  padding: 1rem 0;
  border-bottom: 0.1rem solid var(--Primary-Color-Stroke, #ebebeb);
  line-height: 1.5;
  color: #3a3a3a;
  border-radius: unset;
}
.contact-box-form
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  color: #3a3a3a;
}
.contact-box-form
  .select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar {
  width: 0.3rem;
}
.contact-box-form
  .select2-container--default
  .select2-results
  > .select2-results__options:-webkit-scrollbar-track {
  background: #ebebeb;
}
.contact-box-form
  .select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-thumb {
  background: #7c0fd1;
  border-radius: 2rem;
}
.select2-container--default .select2-results > .select2-results__options {
  max-height: 30rem;
}
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  color: #fff;
}
.contact-box-form .select2-container--open .select2-dropdown--below {
  border-radius: 0.8rem;
  box-shadow: 0.1rem 0.1rem 1rem #7c0fd1;
}
.contact-box-form .ipt-txt::placeholder,
.contact-box-form
  .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder,
.contact-box-form input::placeholder {
  opacity: 0.6;
  color: #3a3a3a;
}
.contact-box-form
  .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: #3a3a3a;
}
.contact-box-form
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow,
.select2.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 50%;
  transform: translateY(-50%);
}
.contact-box-form .select2-container--default .select2-selection--single {
  border-radius: unset;
  border: unset;
  background-color: transparent;
  border-bottom: 0.1rem solid #e0e0e0;
  height: auto;
}
.contact-box-form .textarea-txt,
.contact-box-form textarea {
  height: 5.6rem;
  min-height: 7.2rem;
  max-height: max-content;
}
.contact-box-mg:not(:last-child) {
  margin-bottom: 1.6rem;
}
.contact-box-header .title {
  font-size: 3.2rem;
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: 1.4rem;
  position: relative;
  width: 87%;
}
.contact-box-header .title .decor {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(60%, -50%);
  pointer-events: none;
  width: 10%;
}
.contact-box-header .desc {
  font-size: 1.6rem;
  opacity: 0.8;
}
.contact-box-react {
  display: flex;
  gap: 5.8rem;
  position: relative;
  z-index: 2;
}
.contact-box-react .item {
  display: block;
}
.contact-box-react .icon {
  --sizeIcon: 4rem;
  width: var(--sizeIcon);
  height: var(--sizeIcon);
  border-radius: 1.2rem;
  overflow: hidden;
  margin-bottom: 0.8rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  flex-shrink: 0;
}
.contact-box-react .label {
  font-size: 1.4rem;
  opacity: 0.8;
  line-height: 1.5;
}
.contact-box-react .name {
  font-size: 1.8rem;
  font-weight: 700;
  transition: 0.3s;
}
.contact-box-address {
  font-size: 1.6rem;
}
.contact-box-address .item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.2rem 0;
}
.contact-box-address .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
}
.contact-box-address .txt {
  transition: 0.3s;
}
.contact-box-img {
  width: 100%;
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.contact-box-img > img {
  position: relative;
  z-index: 2;
  height: auto;
}
.contact-box-img .bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}
.contact-box-img .img {
  position: relative;
  z-index: 2;
}
.contact-box-img .img .decor {
  --sizeDecor: 1.2rem;
  --sizeDecorSmall: 0.8rem;
  position: absolute;
  width: var(--sizeDecor);
  height: var(--sizeDecor);
  right: 0;
  background-color: #f5851e;
}
@media screen and (max-width: 850px) {
  .contact-box-img .img .decor {
    width: var(--sizeDecorSmall);
    height: var(--sizeDecorSmall);
  }
}
.contact-box-img .img .decor.decor-one {
  top: 0;
}
.contact-box-img .img .decor.decor-two {
  top: calc(var(--sizeDecor) * 2);
  background-color: #f41e92;
}
@media screen and (max-width: 850px) {
  .contact-box-img .img .decor.decor-two {
    top: calc(var(--sizeDecorSmall) * 2);
  }
}
.contact-box-img .img .decor.decor-three {
  top: calc(var(--sizeDecor) * 4);
  background-color: #1ec0f2;
}
@media screen and (max-width: 850px) {
  .contact-box-img .img .decor.decor-three {
    top: calc(var(--sizeDecorSmall) * 4);
  }
}
.contact-box-img .img .decor.decor-four {
  top: calc(var(--sizeDecor) * 6);
  background-color: #fff;
}
@media screen and (max-width: 850px) {
  .contact-box-img .img .decor.decor-four {
    top: calc(var(--sizeDecorSmall) * 6);
  }
}
.form-ref .f-r:not(:last-child) {
  margin-bottom: 0.4rem;
}
.form-ref .f-r.f-r-textarea {
  margin-bottom: 4.2rem;
}
.form-ref .f-r {
  display: flex;
  width: calc(100% + 2.4rem);
  margin-left: -1.2rem;
}
.form-ref .f-c {
  width: 100%;
  padding: 0 1.2rem;
  position: relative;
}
.form-ref .f-c .word {
  position: absolute;
  bottom: 0;
  right: 1.2rem;
  transform: translateY(calc(100% + 0.8rem));
  font-size: 1.2rem;
  color: #b8b8b8;
}
.form-ref
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  height: auto;
  padding: 1.2rem 0;
}
.form-ref
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  font-size: 1.4rem;
  line-height: 1.5;
}
.form-ref-btn {
  display: block;
  width: 100%;
  padding: 2rem;
  border-radius: 0.8rem;
  overflow: hidden;
  position: relative;
  background: linear-gradient(77deg, #a32dff 17.91%, #d61ef4 90.76%);
  cursor: pointer;
}
.form-ref-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #530d99 0, rgba(124, 15, 210, 0) 65.79%);
  filter: blur(12px);
}
.form-ref-btn .content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.2rem;
  position: relative;
  z-index: 2;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}
.form-ref-btn .icon {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 1.9rem;
  flex-shrink: 0;
}
.form-ref-clock {
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.form-ref-clock-wrap {
  border-radius: 0.4rem;
  border: 0.1rem dashed var(--Primary-Color-grey-100, #c2c2c2);
  max-width: max-content;
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.8rem;
  padding: 1rem 2.4rem;
  position: relative;
  font-size: 1.5rem;
  color: #616161;
  font-weight: 500;
  text-align: center;
}
.form-ref-clock .icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 1.2rem;
  height: 1.6rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
@keyframes zoomInTab {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes zoomInTab {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.95);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
.form-tab {
  margin-bottom: 2.4rem;
  padding: 0.8rem;
  display: flex;
  gap: 0.8rem;
  background: #f4e6ff;
  border-radius: 0.8rem;
  font-size: 1.6rem;
}
.form-tab .item {
  width: calc(100% / 3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  color: #3a3a3a;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: 0.3s;
}
.form-tab .item.active {
  background-color: #7c0fd1;
  color: #fff;
}
.form-panel {
  display: none;
  animation: zoomInTab 0.4s linear forwards;
  -webkit-animation: zoomInTab 0.4s linear forwards;
}
.form-panel.active {
  display: block;
}
.contact-box-form .label {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% - 2.4rem);
  height: 100%;
  pointer-events: none;
  transition: 0.3s;
  display: flex;
  align-items: center;
  padding-right: 2.4rem;
  cursor: pointer;
  border-bottom: 0.1rem solid var(--Primary-Color-Stroke, #ebebeb);
}
.contact-box-form .label .txt {
  font-size: 1.4rem;
  color: #3a3a3a;
  opacity: 0.6;
}
.contact-box-form .label[for="CV"]::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 2rem;
  height: 2rem;
  transform: translateY(-50%);
  background: url(../assets/images/contact-box/icon-pinn.png) no-repeat;
  background-size: contain;
}
.contact-box-form .ipt-txt.ipt-cv,
.contact-box-form input[type="file"] {
  cursor: pointer;
}
.contact-box-form .ipt-cv,
.contact-box-form input[type="file"] {
  opacity: 0;
}
.form-ref {
  position: relative;
}
.form-ref form {
  padding-bottom: 2.4rem;
}
.contact-box-form .wpcf7-not-valid-tip,
.contact-box-form .wpcf7-response-output,
.form-custom .wpcf7-not-valid-tip,
.form-custom .wpcf7-response-output {
  width: 100%;
  font-size: 1.2rem;
  color: #dc3232;
}
.wpcf7-form-control-wrap.recaptcha {
  width: 100%;
  display: inline-block;
}
.contact-box-form .wpcf7-response-output {
  left: 0;
  text-align: center;
}
.contact-box-form .wpcf7-not-valid-tip,
.form-custom .wpcf7-not-valid-tip {
  right: 1.2rem;
  text-align: right;
  bottom: -1.2rem;
  right: 0;
  pointer-events: none;
}
.contact-box-form .wpcf7-form-control-wrap.monamediaatothebtothc-wrap {
  display: none !important;
  visibility: hidden !important;
}
.f-captcha .wpcf7-not-valid-tip,
.form-custom .f-captcha .wpcf7-not-valid-tip {
  bottom: -1.8rem;
}
.form-ref .f-r.f-captcha {
  margin-bottom: 2.4rem;
}
.form-custom .wpcf7-response-output {
  text-align: center;
}
.form-custom .wpcf7 form.invalid .wpcf7-response-output,
.form-custom .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
  font-size: 1.3rem;
  bottom: 0.2rem;
  margin: 0;
  padding: 0 0.4rem;
  width: 100%;
  position: relative;
}
.form-tkw {
  background: rgba(255, 255, 255, 0.95);
}
.contact-box-footer .wpcf7 form.invalid .wpcf7-response-output {
  bottom: 0.4rem;
  padding: 0;
  font-size: 1.3rem;
}
.btn-submit {
  position: relative;
}
.wpcf7-spinner {
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  right: 0.4rem;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  background-color: #3f096a;
}
.wpcf7-spinner::before {
  top: 0.3rem;
  left: 0.3rem;
  width: 0.6rem;
  height: 0.6rem;
}
.contact-box-footer .wpcf7-spinner,
.popup-form .wpcf7-spinner {
  right: 1.6rem;
}
@media screen and (min-width: 1201px) {
  .form-tab .item:hover {
    background-color: #7c0fd1;
    color: #fff;
  }
  .contact-box-react .item:hover .name {
    color: #f5851e;
  }
  .contact-box-address .item:hover .txt {
    color: #f5851e;
  }
}
@media screen and (max-width: 1727px) {
  .container-lg .contact-box-form .wpcf7-not-valid-tip,
  .container-lg .contact-box-form .wpcf7-response-output,
  .container-lg .form-custom .wpcf7 form.invalid .wpcf7-response-output,
  .container-lg .form-custom .wpcf7-not-valid-tip,
  .container-lg .form-custom .wpcf7-response-output,
  .container-lg .wpcf7 form.invalid .wpcf7-response-output {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 1200px) {
  .contact-box-ctn {
    gap: 3.2rem;
    min-height: 74rem;
  }
  .contact-box-wrap {
    width: calc(100% * (11 / 12));
  }
  .contact-box-header .title {
    font-size: 2.4rem;
    width: 100%;
  }
  .contact-box-form {
    width: calc(100% * (5 / 10));
  }
  .contact-box-form .textarea-txt {
    min-height: 8rem;
  }
  .contact-box-react {
    gap: 0.8rem;
    flex-wrap: wrap;
  }
  .contact-box-react .item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: calc(50% - 0.8rem);
  }
  .contact-box-react .item:nth-child(3) {
    width: 80%;
  }
  .contact-box-react .icon {
    margin-bottom: 0;
    margin-top: 0.2rem;
    --sizeIcon: 3.2rem;
    width: var(--sizeIcon);
    height: var(--sizeIcon);
  }
  .contact-box-react .name {
    font-size: 1.5rem;
  }
  .contact-box-form {
    padding: 1.6rem;
  }
  .contact-box-form .wrap {
    padding: 1.6rem;
    border-radius: 0.8rem;
  }
  .contact-box-form .textarea-txt {
    min-height: 4.2rem;
  }
  .form-ref-btn {
    padding: 1.2rem;
  }
  .form-ref-btn .content {
    font-size: 1.5rem;
    gap: 0.8rem;
    align-items: center;
  }
  .form-ref-btn .content {
    font-size: 1.6rem;
  }
  .form-ref-clock-wrap {
    width: 100%;
    padding: 0.8rem 1.2rem;
    font-size: 1.4rem;
  }
  .contact-box-react .name {
    font-size: 1.6rem;
  }
  .contact-box-wrap {
    border-radius: 2rem;
  }
  .contact-box-footer .wpcf7 form.invalid .wpcf7-response-output {
    font-size: 1rem;
  }
  .form-tab {
    max-width: 100%;
    justify-content: space-between;
  }
  .form-tab .item {
    width: auto;
  }
}
@media screen and (max-width: 850px) {
  .contact-box-form .wpcf7-not-valid-tip,
  .contact-box-form .wpcf7-response-output,
  .form-custom .wpcf7 form.invalid .wpcf7-response-output,
  .form-custom .wpcf7-not-valid-tip,
  .form-custom .wpcf7-response-output,
  .wpcf7 form.invalid .wpcf7-response-output {
    font-size: 1rem;
  }
  .container-lg .contact-box-form .wpcf7-not-valid-tip,
  .container-lg .contact-box-form .wpcf7-response-output,
  .container-lg .form-custom .wpcf7 form.invalid .wpcf7-response-output,
  .container-lg .form-custom .wpcf7-not-valid-tip,
  .container-lg .form-custom .wpcf7-response-output,
  .container-lg .wpcf7 form.invalid .wpcf7-response-output {
    font-size: 1rem;
  }
  .form-ref form {
    padding-bottom: 3.8rem;
  }
  .contact-box-wrap {
    border-radius: 1.6rem;
  }
  .contact-box-ctn {
    gap: 1.6rem;
  }
  .contact-box-content-wrap {
    margin-left: 2rem;
    margin-top: 1.6rem;
  }
  .contact-box-header {
    margin-bottom: 1.8rem;
  }
  .contact-box-header .title {
    font-size: 2rem;
    margin-bottom: 1.2rem;
  }
  .contact-box-header .desc {
    font-size: 1.5rem;
  }
  .form-tab .item {
    padding: 0.8rem;
  }
}
@media screen and (max-width: 768px) {
  .contact-box-wrap {
    width: 100%;
  }
  .contact-box-form {
    width: calc(100% * (5.2 / 10));
  }
}
@media screen and (max-width: 650px) {
  .contact-box-wrap {
    padding: 1.6rem;
  }
  .contact-box-ctn {
    flex-wrap: wrap;
    gap: 0;
  }
  .contact-box-form {
    width: 100%;
  }
  .contact-box-content-wrap {
    margin: 0;
  }
  .contact-box-form {
    padding: 0;
  }
  .contact-box-header .title .decor {
    display: none;
  }
  .contact-box-img > img {
    transform: translateY(0.5rem);
  }
  .contact-box {
    padding-bottom: 4.8rem;
  }
  .contact-box-address .item {
    gap: 0.4rem;
    font-size: 1.4rem;
  }
  .contact-box-address .icon {
    width: 2.4rem;
    height: 2.4rem;
  }
}
@media screen and (max-width: 576px) {
  .form-tab {
    padding: 0.4rem;
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    gap: 0.4rem;
  }
  .form-tab .item {
    padding: 0.4rem 0.8rem;
    font-size: 1.6rem;
  }
  .contact-box-map {
    height: 30rem;
    margin-bottom: -5rem;
  }
}
@media screen and (max-width: 350px) {
  .contact-box-react .item {
    width: 100%;
    align-items: center;
  }
}
.popup-form {
  width: 100%;
  max-width: 118rem;
}
.popup-form .container {
  max-width: 100%;
}
.popup-form.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.popup-form .contact-box-ctn {
  min-height: 65rem;
  padding-top: 4.2rem;
}
.popup-form .contact-box-wrap {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 1.6rem);
  max-height: calc((var(--vhh, 1vh) * 100) - 1.6rem);
}
.popup-form .popup-close {
  background-color: #f5851e;
}
@media screen and (min-width: 1201px) {
  .popup-form .popup-close:hover {
    background-color: #f41e92;
  }
}
@media screen and (max-width: 650px) {
  .popup-form .contact-box-ctn {
    padding-top: 0;
  }
}
@media screen and (max-width: 600px) {
  .popup-form .contact-box-wrap {
    padding-top: 2.4rem;
  }
  .popup-form .popup-close {
    position: sticky;
    top: 0;
    right: 0;
    margin-left: auto;
    margin-bottom: 0.8rem;
  }
  .popup-form .contact-box-ctn {
    min-height: unset;
  }
  .popup-form .contact-box-ctn {
    height: 100%;
    max-height: calc((var(--vhh, 1vh) * 100) - 8rem);
    margin-top: -3rem;
    overflow: hidden auto;
  }
  .popup-form .contact-box-ctn::-webkit-scrollbar {
    display: none;
  }
  .contact-box-header .title {
    width: calc(100% - 4rem);
    font-size: 1.8rem;
  }
}
@keyframes phoneRingFixed {
  0% {
    transform: rotate(0) skew(1deg) translateY(0);
  }
  10% {
    transform: rotate(-15deg) skew(1deg);
  }
  20% {
    transform: rotate(15deg) skew(1deg);
  }
  30% {
    transform: rotate(-15deg) skew(1deg);
  }
  40% {
    transform: rotate(15deg) skew(1deg);
  }
  50% {
    transform: rotate(-15deg) skew(1deg);
  }
  60% {
    transform: rotate(15deg) skew(1deg);
  }
  70% {
    transform: rotate(0) skew(1deg);
  }
  100% {
    transform: rotate(0) skew(1deg);
  }
}
.contact-fixed-pop {
  position: fixed;
  z-index: 10;
  bottom: 10rem;
  right: 27px;
  display: none;
}
@media screen and (max-width: 1200px) {
  .contact-fixed-pop {
    display: block;
  }
}
.contact-fixed-pop .item {
  margin-top: 1.5rem;
}
.contact-fixed-pop .item .link {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  overflow: hidden;
  animation: phoneRingFixed 2s ease-in-out infinite;
}
#contact-fixed .contact-box-react .item:nth-child(1),
#contact-fixed .contact-box-react .item:nth-child(3) {
  display: none;
}
.bolt-ani {
  --bolt: rgb(242, 222, 16);
  display: block;
  width: 3.3rem;
  height: 5.4rem;
  position: relative;
}
@media screen and (max-width: 576px) {
  .bolt-ani {
    width: 2.3rem;
    height: 3.4rem;
  }
}
.bolt-ani svg {
  position: absolute;
  display: block;
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke: var(--bolt);
}
.bolt-ani svg.bolt-ani-line {
  --r: 0deg;
  --s: 1;
  top: 30%;
  z-index: 1;
  stroke: #fff;
  stroke-dashoffset: 241px;
  stroke-dasharray: 0 240px;
  transform: rotate(var(--r)) scaleX(var(--s));
}
.bolt-ani svg.bolt-ani-line.left {
  --r: -20deg;
  left: 0;
}
.bolt-ani svg.bolt-ani-line.right {
  --r: 20deg;
  --s: -1;
  right: 0;
}
.bolt-ani .ani {
  display: block;
  position: relative;
}
.bolt-ani .ani span {
  display: block;
  width: 3.3rem;
  height: 5.4rem;
  background: var(--bolt);
  clip-path: polygon(
    50% 10%,
    100% 10%,
    60% 40%,
    88% 40%,
    5% 100%,
    30% 50%,
    0 50%
  );
}
@media screen and (max-width: 576px) {
  .bolt-ani .ani span {
    width: 2.3rem;
    height: 4.4rem;
  }
}
.bolt-ani.active .ani span {
  animation: morph-ani 2s ease;
}
.bolt-ani.active svg.bolt-ani-line {
  animation: white-ani 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.45s;
}
.bolt-ani.active svg.bolt-ani-line.right {
  animation-delay: 1.6s;
}
@keyframes white-ani {
  100% {
    stroke-dasharray: 240px 240px;
  }
}
@keyframes morph-ani {
  12% {
    clip-path: polygon(
      40% 5%,
      100% 0,
      65% 40%,
      65% 40%,
      8% 100%,
      24% 50%,
      24% 50%
    );
  }
  24%,
  72% {
    clip-path: polygon(
      36% 40%,
      82% 40%,
      82% 40%,
      82% 40%,
      36% 71%,
      36% 40%,
      36% 40%
    );
  }
  84% {
    clip-path: polygon(
      40% 5%,
      100% 0,
      65% 40%,
      65% 40%,
      8% 100%,
      24% 50%,
      24% 50%
    );
  }
}
:root {
  --heightHeader: 8rem;
  --heightHeaderSmall: 6.6rem;
}
header.header {
  position: sticky;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--heightHeader);
  padding: 1.6rem 0;
  transition: 0.5s ease-in-out;
  background-color: #fff;
}
@media screen and (min-width: 1201px) {
  header.header::before {
    content: "";
    position: absolute;
    height: var(--heightHeader);
    inset: 0;
    z-index: 20;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    pointer-events: none;
  }
}
@media screen and (max-width: 1200px) {
  header.header {
    padding: 1.2rem 0;
    height: var(--heightHeaderSmall);
  }
}
.header.out {
  transform: translateY(-100%);
  overflow: hidden;
}
.header-ctn {
  justify-content: space-between;
}
.header-ctn.d-flex {
  flex-wrap: nowrap;
}
.header-logo {
  height: 4.8rem;
  margin-left: 2rem;
}
@media screen and (max-width: 1300px) {
  .header-logo {
    height: 4.2rem;
  }
}
@media screen and (max-width: 500px) {
  .header-logo {
    margin-left: 0;
  }
  .header-logo img {
    content: url(../assets/images/logo/logo/media-logo-less.svg);
  }
}
.header-logo-link {
  display: block;
  height: 100%;
}
@media screen and (min-width: 1201px) {
  .header-logo-link {
    position: relative;
    z-index: 30;
  }
}
.header-logo img {
  object-fit: contain;
}
.header-left {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  justify-content: flex-start;
}
@media screen and (max-width: 500px) {
  .header-left {
    position: relative;
    z-index: 5;
    width: 60%;
    margin-left: 1.2rem;
  }
  .header-left.hide {
    opacity: 0;
    pointer-events: none;
  }
}
.header-mid {
  flex: 1;
  justify-content: center;
}
@media screen and (max-width: 1200px) {
  .header-mid {
    position: fixed;
    z-index: 3;
    top: 0.8rem;
    right: 0.8rem;
    width: 32.8rem;
    height: auto;
    border-radius: 0.8rem;
    transition: 0.3s;
    pointer-events: none;
  }
  .header-mid.active {
    box-shadow: 0 0.8rem 4rem 0.2rem rgba(0, 0, 0, 0.08);
    background-color: #fff;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  .header-mid.active .header-logo-sp,
  .header-mid.active .header-menu,
  .header-mid.active .hotline-sp {
    opacity: 1;
  }
  .header-mid.col {
    padding: 0.6rem 1.6rem;
  }
}
@media screen and (max-width: 500px) {
  .header-mid {
    width: calc(100vw - 1.6rem);
  }
  .header-mid .header-logo-sp {
    display: none;
  }
}
.header-mid-flex {
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 500px) {
  .header-mid-flex {
    padding-top: 5.6rem;
  }
}
.header-mid-flex.d-flex {
  flex-wrap: nowrap;
}
.header-search {
  margin-left: 1.6rem;
  padding-left: 0.8rem;
  position: relative;
  transition: 0.3s;
}
@media screen and (min-width: 1201px) {
  .header-search {
    z-index: 30;
  }
}
@media screen and (max-width: 1200px) {
  .header-search {
    position: fixed;
    top: 1.6rem;
    right: 6.4rem;
    margin: 0;
    padding: 0;
    pointer-events: auto;
  }
}
.header-search::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 0.1rem;
  height: 70%;
  border-left: 0.2rem solid #e0e0e0;
}
@media screen and (max-width: 1200px) {
  .header-search::before {
    content: none;
  }
}
.header-search-wrap {
  cursor: pointer;
}
.header-search .icon {
  width: 4rem;
  height: 4rem;
  padding: 0.8rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  transition: 0.3s;
  border-radius: 0.8rem;
}
@media screen and (max-width: 1200px) {
  .header-search .icon {
    width: 3.2rem;
    height: 3.2rem;
    padding: 0.4rem;
    border-radius: 0.2rem;
  }
}
@media screen and (min-width: 1201px) {
  .header-search .icon:hover {
    background-color: #f8f0ff;
  }
}
@media screen and (max-width: 1200px) {
  .header-menu {
    width: 100%;
    opacity: 0;
  }
}
.header-menu .menu-list {
  justify-content: center;
  flex-wrap: nowrap;
}
@media screen and (max-width: 1200px) {
  .header-menu .menu-list {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
.header-menu .menu-item {
  margin-left: 0.4rem;
}
.header-menu .menu-item.active .mega-menu-inner .mega-menu-sub.active,
.header-menu
  .menu-item.active
  .mega-menu-inner
  .mega-menu-sub.active
  .mega-menu-sub-wrap,
.header-menu .menu-item.active .mega-menu-inner.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.header-menu .menu-item.active .mega-menu-sub.active .mega-menu-sub-wrap {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.header-menu
  .menu-item.active
  .mega-menu-sub.active
  .mega-menu-sub-wrap
  .inner {
  transform: translateY(0);
}
@media screen and (min-width: 1201px) {
  .header-menu .menu-item:nth-child(7n + 1) .menu-item-link:hover {
    background-color: #ffe3f2;
  }
  .header-menu .menu-item:nth-child(7n + 1).current-menu-item .menu-item-link {
    background-color: #ffe3f2;
  }
  .header-menu .menu-item:nth-child(7n + 2) .menu-item-link:hover {
    background-color: #dcf7ff;
  }
  .header-menu .menu-item:nth-child(7n + 2).current-menu-item .menu-item-link {
    background-color: #dcf7ff;
  }
  .header-menu .menu-item:nth-child(7n + 3) .menu-item-link:hover {
    background-color: #ffeedf;
  }
  .header-menu .menu-item:nth-child(7n + 3).current-menu-item .menu-item-link {
    background-color: #ffeedf;
  }
  .header-menu .menu-item:nth-child(7n + 4) .menu-item-link:hover {
    background-color: #e9f4ff;
  }
  .header-menu .menu-item:nth-child(7n + 4).current-menu-item .menu-item-link {
    background-color: #e9f4ff;
  }
  .header-menu .menu-item:nth-child(7n + 5) .menu-item-link:hover {
    background-color: #dcf7ff;
  }
  .header-menu .menu-item:nth-child(7n + 5).current-menu-item .menu-item-link {
    background-color: #dcf7ff;
  }
  .header-menu .menu-item:nth-child(7n + 6) .menu-item-link:hover {
    background-color: #ffeedf;
  }
  .header-menu .menu-item:nth-child(7n + 6).current-menu-item .menu-item-link {
    background-color: #ffeedf;
  }
  .header-menu .menu-item:nth-child(7n + 7) .menu-item-link:hover {
    background-color: #f9f1ff;
  }
  .header-menu .menu-item:nth-child(7n + 7).current-menu-item .menu-item-link {
    background-color: #f9f1ff;
  }
}
@media screen and (max-width: 1200px) {
  .header-menu .menu-item {
    margin-left: 0;
    margin-bottom: 0.8rem;
    width: 100%;
  }
  .header-menu .menu-item:last-child {
    margin-bottom: 0;
  }
  .header-menu .menu-item.current-menu-item .menu-item-link {
    color: #7c0fd1;
  }
}
.header-menu .menu-item.dropdown .menu-item-link {
  position: relative;
}
@media screen and (max-width: 1200px) {
  .header-menu .menu-item.dropdown .menu-item-link {
    width: calc(100% - 3rem);
  }
}
.header-menu .menu-item.dropdown .dropdown-btn {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  position: absolute;
  top: 0.5rem;
  right: -4.2rem;
  width: 3.2rem;
  height: 3.2rem;
}
.header-menu .menu-item.dropdown .dropdown-btn img {
  width: 30%;
  height: 20%;
  object-fit: contain;
}
.header-menu .menu-item-link {
  align-items: center;
  padding: 1.2rem 1.6rem;
  transition: 0.3s;
  border-radius: 0.8rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}
@media screen and (max-width: 1350px) {
  .header-menu .menu-item-link {
    padding: 1rem 1.2rem;
  }
}
@media screen and (max-width: 1200px) {
  .header-menu .menu-item-link {
    padding: 1rem 0;
  }
}
@media screen and (min-width: 1201px) {
  .header-menu .menu-item-link {
    position: relative;
    z-index: 30;
  }
  .header-menu .menu-item-link.active {
    background-color: #dcf7ff;
  }
}
.header-menu .menu-item .icon {
  flex-shrink: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.4rem;
}
@media screen and (max-width: 1200px) {
  .header-menu .menu-item .icon {
    margin-right: 1.2rem;
  }
}
.header-menu .menu-item .icon img {
  object-fit: contain;
}
.header-menu .menu-item .txt {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
}
.header-right {
  position: relative;
  margin-right: 0.4rem;
}
@media screen and (min-width: 1201px) {
  .header-right {
    z-index: 30;
  }
}
@media screen and (max-width: 1200px) {
  .header-right {
    display: none;
  }
}
:root {
  --paddingMenu: 3.2rem;
}
.header-hotline-w {
  position: relative;
}
.header-hotline-w .hotline-panda {
  position: absolute;
  z-index: 1;
  bottom: -1.6rem;
  right: -1.6rem;
  width: 6rem;
  height: 6rem;
}
@media screen and (max-width: 1350px) {
  .header-hotline-w .hotline-panda {
    width: 5rem;
    height: 5rem;
  }
}
.header-hotline-w .header-hotline {
  position: relative;
  z-index: 2;
  margin-right: 3.2rem;
  padding-right: 1.3rem;
  -webkit-mask-image: url(../assets/images/header/hotline-mask.png);
  mask-image: url(../assets/images/header/hotline-mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: 0.3s;
  background: linear-gradient(151deg, #208cff 2.08%, #6dddff 100%);
}
.header-hotline-w .header-hotline-wrap {
  align-items: center;
  padding: 0.4rem;
  background-position-x: 0;
  animation: hotline-movement 10s infinite linear;
  background-image: url(../assets/images/header/hotline-sky.png),
    linear-gradient(151deg, #208cff 2.08%, #6dddff 100%);
  background-repeat: no-repeat;
}
.header-hotline-w .header-hotline-wrap.d-flex {
  flex-wrap: nowrap;
}
.header-hotline-w .header-hotline-wrap .icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 0;
}
.header-hotline-w .header-hotline-wrap .num {
  font-family: "Bebas Neue";
  font-size: 2.8rem;
  font-weight: 500;
  color: #fff;
  margin-left: 2.3rem;
  margin-right: 1rem;
  letter-spacing: 0.05em;
  line-height: 1;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  padding-top: 0.4rem;
  white-space: nowrap;
}
@media only screen and (max-width: 1200px) {
  .header-hotline-w .header-hotline-wrap .num {
    font-size: 2.4rem;
  }
}
@media only screen and (max-width: 800px) {
  .header-hotline-w .header-hotline-wrap .num {
    font-size: 2.1rem;
  }
}
@media screen and (max-width: 1350px) {
  .header-hotline-w .header-hotline-wrap .num {
    font-size: 2.2rem;
    margin-left: 1.2rem;
  }
}
.header-hotline-w .header-hotline.night {
  background: linear-gradient(151deg, #002da1 2.08%, #00126d 100%);
}
.header-hotline-w .header-hotline.night .header-hotline-wrap {
  flex-direction: row-reverse;
  background-image: url(../assets/images/header/hotline-night-sky.png);
}
.header-hotline-w .header-hotline.night .header-hotline-wrap .num {
  margin-left: 1.4rem;
  margin-right: 1.8rem;
}
.header-hotline-w .header-hotline.night .header-hotline-wrap .icon img {
  content: url(../assets/images/header/hotline-moon.png);
}
.hotline-sp {
  width: 100%;
  margin-top: 2.4rem;
  margin-bottom: 1rem;
}
@media screen and (max-width: 1200px) {
  .hotline-sp {
    opacity: 0;
    width: 28rem;
    max-width: 30rem;
  }
  .hotline-sp .hotline-panda {
    right: -0.4rem;
  }
  .hotline-sp .header-hotline-w .header-hotline-wrap .num {
    font-size: 3.6rem;
    letter-spacing: 0.02em;
  }
}
@media screen and (max-width: 1200px) and (max-width: 1200px) {
  .hotline-sp .header-hotline-w .header-hotline-wrap .num {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 1200px) {
  .hotline-sp .header-hotline-w .header-hotline-wrap {
    padding: 0.8rem;
    justify-content: space-between;
  }
}
@media screen and (max-width: 500px) {
  .hotline-sp {
    max-width: 28rem;
  }
}
@keyframes ani-gradient {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100%;
  }
}
.mega-menu-inner {
  position: fixed;
  z-index: 12;
  top: 8rem;
  left: 0;
  width: 100%;
  transition: 0.3s linear;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: 0.6s cubic-bezier(0.585, -0.195, 0.245, 1.25);
}
@media screen and (min-width: 1201px) {
  .mega-menu-inner {
    transform: translateY(calc(-100% - 8rem));
  }
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 0.8rem;
    display: flex;
    flex-direction: column;
  }
  .mega-menu-inner .box {
    border-radius: 0.8rem;
  }
}
.mega-menu-inner.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
@media screen and (min-width: 1201px) {
  .mega-menu-inner.active {
    transform: translateY(0);
  }
}
.mega-menu-inner .hotline-sp {
  position: absolute;
  bottom: 1.6rem;
  left: 1.6rem;
  width: 88%;
  margin-bottom: 0;
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .hotline-sp {
    width: 28rem;
    position: relative;
  }
}
.mega-menu-inner .box {
  padding: var(--paddingMenu);
  background-color: #fff;
  box-shadow: 1rem 1rem 4rem rgba(0, 0, 0, 0.25);
  position: relative;
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .box {
    padding: 0;
    box-shadow: unset;
    position: static;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
.mega-menu-inner .label {
  font-size: 2rem;
  font-weight: 600;
  position: absolute;
  top: 3.2rem;
  left: calc(var(--widthSub) + (var(--paddingMenu) * 2));
}
.mega-menu-inner .list {
  padding: 0.8rem;
  width: 100%;
  max-width: max-content;
  border-radius: 1.6rem;
  background: linear-gradient(
    45deg,
    #dcf7ff 0,
    #e9f4ff 25.24%,
    #f9f1ff 50.41%,
    #ffe3f2 76.17%,
    #ffeedf 100%
  );
  background-size: 600% 100%;
  animation: ani-gradient 3s linear infinite;
  animation-direction: alternate;
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .list {
    max-width: 100%;
    border-radius: 0.8rem;
    padding: 0 0.8rem;
    background: unset;
    flex: 1;
  }
}
.mega-menu-inner .item {
  width: 100%;
  margin-bottom: 0.2rem;
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .item {
    margin-bottom: 0.6rem;
  }
}
.mega-menu-inner .item.active > .wrap {
  background-color: #fff;
}
.mega-menu-inner .item.active > .wrap .img {
  background-color: var(--background-icon);
}
.mega-menu-inner .item:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .item:nth-child(5n + 1) .img {
    background-color: #f9f1ff;
  }
  .mega-menu-inner .item:nth-child(5n + 1).active > .wrap {
    background-color: #f9f1ff;
  }
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .item:nth-child(5n + 2) .img {
    background-color: #fff5fb;
  }
  .mega-menu-inner .item:nth-child(5n + 2).active > .wrap {
    background-color: #fff5fb;
  }
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .item:nth-child(5n + 3) .img {
    background-color: #fff6ed;
  }
  .mega-menu-inner .item:nth-child(5n + 3).active > .wrap {
    background-color: #fff6ed;
  }
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .item:nth-child(5n + 4) .img {
    background-color: #edfbff;
  }
  .mega-menu-inner .item:nth-child(5n + 4).active > .wrap {
    background-color: #edfbff;
  }
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .item:nth-child(5n + 5) .img {
    background-color: #f3f9ff;
  }
  .mega-menu-inner .item:nth-child(5n + 5).active > .wrap {
    background-color: #f3f9ff;
  }
}
.mega-menu-inner .item .wrap {
  padding: 1.6rem;
  align-items: center;
  cursor: pointer;
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 1.2rem;
  flex-wrap: nowrap;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .item .wrap {
    padding: 0.8rem;
    padding-right: 1.5rem;
    border-radius: 0.8rem;
  }
  .mega-menu-inner .item .wrap::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    opacity: 0.4;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    background: url(../assets/images/header/icon-arrow.svg) no-repeat;
    background-size: contain;
  }
}
@media screen and (min-width: 1201px) {
  .mega-menu-inner .item .wrap:hover .img {
    background-color: var(--background-icon);
  }
}
.mega-menu-inner .item .img {
  flex-shrink: 0;
  width: 5.6rem;
  height: 5.6rem;
  padding: 1.2rem;
  transition: 0.3s;
  border-radius: 0.8rem;
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .item .img {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    padding: 0.8rem;
    border-radius: 0.4rem;
  }
}
.mega-menu-inner .item .txt {
  margin-left: 1rem;
}
.mega-menu-inner .item .txt .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mega-menu-inner .item .txt .desc {
  font-size: 1.4rem;
  color: #8b8b8b;
  font-weight: 400;
  margin-top: 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .item .txt .desc {
    font-size: 1.2rem;
  }
}
.mega-menu-inner .mega-menu-sub {
  position: absolute;
  top: var(--paddingMenu);
  right: var(--paddingMenu);
  height: calc(100% - var(--paddingMenu) * 2);
  width: calc(100% - var(--widthSub) - (var(--paddingMenu) * 2) - 2.4rem);
  pointer-events: none;
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .mega-menu-sub {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    height: auto;
    max-height: calc(var(--vh, 1vh) * 100 - 1.6rem);
    background-color: #fff;
    border-radius: 0.8rem;
    transition: 0.3s;
    z-index: 4;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  .mega-menu-inner .mega-menu-sub .wrap {
    padding: 0.8rem;
    padding-right: 0.8rem;
  }
  .mega-menu-inner .mega-menu-sub .wrap::before {
    content: none;
  }
}
.mega-menu-inner .mega-menu-sub.active .mega-menu-sub-wrap .inner {
  transform: translateY(0);
}
.mega-menu-inner .mega-menu-sub.active .mega-menu-sub-wrap .hotline-sp {
  position: relative;
}
.mega-menu-inner .mega-menu-sub.mega-menu-cate--before .inner {
  transform: translateY(-2rem);
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .mega-menu-sub.mega-menu-cate--before .inner {
    transform: translateY(0);
  }
}
.mega-menu-inner .mega-menu-sub-wrap {
  margin-top: 2.8rem;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: 0.3s;
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .mega-menu-sub-wrap {
    margin-top: 0;
    height: 100%;
    max-height: calc(var(--vh, 1vh) * 100 - 1.6rem);
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
.mega-menu-inner .mega-menu-sub-wrap .inner {
  transform: translateY(2rem);
  will-change: transform, opacity;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .mega-menu-sub-wrap .inner {
    transform: translateY(0);
    max-height: calc(var(--vh, 1vh) * 100 - 15.6rem);
    overflow: hidden auto;
    flex: 1;
  }
}
.mega-menu-inner .mega-menu-sub span {
  display: block;
}
.mega-menu-inner .mega-menu-sub .title {
  line-height: 1.4;
}
@media screen and (min-width: 2000px) {
  .mega-menu-inner .mega-menu-sub .title {
    line-height: 1.3;
  }
}
@media screen and (max-width: 1700px) {
  .mega-menu-inner .mega-menu-sub .title {
    line-height: 1.5;
  }
}
.mega-menu-inner .mega-menu-sub .item .desc {
  font-size: 1.2rem;
}
@media screen and (min-width: 2000px) {
  .mega-menu-inner .mega-menu-sub .item .desc {
    line-height: 1.3;
  }
}
@media screen and (max-width: 1700px) {
  .mega-menu-inner .mega-menu-sub .item .desc {
    margin-top: 0.2rem;
  }
}
.mega-menu-inner .mega-menu-sub .list {
  background: 0 0;
  padding: 0;
  width: 100%;
}
.mega-menu-inner .mega-menu-sub .item {
  width: calc(100% / 4);
  padding: 0 0.4rem;
}
@media screen and (min-width: 1201px) {
  .mega-menu-inner .mega-menu-sub .item.active-sub .wrap {
    background-color: var(--mega-background);
  }
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .mega-menu-sub .item.active-sub .wrap {
    color: #2686ec;
  }
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .mega-menu-sub .item {
    width: 100%;
    padding: 0;
  }
}
.mega-menu-inner .mega-menu-sub .wrap {
  align-items: flex-start;
  padding: 1.2rem;
}
.mega-menu-inner .mega-menu-sub .img {
  padding: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
}
@media screen and (max-width: 1500px) {
  .mega-menu-inner .mega-menu-sub .img {
    width: 2rem;
    height: 2rem;
  }
}
.mega-menu-inner .mega-menu-sub .txt {
  margin-left: 1.2rem;
}
@media screen and (max-width: 1700px) {
  .mega-menu-inner .mega-menu-sub .txt {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 1500px) {
  .mega-menu-inner .mega-menu-sub .txt {
    margin-left: 0.8rem;
  }
}
.mega-menu-inner .mega-menu-sub .sticky {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 600;
  color: #fff;
  background-color: #f41e92;
  transition: 0.3s;
}
.mega-menu-inner .mega-menu-sub .sticky.bg-lms {
  background-color: #f41e92;
}
.mega-menu-inner .mega-menu-sub .sticky.bg-nhtq {
  background-color: #f5851e;
}
.mega-menu-inner .mega-menu-sub .related {
  border-top: 0.1rem solid #d7d7d7;
  margin-top: 0.1rem;
  padding-top: 0.1rem;
}
.mega-menu-inner .mega-menu-sub .related .list {
  margin-top: 0.4rem;
  max-width: 100%;
}
@media screen and (max-width: 1700px) {
  .mega-menu-inner .mega-menu-sub .related .list {
    margin-top: 0.2rem;
  }
}
@media screen and (max-width: 1200px) {
  .mega-menu-inner .mega-menu-sub .related {
    display: none;
  }
}
.mega-menu-background {
  position: absolute;
  left: var(--paddingMenu);
  top: 0;
  transform: translate(var(--background-left), var(--background-top));
  will-change: transform, height;
  width: var(--background-width);
  height: var(--background-height);
  background-color: var(--background-color);
  border-radius: 1.2rem;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mega-menu-close {
  position: fixed;
  z-index: 4;
  top: 1.6rem;
  right: 1.6rem;
}
.mega-menu-close .hd-bar {
  margin: 0;
}
.header-logo-sp {
  height: 3.2rem;
  width: 70%;
  margin-top: 0.2rem;
  margin-bottom: 1.6rem;
  pointer-events: none;
  opacity: 0;
}
.header-logo-sp-link {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}
.header-logo-sp-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.show-on-sp {
  display: block;
}
@media screen and (min-width: 1201px) {
  .show-on-sp {
    display: none;
  }
}
.hide-on-sp {
  display: none;
}
@media screen and (min-width: 1201px) {
  .hide-on-sp {
    display: block;
  }
}
.mega-menu-header {
  position: sticky;
  z-index: 3;
  top: 0;
  margin-bottom: 0.8rem;
  border-radius: 0.8rem 0.8rem 0 0;
  border-bottom: 1px solid #e0e0e0;
  background-color: #fff;
  display: none !important;
}
@media screen and (max-width: 1200px) {
  .mega-menu-header {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    display: flex !important;
  }
}
.mega-menu-back {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  transform: translateY(-0.2rem);
  font-size: 1.4rem;
  font-weight: 600;
  color: #7c0fd1;
}
.mega-menu-back img {
  width: 0.7rem;
  height: 1.2rem;
  margin-right: 0.8rem;
}
.mega-menu-back {
  padding: 1.6rem;
  transform: translateY(0);
}
.dropdown-sub {
  position: relative;
}
.dropdown-sub::before {
  content: "";
  position: absolute;
  z-index: 14;
  top: 100%;
  width: 100%;
  height: 3rem;
  background-color: transparent;
  cursor: pointer;
}
.dropdown-sub .icon-arrow {
  position: absolute;
  right: 1.2rem;
  top: 0.2rem;
  width: 0.5rem;
  transform: rotate(90deg);
  height: auto;
  transform: rotate(-90deg);
  transform: rotate(0);
  width: 3.8rem;
  height: 3.8rem;
  padding: 1.6rem 1.4rem;
  right: -1.5rem;
}
@media screen and (min-width: 1201px) {
  .dropdown-sub .icon-arrow {
    display: none;
  }
}
.header .submenu {
  position: absolute;
  z-index: 13;
  top: 100%;
  left: 0;
  min-width: 25rem;
  max-width: 30rem;
  background: #fff;
  box-shadow: 0 12px 24px rgba(0, 67, 101, 0.08);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: 0.3s;
  left: 0;
  max-width: 100%;
  min-width: 33.6rem;
  transform: translate(0, 2.8rem);
  padding: 1.6rem;
  border-radius: 1.6rem;
  box-shadow: 0 24px 60px -20px rgba(50, 50, 93, 0.24),
    0 16px 32px -30px rgba(0, 0, 0, 0.16),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
@media screen and (max-width: 1200px) {
  .header .submenu {
    display: none;
    width: 100%;
    min-width: calc(100% - 1.5rem);
    transition: unset;
    position: relative;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: unset;
    box-shadow: unset;
    margin-left: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    transform: translate(0);
    border-radius: unset;
    box-shadow: unset;
    padding: 0.8rem;
    min-width: calc(100% - 1.5rem);
    transform: unset;
  }
}
.header .submenu .submenu-item {
  margin-bottom: 0.4rem;
}
.header .submenu .submenu-item:last-child {
  margin-bottom: 0;
}
.header .submenu .submenu-item-link {
  font-size: 1.6rem;
  color: #3a3a3a;
  font-weight: 600;
  padding: 1.2rem 0.8rem;
  padding-right: 0.8rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  transition: 0.3s;
  border-radius: 0.8rem;
}
.header .submenu .submenu-item-link-icon {
  flex-shrink: 0;
  margin-right: 0.8rem;
  width: 2.4rem;
  height: 2.4rem;
}
.header
  .submenu
  .submenu-item:nth-child(4n + 1).current-menu-item
  .submenu-item-link {
  background-color: #faf6ff;
}
@media screen and (min-width: 1201px) {
  .header .submenu .submenu-item:nth-child(4n + 1):hover .submenu-item-link {
    background-color: #faf6ff;
  }
}
.header
  .submenu
  .submenu-item:nth-child(4n + 2).current-menu-item
  .submenu-item-link {
  background-color: #fff5fb;
}
@media screen and (min-width: 1201px) {
  .header .submenu .submenu-item:nth-child(4n + 2):hover .submenu-item-link {
    background-color: #fff5fb;
  }
}
.header
  .submenu
  .submenu-item:nth-child(4n + 3).current-menu-item
  .submenu-item-link {
  background-color: #fff6ed;
}
@media screen and (min-width: 1201px) {
  .header .submenu .submenu-item:nth-child(4n + 3):hover .submenu-item-link {
    background-color: #fff6ed;
  }
}
.header
  .submenu
  .submenu-item:nth-child(4n + 4).current-menu-item
  .submenu-item-link {
  background-color: #edfbff;
}
@media screen and (min-width: 1201px) {
  .header .submenu .submenu-item:nth-child(4n + 4):hover .submenu-item-link {
    background-color: #edfbff;
  }
}
@media screen and (min-width: 1201px) {
  .header .menu-item:hover .submenu {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translate(0, 2.5rem);
  }
}
.header-cart {
  width: 4rem;
  height: 4rem;
  margin-left: 0.8rem;
}
@media screen and (min-width: 1201px) {
  .header-cart {
    position: relative;
    z-index: 30;
  }
}
.header-cart-wrap {
  position: relative;
}
.header-cart .icon {
  width: 4rem;
  height: 4rem;
  position: relative;
  border-radius: 0.8rem;
  background-color: #1ec0f2;
  cursor: pointer;
}
.header-cart .icon-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.6rem;
  height: 1.6rem;
  transition: 0.3s;
}
.header-cart .icon-img:nth-child(2) {
  opacity: 0;
}
.header-cart .qty {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  font-size: 1.4rem;
  color: #fff;
  background-color: #f41e92;
  padding: 0.2rem;
  border-radius: 50%;
  min-width: 2.4rem;
  height: 2.4rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
@media screen and (max-width: 1200px) {
  .header-cart .qty {
    transform: translate(25%, -25%);
  }
}
.mini-cart {
  position: relative;
}
.mini-cart.show-on-mobile {
  display: none;
}
@media screen and (max-width: 1200px) {
  .mini-cart.show-on-mobile {
    display: block;
  }
}
.mini-cart.show-on-mobile .menu-item-link {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 0.3rem;
}
.mini-cart.show-on-mobile .menu-item-link .icon {
  width: 1.2rem;
  height: 1.2rem;
}
.mini-cart.show-on-mobile .mini-cart-qty {
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1.2rem;
}
.mini-cart::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: calc(100% + 3rem);
  height: 1.6rem;
  background-color: transparent;
}
.mini-cart .menu-item-link {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 4rem;
  height: 4rem;
  background-color: #1ec0f2;
  border-radius: 0.8rem;
}
.mini-cart .menu-item-link .icon {
  width: 1.6rem;
  height: 1.6rem;
}
.mini-cart .mini-cart-qty {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background-color: #f41e92;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  font-size: 1.4rem;
  color: #fff;
}
@media screen and (max-width: 1200px) {
  .site-host .header-cart {
    position: fixed;
    top: 1.6rem;
    right: 6.4rem;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    width: 3.2rem;
    height: 3.2rem;
  }
  .site-host .header-cart .icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.4rem;
  }
  .site-host .header-cart .icon img {
    width: 1.2rem;
    height: 1.2rem;
  }
  .site-host .header-cart .qty {
    height: 1.6rem;
    min-width: 1.6rem;
    font-size: 1rem;
  }
  .site-host .header-search {
    right: 10.4rem;
  }
  .site-host .header-logo-sp {
    width: 57%;
  }
}
@media screen and (max-width: 500px) {
  .site-host .header-left {
    width: 55%;
  }
  .site-host .header-logo img {
    content: url(../assets/images/logo/logo/host-logo-less.svg);
  }
  .site-software .header-logo img {
    content: url(../assets/images/logo/logo/software-logo-less.svg);
  }
}
@media screen and (max-width: 350px) {
  .site-host .header-left {
    width: 50%;
  }
}
.c-popup {
  position: fixed;
  z-index: 1000;
  top: 8rem;
  right: 3.2rem;
  height: auto;
  max-height: calc(100vh - 16rem);
  transform: translateX(calc(100% + 3.2rem));
  transition: 0.3s linear;
  pointer-events: none;
}
@media screen and (max-width: 1200px) {
  .c-popup {
    right: 0.8rem;
    top: 0.8rem;
    max-height: calc(100vh - 1.6rem);
    transform: translateX(calc(100% + 0.8rem));
  }
}
.c-popup.active {
  transform: translateX(0);
  pointer-events: auto;
}
.c-popup-wrap {
  position: relative;
  height: 100%;
  max-height: calc(100vh - 1.6rem);
  min-width: 36rem;
  width: 40rem;
}
@media screen and (max-width: 600px) {
  .c-popup-wrap {
    width: calc(100vw - 1.6rem);
  }
}
.c-popup .host-service-aside-wrap {
  overflow: hidden auto;
  height: 100%;
  max-height: calc(100vh - 1.6rem);
  border-radius: 1.6rem;
  box-shadow: 0 0.4rem 3rem rgba(0, 0, 0, 0.16);
  padding: 1.6rem;
}
@media screen and (max-width: 1200px) {
  .c-popup .host-service-aside-wrap {
    border-radius: 0.8rem;
  }
}
.c-popup .host-service-cart {
  margin-bottom: 1.6rem;
}
.c-popup .host-service-aside-item,
.c-popup .host-service-aside-item-header,
.c-popup .host-service-cart-item {
  padding: 0.4rem 0;
}
.c-popup .host-service-aside-item-body {
  padding-top: 0.2rem;
}
.c-popup .host-service-aside-item .label-small {
  font-size: 1.6rem;
}
.c-popup .host-service-aside-item .price.price-big,
.c-popup .host-service-aside-item .price.price-biggest,
.c-popup .host-service-aside-tt {
  font-size: 1.8rem;
}
.c-popup .host-service-aside-tt {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.c-popup .host-service-aside-tt .close-modal {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.4rem;
  border: 0.1rem solid rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: 0.3s;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
@media screen and (min-width: 1201px) {
  .c-popup .host-service-aside-tt .close-modal:hover {
    border-color: #1ec0f2;
  }
  .c-popup .host-service-aside-tt .close-modal:hover .fas {
    color: #1ec0f2;
  }
}
.c-popup .host-service-aside-tt .close-modal .fas {
  transition: 0.3s;
  font-weight: 300;
}
.c-popup .c-popup .host-service-aside-item .label-small,
.c-popup .host-service-aside-item-body,
.c-popup .host-service-cart-item .desc,
.c-popup .host-service-cart-item .name,
.c-popup .host-service-cart-item .price {
  font-size: 1.4rem;
}
.c-popup .host-service-aside-item-body .d-flex.f-start {
  flex-wrap: nowrap;
}
.c-popup .host-service-aside-item-body .checkbox-cus-name {
  margin-top: -0.2rem;
}
.c-popup .host-service-aside-item-body .checkbox-cus-item {
  width: calc(50% - 1.6rem);
}
.host-service-aside-wrap .host-service-aside-tt {
  margin-bottom: 0.8rem;
}
.host-service-aside-wrap .name,
.host-service-aside-wrap .txt {
  font-weight: 600;
}
.host-service-cart-item {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px solid rgba(58, 58, 58, 0.1);
}
.host-service-cart-item .desc {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.host-service-cart-item .desc .label {
  white-space: nowrap;
}
.host-service-cart-item .remove {
  margin-left: auto;
  width: 4rem;
  height: 4rem;
  border-radius: 0.8rem;
  background-color: #fff1f0;
  transition: 0.3s;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  transition: 0.3s;
  cursor: pointer;
}
@media screen and (min-width: 1201px) {
  .host-service-cart-item .remove:hover {
    background-color: #1ec0f2;
  }
  .host-service-cart-item .remove:hover img {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
  }
}
.host-service-cart-item .remove img {
  width: 40%;
  height: 40%;
  object-fit: contain;
  transition: 0.3s;
}
.hd-search-suggest .suggest-item .icon {
  padding: 0;
}
@media screen and (max-width: 1200px) {
  .mega-menu-background {
    display: none;
  }
}
.mega-menu-back img {
  object-fit: contain;
}
.site-software .hd-bar.active .menu__svg path,
.site-software .menu__svg path {
  stroke: #2686ec;
}
.site-host .hd-bar.active .menu__svg path,
.site-host .menu__svg path {
  stroke: #1ec0f2;
}
.site-software .mega-menu-back {
  color: #2686ec;
}
.site-software .mega-menu-back img {
  content: url(../assets/images/header/icon-arrow-software.svg);
}
.site-host .mega-menu-back {
  color: #1ec0f2;
}
.site-host .mega-menu-back img {
  content: url(../assets/images/header/icon-arrow-host.svg);
}
.hd-bar {
  margin-left: 2.4rem;
  margin-right: 0.2rem;
  width: 3.2rem;
  height: 3.2rem;
  background: #f7f7f7;
  border-radius: 0.2rem;
}
.hd-bar span {
  height: 0.2rem;
  border-radius: 0.5rem;
}
.hd-bar span:nth-child(1),
.hd-bar span:nth-child(3) {
  width: 1.4rem;
}
.hd-bar span:nth-child(2) {
  width: 1rem;
  left: unset;
  right: 0.5rem;
  transform: translate(0, -50%);
}
@media screen and (max-width: 770px) {
  .hd-bar {
    margin-right: 0.8rem;
  }
}
@media screen and (max-width: 450px) {
  .hd-bar {
    margin-left: 1.4rem;
    margin-right: 0.8rem;
  }
}
.menu__svg {
  transition: 0.4s ease;
}
.menu__svg path {
  fill: none;
  transition: stroke-dasharray 0.4s, stroke-dashoffset 0.4s;
  stroke: #7c0fd1;
  stroke-width: 6;
  stroke-linecap: round;
}
.menu__svg path:nth-child(1) {
  stroke-dasharray: 40 160;
}
.menu__svg path:nth-child(2) {
  transform: rotate(0);
}
.menu__svg path:nth-child(3) {
  stroke-dasharray: 40 85;
  transform-origin: 50%;
  transition: transform 0.4s, stroke-dashoffset 0.4s;
}
.hd-bar {
  z-index: 6;
}
.hd-bar.active .menu__svg {
  transform: rotate(45deg);
}
.hd-bar.active .menu__svg path {
  fill: none;
  transition: stroke-dasharray 0.4s, stroke-dashoffset 0.4s;
  stroke: #7c0fd1;
  stroke-linecap: round;
}
.hd-bar.active .menu__svg path:nth-child(1),
.hd-bar.active .menu__svg path:nth-child(3) {
  stroke-dashoffset: -64px;
}
.hd-bar.active .menu__svg path:nth-child(2) {
  transform-origin: 50%;
  transform: rotate(90deg);
}
.mega-menu-close .hd-bar {
  margin: 0;
}
.mega-menu-child .hd-bar {
  margin-right: -0.7rem;
  margin-top: -0.8rem;
}
@media screen and (max-width: 770px) {
  .mega-menu-child .hd-bar {
    margin-right: -0.8rem;
  }
}
@media screen and (max-width: 450px) {
  .mega-menu-child .hd-bar {
    margin-right: -0.8rem;
    margin-top: -0.8rem;
  }
}
.bg-page,
.bg-page-out {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: 0.3s;
}
.bg-page-out.active,
.bg-page.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
:root {
  --paddingMegaMenu: 3.2rem;
  --paddingMegaMenuSmall: 1.6rem;
  --backgroundContent: #eef2f6;
  --gutterContentItem: 3.2rem;
  --gutterContentItemSmall: 1.6rem;
  --widthMenuSp: 37.5rem;
  --widthContentItem: 30rem;
  --widthContentItemSmall: 32rem;
  --heightHD: 8rem;
  --heightHDSmall: 6.6rem;
}
header.header.header-height {
  height: var(--heightHD);
}
@media screen and (max-width: 1200px) {
  header.header.header-height {
    padding: 1.2rem 0;
    height: var(--heightHDSmall);
  }
}
@media screen and (min-width: 1201px) {
  .show-on-sp {
    display: none !important;
  }
}
@media screen and (min-width: 1201px) {
  .mega-menu-tab .tab-item:not(.active):hover::before {
    opacity: 1;
  }
}
.mega-menu-tab-bg {
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.header-height .header-mid {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1200px) {
  .header-height .header-mid {
    align-items: flex-start;
  }
}
.header-mid-flex.d-flex {
  width: 100%;
}
.mega-menu-wrap {
  position: fixed;
  z-index: 12;
  top: calc(var(--heightHD) - 0.1rem);
  left: 0;
  width: 100%;
  transition: 0.6s cubic-bezier(0.585, -0.195, 0.245, 1.25);
  box-shadow: 0 5rem 10rem rgba(50, 72, 92, 0.25);
  border-top: 0.1rem solid rgba(50, 72, 92, 0.25);
  pointer-events: none;
  visibility: hidden;
}
@media screen and (min-width: 1201px) {
  .mega-menu-wrap {
    min-height: 65rem;
    height: var(--heightMegaMenu);
    transform: translateY(calc(-100% - 8rem));
  }
}
@media screen and (max-width: 1200px) {
  .mega-menu-wrap {
    opacity: 0;
    position: absolute;
    top: calc(var(--heightHDSmall) - 0.9rem);
    left: 0;
    width: 100%;
    height: calc(100% - var(--heightHDSmall) + 0.9rem);
    background-color: #fff;
    border-bottom-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
  }
}
@media screen and (min-width: 1201px) {
  .mega-menu-tab .tab-item:not(.active):hover::before {
    opacity: 1;
  }
}
.mega-menu-tab-bg {
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mega-menu-wrap.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
}
.header-height .header-menu .mega-menu-inner {
  top: 0;
  transition: 0.25s linear;
  transition-property: transform, width, height;
  will-change: transform, width, height;
  background-color: #fff;
  padding: var(--paddingMegaMenu);
  transform: unset;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
@media screen and (min-width: 1201px) {
  .header-height .header-menu .mega-menu-inner {
    min-height: 65rem;
    height: var(--heightMegaMenu);
  }
}
@media screen and (max-width: 1200px) {
  .header-height .header-menu .mega-menu-inner {
    pointer-events: none;
    height: 100%;
    padding: 0;
  }
}
.mega-menu-content {
  border-radius: 1.6rem;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mega-menu-content-bg {
  background-color: var(--backgroundContent);
}
.mega-menu-tab {
  position: relative;
}
.mega-menu-tab-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--widthMegaMenuTab);
  transform: translateX(var(--transformMegaMenuTab));
  background-color: var(--backgroundContent);
  border-top-left-radius: 1.6rem;
  border-top-right-radius: 1.6rem;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media screen and (max-width: 1200px) {
  .mega-menu-tab-bg {
    display: none;
  }
}
.mega-menu-tab-bg .triangle {
  position: absolute;
  bottom: -0.1rem;
  height: 90%;
  width: 3.5rem;
}
.mega-menu-tab-bg .triangle:nth-child(1) {
  left: 0;
  transform: translateX(-44%);
}
.mega-menu-tab-bg .triangle:nth-child(2) {
  right: 0;
  transform: translateX(94%);
}
.mega-menu-tab-bg .triangle::after,
.mega-menu-tab-bg .triangle::before {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}
.mega-menu-tab-bg .triangle:nth-child(1):before {
  background-color: var(--backgroundContent);
  clip-path: polygon(100% 100%, 100% 0, 0 100%);
}
.mega-menu-tab-bg .triangle:nth-child(1):after {
  background-color: #fff;
  clip-path: polygon(100% 0, 0 0, 0 100%);
}
.mega-menu-tab-bg .triangle:nth-child(2):before {
  background-color: var(--backgroundContent);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.mega-menu-tab-bg .triangle:nth-child(2):after {
  background-color: #fff;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.mega-menu-tab-bg .triangle .before {
  width: 4.2rem;
  height: 4.2rem;
  position: absolute;
  z-index: 3;
  bottom: 0.1rem;
}
.mega-menu-tab-bg .triangle:nth-child(1) .before {
  transform: translateX(-88%);
  left: 0;
}
.mega-menu-tab-bg .triangle:nth-child(2) .before {
  transform: translateX(45%);
  right: 0;
}
.mega-menu-tab-bg .triangle .before::after,
.mega-menu-tab-bg .triangle .before::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
.mega-menu-tab-bg .triangle:nth-child(1) .before::before {
  border-bottom-right-radius: 2rem;
  background-color: #fff;
  z-index: 2;
}
.mega-menu-tab-bg .triangle:nth-child(2) .before::before {
  border-bottom-left-radius: 2rem;
  background-color: #fff;
  z-index: 2;
}
.mega-menu-tab-bg .triangle .before::after {
  background-color: var(--backgroundContent);
}
.mega-menu-tab-bg.first .triangle:nth-child(1) .before {
  transform: translateY(50%);
}
.mega-menu-tab-bg.first .triangle:nth-child(1) .before::before {
  background-color: var(--backgroundContent);
}
.mega-menu-tab .tab-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .mega-menu-tab .tab-list {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
.mega-menu-tab .tab-item {
  padding: 2.2rem 1.6rem;
  border-top-left-radius: 1.6rem;
  border-top-right-radius: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .mega-menu-tab .tab-item {
    width: 100%;
    padding: 1.6rem;
    padding-right: 3.8rem;
    margin-right: 0;
  }
}
.mega-menu-tab .tab-item:not(:last-child) {
  margin-right: 1.6rem;
}
.mega-menu-tab .tab-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 1rem);
  height: calc(100% - 2.5rem);
  background-color: var(--backgroundContent);
  border-radius: 0.8rem;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: 0.3s;
}
.mega-menu-tab .tab-item .icon {
  --sizeIcon: 2.4rem;
  --sizeIconSmall: 1.6rem;
  width: var(sizeIcon);
  height: var(sizeIcon);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  flex-shrink: 0;
  margin-right: 0.8rem;
}
@media screen and (max-width: 1200px) {
  .mega-menu-tab .tab-item .icon {
    width: var(sizeIconSmall);
    height: var(sizeIconSmall);
  }
}
.mega-menu-tab .tab-item .name {
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
}
.mega-menu-panel {
  flex: 1;
  padding: 1.6rem;
  background-color: var(--backgroundContent);
  border-radius: 1.6rem;
}
.mega-menu-panel .mega-menu-panel-wrap {
  display: flex;
  align-items: flex-start;
  height: 100%;
}
.mega-menu-list {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
}
.mega-menu-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  will-change: transform, opacity;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.mega-menu-item-wrap {
  transform: translateX(3rem);
  will-change: transform, opacity;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media screen and (min-width: 1201px) {
  .mega-menu-item.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
}
.mega-menu-item.active .mega-menu-item-wrap {
  transform: translateX(0);
}
.mega-menu-item.mega-menu-item--before .mega-menu-item-wrap {
  transform: translateX(-3rem);
}
.mega-menu-list .content-desc {
  font-size: 1.6rem;
  font-style: italic;
  color: #3a3a3a;
  margin-bottom: 1.2rem;
}
.mega-menu-content .content-list {
  display: flex;
  align-items: flex-start;
}
@media screen and (max-width: 1200px) {
  .mega-menu-content .content-list {
    padding-bottom: 1.6rem;
  }
}
.mega-menu-content .content-item {
  width: calc(100% / 3);
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-right: var(--gutterContentItem);
}
.mega-menu-content .content-item span {
  display: block;
}
.mega-menu-content .mega-menu-item-style-first .content-item:nth-child(1) {
  width: calc(100% / 3 + var(--gutterContentItem));
  padding-right: var(--gutterContentItem);
  border-right: 0.1rem solid rgba(58, 58, 58, 0.2);
}
.mega-menu-content
  .mega-menu-item-style-seconds
  .content-item:not(:last-child)
  .item,
.mega-menu-content
  .mega-menu-item-style-seconds
  .content-item:nth-child(2)
  .item {
  flex-wrap: wrap;
}
.mega-menu-content
  .mega-menu-item-style-seconds
  .content-item:last-child:not(:nth-child(2)) {
  width: 48%;
  padding-left: var(--gutterContentItem);
  border-left: 0.1rem solid rgba(58, 58, 58, 0.2);
}
.mega-menu-content
  .mega-menu-item-style-seconds
  .content-item:not(:last-child)
  .content-img,
.mega-menu-content
  .mega-menu-item-style-seconds
  .content-item:nth-child(2)
  .content-img {
  width: 100%;
}
.mega-menu-content .mega-menu-item-style-thirds .content-item:nth-child(1) {
  width: calc(100% / 3);
  padding-right: var(--gutterContentItem);
  border-right: 0.1rem solid rgba(58, 58, 58, 0.2);
  flex-shrink: 0;
}
.mega-menu-content .mega-menu-item-style-thirds .content-item .item {
  align-items: flex-start;
}
.mega-menu-content .mega-menu-item-style-thirds .content-item .name {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.8rem;
  gap: 0.8rem;
}
.mega-menu-content .mega-menu-item-style-thirds .content-item .name .name-txt {
  flex: 1;
  margin-left: 0;
  line-height: 1.3;
  padding-top: 0.2rem;
}
.mega-menu-content .mega-menu-item-style-thirds .content-item .name .name-tag {
  width: 45%;
  flex-shrink: 0;
}
.mega-menu-content
  .mega-menu-item-style-thirds
  .content-item
  .name
  .name-tag
  img {
  object-fit: contain;
}
.mega-menu-content .content-item .item {
  display: flex;
  align-items: center;
  transition: 0.3s;
  border-radius: 0.8rem;
}
@media screen and (min-width: 1201px) {
  .mega-menu-content .content-item .item.active {
    background-color: #fff;
    box-shadow: 0 0.4rem 0.4rem -0.2rem rgba(16, 24, 40, 0.03),
      0 1rem 1.4rem -0.2rem rgba(16, 24, 40, 0.08);
  }
  .mega-menu-content .content-item .item.active .content-text .name {
    color: #7c0fd1;
  }
  .mega-menu-tab .tab-item:not(.active):hover::before {
    opacity: 1;
  }
}
.mega-menu-content .content-item .item:active .content-text .name {
  color: #7c0fd1;
}
.mega-menu-content .content-item .item:not(:last-child) {
  margin-bottom: 0.8rem;
}
.mega-menu-content .content-item .item .content-img {
  width: 40%;
  border-radius: 0.8rem;
  overflow: hidden;
}
.mega-menu-content .content-item .item .content-icon {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 1.6rem;
  margin-left: 1.2rem;
  flex-shrink: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.mega-menu-content .content-item .item .content-text {
  flex: 1;
  padding: 1.2rem;
}
.mega-menu-sticked {
  max-width: max-content;
  margin-bottom: 0.4rem;
  padding: 0.5rem 1rem;
  padding-bottom: 0.3rem;
  display: flex !important;
  align-items: center;
  border-radius: 0.4rem;
  border: 0.1rem solid #c09148;
  background: linear-gradient(93deg, #f41e92 -34.85%, #f5851e 101.44%);
  position: relative;
  overflow: hidden;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}
.mega-menu-sticked.premium {
  background: radial-gradient(
      1041.96% 97.06% at -31.25% -25%,
      #1ec0f2 0,
      #002d3b 100%
    ),
    radial-gradient(
      72.32% 21.43% at 50% 50%,
      rgba(1, 151, 167, 0.98) 0,
      rgba(0, 92, 103, 0.98) 100%
    );
}
@-webkit-keyframes contentTagShine {
  0%,
  20%,
  40% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}
@keyframes contentTagShine {
  0%,
  20%,
  40%,
  60% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}
.mega-menu-sticked::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  width: 12%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  mix-blend-mode: plus-lighter;
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
  -webkit-animation: contentTagShine 3s infinite;
  animation: contentTagShine 3s infinite;
}
.mega-menu-content .content-item .item .content-text .content-tag .icon {
  flex-shrink: 0;
}
.mega-menu-content .content-item .item .content-text .name {
  font-size: 1.6rem;
  font-weight: 700;
  transition: 0.3s;
  color: #3a3a3a;
  transition: 0.3s;
}
.mega-menu-content .content-item .item .content-text .desc {
  font-size: 1.4rem;
  font-style: italic;
  color: #5f5f5f;
}
.mega-menu-tag {
  width: 100%;
}
.mega-menu-tag .link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1.2rem;
  transition: 0.3s;
  width: 100%;
}
.mega-menu-tag .link .icon {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.8rem;
  flex-shrink: 0;
}
.mega-menu-tag .link .name {
  font-size: 1.6rem;
  font-weight: 700;
  transition: 0.3s;
}
@media screen and (min-width: 1201px) {
  .mega-menu-tag .link .name {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.mega-menu-content .mega-menu-banner {
  width: 17.6%;
  max-width: 27.6rem;
  position: relative;
  border-radius: 0.8rem;
  overflow: hidden;
  margin-top: 3.6rem;
}
@media screen and (max-width: 1200px) {
  .mega-menu-content .mega-menu-banner {
    display: none;
  }
}
.mega-menu-content .mega-menu-banner .bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
@keyframes bgRotate {
  100% {
    transform: rotate(360deg);
  }
}
.mega-menu-content .mega-menu-banner .bg-2 {
  width: 100%;
  height: auto;
  top: 35%;
  border-radius: 0.8rem;
}
.mega-menu-content .mega-menu-banner .bg-2 img {
  animation: bgRotate 10s linear infinite;
}
.mega-menu-content .mega-menu-banner .text {
  position: relative;
  z-index: 3;
}
.mega-menu-content .mega-menu-banner .text-header {
  padding: 2.4rem 1.2rem;
  text-align: center;
  font-weight: 700;
}
.mega-menu-content .mega-menu-banner .title {
  color: #fff;
  text-align: center;
  text-shadow: 0.3rem 0.3rem 0 #000, 0.2rem 0.2rem 0 #2686ec;
  font-size: 2.8rem;
  font-style: italic;
  letter-spacing: 0.056rem;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.mega-menu-content .mega-menu-banner .discount {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-left: 2.4rem;
  padding-right: 3.2rem;
  max-width: max-content;
  margin-left: auto;
  margin-right: auto;
}
.mega-menu-content .mega-menu-banner .discount .text {
  display: flex;
  gap: 0.4rem;
}
.mega-menu-content .mega-menu-banner .discount::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64%;
  border-radius: 0.8rem;
  background: #123366;
}
.mega-menu-content .mega-menu-banner .discount .text-linear {
  font-size: 2.4rem;
  background: linear-gradient(6deg, #f59034 15.62%, #fecd1f 67.42%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mega-menu-content .mega-menu-banner .discount .value {
  position: relative;
  line-height: 1;
}
.mega-menu-content .mega-menu-banner .discount .num {
  font-size: 5.6rem;
  font-weight: 800;
  background: linear-gradient(6deg, #f59034 15.62%, #fecd1f 67.42%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mega-menu-content .mega-menu-banner .discount .percent {
  font-size: 3rem;
  background: linear-gradient(6deg, #f59034 15.62%, #fecd1f 67.42%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
}
@keyframes tramsFormScale {
  0%,
  100%,
  30%,
  70% {
    transform: scale(1);
  }
  50%,
  90% {
    transform: scale(0.9);
  }
}
@keyframes transformScaleValue {
  0%,
  100%,
  20%,
  40%,
  55%,
  80% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
.mega-menu-wrap.active .mega-menu-content .mega-menu-banner .title {
  animation: tramsFormScale 3s ease-in-out infinite;
}
.mega-menu-wrap.active
  .mega-menu-content
  .mega-menu-banner
  .discount
  .text-item {
  animation: transformScaleValue 4s ease-in-out infinite;
}
.mega-menu-wrap.active
  .mega-menu-content
  .mega-menu-banner
  .discount
  .text-item:nth-child(2) {
  animation-delay: 0.5s;
}
.mega-menu-wrap.active
  .mega-menu-content
  .mega-menu-banner
  .discount
  .value
  .text-item {
  animation-delay: 1s;
}
@media screen and (min-width: 1201px) {
  .mega-menu-content .content-item .item:hover {
    background-color: #fff;
    box-shadow: 0 0.4rem 0.4rem -0.2rem rgba(16, 24, 40, 0.03),
      0 1rem 1.4rem -0.2rem rgba(16, 24, 40, 0.08);
  }
  .mega-menu-content .content-item .item:hover .content-text .name {
    color: #7c0fd1;
  }
  .mega-menu-tag .link:hover {
    color: #7c0fd1;
  }
}
.mega-menu-back .flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mega-menu-back .flex .icon {
  width: 1.6rem;
  height: 1.6rem;
  flex-direction: 0;
  margin-right: 0.8rem;
}
.mega-menu-tab .tab-item .icon-arrow {
  position: absolute;
  top: 1.8rem;
  right: 1.2rem;
  width: 1.6rem;
  height: 1.6rem;
}
.header-height .header-menu .menu-item.dropdown .dropdown-btn img {
  width: 1.6rem;
  height: 1.6rem;
}
.header-height .header-menu .menu-item.dropdown .menu-item-link .show-on-sp {
  pointer-events: none;
}
@media screen and (max-width: 1380px) {
  .mega-menu-content .mega-menu-item-style-thirds .content-item:nth-child(1) {
    width: calc(100% / 3.5);
  }
}
@media screen and (max-width: 1200px) {
  .mega-menu-content .content-item .item .content-img {
    width: 32%;
  }
  .mega-menu-sticked {
    font-size: 0.8rem;
    padding: 0.2rem 0.8rem;
    padding-bottom: 0.1rem;
    margin-bottom: 0.2rem;
  }
  .header-height .header-menu .menu-item .mega-menu-sticked .icon {
    margin-right: 0.4rem;
    width: 1rem;
    height: 1rem;
  }
  .header-height.header .submenu .submenu-item-link-icon {
    width: 1.6rem;
    height: 1.6rem;
  }
  .header-height
    .header-hotline-w
    .header-hotline.night
    .header-hotline-wrap
    .num {
    margin-left: 0;
  }
  .header-height .header-mid {
    width: var(--widthMenuSp);
    min-height: 70rem;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .container-lg .header-mid.col,
  .header-mid.col {
    padding: 0.6rem 1.6rem;
    padding-bottom: 12rem;
  }
  .header.header-height .hotline-sp {
    position: absolute;
    bottom: 1.6rem;
    right: 1.6rem;
    z-index: 12;
    margin: 0;
    padding-top: 1.6rem;
  }
  .header.header-height .hotline-sp::before {
    content: "";
    position: absolute;
    top: 0;
    left: -6.2rem;
    width: calc(var(--widthMenuSp) - 3.2rem);
    border-top: 0.1rem solid #e0e0e0;
  }
  .mega-menu-list .content-desc {
    font-size: 1.4rem;
    padding-right: 1.6rem;
  }
  .mega-menu-tab .tab-item .icon-arrow {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
  }
  .mega-menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 12;
    padding-right: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: -2;
  }
  .mega-menu-panel.active {
    z-index: 12;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  .mega-menu-panel .mega-menu-back {
    padding: 0;
    margin-right: 1.6rem;
    margin-bottom: 1.6rem;
  }
  .mega-menu-content .content-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .mega-menu-content .content-list::-webkit-scrollbar {
    height: 0.4rem;
    width: 8rem;
  }
  .mega-menu-content .content-list::-webkit-scrollbar-track {
    background: rgba(58, 58, 58, 0.2);
  }
  .mega-menu-content .content-list::-webkit-scrollbar-thumb {
    background: #7c0fd1;
    border-radius: 2rem;
  }
  .mega-menu-content .content-list::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1.6rem;
    height: 0.4rem;
    background-color: #fff;
    pointer-events: none;
  }
  .mega-menu-content .content-item {
    scroll-snap-align: start;
    width: var(--widthContentItemSmall);
    flex-shrink: 0;
    margin-right: var(--gutterContentItemSmall);
  }
  .mega-menu-content .mega-menu-item-style-first .content-item:nth-child(1) {
    width: var(--widthContentItem);
    padding-right: 0;
    border: unset;
  }
  .mega-menu-content .content-item .item .content-text {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-left: 0.8rem;
  }
  .mega-menu-tag .link {
    padding: 0.8rem 0;
    padding-left: 0;
  }
  .mega-menu-tag .link {
    font-size: 1.4rem;
  }
  .mega-menu-content .content-item .item .content-text .content-tag {
    width: 9.6rem;
  }
  .mega-menu-tag .link .name {
    font-size: 1.4rem;
  }
  .mega-menu-wrap {
    z-index: -1;
  }
  .mega-menu-wrap.active {
    z-index: 12;
  }
  .mega-menu-wrap.active .mega-menu-inner,
  .mega-menu-wrap.active .mega-menu-item.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .mega-menu-content .mega-menu-item-style-seconds .content-item:last-child {
    width: var(--widthContentItem);
    padding-left: 0;
    border: unset;
  }
  .mega-menu-content .content-item .item .content-text .name {
    font-size: 1.4rem;
  }
  .mega-menu-content .content-item .item .content-icon {
    margin-top: 0.4rem;
    margin-left: 0;
  }
  .mega-menu-content
    .mega-menu-item-style-thirds
    .content-item
    .name
    .name-tag {
    width: 35%;
  }
  .mega-menu-content .mega-menu-item-style-thirds .content-item .name {
    margin-bottom: 0.4rem;
  }
  .mega-menu-content .mega-menu-item-style-thirds .content-item:nth-child(1) {
    padding-right: 0;
    border: unset;
    width: var(--widthContentItem);
  }
  .header-height .header-menu .menu-item.dropdown .menu-item-link {
    width: 100%;
  }
  .header-height .header-menu .menu-item.dropdown .dropdown-btn {
    right: -1.2rem;
    pointer-events: none;
  }
  .header-height .header-menu .menu-item.dropdown-sub .menu-item-link {
    width: calc(100% - 3rem);
  }
  .header-height .dropdown-sub .icon-arrow {
    transition: 0.3s;
    transform: rotate(90deg);
    padding: 1.2rem 1.1rem;
  }
  .header-height .dropdown-sub .icon-arrow.active {
    transform: rotate(-90deg);
  }
  .mega-menu-content .content-item .item .content-text .desc {
    font-size: 1.2rem;
  }
  .header-height.header .submenu .submenu-item-link {
    font-size: 1.4rem;
    padding: 0.7rem;
  }
  .header-height .header-menu .menu-item-link,
  .mega-menu-inner {
    border-radius: 0;
  }
}
@media screen and (max-width: 576px) {
  .header-height .header-mid {
    min-height: 65rem;
  }
  .mega-menu-content
    .mega-menu-item-style-thirds
    .content-item
    .name
    .name-txt
    br {
    display: none;
  }
}
@media screen and (max-width: 450px) {
  .header-height .header-mid {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-height: calc(var(--vh, 1vh) * 100);
    border-radius: 0;
  }
  .mega-menu-wrap {
    top: calc(var(--heightHDSmall));
  }
  .header-height .header-mid.col {
    padding-bottom: 0;
  }
  .header.header-height .hotline-sp {
    bottom: 0;
    right: 0;
    padding: 0.8rem 1.6rem;
    width: 100%;
    max-width: 100%;
    border-top: 0.1rem solid #e0e0e0;
  }
  .header.header-height .hotline-sp::before {
    content: none;
  }
  .header-height .hotline-sp .hotline-panda {
    bottom: -0.8rem;
  }
  .header-height .header-hotline-w .header-hotline {
    max-width: 21rem;
    margin-left: auto;
  }
  .header-height .hotline-sp .header-hotline-w .header-hotline-wrap .num {
    font-size: 2.8rem;
  }
  .header-height .header-hotline-w .header-hotline-wrap .icon {
    width: 3.2rem;
    height: 3.2rem;
  }
}
.header-height .header-menu .mega-menu-inner {
  padding-top: 1.5rem;
}
.popper-contextMenu .mega-menu-item {
  position: static;
  opacity: 1;
  pointer-events: unset;
  visibility: visible;
}
:root {
  --secColor: #f58635;
}
.ft {
  padding: 8rem 0;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .ft {
    overflow: hidden;
  }
}
@media screen and (max-width: 1200px) {
  .ft {
    padding: 5.6rem 0;
  }
}
@media screen and (max-width: 450px) {
  .ft {
    font-size: 1.4rem;
  }
}
.ft .hd-menu-info {
  font-size: 1.4rem;
}
.ft .hd-menu-info-f {
  margin-bottom: 1.6rem;
}
.ft .hd-menu-info-f:last-child {
  margin-bottom: 0;
}
.ft .hd-menu-info-f .icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.8rem;
}
.ft .hd-menu-info-f .icon img {
  object-fit: contain;
}
.ft .hd-menu-info-f .d-flex {
  flex-direction: column;
  -webkit-flex-direction: column;
}
.ft .hd-menu-info-f .label {
  display: inline-block;
  margin-bottom: 0.8rem;
}
.ft .hd-menu-info-f .link-h {
  transition: 0.3s;
}
@media screen and (min-width: 1201px) {
  .ft .hd-menu-info-f .link-h:hover {
    color: #f58635;
  }
}
.ft-row {
  margin-bottom: -4rem;
}
@media screen and (max-width: 1200px) {
  .ft-row {
    margin-bottom: -2.4rem;
  }
}
.ft-col {
  margin-bottom: 4rem;
}
@media screen and (max-width: 1200px) {
  .ft-col,
  .ft-col.col {
    width: 50%;
    margin-bottom: 2.4rem;
  }
}
@media screen and (max-width: 360px) {
  .ft-col,
  .ft-col.col {
    width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  .ft-col.col-6 {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .ft-col.col-6.contact-col .ft-menu-list-col {
    width: 100%;
  }
}
.ft-col.col-6 .ft-menu-list {
  width: calc(100% + 2.4rem);
  margin-left: -1.2rem;
}
@media screen and (max-width: 1200px) {
  .ft-col.col-6 .ft-menu-list {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
  }
}
@media screen and (max-width: 768px) {
  .ft-col.col-6 .ft-menu-list {
    width: calc(100% + 0.8rem);
    margin-left: -0.4rem;
  }
}
.ft-col.col-6 .ft-menu-list-col {
  width: 50%;
  padding: 0 1.2rem;
}
@media screen and (max-width: 1200px) {
  .ft-col.col-6 .ft-menu-list-col {
    padding: 0 0.75rem;
  }
}
@media screen and (max-width: 768px) {
  .ft-col.col-6 .ft-menu-list-col {
    padding: 0 0.4rem;
  }
}
@media screen and (max-width: 360px) {
  .ft-col.col-6 .ft-menu-list-col {
    width: 100%;
  }
}
.ft-col.col-6 .hd-menu-info {
  padding: 0;
  display: block;
}
.ft-col.col-6 .hd-menu-info p.d-flex {
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  margin-bottom: 2.4rem;
}
@media screen and (max-width: 1200px) {
  .ft-col.col-6 .hd-menu-info p.d-flex br {
    display: none;
  }
}
.ft-col.col-6 .hd-menu-info p.d-flex a {
  transition: 0.3s;
}
@media screen and (min-width: 1201px) {
  .ft-col.col-6 .hd-menu-info p.d-flex a:hover {
    color: #f58635;
  }
}
.ft-col.col-6 .social-list {
  opacity: 0.5;
}
.ft-col.solution-col .ft-row {
  width: calc(100% + 2.4rem);
  margin-left: -1.2rem;
}
@media screen and (max-width: 1200px) {
  .ft-col.solution-col .ft-row {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
  }
}
@media screen and (max-width: 768px) {
  .ft-col.solution-col .ft-row {
    width: calc(100% + 0.8rem);
    margin-left: -0.4rem;
  }
}
.ft-label {
  font-size: 1.8rem;
  font-weight: 600;
  color: #7c0fd1;
  margin-bottom: 1.6rem;
}
@media screen and (max-width: 1200px) {
  .ft-label {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 450px) {
  .ft-label {
    font-size: 1.5rem;
  }
}
.ft-menu {
  font-size: 1.4rem;
}
.ft-menu-list-col {
  width: 100%;
}
.ft-menu-item.current-menu-item a {
  font-weight: 600;
  color: #f58635;
}
.ft-menu-item a {
  display: block;
  padding: 0.8rem 0;
  transition: 0.3s;
}
@media screen and (max-width: 1200px) {
  .ft-menu-item a {
    padding: 0.4rem 0;
  }
}
.ft-menu-item a:hover {
  color: #f58635;
}
.ft-corp {
  padding: 4.2rem 0;
  margin: 4rem 0;
  background-color: #f7f7f7;
  position: relative;
}
.ft-corp::after,
.ft-corp::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.2rem;
  left: 0;
  background: url(../assets/images/Line-201.png) no-repeat;
  background-size: 100% 100%;
}
.ft-corp::before {
  top: 0;
}
.ft-corp::after {
  bottom: -0.1rem;
}
@media screen and (max-width: 1200px) {
  .ft-corp {
    padding: 2.4rem 0;
    margin: 2.4rem 0;
    border-top: 0.1rem dotted #979797;
    border-bottom: 0.1rem dotted #979797;
  }
}
@media screen and (max-width: 1200px) and (max-width: 768px) {
  .ft-corp {
    padding-top: 3.4rem;
  }
}
@media screen and (max-width: 1200px) {
  .ft-corp::after,
  .ft-corp::before {
    content: none;
  }
}
@media screen and (max-width: 1200px) {
  .ft-corp .ft-corp-col.col-5 {
    width: 60%;
  }
  .ft-corp .ft-corp-col.col-7 {
    width: 40%;
  }
}
@media screen and (max-width: 768px) {
  .ft-corp .d-flex.f-ctn {
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .ft-corp .d-flex.f-ctn .ft-corp-col {
    width: 100%;
  }
  .ft-corp .d-flex.f-ctn .ft-corp-col:nth-child(1) {
    margin-bottom: 1.2rem;
  }
  .ft-corp .d-flex.f-ctn .ft-corp-col .ft-corp-img-item,
  .ft-corp .d-flex.f-ctn .ft-corp-col .mona-logo {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
  }
}
.ft-corp .d-flex {
  align-items: center;
  -webkit-align-items: center;
}
.ft-corp-img {
  width: calc(100% + 2.2rem);
  margin-left: -1.1rem;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
@media screen and (max-width: 1200px) {
  .ft-corp-img {
    width: calc(100% + 1rem);
    margin-left: -0.5rem;
  }
}
@media screen and (max-width: 768px) {
  .ft-corp-img {
    width: calc(100% + 0.8rem);
    margin-left: -0.4rem;
  }
}
.ft-corp-img img {
  object-fit: contain;
}
.ft-corp-img-item {
  width: 70%;
  padding: 0.75rem 0;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
@media screen and (max-width: 1200px) {
  .ft-corp-img-item {
    padding: 0.5rem 0;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .ft-corp-img-item {
    padding: 0.4rem 0;
  }
}
@media screen and (max-width: 450px) {
  .ft-corp-img-item {
    width: 100%;
  }
}
.ft-corp-img-link {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  padding: 0.4rem 0.8rem;
  width: max-content;
  max-width: 70%;
  transition: 0.3s;
}
@media screen and (max-width: 1200px) {
  .ft-corp-img-link {
    padding: 0.4rem;
    max-width: 55%;
  }
}
@media screen and (max-width: 768px) {
  .ft-corp-img-link {
    max-width: 50%;
  }
}
.ft-corp-img-link img {
  min-width: 22rem;
  max-width: 21.7rem;
}
@media screen and (max-width: 1200px) {
  .ft-corp-img-link img {
    max-width: 100%;
    min-width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  .ft-corp-img-link.dmca_protected {
    max-width: 30%;
  }
}
@media screen and (max-width: 768px) {
  .ft-corp-img-link.dmca_protected {
    max-width: 25%;
  }
}
.ft-corp-img-link.dmca_protected img {
  max-width: 10.5rem;
  min-width: 10.5rem;
}
@media screen and (max-width: 1200px) {
  .ft-corp-img-link.dmca_protected img {
    max-width: 100%;
    min-width: 100%;
  }
}
.ft-corp-img-link img {
  border-radius: 0.4rem;
}
@media screen and (min-width: 1201px) {
  .ft-corp-img-link:hover {
    opacity: 0.8;
  }
}
.policy-item {
  padding: 0.4rem 2rem;
}
.policy-item:nth-child(1) {
  padding-left: 0;
}
@media screen and (max-width: 1200px) {
  .policy-item {
    padding: 1.6rem;
  }
}
.policy-item a {
  transition: 0.3s;
  color: #3a3a3a;
}
@media screen and (min-width: 1201px) {
  .policy-item a:hover {
    color: #f58635;
  }
}
.ft-license {
  font-size: 1.6rem;
}
.ft-license-row {
  align-items: center;
  -webkit-align-items: center;
}
.ft-license-col {
  align-items: center;
}
@media screen and (max-width: 768px) {
  .ft-license-col.col {
    width: 100%;
    padding: 0.4rem;
  }
  .ft-license-col.d-flex.f-end {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
  }
}
.ft-license-col .social-list {
  margin-left: 6rem;
}
@media screen and (max-width: 1200px) {
  .ft-license-col .social-list {
    margin-left: 2.4rem;
  }
}
@media screen and (max-width: 768px) {
  .ft-license-col .social-list {
    margin-left: 0;
  }
}
.ft-license-col .social-list img {
  filter: brightness(0) invert(0.5);
  -webkit-filter: brightness(0) invert(0.5);
}
.f-signature {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}
.f-signature-wrap {
  margin-left: 0.4rem;
  align-items: center;
  -webkit-align-items: center;
}
.f-signature-share {
  flex-shrink: 0;
  margin-left: 0.4rem;
  width: 1.6rem;
  height: 1.6rem;
}
@media screen and (min-width: 1201px) {
  .f-signature-share:hover {
    animation: rotate-animation 2s linear infinite;
  }
}
.f-signature .reserved {
  flex-shrink: 0;
}
@media screen and (min-width: 1201px) {
  .f-signature .mona-logo:hover .hl-purple {
    color: #f58635;
  }
}
.f-signature .mona-logo img {
  object-fit: contain;
  max-width: 20rem;
}
@media screen and (max-width: 1200px) {
  .f-signature .mona-logo img {
    max-width: 15rem;
  }
}
.hd-menu-info-f {
  align-items: flex-start !important;
  -webkit-align-items: flex-start !important;
  margin-bottom: 1.6rem;
}
.hd-menu-info-f:last-child {
  margin-bottom: 0;
}
.hd-menu-info-f .icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  margin-right: 0.8rem;
}
.hd-menu-info-f .d-flex {
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: flex-start !important;
  -webkit-align-items: flex-start !important;
}
.hd-menu-info-f .label {
  margin-bottom: 0.4rem;
}
.ft .mona-logo img {
  max-height: 100%;
}
body.hd-transparent .ft .corp-name {
  color: #7c0fd1;
}
body.web-design .ft-label {
  color: #7c0fd1;
}
.ft .ft-col.solution-col .ft-row {
  width: calc(100% + 2.4rem);
  margin-left: -1.2rem;
}
@media screen and (min-width: 1201px) {
  .ft-col .widget_nav_menu ul li a:hover {
    color: var(--secColor);
  }
  .popup .seoadv {
    padding: 7.8125vw 2.86458vw;
    padding-bottom: 4.1666vw;
  }
}
@media screen and (max-width: 1200px) {
  .ft .ft-col.solution-col .ft-row {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
  }
  .blogtc2-img {
    width: 100%;
  }
  .blogtc2-box {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .ft .ft-col.solution-col .ft-row {
    width: calc(100% + 0.8rem);
    margin-left: -0.4rem;
  }
}
.ft-if-logo {
  height: 2.4rem;
}
.ft-if-logo img {
  object-fit: contain;
}
.ft .menu-item {
  margin-left: 0;
}
.ft .menu-item.current-menu-item a {
  background-color: transparent;
}
.popup .seoadv-title .title {
  font-size: 4rem;
}
.popup .seoadv-left {
  width: 52%;
}
@media screen and (max-width: 1200px) {
  .hd .container {
    padding: 0 1.5rem;
  }
  .menu-item.current-menu-item a {
    background-color: transparent;
  }
  .hd.small .hd-menu .menu-item a {
    color: var(--textColor-1-c);
  }
  .hd.small .hd-menu .menu-item.current-menu-item a {
    color: var(--secColor-c);
  }
}
@media screen and (max-width: 768px) {
  .hd .container {
    padding: 0 0.8rem;
  }
}
.modal-pop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.3s;
}
.modal-pop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.policy-item {
  position: relative;
}
.modal-pop {
  position: absolute;
  right: 2rem;
  bottom: calc(100% + 1.2rem);
}
.modal-pop-wrap {
  width: 45.6rem;
  padding: 2.4rem;
  background: #fff;
  box-shadow: 8px 8px 32px rgba(0, 0, 0, 0.16);
  border-radius: 16px;
}
.modal-pop .modal-pop-close {
  position: absolute;
  top: 2.4rem;
  right: 2.4rem;
  padding: 0.4rem;
  width: 2.4rem;
  height: 2.4rem;
  transition: 0.3s;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.modal-pop-tt {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  max-width: calc(100% - 3.2rem);
}
.modal-pop-desc {
  font-size: 1.4rem;
  color: #8b8b8b;
}
.modal-pop-btn {
  display: flex;
  position: relative;
  margin-top: 3.2rem;
  max-width: max-content;
}
.modal-pop-btn-item {
  display: block;
  padding: 1.4rem 3.2rem;
  border: 0.1rem solid rgba(58, 58, 58, 0.4);
  border-radius: 0.8rem;
  margin-right: 1.6rem;
  min-width: 14.5rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: #3a3a3a;
  text-align: center;
}
.modal-pop-btn-item.get-code {
  background-color: #7c0fd1;
  color: #fff;
}
.modal-pop-btn-item:last-child {
  margin-right: 0;
}
.modal-pop-btn .ani-preview-web {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 6rem;
  transform: translate(100%, -3rem) rotateY(-180deg);
}
.mona-contact.fix {
  overflow: hidden;
}
@media screen and (min-width: 1201px) {
  .modal-pop .modal-pop-close:hover {
    border-color: #7c0fd1;
  }
  .modal-pop-btn-item.get-code:hover,
  .modal-pop-btn-item:hover {
    background-color: #f58635;
    color: #fff !important;
    border-color: transparent !important;
  }
  .sample-nine-func-list .wpcf7-list-item label:hover {
    background: #f9f1ff;
  }
  .sample-nine-func-list .wpcf7-list-item label:hover .wpcf7-list-item-label {
    color: #7c0fd1;
  }
}
@media screen and (max-width: 1200px) {
  .modal-pop {
    right: 1.6rem;
  }
  .modal-pop .preview-web {
    display: block;
  }
  .popup .seoadv-left {
    width: 100%;
  }
  .popup .seoadv-content {
    flex-direction: column;
  }
  .popup .seoadv-title {
    width: 70%;
  }
  .popup .mona-contact-desc {
    width: 100%;
    text-align: center;
    margin-top: 1.2rem;
  }
  .popup .fcts-mid {
    width: 100%;
  }
  .popup .seoadv-img {
    top: 30%;
    bottom: unset;
    transform: translateX(20%);
  }
  .seoadv-content {
    margin-top: 0;
  }
  .seoadv-flex {
    flex-direction: row;
  }
  .seoadv-title {
    width: 100%;
  }
  .seoadv-left {
    width: 45%;
  }
  .seoadv-right {
    width: 45%;
  }
  .seoadv-title .title {
    font-size: 2.4rem;
    text-align: left;
  }
  .fcts-mid-gr {
    margin-bottom: 1.2rem;
  }
  .fcts-mid-link {
    border-radius: 1.2rem;
    padding: 1.6rem;
  }
  .fcts-mid-link .text {
    font-size: 1.6rem;
  }
  .fcts-mid-link .icon {
    width: 4.8rem;
    height: 4.8rem;
  }
  .fcts-content .title {
    margin-bottom: 2.2rem;
  }
  .fcts-top-fl {
    flex-direction: column;
    gap: 3.2rem;
  }
  .fcts-mid-left {
    width: 65%;
  }
  .fcts-mid-right {
    width: 31%;
  }
  .fcts-top-fl-item {
    width: 100%;
  }
  .popup .sec-seoadv {
    border-radius: 1.6rem;
  }
}
@media screen and (max-width: 1000px) {
  #contact-information .fcts-left,
  #contact-information .fcts-right {
    width: 100%;
  }
}
@media screen and (max-width: 900px) {
  .popup .seoadv-img {
    display: none;
  }
  .sec-seoadv .fcts-mid-left {
    width: 100%;
  }
  .fcts-mid-control {
    max-width: 100%;
  }
  .popup .seoadv-title .title {
    font-size: 2.4rem;
  }
  .popup .seoadv-flex {
    gap: 2.4rem;
  }
  .popup .mona-contact-desc br {
    display: none;
  }
}
@media screen and (max-width: 850px) {
  .seoadv-flex {
    flex-direction: column;
  }
  .seoadv-left,
  .seoadv-right {
    width: 100%;
  }
  .seoadv-title .title {
    width: 70%;
    margin: 0 auto;
    text-align: center;
  }
  .seoadv-title .mona-contact-desc {
    text-align: center;
    margin-top: 2.4rem;
  }
  .seoadv-decor {
    display: none;
  }
  .seoadv-img {
    top: 20%;
    bottom: unset;
    transform: translateX(40%);
  }
}
@media screen and (max-width: 768px) {
  .modal-pop {
    right: unset;
    left: 0;
  }
  .seoadv-img {
    display: none;
  }
  .sec-seoadv .fcts-mid-left {
    width: 100%;
  }
  .fcts-mid-control {
    max-width: 100%;
  }
  .seoadv-py {
    padding: 1.2rem;
    border-radius: 0.8rem;
  }
  .seoadv-input {
    padding: 0 0.8rem;
  }
  .ft .f-signature .mona-logo {
    width: 17rem;
  }
}
.ft-col {
  margin-bottom: 8rem;
}
@media screen and (max-width: 1200px) {
  .ft-col {
    margin-bottom: 2.4rem;
  }
}
.hl-purple {
  color: #3a3a3a;
}
@media screen and (max-width: 500px) {
  .hl-purple br {
    display: none;
  }
}
.ft .hd-menu-info-f .label {
  margin-bottom: 0.4rem;
}
.ft-hl-img {
  position: relative;
}
.ft-hl-img .inner {
  position: relative;
  padding-top: 84.2729970326%;
}
.ft-hl-img .inner img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2.4rem;
}
.ft-hl-gr {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  flex-direction: column;
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 1;
}
.ft .ft-hl-gr {
  bottom: 0;
}
.ft-hl-avt {
  width: 90%;
}
.ft-hl-avt img {
  display: block;
}
.ft-hl-phone {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: inline-block;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  padding: 0 1.2rem;
}
.ft-hl-phone .text {
  padding: 1.2rem 0.8rem;
  padding-bottom: 0.4rem;
  font-size: 5.6rem;
  color: #fff;
  font-family: "Bebas Neue";
  background: #f41e92;
  border-radius: 0.8rem;
  line-height: 1;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
@media only screen and (max-width: 1200px) {
  .ft-hl-phone .text {
    font-size: 5.1rem;
  }
}
@media only screen and (max-width: 800px) {
  .ft-hl-phone .text {
    font-size: 4rem;
  }
}
.ft .ft-hl-decor {
  position: absolute;
  top: 0;
  left: 0;
  bottom: unset;
  width: max-content;
  transform: translate(-40%, 65%) rotate(-7.22deg);
  z-index: -1;
}
@media screen and (max-width: 500px) {
  .ft .ft-hl-decor {
    transform: translate(25%, 82%) rotate(-7.22deg);
  }
}
.ft .ft-hl-decor .text {
  font-family: "SVN-Just Saying";
  font-size: 3.2rem;
  color: #3a3a3a;
  line-height: 1;
  text-align: center;
  display: inline-block;
  transform: rotate(-12deg);
}
@media only screen and (max-width: 1200px) {
  .ft .ft-hl-decor .text {
    font-size: 2.7rem;
  }
}
@media only screen and (max-width: 800px) {
  .ft .ft-hl-decor .text {
    font-size: 2.2rem;
  }
}
.ft .ft-hl-line {
  position: absolute;
  width: 150%;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(352deg);
  transform: translate(-45%, -50%) rotateY(180deg);
  z-index: -1;
}
.ft .ft-hl-line img {
  display: block;
}
.ft-if {
  padding: 3.2rem 0;
  position: relative;
  overflow: hidden;
}
.ft-if-top {
  margin-bottom: 3.2rem;
}
.ft-if::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 0.2rem;
  left: 0;
  background: url(../assets/images/Line-201.png) no-repeat;
  background-size: 100% 100%;
}
.ft-if-flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  margin: 0 -1.2rem;
  flex-wrap: wrap;
}
@media screen and (max-width: 1200px) {
  .ft-if-flex {
    align-items: unset;
  }
}
.ft-if-col {
  width: 25%;
  padding: 0 1.2rem;
}
@media screen and (max-width: 1200px) {
  .ft-if-col {
    width: 33.3333333333%;
  }
  .ft-if-col:first-child {
    width: 100%;
    margin-bottom: 2.4rem;
  }
}
@media screen and (max-width: 650px) {
  .ft-if-col {
    width: 50%;
    margin-bottom: 2.4rem;
  }
  .ft-if-col:last-child {
    width: 100%;
  }
}
.ft-if-gr {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
@media screen and (min-width: 1201px) {
  .ft-if-gr {
    margin-top: 1rem;
  }
}
.ft-if-gr .icon {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
}
.ft-if-gr .text {
  font-size: 1.6rem;
  color: #5f5f5f;
}
.ft-if-box {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: column;
}
.ft-if-logo {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-shrink: 0;
}
.ft-if-logo img {
  width: auto;
  display: block;
  max-width: 100%;
}
.ft-if-text {
  padding-top: 1.6rem;
}
@media screen and (max-width: 1200px) {
  .ft-if-text {
    flex-direction: column;
    margin-top: auto;
    display: flex;
  }
}
@media screen and (max-width: 768px) {
  .ft-if-text {
    padding-top: 1.2rem;
  }
}
.ft-if-text .text {
  font-weight: 500;
  font-size: 1.5rem;
  color: #5f5f5f;
}
.ft-if-text .tphone {
  font-size: 1.6rem;
  font-weight: 700;
  color: #7c0fd1;
}
.ft-if-bank {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}
.ft-if-bank .text {
  font-size: 1.6rem;
  color: #5f5f5f;
}
.ft-if-bank .icon {
  width: 3.6rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  flex-shrink: 0;
}
.ft-if-tbank {
  font-weight: 700;
  font-size: 1.5rem;
  color: #2686ec;
}
.ft-corp {
  margin-top: unset;
}
@media screen and (max-width: 1200px) {
  .hotline-col {
    margin-top: 0;
    padding-bottom: 2.4rem;
  }
  .hotline-col .ft-hl-gr {
    position: relative;
  }
  .hotline-col .ft-hl-img {
    width: 34rem;
    max-width: 100%;
  }
  .ft .ft-hl-img .inner {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
.ft .hd-menu-info {
  display: block;
  padding: unset;
  font-size: 1.6rem;
}
@media screen and (max-width: 500px) {
  .contact-col,
  .contact-col.ft-col,
  .hotline-col,
  .hotline-col .ft-hl-img,
  .hotline-col.ft-col,
  .hotline-col.ft-col .ft-hl-img {
    width: 100%;
  }
}
@media screen and (min-width: 1201px) {
  .ft-if-bot .ft-if-gr {
    margin-top: -2.6rem;
  }
}
@media screen and (max-width: 1200px) {
  .blogtc2-control {
    bottom: unset;
    top: 100%;
  }
}
@media screen and (max-width: 1200px) {
  .sec-blogtc2 .blogt-wrap {
    min-height: unset;
  }
}
@media screen and (max-width: 1200px) {
  .sec-blogpc3 .blogpc3-top {
    margin-top: unset;
    padding-top: 2.4rem;
  }
}
.ft-if-gr .icon img {
  object-fit: contain;
}
.ft-license-col .widget_nav_menu .mona-head-title.mona-widget-title {
  display: none;
}
.ft-license-col .widget_nav_menu ul {
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .ft-license-col .widget_nav_menu ul {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
  }
}
.ft-license-col .widget_nav_menu ul li {
  padding: 0.4rem 2rem;
}
.ft-col .widget_nav_menu .mona-head-title.mona-widget-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #7c0fd1;
}
@media screen and (max-width: 1200px) {
  .ft-col .widget_nav_menu .mona-head-title.mona-widget-title {
    font-size: 1.6rem;
  }
}
.solution-col .ft-col.col.col-6 {
  width: 50%;
}
@media screen and (max-width: 360px) {
  .solution-col .ft-col.col.col-6 {
    width: 100%;
  }
}
.ft-col .widget_nav_menu ul {
  margin-top: 1.6rem;
}
.ft-col .widget_nav_menu ul li.current-menu-item a {
  font-weight: 600;
  color: #f58635;
}
.ft-col .widget_nav_menu ul li a {
  display: block;
  padding: 0.8rem 0;
  transition: 0.3s;
}
.ft-col.col-6 .hd-menu-info > * {
  align-items: center;
}
@media screen and (max-width: 600px) {
  .ft-col.col-6.contact-col .ft-menu-list-col {
    width: 100%;
  }
}
.social-fixed {
  position: fixed;
  z-index: 100;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: 0.3s linear;
  opacity: 0;
}
.social-fixed.active {
  opacity: 1;
  right: 2.8rem;
}
@media (max-width: 1500px) {
  .social-fixed.active {
    right: 1.5rem;
  }
}
@media (max-width: 1200px) {
  .social-fixed {
    display: none;
  }
}
.social-fixed-item {
  margin-top: 2.4rem;
}
.social-fixed-item a {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: #7c0fd1;
}
.back__to__top {
  display: block;
  width: 4rem;
  height: 6rem;
  position: fixed;
  bottom: 0;
  right: 1.5rem;
  z-index: 200;
  transform: translateY(3rem);
  opacity: 0;
  transition: 0.5s linear;
  cursor: pointer;
  visibility: hidden;
}
.back__to__top.active {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}
@media (max-width: 1200px) {
  .back__to__top {
    width: 2rem;
    height: 4rem;
    right: 0.8rem;
    z-index: 199;
  }
}
.back__to__top::after {
  content: "GO TOP";
  color: #f58635;
  white-space: nowrap;
  transform: translateX(0.4rem) rotate(-90deg);
  position: absolute;
  bottom: calc(100% + 1.5rem);
  transition: 0.3s;
  font-family: "Bebas Neue", sans-serif;
  line-height: 1;
}
@media (max-width: 1200px) {
  .back__to__top::after {
    transform: translateX(-0.5rem) rotate(-90deg);
  }
}
.back__to__top .triangle {
  display: block;
  width: 100%;
  height: 6rem;
  z-index: 2;
  flex-shrink: 0;
  position: absolute;
  transition: 0.3s;
  overflow: hidden;
}
.back__to__top .triangle::after {
  content: "";
  position: absolute;
  left: 45%;
  width: 0.2rem;
  height: 6rem;
  background-color: #f58635;
}
.back__to__top .triangle:nth-child(1) {
  display: none;
}
.back__to__top .triangle:nth-child(2)::after {
  bottom: 0;
  animation: GOTOP3 1.2s linear 0.2s infinite;
}
.back__to__top .triangle:nth-child(3)::after {
  animation: GOTOP3 linear 2s infinite;
}
@media only screen and (min-width: 1201px) {
  .back__to__top:hover {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }
}
@media (max-width: 450px) {
  .hd-social {
    width: calc(25% + 1rem);
  }
}
@media (max-width: 1200px) {
  .hd-social .social-item {
    margin-left: 1.4rem;
  }
  .hd-social .social-item a {
    width: 2.2rem;
    height: 2.2rem;
  }
  .hd-social .social-item a img {
    padding: 0.2rem;
  }
}
.social-list {
  margin-bottom: -1.6rem;
}
.social-item {
  margin-right: 1.6rem;
  margin-bottom: 1.6rem;
  transition: 0.3s ease;
}
@media screen and (min-width: 1201px) {
  .social-item:hover {
    transform: translateY(-0.5rem);
  }
}
.social-item a {
  width: 3.2rem;
  height: 3.2rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.social-item a img {
  object-fit: contain;
}
.ft-col.col-6 .social-list {
  opacity: 0.5;
}
.ft-license-col .social-list {
  margin-left: 6rem;
}
@media screen and (max-width: 1200px) {
  .ft-license-col .social-list {
    margin-left: 2.4rem;
  }
}
@media screen and (max-width: 768px) {
  .ft-license-col .social-list {
    margin-left: 0;
  }
}
.ft-license-col .social-list img {
  filter: brightness(0) invert(0.5);
  -webkit-filter: brightness(0) invert(0.5);
}
.social-fixed {
  position: fixed;
  z-index: 100;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: 0.3s linear;
  opacity: 0;
}
.social-fixed.active {
  opacity: 1;
  right: 2.8rem;
}
@media (max-width: 1500px) {
  .social-fixed.active {
    right: 1.5rem;
  }
}
@media (max-width: 1200px) {
  .social-fixed {
    display: none;
  }
}
.social-fixed-item {
  margin-top: 2.4rem;
}
.social-fixed-item a {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: #7c0fd1;
}
.blog-large-author .author-social {
  width: 33.3333333333%;
}
@media screen and (max-width: 600px) {
  .blog-large-author .author-social {
    margin-top: 2.4rem;
    width: 100%;
  }
}
.blog-large-author .author-social .social-list {
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  margin-top: 1.5rem;
}
@media screen and (max-width: 600px) {
  .blog-large-author .author-social .social-list {
    margin-top: 0;
    margin-bottom: -0.8rem;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
  }
}
.blog-large-author .author-social .social-item {
  margin-right: 0;
  margin-left: 1.6rem;
  opacity: 0.4;
}
@media screen and (max-width: 600px) {
  .blog-large-author .author-social .social-item {
    margin-left: 0;
    margin-right: 0.8rem;
    margin-bottom: 0.8rem;
  }
}
@media screen and (min-width: 1201px) {
  .blog-large-author .author-social .social-item:hover {
    opacity: 1;
  }
}
.author-social {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.author-social-link {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 100rem;
  transition: 0.2s ease-in-out;
  opacity: 0.7;
}
@media (hover: hover) {
  .author-social-link:hover {
    transform: translateY(-5px);
  }
}
.author-social-link img {
  object-fit: unset;
}
.author-top {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
}
.author-one {
  overflow: hidden;
}
.author-one-side {
  align-items: flex-end;
}
.author-one-left {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .author-one-left {
    width: 100%;
  }
}
.author-one-right {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .author-one-right {
    width: 100%;
  }
}
.author-one-info {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
}
.author-one-info-ava {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 100rem;
}
.author-one-content {
  padding: 12rem 0;
}
@media screen and (max-width: 1200px) {
  .author-one-content {
    padding: 4rem 0;
  }
}
.author-one-name {
  font-size: 3.2rem;
  font-weight: 700;
  color: #3a3a3a;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
@media only screen and (max-width: 1200px) {
  .author-one-name {
    font-size: 2.7rem;
  }
}
@media only screen and (max-width: 800px) {
  .author-one-name {
    font-size: 2.2rem;
  }
}
.author-one-name img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 100rem;
  position: relative;
}
@media screen and (max-width: 800px) {
  .author-one-name img {
    width: 2.4rem;
    height: 2.4rem;
    top: 0.2rem;
  }
}
.author-one-tag {
  display: flex;
  flex-wrap: wrap;
}
.author-one-tag-item {
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 500;
  color: #fff;
  padding: 0.8rem 1.6rem;
  border-radius: 0.8rem;
  background-color: #7c0fd1;
}
.author-one-des {
  color: #5f5f5f;
  margin: 2.4rem 0;
}
.author-one-img {
  height: 100%;
  position: relative;
}
@media screen and (min-width: 1201px) {
  .author-one-img {
    width: calc(100% + 7.5rem);
  }
}
.author-one-img-inner {
  margin-left: 5.5rem;
  position: relative;
  z-index: 5;
}
.author-one-img-inner .img {
  display: block;
  padding-top: calc((573 / 724) * 100%);
  position: relative;
  overflow: hidden;
}
.author-one-img-inner .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-one-line {
  position: absolute;
  top: 5%;
  left: 0;
  width: 45%;
}
.author-one-line .line {
  stroke-dashoffset: 821.3475952148px;
  stroke-dasharray: 821.3475952148px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
    0s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
.author-one-line.active .line {
  stroke-dashoffset: 0;
}
.author-one-cirle {
  position: absolute;
  width: 60%;
  padding-top: 60%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  bottom: 0;
}
.author-one-cirle .inner {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}
.author-one-cirle img {
  width: 100%;
  height: 100%;
  animation: rotate-animation 30s linear;
}
.author-one-cirle-blue {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  padding-top: 90%;
  transform: translateY(35%) rotate(-18deg);
  z-index: 2;
}
.author-one-cirle-blue .inner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
}
.author-one-cirle-blue .inner::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background-color: #2686ec;
  border-radius: 100rem;
}
.author-one-cirle-pink {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80%;
  padding-top: 80%;
  transform: translate(14%, 32%) rotate(5deg);
}
.author-one-cirle-pink .inner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
}
.author-one-cirle-pink .inner::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background-color: #f41e92;
  border-radius: 100rem;
}
.author-two-img {
  height: 53.2407407407vw;
  overflow: hidden;
}
.author-two-img img {
  position: relative;
  transition: none;
}
@media screen and (max-width: 1200px) {
  .author-three-slider {
    padding-bottom: 1.2rem;
  }
}
.author-three-slider .swiper {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
}
.author-three-slider .swiper-slide {
  width: 46rem;
}
.author-three-slider .swiper-control-btn {
  top: 40% !important;
}
@media (hover: hover) {
  .author-three .blogvc2-inner:hover .blogvc2-content-py {
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.08);
  }
}
.author-three .blogvc2-content-py {
  box-shadow: none;
}
.author-three .blogtc2-bot {
  flex-wrap: wrap;
}
.author-four-left {
  width: 50%;
}
@media screen and (max-width: 700px) {
  .author-four-left {
    width: 100%;
  }
}
.author-four-right {
  width: 50%;
}
@media screen and (max-width: 700px) {
  .author-four-right {
    width: 100%;
  }
}
.author-four-note {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.author-four-note-item {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 500;
  color: #3a3a3a;
  gap: 1rem;
}
.author-four-note-item:not(:first-child) {
  padding-left: 1.6rem;
  border-left: 0.1rem solid #5f5f5f;
}
.author-four-note-item img {
  width: 1.6rem;
  height: 1.6rem;
}
.author-four-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1201px) {
  .author-four-content {
    max-width: 57.6rem;
  }
}
.author-four-content .tag-list {
  margin-top: 2.4rem;
  border: none;
  padding-top: 0;
  margin-bottom: 1.6rem;
}
.author-four-more {
  margin-top: auto;
  font-weight: 500;
  width: fit-content;
  border-bottom: 0.2rem solid rgba(58, 58, 58, 0.2);
  transition: 0.3s ease-in-out;
}
@media (hover: hover) {
  .author-four-more:hover {
    color: #7c0fd1;
  }
}
.author-four-img {
  display: block;
  padding-top: calc((522 / 696) * 100%);
  position: relative;
  overflow: hidden;
  border-radius: 2.4rem;
}
@media (hover: hover) {
  .author-four-img:hover img {
    transform: translate(-50%, -50%) scale(1.05);
    -webkit-transform: translate(-50%, -50%) scale(1.05);
    -moz-transform: translate(-50%, -50%) scale(1.05);
    -o-transform: translate(-50%, -50%) scale(1.05);
  }
}
.author-four-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-seven-slider .swiper-slide {
  width: 35rem;
}
.author-seven-img {
  display: block;
  padding-top: calc((252 / 336) * 100%);
  position: relative;
  overflow: hidden;
  border-radius: 1.6rem;
}
@media (hover: hover) {
  .author-seven-img:hover img {
    transform: translate(-50%, -50%) scale(1.05);
    -webkit-transform: translate(-50%, -50%) scale(1.05);
    -moz-transform: translate(-50%, -50%) scale(1.05);
    -o-transform: translate(-50%, -50%) scale(1.05);
  }
}
.author-seven-img:not(img) {
  background-color: #f9f1ff;
}
.author-seven-content {
  margin-top: 1.6rem;
}
.author-seven-note {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.author-seven-note-item {
  color: #5f5f5f;
  font-size: 1.6rem;
}
.author-seven-note-item:not(:first-child) {
  padding-left: 0.8rem;
  border-left: 0.1rem solid #5f5f5f;
}
.author-seven-name {
  font-size: 2.4rem;
  font-weight: 600;
  margin-top: 0.8rem;
  margin-bottom: 0.4rem;
}
@media only screen and (max-width: 1200px) {
  .author-seven-name {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 800px) {
  .author-seven-name {
    font-size: 1.7rem;
  }
}
.author-seven-name img {
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
}
.author-seven-level {
  font-size: 1.6rem;
  color: #8b8b8b;
}
.popup {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: 0.3s;
}
.popup.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.popup.w-80 {
  width: 80rem;
}
.popup-success.popup.w-80 {
  width: 51.3rem;
}
.popup-success .popup-wrap {
  padding: 3.5rem;
}
.popup-success .popup-header {
  margin-bottom: 0;
}
.popup-success .popup-img {
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  overflow: hidden;
}
.popup-success .title {
  text-align: center;
  margin-bottom: 2.6rem;
}
.popup-success .popup-desc {
  text-align: center;
  color: #4a4a4a;
  font-size: 1.6rem;
  margin-bottom: 4rem;
}
.popup-success .popup-btn {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.popup-wrap {
  position: relative;
  width: 117.6rem;
  max-width: 90vw;
}
.popup-header {
  margin-bottom: 4rem;
}
.popup-header .title {
  font-size: 2rem;
  font-weight: 700;
  color: #4a4a4a;
}
@media only screen and (max-width: 1200px) {
  .popup-header .title {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 800px) {
  .popup-header .title {
    font-size: 1.6rem;
  }
}
.popup-header .close-pop {
  position: absolute;
  top: 0;
  right: 0;
  width: 5.6rem;
  height: 5.6rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  cursor: pointer;
  transition: 0.3s;
}
@media (min-width: 1201px) {
  .popup-header .close-pop:hover {
    background-color: rgba(0, 0, 0, 0.16);
  }
}
.popup-header .close-pop img {
  max-width: max-content;
  height: auto;
}
.popup-bg {
  position: fixed;
  z-index: 900;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: 0.3s;
}
.popup-bg.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.form .f-r {
  margin-bottom: 2.4rem;
}
.form .f-r:last-child {
  margin-bottom: 0;
}
.form .f-c {
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: flex-start;
  -webkit-align-items: flex-start;
}
.form .f-c-file {
  flex: 1;
  position: relative;
  min-height: 15rem;
  border: 1px dashed #c9c9c9;
  cursor: pointer;
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  flex-direction: column;
  -webkit-flex-direction: column;
  padding: 1.2rem;
}
.form .f-c-file-content {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  flex-direction: column;
  -webkit-flex-direction: column;
  text-align: center;
  width: 100%;
  height: 100%;
}
.form .f-c-file-content img {
  width: 2.4rem;
  height: auto;
  margin-bottom: 1.5rem;
}
.form .f-c .label {
  display: block;
  min-width: 10rem;
  margin-right: 2.4rem;
  flex-shrink: 0;
  margin-top: 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #4a4a4a;
}
.form .f-c input,
.form .f-c textarea {
  width: 100%;
  flex: 1;
  border: 1px solid #c9c9c9;
  min-height: 4.2rem;
  padding: 0 1.5rem;
}
.form .f-c input[type="file"],
.form .f-c textarea[type="file"] {
  min-height: 13.8rem;
  border-style: dashed;
  cursor: pointer;
  display: none;
}
@media (min-width: 1201px) {
  .form .f-c input[type="file"]:hover,
  .form .f-c textarea[type="file"]:hover {
    border-color: #7c0fd1;
  }
}
.form .f-btn {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
.file-chooser {
  width: 100%;
  height: 100%;
  position: relative;
}
.hidden-inputs.hidden {
  display: none;
}
.file-list {
  width: 100%;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.file-item,
.file-list {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  margin-top: 1rem;
}
.file-item {
  margin-right: 1rem;
  padding-right: 1rem;
  border-right: 1px solid #4a4a4a;
  color: #3a3a3a;
}
.file-item:last-child {
  border: unset;
}
.file-item .file-list__name {
  margin-right: 0.8rem;
}
.file-item .removal-button {
  background-color: red;
  color: #fff;
  width: 1.8rem;
  height: 1.8rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
}
@media (min-width: 1201px) {
  .file-item .removal-button:hover {
    box-shadow: 1px 1px 3px #000;
  }
}
.popup .sec-seoadv {
  background: #faf4ff;
  border-radius: 3.2rem;
  position: relative;
  margin-top: 0;
  z-index: 1;
  max-height: 95vh;
  overflow: hidden auto;
}
@media screen and (max-width: 1200px) {
  .popup .sec-seoadv {
    border-radius: 0;
  }
}
.popup .seoadv {
  padding: 15rem 5.5rem;
  padding-bottom: 8rem;
  height: 100%;
}
@media screen and (max-width: 1500px) {
  .popup .seoadv {
    padding: 12rem 3.2rem;
    padding-bottom: 5.6rem;
  }
}
@media screen and (max-width: 1200px) {
  .popup .seoadv {
    padding: 4rem 0.8rem;
  }
}
.popup .seoadv-bgdecor {
  position: absolute;
  width: 85%;
  bottom: 0;
  left: 0;
}
.popup .seoadv-bgdecor > img {
  display: block;
}
.popup .seoadv-content {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 1200px) {
  .popup .seoadv-content {
    flex-direction: column-reverse;
    margin-top: 0;
  }
}
@media screen and (max-width: 1200px) {
  .popup .seoadv-img {
    width: 24rem;
  }
}
.popup .seoadv-decor {
  position: absolute;
  top: 40%;
  left: 100%;
  transform: translateY(-50%);
  width: 10%;
}
@media screen and (max-width: 600px) {
  .popup .seoadv-decor {
    display: none;
  }
}
.popup .seoadv-title {
  position: relative;
}
@media screen and (max-width: 1200px) {
  .popup .seoadv-title {
    width: 50rem;
    max-width: 100%;
    margin: 0 auto;
  }
}
.popup .seoadv-title .title {
  font-size: 4.6rem;
  font-weight: 700;
  color: #3a3a3a;
}
@media screen and (max-width: 1500px) {
  .popup .seoadv-title .title {
    font-size: 3.8rem;
  }
}
@media screen and (max-width: 1200px) {
  .popup .seoadv-title .title {
    text-align: center;
  }
}
@media screen and (max-width: 450px) {
  .popup .seoadv-title .title {
    font-size: 2.6rem;
  }
}
.popup .seoadv-title .text {
  display: inline-block;
  position: relative;
  color: #fff;
  padding: 0 0.4rem;
  z-index: 1;
}
.popup .seoadv-title .text::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #7c0fd1;
  border-radius: 0.4rem;
  z-index: -1;
  opacity: 1;
}
.popup .seoadv-img {
  width: 70%;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 1200px) {
  .popup .seoadv-img {
    width: 50%;
  }
}
.popup .seoadv-flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  margin: 0 -1.5rem;
}
@media screen and (max-width: 1200px) {
  .popup .seoadv-flex {
    flex-direction: column;
    gap: 4rem;
  }
}
.popup .seoadv-left {
  width: 50%;
  padding: 0 1.5rem;
}
@media screen and (max-width: 1200px) {
  .popup .seoadv-left {
    width: 100%;
  }
}
.popup .seoadv-right {
  width: 42%;
  padding: 0 1.5rem;
}
@media screen and (max-width: 1200px) {
  .popup .seoadv-right {
    width: 100%;
  }
}
.popup .seoadv-wrap {
  margin: 0 auto;
  width: 100%;
}
.popup .seoadv-py {
  padding: 2.4rem;
  background: #fff;
  border-radius: 1.6rem;
  position: relative;
}
@media screen and (max-width: 600px) {
  .popup .seoadv-py {
    padding: 1.6rem;
  }
}
.popup .seoadv-text {
  position: absolute;
  right: 0;
  bottom: 100%;
  transform: translate(0, -10%) rotate(11.08deg);
}
@media screen and (max-width: 1200px) {
  .popup .seoadv-text {
    display: none;
  }
}
.popup .seoadv-text .text {
  font-size: 4.8rem;
  font-weight: 700;
  color: #3a3a3a;
  display: inline-block;
}
@media screen and (max-width: 1500px) {
  .popup .seoadv-text .text {
    font-size: 3.2rem;
  }
}
.popup .seoadv-svg {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  left: 50%;
}
.popup .seoadv-svg svg {
  display: block;
  width: 100%;
  height: auto;
}
.popup .seoadv-svg svg .svg-elem-1 {
  stroke-dashoffset: 794.158203125px;
  stroke-dasharray: 794.158203125px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
    0s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
.popup .seoadv-svg svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
}
.popup .seoadv-control:not(:last-child) {
  margin-bottom: 1.6rem;
}
.popup .seoadv-gr {
  position: relative;
  height: 5.6rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  border-bottom: 0.1rem solid #e0e0e0;
}
.popup .seoadv-gr .select2-selection__rendered {
  color: #b8b8b8 !important;
  padding: 0 2rem !important;
  padding-top: 0 !important;
  font-size: 1.6rem !important;
}
.popup .seoadv-gr .select2-selection .select2-selection__rendered {
  color: #3a3a3a !important;
}
.popup
  .seoadv-gr
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  transform: translateY(-50%);
}
.popup .seoadv-input {
  width: 100%;
  font-family: Inter;
  font-size: 1.6rem;
  color: #3a3a3a;
  padding: 0 2rem;
  height: 5.6rem;
  border-bottom: 0.1rem solid #e0e0e0;
  background: 0 0;
  transition: 0.3s ease-in-out;
}
@media screen and (max-width: 1500px) {
  .popup .seoadv-input {
    height: 4.8rem;
  }
}
.popup .seoadv-input::placeholder {
  color: #b8b8b8;
}
.popup .seoadv-input:focus {
  background: #f7f7f7;
  border-bottom-color: #5f5f5f;
}
@media screen and (max-width: 600px) {
  .popup .seoadv-input {
    padding: 0 1.2rem;
  }
}
.popup .seoadv-area {
  width: 100%;
  font-family: Inter;
  font-size: 1.6rem;
  color: #3a3a3a;
  padding: 0 2rem;
  padding-top: 1.6rem;
  min-height: 14rem;
  border-bottom: 0.1rem solid #e0e0e0;
  background: 0 0;
  transition: 0.3s ease-in-out;
}
@media screen and (max-width: 1500px) {
  .popup .seoadv-area {
    min-height: 10rem;
  }
}
.popup .seoadv-area::placeholder {
  color: #b8b8b8;
}
.popup .seoadv-area:focus {
  background: #f7f7f7;
  border-bottom-color: #5f5f5f;
}
.popup .seoadv-btn {
  width: 100%;
  background: unset;
  cursor: pointer;
}
.popup .seoadv-btn .btn-second {
  width: 100%;
}
@media screen and (max-width: 1500px) {
  .popup .seoadv-btn .btn-second {
    height: 5.6rem;
  }
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.text-ani {
  display: inline-block;
  position: relative;
  text-align: center;
}
.text-ani.bg-blue::after {
  background: linear-gradient(to top, #1ec0f2 50%, transparent 50%);
}
.text-ani.bg-blue.bg-orange::after {
  background: linear-gradient(to top, #f5851e 50%, transparent 50%);
}
.text-ani::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
  animation: 5s highlight 1.5s infinite alternate;
  border-radius: 0.2rem;
}
.popup-close {
  position: absolute;
  z-index: 5;
  top: 2.4rem;
  right: 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
  background-color: #7c0fd1;
  border-radius: 50%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  transition: 0.3s;
}
@media screen and (max-width: 1200px) {
  .popup-close {
    top: 1rem;
    right: 1rem;
  }
}
@media screen and (min-width: 1201px) {
  .popup-close:hover {
    background-color: #f58635;
  }
}
.popup-close img {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
}
.popup-service {
  transition: 0.3s linear;
  top: 50%;
}
.popup-service .popup-wrap {
  width: 100%;
}
.popup-service .popup-close {
  top: 1.2rem;
  right: 1.2rem;
  background-color: #fff;
}
@media screen and (min-width: 1201px) {
  .popup-service .popup-close:hover {
    background-color: #f58635;
  }
}
.popup-service .popup-close img {
  filter: brightness(0.3);
  -webkit-filter: brightness(0.3);
}
.popup-service.active {
  top: calc(50% + 4.2rem);
}
.popup-service.active .ani-cus {
  transform: translateY(0);
}
.popup-service-content {
  max-width: 54rem;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 2.4rem;
  padding: 2.4rem;
}
@media screen and (max-width: 1500px) {
  .popup-service-content {
    max-width: 42rem;
  }
}
.popup-service-img {
  position: relative;
  width: 100%;
  padding-top: 77%;
  background-color: #7c0fd1;
  border-radius: 2.4rem;
}
@media screen and (max-width: 1500px) {
  .popup-service-img {
    padding-top: 50%;
  }
}
.popup-service-img .img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70%;
  height: auto;
}
@media screen and (max-width: 1500px) {
  .popup-service-img .img {
    width: 60%;
  }
}
.popup-service-img .img img {
  transition: 1.4s ease-in-out;
}
.popup-service-body {
  margin-top: 2.4rem;
}
.popup-service-body .title {
  font-size: 2.4rem;
  font-weight: 600;
  color: #3a3a3a;
  margin-bottom: 1.6rem;
  overflow: hidden;
}
@media only screen and (max-width: 1200px) {
  .popup-service-body .title {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 800px) {
  .popup-service-body .title {
    font-size: 1.7rem;
  }
}
.popup-service-body .desc {
  margin-bottom: 6.4rem;
  overflow: hidden;
}
@media screen and (max-width: 1500px) {
  .popup-service-body .desc {
    margin-bottom: 4.2rem;
  }
}
.popup-service-btn {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: stretch;
  -webkit-align-items: stretch;
  overflow: hidden;
}
.popup-service-btn .btn-second {
  padding: 2.4rem;
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
@media screen and (max-width: 1500px) {
  .popup-service-btn .btn-second {
    font-size: 1.6rem;
    padding: 0.8rem 1.2rem;
    height: 5.6rem;
  }
}
.mega-menu a {
  border-radius: 0.8rem;
  padding: 0.8rem 1.2rem;
  padding-top: 6.2rem;
}
.mega-menu-box {
  position: fixed;
  width: calc(100vw - 0.7rem);
  left: 0;
  top: 9.4rem;
  transition: 0.3s linear;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(2rem);
  animation: zoomOut 0.3s ease-in-out forwards;
  display: none;
}
@media screen and (max-width: 1200px) {
  .mega-menu-box {
    display: none;
  }
}
.mega-menu-box .container {
  max-width: 144.6rem;
  padding: 0 1.5rem;
}
.mega-menu-box-list {
  align-items: flex-start;
  -webkit-align-items: flex-start;
}
.mega-menu-box-wrap {
  padding: 3.2rem;
  background-color: #fff;
  box-shadow: 0 8px 40px 2px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
}
.mega-menu-box-wrap-item .label {
  font-size: 1.8rem;
  font-weight: 600;
  color: #8b8b8b;
  margin-bottom: 2.4rem;
}
.mega-menu-img {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  padding: 1.2rem;
  border-radius: 0.8rem;
  background-color: #f2f8ff;
  transition: 0.3s;
}
.mega-menu-img img {
  width: 4rem;
  height: 4rem;
}
.mega-menu-txt {
  margin-left: 1.6rem;
  text-transform: initial;
  line-height: 1.2;
}
.mega-menu-txt .title {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
  color: #3a3a3a;
}
.mega-menu-txt .desc {
  display: block;
  font-size: 1.4rem;
  color: #8b8b8b;
  font-weight: 400;
  margin-top: 0.4rem;
}
.hd .menu-item.mega-menu .mega-menu-list {
  position: relative;
  flex: 1;
}
.hd .menu-item.mega-menu .mega-menu-list .mega-menu-cate {
  position: absolute;
  left: 0;
  top: -5rem;
  width: calc(100% - 32rem);
  margin-left: 32rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: 0.3s;
  height: calc(100% + 5rem);
}
.hd .menu-item.mega-menu .mega-menu-list .mega-menu-cate.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.hd .menu-item.mega-menu .mega-menu-list .mega-menu-cate-wrap {
  margin-left: 2.4rem;
  width: calc(100% - 2.4rem);
  padding: 0 !important;
  align-items: flex-start !important;
  -webkit-align-items: flex-start !important;
  background-color: transparent !important;
  box-shadow: unset !important;
}
.hd .menu-item.mega-menu .mega-menu-list .mega-menu-cate-wrap-item .d-flex {
  background-color: transparent !important;
  box-shadow: unset !important;
}
.hd .menu-item.mega-menu .mega-menu-item {
  margin-bottom: 0.6rem;
  width: 32rem;
  cursor: pointer;
}
.hd .menu-item.mega-menu .mega-menu-item.active > .d-flex {
  background-color: #f2f8ff;
  box-shadow: inset 6px 6px 12px rgba(16, 72, 132, 0.12);
}
.hd .menu-item.mega-menu .mega-menu-item .d-flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  padding: 1.6rem 0.8rem;
  padding-right: 0.8rem;
  border-radius: 1.2rem;
  height: 100%;
}
@media screen and (min-width: 1201px) {
  .hd .menu-item.mega-menu .mega-menu-item .d-flex:hover {
    background-color: #f2f8ff;
    box-shadow: inset 6px 6px 12px rgba(16, 72, 132, 0.12);
  }
}
.hd
  .menu-item.mega-menu
  .mega-menu-item:nth-child(5n + 2)
  .d-flex
  .mega-menu-img {
  background-color: #fff5fb;
}
@media screen and (min-width: 1201px) {
  .hd .menu-item.mega-menu .mega-menu-item:nth-child(5n + 2) .d-flex:hover {
    background-color: #fff5fb;
    box-shadow: inset 6px 6px 12px rgba(208, 45, 134, 0.12);
  }
}
.hd .menu-item.mega-menu .mega-menu-item:nth-child(5n + 2).active > .d-flex {
  background-color: #fff5fb;
  box-shadow: inset 6px 6px 12px rgba(208, 45, 134, 0.12);
}
.hd
  .menu-item.mega-menu
  .mega-menu-item:nth-child(5n + 3)
  .d-flex
  .mega-menu-img {
  background-color: #faf3ff;
}
@media screen and (min-width: 1201px) {
  .hd .menu-item.mega-menu .mega-menu-item:nth-child(5n + 3) .d-flex:hover {
    background-color: #faf3ff;
    box-shadow: inset 6px 6px 12px rgba(16, 72, 132, 0.12);
  }
}
.hd .menu-item.mega-menu .mega-menu-item:nth-child(5n + 3).active > .d-flex {
  background-color: #faf3ff;
  box-shadow: inset 6px 6px 12px rgba(16, 72, 132, 0.12);
}
.hd
  .menu-item.mega-menu
  .mega-menu-item:nth-child(5n + 4)
  .d-flex
  .mega-menu-img {
  background-color: #edfbff;
}
@media screen and (min-width: 1201px) {
  .hd .menu-item.mega-menu .mega-menu-item:nth-child(5n + 4) .d-flex:hover {
    background-color: #edfbff;
    box-shadow: inset 6px 6px 12px rgba(32, 140, 173, 0.12);
  }
}
.hd .menu-item.mega-menu .mega-menu-item:nth-child(5n + 4).active > .d-flex {
  background-color: #edfbff;
  box-shadow: inset 6px 6px 12px rgba(32, 140, 173, 0.12);
}
.hd
  .menu-item.mega-menu
  .mega-menu-item:nth-child(5n + 5)
  .d-flex
  .mega-menu-img {
  background-color: #fff6ed;
}
@media screen and (min-width: 1201px) {
  .hd .menu-item.mega-menu .mega-menu-item:nth-child(5n + 5) .d-flex:hover {
    background-color: #fff6ed;
    box-shadow: inset 6px 6px 12px rgba(194, 113, 39, 0.12);
  }
}
.hd .menu-item.mega-menu .mega-menu-item:nth-child(5n + 5).active > .d-flex {
  background-color: #fff6ed;
  box-shadow: inset 6px 6px 12px rgba(194, 113, 39, 0.12);
}
.mega-menu-box-wrap-item.mega-service {
  width: 70%;
}
.mega-menu-box-wrap-item.mega-service .mega-menu-list {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
.mega-menu-box-wrap-item.mega-service .mega-menu-item {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
  max-width: calc(100% - 0.8rem);
}
.mega-menu-box-wrap-item.mega-service .mega-menu-item.active .d-flex {
  background-color: transparent !important;
  box-shadow: unset !important;
}
.mega-menu-box-wrap-item.mega-service
  .mega-menu-item.active
  .d-flex
  .mega-menu-txt
  .title {
  color: #7c0fd1 !important;
}
.mega-menu-box-wrap-item.mega-service .d-flex {
  padding: 1.6rem 0 !important;
}
.mega-menu-box-wrap-item.mega-service .d-flex .mega-menu-txt .title {
  font-size: 1.6rem;
  font-weight: 400;
  color: #5f5f5f;
}
@media screen and (min-width: 1201px) {
  .mega-menu-box-wrap-item.mega-service .d-flex:hover {
    background-color: transparent !important;
    color: #7c0fd1 !important;
    box-shadow: unset !important;
  }
  .mega-menu-box-wrap-item.mega-service .d-flex:hover .mega-menu-txt .title {
    color: #7c0fd1 !important;
  }
}
.mega-menu-box-wrap-item.mega-service .mega-menu-img {
  background-color: transparent;
  padding: 0;
}
.mega-menu-box-wrap-item.mega-service .mega-menu-img img {
  width: 2.4rem;
  height: 2.4rem;
}
.mega-menu-box-wrap-item.mega-service .mega-menu-txt {
  margin-left: 0.8rem;
}
.mega-menu-box-wrap-item.mega-related {
  position: relative;
  width: 30%;
  padding-right: 0;
  height: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  flex-direction: column;
  -webkit-flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.mega-menu-box-wrap-item.mega-related::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1.2rem;
  width: 1px;
  height: 100%;
  background-color: #e0e0e0;
}
.mega-menu-box-wrap-item.mega-related .mega-menu-list {
  padding-top: 1.2rem;
}
.mega-menu-box-wrap-item.mega-related .mega-menu-item.active .d-flex {
  background-color: transparent !important;
  box-shadow: unset !important;
}
.mega-menu-box-wrap-item.mega-related
  .mega-menu-item.active
  .d-flex
  .mega-menu-txt
  .title {
  color: #7c0fd1 !important;
}
.mega-menu-box-wrap-item.mega-related .d-flex {
  padding: 1.2rem 0 !important;
  position: relative;
}
.mega-menu-box-wrap-item.mega-related .d-flex::before {
  content: "";
  position: absolute;
  top: 1.8rem;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: #7c0fd1;
}
.mega-menu-box-wrap-item.mega-related .d-flex .mega-menu-txt .title {
  font-size: 1.6rem;
  font-weight: 400;
  color: #5f5f5f;
}
@media screen and (min-width: 1201px) {
  .mega-menu-box-wrap-item.mega-related .d-flex:hover {
    background-color: transparent !important;
    color: #7c0fd1 !important;
    box-shadow: unset !important;
  }
  .mega-menu-box-wrap-item.mega-related .d-flex:hover .mega-menu-txt .title {
    color: #7c0fd1 !important;
  }
}
.hd-menu .menu-item.mega-menu::before {
  content: "";
  position: absolute;
  top: 100%;
  height: 4rem;
  width: 50vw;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  background-color: transparent;
  pointer-events: none;
}
@media screen and (max-width: 1200px) {
  .hd-menu .menu-item.mega-menu::before {
    content: none;
  }
}
@media screen and (min-width: 1201px) {
  .hd-menu .menu-item.dropdown.mega-menu .subBtn {
    width: 0.5rem;
    height: 0.9rem;
    transition: 0.3s;
    top: 1.6rem;
  }
}
.menu-item.mega-menu.dropdown .submenu {
  display: none;
}
.domain-gift {
  padding: 2.4rem;
  border-radius: 1.6rem;
  background-color: #7c0fd1;
  color: #fff;
  margin-top: 4rem;
  position: relative;
  overflow: hidden;
}
.domain-gift::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../assets/images/mega-menu/domain-gift-bg.png) no-repeat;
  background-size: cover;
}
.domain-gift-tt {
  font-size: 2.4rem;
  font-weight: 600;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 1200px) {
  .domain-gift-tt {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 800px) {
  .domain-gift-tt {
    font-size: 1.7rem;
  }
}
.domain-gift-btn {
  margin-top: 1.6rem;
  position: relative;
  z-index: 2;
}
.domain-gift-btn .btn {
  padding: 0.8rem 1.2rem !important;
  font-size: 1.4rem !important;
  color: #fff !important;
  border-radius: 0.4rem !important;
}
.domain-gift-btn .btn::after {
  background: #f41e92;
}
@media screen and (min-width: 1201px) {
  .hd-menu .menu-item.mega-menu a:hover {
    color: #fff;
    background-color: #f5851e;
  }
  .hd-menu .menu-item.mega-menu:hover > a {
    background-color: #f5851e;
    color: #fff;
  }
  .hd-menu .menu-item.mega-menu:hover::before {
    pointer-events: auto;
  }
  .hd-menu .menu-item.mega-menu:hover .subBtn {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    transform: rotate(-90deg);
  }
  .hd-menu .menu-item.mega-menu:hover .mega-menu-box {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation: zoomIn 0.5s ease-in-out forwards;
  }
  .hd-menu .menu-item.mega-menu:hover .mega-menu-box .container {
    pointer-events: auto;
  }
}
.mega-menu-view {
  margin-top: 4.2rem;
}
.mega-menu-view-link {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  max-width: max-content;
  padding: 0.4rem 0 !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  transition: 0.3s;
  color: #7c0fd1 !important;
}
@media screen and (min-width: 1201px) {
  .mega-menu-view-link:hover {
    background-color: transparent !important;
    opacity: 0.7;
  }
}
.mega-menu-view-link img {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.8rem;
}
.mega-menu-img img {
  object-fit: contain;
}
.popper-contextMenu {
  position: fixed;
  z-index: 3000000000;
  list-style-type: none;
  padding: 1.6rem;
  background: #fff;
  border-radius: 1.6rem;
  width: max-content;
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.16);
}
.popper-contextMenu .mega-menu-item:not(:last-child) {
  margin-bottom: 0.2rem;
}
.popper-contextMenu .mega-menu-item img {
  width: 2.4rem;
  height: 2.4rem;
}
.popper-contextMenu .mega-menu-item:nth-child(5n + 1) .mega-menu-img {
  background-color: #f2f8ff;
}
.popper-contextMenu .mega-menu-item:nth-child(5n + 2) .mega-menu-img {
  background-color: #fff5fb;
}
.popper-contextMenu .mega-menu-item:nth-child(5n + 3) .mega-menu-img {
  background-color: #faf3ff;
}
.popper-contextMenu .mega-menu-item:nth-child(5n + 4) .mega-menu-img {
  background-color: #edfbff;
}
.popper-contextMenu .mega-menu-item:nth-child(5n + 5) .mega-menu-img {
  background-color: #fff6ed;
}
.popper-contextMenu .d-flex {
  align-items: center;
  -webkit-align-items: center;
  padding: 1.2rem 0.4rem;
  padding-right: 1.6rem;
  transition: 0.3s;
  border-radius: 1.2rem;
  cursor: pointer;
}
@media screen and (min-width: 1201px) {
  .popper-contextMenu .mega-menu-item:nth-child(5n + 1) .d-flex:hover {
    background-color: #f2f8ff;
    box-shadow: inset 6px 6px 12px rgba(16, 72, 132, 0.12);
  }
  .popper-contextMenu .mega-menu-item:nth-child(5n + 2) .d-flex:hover {
    background-color: #fff5fb;
    box-shadow: inset 6px 6px 12px rgba(208, 45, 134, 0.12);
  }
  .popper-contextMenu .mega-menu-item:nth-child(5n + 3) .d-flex:hover {
    background-color: #faf3ff;
    box-shadow: inset 6px 6px 12px rgba(16, 72, 132, 0.12);
  }
  .popper-contextMenu .mega-menu-item:nth-child(5n + 4) .d-flex:hover {
    background-color: #edfbff;
    box-shadow: inset 6px 6px 12px rgba(32, 140, 173, 0.12);
  }
  .popper-contextMenu .mega-menu-item:nth-child(5n + 5) .d-flex:hover {
    background-color: #fff6ed;
    box-shadow: inset 6px 6px 12px rgba(194, 113, 39, 0.12);
  }
  .eco-two-item.is-inview:nth-last-child(1) > *,
  .eco-two-item.is-inview:nth-last-child(2) > * {
    opacity: 0.05;
  }
}
.mona-hiring.mona-hiring-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%);
}
.mona-hiring-link {
  display: block;
}
.mona-hiring {
  position: fixed;
  z-index: 10;
  top: 70%;
  right: 0;
  width: 23.3rem;
  transition: 0.3s linear;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translate(100%, -50%);
}
@media screen and (max-width: 1200px) {
  .mona-hiring {
    width: 10rem;
  }
  .aside-body {
    max-height: 37vh;
  }
}
.mona-hiring.mona-hiring-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%);
}
.mona-hiring-link {
  display: block;
}
.modal-pop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.3s;
}
.modal-pop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.policy-item {
  position: relative;
}
.modal-pop {
  position: absolute;
  right: 2rem;
  bottom: calc(100% + 1.2rem);
}
.modal-pop-wrap {
  width: 45.6rem;
  padding: 2.4rem;
  background: #fff;
  box-shadow: 8px 8px 32px rgba(0, 0, 0, 0.16);
  border-radius: 16px;
}
.modal-pop .modal-pop-close {
  position: absolute;
  top: 2.4rem;
  right: 2.4rem;
  padding: 0.4rem;
  width: 2.4rem;
  height: 2.4rem;
  transition: 0.3s;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.modal-pop-tt {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  max-width: calc(100% - 3.2rem);
}
.modal-pop-desc {
  font-size: 1.4rem;
  color: #8b8b8b;
}
.modal-pop-btn {
  display: flex;
  position: relative;
  margin-top: 3.2rem;
  max-width: max-content;
}
.modal-pop-btn-item {
  display: block;
  padding: 1.4rem 3.2rem;
  border: 0.1rem solid rgba(58, 58, 58, 0.4);
  border-radius: 0.8rem;
  margin-right: 1.6rem;
  min-width: 14.5rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: #3a3a3a;
  text-align: center;
}
.modal-pop-btn-item.get-code {
  background-color: #7c0fd1;
  color: #fff;
}
.modal-pop-btn-item:last-child {
  margin-right: 0;
}
.modal-pop-btn .ani-preview-web {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 6rem;
  transform: translate(100%, -3rem) rotateY(-180deg);
}
@media screen and (min-width: 1201px) {
  .modal-pop .modal-pop-close:hover {
    border-color: #7c0fd1;
  }
  .modal-pop-btn-item.get-code:hover,
  .modal-pop-btn-item:hover {
    background-color: #f58635;
    color: #fff !important;
    border-color: transparent !important;
  }
}
@media screen and (max-width: 1200px) {
  .modal-pop {
    right: 1.6rem;
  }
  .modal-pop .preview-web {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .modal-pop {
    right: unset;
    left: 0;
  }
}
@media screen and (max-width: 550px) {
  .modal-pop-wrap {
    width: 95vw;
    padding: 1.2rem;
    border-radius: 0.8rem;
  }
  .modal-pop-btn-item {
    padding: 0.8rem 1.6rem;
    min-width: 9.6rem;
  }
  .modal-pop .modal-pop-close {
    top: 1.4rem;
    right: 1.2rem;
  }
}
.container-lg .container {
  position: relative;
  width: 100%;
  max-width: 146.4rem;
  height: 100%;
  margin: 0 auto;
  padding: 0 3.2rem;
}
@media (min-width: 1921px) {
  .container-lg .container {
    max-width: 188rem;
  }
}
@media (max-width: 1727px) {
  .container-lg .container {
    max-width: 126.4rem;
  }
}
@media (max-width: 1200px) {
  .container-lg .container {
    max-width: 100%;
  }
}
@media (max-width: 576px) {
  .container-lg .container {
    padding: 0 1.6rem;
  }
}
.container-lg .d-flex.f-ctn {
  width: calc(100% + 2.4rem);
  margin-left: -1.2rem;
}
@media (max-width: 1200px) {
  .container-lg .d-flex.f-ctn {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
  }
}
@media (max-width: 768px) {
  .container-lg .d-flex.f-ctn {
    width: calc(100% + 0.8rem);
    margin-left: -0.4rem;
  }
}
.container-lg .col {
  padding: 0 1.2rem;
}
@media (max-width: 1200px) {
  .container-lg .col {
    padding: 0 0.75rem;
  }
}
@media (max-width: 768px) {
  .container-lg .col {
    padding: 0 0.4rem;
  }
}
.container-lg .sec-tt {
  font-size: 3.2rem;
}
@media screen and (max-width: 550px) {
  .container-lg .sec-tt {
    font-size: 2.4rem;
  }
}
.login-form .modal-position {
  opacity: 1;
  pointer-events: auto;
}
.login-form .modal-position-bg {
  opacity: 1;
  pointer-events: auto;
}
.modal-position {
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1000;
  transition: all 0.45s ease-in-out;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}
.modal-position-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.45s ease-in-out;
  opacity: 0;
  pointer-events: none;
}
.modal-changepass-content {
  margin: auto;
  padding: 4.2rem 7.2rem;
  border-radius: 1.6rem;
  max-width: 62rem;
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.45s ease-in-out;
  opacity: 0;
  pointer-events: none;
  display: none;
}
@media screen and (max-width: 768px) {
  .modal-changepass-content {
    max-width: 80%;
    padding: 5.6rem 8rem;
  }
}
@media screen and (max-width: 576px) {
  .modal-changepass-content {
    max-width: 96%;
    padding: 2.4rem 1.6rem;
  }
}
.modal-changepass-content.open {
  opacity: 1;
  pointer-events: auto;
  display: block;
}
.modal-changepass-content::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
}
.modal-changepass-content.modal-pass .input-wrap-inner {
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 2;
  height: 4.4rem;
}
.modal-changepass-content.modal-pass .input-wrap-inner input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1.2rem;
  background: 0 0;
  font-size: 1.4rem;
  color: #fff;
}
.modal-changepass-content.modal-pass .input-wrap-inner input::placeholder {
  font-size: 1.4rem;
  color: #fff;
}
.modal-changepass-content.modal-pass .input-wrap-inner .input-wrap-img {
  z-index: 2;
  position: absolute;
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
}
.modal-changepass-content.modal-pass .input-wrap-inner .input-wrap-img .img {
  display: flex;
  align-items: center;
  width: 2rem;
  height: 2rem;
}
.modal-changepass-content.modal-pass
  .input-wrap-inner
  .input-wrap-img
  .img
  img {
  object-fit: contain;
}
.modal-changepass-content.modal-pass
  .input-wrap-inner
  .input-wrap-img.eys
  .img:nth-child(1) {
  display: none;
}
.modal-changepass-content.modal-pass
  .input-wrap-inner
  .input-wrap-img.eys
  .img:nth-child(2) {
  display: flex;
}
.modal-changepass-content.modal-pass
  .input-wrap-inner
  .input-wrap-img
  .img:nth-child(2) {
  display: none;
}
.modal-changepass-content.modal-success .modal-changepass-header {
  margin-bottom: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.modal-changepass-content.modal-success .modal-changepass-header .img {
  width: 11rem;
}
@media screen and (max-width: 576px) {
  .modal-changepass-content.modal-success .modal-changepass-header .img {
    width: 8rem;
  }
}
.modal-changepass-content.modal-success .modal-changepass-header .txt {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.modal-changepass-content.modal-success .modal-success-desc {
  font-size: 1.6rem;
  margin-bottom: 1.6rem;
  color: #fff;
}
@media screen and (max-width: 576px) {
  .modal-changepass-content.modal-success .modal-success-desc {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
  }
}
.modal-changepass-content.modal-register .modal-changepass-form .input-wrap {
  width: calc(50% - 0.8rem);
}
.modal-changepass-content.modal-register
  .modal-changepass-form
  .input-wrap.style-pri {
  width: 100%;
}
.modal-changepass-content.modal-register .modal-changepass-form .input-wrap {
  margin-bottom: 1.2rem;
}
.modal-changepass-content.modal-register .input-wrap-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.modal-changepass-content.modal-register .input-wrap-inner {
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 2;
  height: 4.4rem;
}
.modal-changepass-content.modal-register .input-wrap-inner input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1.2rem;
  background: 0 0;
  font-size: 1.4rem;
  color: #fff;
}
.modal-changepass-content.modal-register .input-wrap-inner input::placeholder {
  font-size: 1.4rem;
  color: #fff;
}
.modal-changepass-content.modal-register .input-wrap-inner .input-wrap-img {
  z-index: 2;
  position: absolute;
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
}
.modal-changepass-content.modal-register
  .input-wrap-inner
  .input-wrap-img
  .img {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
}
.modal-changepass-content.modal-register
  .input-wrap-inner
  .input-wrap-img
  .img
  img {
  object-fit: contain;
}
.modal-changepass-content.modal-register
  .input-wrap-inner
  .input-wrap-img.eys
  .img:nth-child(1) {
  display: none;
}
.modal-changepass-content.modal-register
  .input-wrap-inner
  .input-wrap-img.eys
  .img:nth-child(2) {
  display: flex;
}
.modal-changepass-content.modal-register
  .input-wrap-inner
  .input-wrap-img
  .img:nth-child(2) {
  display: none;
}
.modal-changepass-content.modal-register .group-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
}
.modal-changepass-content.modal-register .group-wrap input {
  margin: 0;
}
.modal-changepass-content.modal-register .group-wrap .group-left {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.modal-changepass-content.modal-login .modal-changepass-form .input-wrap {
  width: 100%;
}
.modal-changepass-content.modal-login .group-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
}
.modal-changepass-content.modal-login .group-wrap input {
  margin: 0;
}
.modal-changepass-content.modal-login .group-wrap .group-left {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.modal-changepass-content .show-verify {
  color: #f5851e;
  margin-top: -1.2rem;
  margin-bottom: 1.2rem;
  font-size: 1.2rem;
}
.show-send-later,
.show-verify-send {
  font-weight: -700;
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(1px);
  }
  75% {
    transform: translateX(-1px);
  }
  100% {
    transform: translateX(0);
  }
}
.modal-changepass-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}
@media screen and (max-width: 576px) {
  .modal-changepass-header {
    gap: 1.2rem;
  }
}
.modal-changepass-header .img {
  width: 7.3rem;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: shake 1s infinite;
  animation-delay: 1s;
}
.modal-changepass-header .txt {
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  flex: 1;
}
@media screen and (max-width: 768px) {
  .modal-changepass-header .txt {
    font-size: 1.7rem;
    text-align: center;
  }
}
.modal-changepass-form {
  position: relative;
}
.modal-changepass-form .input-wrap {
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  padding-bottom: 1.6rem;
}
.modal-changepass-form .input-wrap .invalid {
  margin-top: 0.2rem;
  color: red;
  font-size: 1.2rem;
}
.modal-changepass-form .input-wrap .lable {
  color: #a4a4a4;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0.4rem;
  width: 100%;
}
.modal-changepass-form .input-wrap .input {
  border-radius: 0.8rem;
  border: 0.1rem solid #fff;
  background: rgba(255, 255, 255, 0.1);
  padding: 1.2rem;
  color: #fff;
  font-size: 1.4rem;
  width: 100%;
}
.modal-changepass-form .input-wrap .input::placeholder {
  color: #a4a4a4;
}
.modal-changepass-form .button-wrap {
  border-radius: 0.8rem;
  background: linear-gradient(80deg, #a32dff -0.15%, #f41e92 87.57%);
  display: flex;
  padding: 1rem 3.2rem;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  align-items: center;
  width: 100%;
  cursor: pointer;
  transition: 0.3s;
}
.modal-changepass-form .button-wrap .img {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-changepass-form .button-wrap .txt {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 600;
  text-transform: uppercase;
}
@media screen and (min-width: 1201px) {
  .modal-changepass-form .button-wrap:hover {
    opacity: 0.8;
  }
}
.modal-changepass-form .button-wrap.button-wrap-normal {
  background: #fff;
  display: none;
  margin-top: 1.6rem;
}
.modal-changepass-form .button-wrap.button-wrap-normal .txt {
  color: #3a3a3a;
}
@media screen and (max-width: 576px) {
  .modal-changepass-form .button-wrap.button-wrap-normal {
    display: flex;
  }
}
.modal-mail .otp-wrapper {
  display: flex;
  margin: 0 -0.8rem;
  margin-bottom: 1.6rem;
}
@media screen and (max-width: 576px) {
  .modal-mail .otp-wrapper {
    margin: 0 -0.4rem;
    margin-bottom: 1.6rem;
  }
}
.modal-mail .otp-wrapper-item {
  width: 25%;
  padding: 0 0.8rem;
  height: 5.6rem;
}
@media screen and (max-width: 576px) {
  .modal-mail .otp-wrapper-item {
    padding: 0 0.4rem;
    height: 4.4rem;
  }
}
.modal-mail .form-input {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 2.4rem;
  font-weight: 600;
  color: #fff;
}
@media screen and (max-width: 1200px) {
  .modal-mail .form-input {
    font-size: 2rem;
    font-weight: 500;
  }
}
.modal-mail .form-input:focus::placeholder {
  opacity: 0;
}
.modal-mail .form-input::placeholder {
  font-size: 2.4rem;
  font-weight: 600;
  color: #fff;
  opacity: 0.5;
}
@media screen and (max-width: 1200px) {
  .modal-mail .form-input::placeholder {
    font-size: 2rem;
    font-weight: 500;
  }
}
.modal-changepass-desc {
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
  color: #fff;
}
.modal-changepass-form .input-wrap-inner {
  position: relative;
}
.input-wrap-flex {
  display: flex;
  gap: 1.2rem;
}
.modal-changepass-form .icon-eye {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  font-size: 1.4rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  color: #fff;
}
.modal-changepass-form .input-wrap .invalid {
  color: #f5851e;
  bottom: -0.4rem;
  transition: 0.3s;
}
.modal-changepass-form .group-wrap {
  width: 100%;
  color: #fff;
  gap: 1.2rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.modal-changepass-form .group-wrap label {
  transition: 0.3s;
  font-size: 1.4rem;
  cursor: pointer;
  font-weight: 700;
}
.modal-changepass-content .input:-webkit-autofill ~ .icon-eye {
  color: #3a3a3a;
}
.modal-changepass-form input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 30px #fff !important;
}
.modal-changepass-content input:-webkit-autofill,
.modal-changepass-content input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}
.modal-changepass-form input:-webkit-autofill,
.modal-changepass-form input:-webkit-autofill:focus,
.modal-changepass-form input:-webkit-autofill:hover {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: #3a3a3a;
}
.modal-changepass-content .input-wrap-list,
.modal-changepass-content.modal-register .input-wrap-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.6rem;
}
@media screen and (max-width: 576px) {
  .modal-changepass-content .input-wrap-list,
  .modal-changepass-content.modal-register .input-wrap-list {
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 0 !important;
  }
}
.modal-changepass-form .input:-webkit-autofill ~ .icon-eye {
  color: #3a3a3a;
}
.modal-changepass-form .group-left,
.modal-changepass-form .group-right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
@media screen and (min-width: 1201px) {
  .modal-changepass-form .group-left:hover label,
  .modal-changepass-form .group-right:hover label {
    color: #f41e92;
  }
}
.otp-form .form-note {
  font-style: italic;
  font-size: 1.4rem;
  margin: 0.4rem 0;
  color: #f5851e;
  text-align: center;
  font-weight: 600;
}
.otp-form .loading {
  overflow: visible;
}
.otp-form .is-loading-group.loading::before {
  margin-top: 0;
}
.otp-form .is-loading-group[style="display: block;"]::before {
  margin-top: -0.2em;
}
.modal-mail .otp-wrapper-item {
  width: 25%;
  padding: 0 0.8rem;
  height: 5.6rem;
}
@media screen and (max-width: 576px) {
  .modal-mail .otp-wrapper-item {
    padding: 0 0.4rem;
    height: 4.4rem;
  }
}
.checked-custom {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.3rem;
  border: 0.1rem solid #89939e;
  transition: 0.3s;
  position: relative;
}
.checked-custom::after,
.checked-custom::before {
  content: "";
  position: absolute;
  background-color: #fff;
  height: 0.2rem;
  opacity: 0;
  transition: 0.3s;
}
.checked-custom::before {
  width: 0.5rem;
  top: 0.8rem;
  left: 0.15rem;
  transform: rotate(45deg);
}
.checked-custom::after {
  width: 1rem;
  top: 0.65rem;
  left: 0.35rem;
  transform: rotate(-45deg);
}
.checked-custom-ipt:checked ~ .checked-custom {
  border-color: #f41e92;
  background-color: #f41e92;
}
.checked-custom-ipt:checked ~ .checked-custom::after,
.checked-custom-ipt:checked ~ .checked-custom::before {
  opacity: 1;
}
@keyframes ani-blinker {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.modal-mail .otp-wrapper-item .otp-wrapper-item-txt {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 0.8rem;
  border: 0.1rem solid var(--Primary-Color-grey-400, #616161);
  background: rgba(255, 255, 255, 0.1);
  cursor: text;
}
.modal-mail .otp-wrapper-item .otp-wrapper-item-txt::before {
  content: attr(data-otp);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.4rem;
  font-weight: 600;
  color: #fff;
}
.modal-mail .otp-wrapper-item .otp-wrapper-item-txt.focus::before {
  font-size: 2rem;
  font-weight: 300;
  animation: ani-blinker 0.2s infinite alternate;
}
.otp-pop-form-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.modal-changepass-content input:-internal-autofill-selected {
  background-color: rgba(255, 255, 255, 0.1);
}
.modal-changepass-content input:-webkit-autofill,
.modal-changepass-content input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}
.modal-changepass-content .input:-webkit-autofill,
.modal-changepass-content .input:-webkit-autofill:active,
.modal-changepass-content .input:-webkit-autofill:focus,
.modal-changepass-content .input:-webkit-autofill:hover {
  -webkit-box-shadow: inset 0 0 0 30px #fff !important;
}
.modal-changepass-content .input {
  background: rgba(255, 255, 255, 0.1);
}
.modal-changepass-form .input-wrap-inner {
  width: 100%;
}
@media screen and (max-width: 576px) {
  .modal-changepass-content {
    height: calc(100% - 1.6rem);
  }
  .modal-changepass-header .img {
    width: 4.8rem;
  }
  .modal-changepass-header .txt {
    font-size: 1.4rem;
  }
  .input-wrap-flex {
    flex-direction: column;
    gap: 0;
  }
}
.open-popup-account-js {
  cursor: pointer;
}
:root {
  --dark: #34495e;
  --light: #ffffff;
  --success: #12b76a;
  --error: #943cda;
  --warning: #e9bd0c;
  --info: #3498db;
}
.notifications {
  position: fixed;
  top: 3.2rem;
  right: 2.2rem;
  z-index: 1002;
}
.notifications :where(.toast, .column) {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.notifications .toast {
  width: 39rem;
  max-width: 95vw;
  position: relative;
  overflow: hidden;
  list-style: none;
  border-radius: 0.4rem;
  padding: 1.6rem;
  margin-bottom: 1rem;
  justify-content: space-between;
  background: var(--error);
  animation: show_toast 0.3s ease forwards;
}
.notifications .toast.success {
  background: var(--success);
}
.close-icon {
  cursor: pointer;
  color: var(--light);
  padding: 1.2rem;
  transform: translateX(1.2rem);
}
@keyframes show_toast {
  0% {
    transform: translateX(100%);
  }
  40% {
    transform: translateX(-5%);
  }
  80% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
}
.notifications .toast.hide {
  animation: hide_toast 0.3s ease forwards;
}
@keyframes hide_toast {
  0% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(0);
  }
  80% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(calc(100% + 20px));
  }
}
.toast::before {
  position: absolute;
  content: "";
  height: 3px;
  width: 100%;
  bottom: 0;
  left: 0;
  animation: progress 5s linear forwards;
}
.error-icon {
  width: 3.6rem;
  height: 3.6rem;
  flex-shrink: 0;
}
@media screen and (max-width: 400px) {
  .error-icon {
    width: 2.4rem;
    height: 2.4rem;
  }
}
.toast-txt {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--light);
}
@media screen and (max-width: 400px) {
  .error-icon {
    width: 2.4rem;
    height: 2.4rem;
  }
  .toast-txt {
    font-size: 1.2rem;
  }
}
@keyframes progress {
  100% {
    width: 0%;
  }
}
.btn-toast#success,
.toast.success::before {
  background: var(--success);
}
.btn-toast#error,
.toast.error::before {
  background: var(--error);
}
.btn-toast#warning,
.toast.warning::before {
  background: var(--warning);
}
.btn-toast#info,
.toast.info::before {
  background: var(--info);
}
.toast .column i {
  font-size: 1.75rem;
}
.toast.success .column i {
  color: var(--success);
}
.toast.error .column i {
  color: var(--error);
}
.toast.warning .column i {
  color: var(--warning);
}
.toast.info .column i {
  color: var(--info);
}
.toast i:last-child {
  color: #aeb0d7;
  cursor: pointer;
}
.toast i:last-child:hover {
  color: var(--dark);
}
.buttons .btn-toast {
  border: none;
  outline: 0;
  cursor: pointer;
  margin: 0 5px;
  color: var(--light);
  font-size: 1.2rem;
  padding: 10px 20px;
  border-radius: 4px;
}
@media screen and (max-width: 530px) {
  .notifications {
    width: 95%;
    right: 2rem;
  }
  .notifications .toast {
    width: 100%;
    font-size: 1rem;
    margin-left: 20px;
  }
  .buttons .btn-toast {
    margin: 0 1px;
    font-size: 1.1rem;
    padding: 8px 15px;
  }
}
.video-demo {
  position: relative;
  margin: 1.6rem 0;
}
.video-demo .video-demo-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.video-demo .video-demo-play .icon {
  font-size: 8rem;
  font-weight: 100;
  color: #f41e92;
  cursor: pointer;
}
.video-demo-wrap {
  position: relative;
  border-radius: 1.6rem;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.video-demo-wrap .iframe {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3;
}
.video-demo .video {
  width: 100%;
  vertical-align: middle;
}
.video-demo .video-time-line {
  position: absolute;
  z-index: 3;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 3.2rem);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.video-demo .video-time-volume {
  width: 3.2rem;
  height: 3.2rem;
  padding: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video-demo .video-time-volume .volume-icon {
  font-size: 2.4rem;
  color: #fff;
}
.video-demo .video-time-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  height: 0.8rem;
  background-color: #d9d9d9;
  border-radius: 10rem;
}
.video-demo .pin {
  position: absolute;
  width: 0.8rem;
  height: 100%;
  left: var(--pin-position);
  background-color: #f5851e;
}
.video-demo .pin::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 4rem;
  height: 4rem;
  background: url(../assets/videos/login/video-demo-pin.png) no-repeat;
  background-size: contain;
  background-position: center;
}
.video-demo .time-process {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--videoCurrentTime);
  height: 100%;
  background-color: #f41e92;
  border-top-left-radius: 10rem;
  border-bottom-left-radius: 10rem;
  transition: width var(--timeTransition);
  transform: translateY(0);
}
.form-embed-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1.6rem;
  z-index: 5;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  display: none;
}
@media screen and (max-width: 576px) {
  .form-embed-close {
    display: flex;
  }
}
.form-embed .is-loading-group.loading::before {
  height: 1em;
  width: 1em;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: unset;
  margin-top: unset;
  content: "";
  -webkit-animation: spin 1s ease-in-out infinite;
  animation: spin 1s ease-in-out infinite;
  background: url(/wp-content/themes/monatheme/public/helpers/images/loader.svg)
    center center;
  background-size: cover;
  line-height: 1;
  text-align: center;
  font-size: 2em;
  color: rgba(0, 0, 0, 0.75);
  z-index: 99;
}
.form-embed-close-icon {
  color: #fff;
}
.form-embed {
  position: absolute;
  z-index: 4;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.form-embed.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.form-embed.close {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.form-embed .modal-changepass-content {
  padding: 1em;
  max-width: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: unset;
  transform: unset;
  will-change: transform, opacity;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.form-embed .modal-changepass-content::before {
  content: none;
}
.form-embed .modal-changepass-header .img {
  width: calc((50 / 1728) * 100vw);
}
@media screen and (max-width: 576px) {
  .form-embed .modal-changepass-header .img {
    width: 5.4rem;
  }
}
.form-embed .modal-changepass-header .txt {
  font-size: 0.83333vw;
  line-height: 1.5;
}
@media screen and (max-width: 1200px) {
  .form-embed .modal-changepass-header .txt {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .form-embed .modal-changepass-header .txt {
    text-align: left;
  }
}
.form-embed .modal-changepass-header {
  margin-bottom: calc((14 / 1728) * 100vw);
}
.form-embed .modal-changepass-form .input-wrap {
  margin-bottom: calc((12 / 1728) * 100vw);
}
.form-embed .modal-changepass-form .input-wrap {
  position: relative;
}
.blog-large-content .form-embed p {
  margin: 0;
  line-height: 1.2;
}
.form-embed .modal-changepass-content .group-wrap,
.form-embed .modal-changepass-desc,
.form-embed .modal-changepass-form .input-wrap .lable,
.form-embed .modal-success-desc {
  color: #fff;
}
.form-embed .modal-changepass-form .input-wrap .lable {
  font-size: 1.2rem;
}
.form-embed
  .modal-changepass-content.modal-register
  .input-wrap-inner
  input::placeholder {
  color: #8a8a8b;
}
.form-embed .modal-changepass-content.modal-register .input-wrap-inner input,
.form-embed .modal-changepass-form .input-wrap .input {
  padding: 1rem 1.2rem;
}
@media screen and (max-width: 1727px) {
  .form-embed .modal-changepass-content.modal-register .input-wrap-inner input,
  .form-embed .modal-changepass-form .input-wrap .input {
    padding: 1rem;
  }
}
.form-embed .content {
  width: 100%;
  max-width: 45.9rem;
  margin-left: auto;
  margin-right: auto;
}
.form-embed-list {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.6rem;
}
@media screen and (max-width: 576px) {
  .form-embed-list {
    border-radius: 1.2rem;
  }
}
.form-embed-list::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  pointer-events: none;
}
.form-embed-item {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}
.form-embed.active .form-embed-item.active .modal-changepass-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.form-embed .modal-changepass-content .group-wrap .group-left {
  gap: 0.8rem;
}
.fa-eye-parent {
  position: relative;
  width: 100%;
}
.form-embed .modal-changepass-content .input:-webkit-autofill ~ .icon-eye {
  color: #3a3a3a;
}
.modal-changepass-content.modal-register .input-wrap-inner {
  height: unset;
}
.modal-changepass-content.modal-register .input-wrap-inner input {
  position: static;
}
.modal-changepass-content .input-wrap-inner .fa-eye-parent-ipt,
.modal-changepass-content.modal-register .input-wrap-inner .fa-eye-parent-ipt {
  padding-right: 3.2rem;
  width: 100%;
  height: 100%;
  padding: 1.2rem;
  background: 0 0;
  font-size: 1.4rem;
  color: #fff;
  border-radius: 0.8rem;
  border: 0.1rem solid #fff;
  background: rgba(255, 255, 255, 0.1);
}
.fa-eye-parent .icon-eye {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.2rem;
  font-size: 1.2rem;
  color: #fff;
  padding: 0.8rem;
  cursor: pointer;
}
.open-form-account-js {
  cursor: pointer;
}
.open-form-account-js label {
  cursor: pointer;
}
.checked-custom {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.3rem;
  border: 0.1rem solid #89939e;
  transition: 0.3s;
  position: relative;
}
.checked-custom::after,
.checked-custom::before {
  content: "";
  position: absolute;
  background-color: #fff;
  height: 0.2rem;
  opacity: 0;
  transition: 0.3s;
}
.checked-custom::before {
  width: 0.5rem;
  top: 0.8rem;
  left: 0.15rem;
  transform: rotate(45deg);
}
.checked-custom::after {
  width: 1rem;
  top: 0.65rem;
  left: 0.35rem;
  transform: rotate(-45deg);
}
.checked-custom-ipt:checked ~ .checked-custom {
  border-color: #f41e92;
  background-color: #f41e92;
}
.checked-custom-ipt:checked ~ .checked-custom::after,
.checked-custom-ipt:checked ~ .checked-custom::before {
  opacity: 1;
}
.video-modal-continue {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 3.2rem;
  border-radius: 1.2rem;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-align: center;
  white-space: nowrap;
}
.video-modal-continue .title {
  color: #fff;
}
.video-modal-continue .continue-btn {
  display: flex;
  gap: 0.8rem;
  width: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
}
.video-modal-continue .item {
  width: 50%;
  padding: 0.8rem;
  border-radius: 0.8rem;
  background-color: #fff;
  color: #3a3a3a;
  cursor: pointer;
}
.video-modal-continue .item.bg-edutech {
  background-color: #f41e92;
  color: #fff;
}
.form-embed
  .modal-changepass-content.modal-register
  .modal-changepass-form
  .input-wrap {
  width: 100%;
  margin-bottom: 0.8rem;
}
.form-embed
  .modal-changepass-content.modal-register
  .modal-changepass-form
  .input-wrap.style-pri {
  padding-bottom: 0;
}
@media screen and (max-width: 1727px) {
  .form-embed .modal-register .modal-changepass-header {
    margin-bottom: calc((8 / 1728) * 100vw);
  }
  .form-embed .modal-register .modal-changepass-header .img {
    width: calc((40 / 1728) * 100vw);
  }
}
.form-embed
  .modal-changepass-content.modal-register
  .modal-changepass-form
  .input-wrap
  .invalid {
  bottom: -0.4rem;
  font-size: 1rem;
}
.form-embed .input-wrap-list,
.form-embed .modal-changepass-content.modal-register .input-wrap-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.6rem;
}
.form-embed .modal-changepass-form .input-wrap.style-pri {
  margin-bottom: 0;
}
.form-embed .modal-changepass-form .group-wrap label {
  font-size: 1.2rem;
}
.form-embed .modal-changepass-form .button-wrap .txt {
  font-size: 1.6rem;
}
.form-embed .show-verify {
  color: #f5851e;
  margin-bottom: 1.2rem;
}
.form-embed .modal-changepass-form .button-wrap.button-wrap-normal {
  display: flex;
  transition: 0.3s;
  min-height: 4.4rem;
}
@media screen and (min-width: 1201px) {
  .form-embed .modal-changepass-form .button-wrap.button-wrap-normal:hover {
    background-color: #f41e92;
  }
  .form-embed
    .modal-changepass-form
    .button-wrap.button-wrap-normal:hover
    .txt {
    color: #fff;
  }
}
.form-embed
  .modal-login
  .modal-changepass-form
  .button-wrap.button-wrap-normal {
  display: none;
}
.video-demo-login {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  padding: 1.6rem;
  border-radius: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: 0.3s;
}
.video-demo-login::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: none;
}
.video-demo-login.active {
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.video-demo-login-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.video-demo-login-header {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}
.video-demo-login-header .img {
  width: 4.2rem;
}
.video-demo-login-btn {
  display: flex;
  gap: 0.8rem;
  font-size: 1.4rem;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  max-width: max-content;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.8rem;
  background: linear-gradient(80deg, #a32dff -0.15%, #f41e92 87.57%);
  cursor: pointer;
}
.video-demo-login-btn .img {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-demo-login-btn .img img {
  object-fit: contain;
}
.form-embed input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 30px #fff !important;
}
.form-embed .modal-changepass-content.modal-pass .input-wrap-inner {
  border: unset;
}
@media screen and (max-width: 900px) {
  .form-embed {
    position: fixed;
    z-index: 1000;
    inset: 0.8rem;
  }
  .form-embed
    .modal-login
    .modal-changepass-form
    .button-wrap.button-wrap-normal {
    display: flex;
    min-height: 4.4rem;
  }
  .form-embed .modal-changepass-content {
    align-items: flex-start;
    padding: 3.2rem 1.6rem;
  }
  .form-embed .modal-changepass-header .img,
  .form-embed .modal-register .modal-changepass-header .img {
    width: 5rem;
  }
  .form-embed .modal-success .modal-changepass-header .txt {
    text-align: center;
  }
  .form-embed .modal-changepass-header,
  .input-wrap-list {
    margin-bottom: 2.4rem;
  }
  .form-embed .modal-changepass-form .input-wrap {
    margin-bottom: 1.2rem;
  }
  .form-embed .modal-changepass-form .input-wrap .input {
    padding: 1.2rem;
  }
  .video-demo-wrap {
    border-radius: 1.2rem;
  }
  .video-demo .video-time-line {
    bottom: 0;
  }
  .video-demo .video-time-wrap {
    height: 0.4rem;
  }
  .video-demo .pin::before {
    width: 3rem;
    height: 3rem;
  }
  .video-demo .video-time-volume .volume-icon {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 576px) {
  .form-embed .modal-changepass-header .txt br {
    display: none;
  }
  .form-embed .input-wrap-list,
  .form-embed .modal-changepass-content.modal-register .input-wrap-list {
    gap: 0.8rem;
    flex-wrap: wrap;
  }
  .form-embed .input-wrap-list {
    margin-bottom: 0;
  }
  .form-embed .modal-changepass-header {
    margin-bottom: 2.4rem;
  }
  .form-embed
    .modal-changepass-content.modal-register
    .modal-changepass-form
    .input-wrap
    .invalid {
    bottom: 0;
    margin: 0;
  }
}
.mona-content-hidden,
.mona-content-hidden * {
  height: 0 !important;
  width: 0 !important;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 0 !important;
}
.mona-content-hidden iframe {
  display: none;
}