/*
 * Copyright inpleworks, Co.
*/
/*
XET CSS v2.0.4 2024-08-02 for supported in all modern browsers
By xetemplate(https://xetemplate.com)
*/
:root {
  --xet-theme-color: #dc427a;
  --xet-theme-border-color: rgba(0, 0, 0, 0.1);
  --xet-theme-body-bg-color: #eff0f1;
  --xet-theme-content-bg-color: #ffffff;
  --xet-theme-dark-header-bg-color: #16191e;
  --xet-theme-dark-footer-bg-color: #16191e;
  --xet-theme-dark-body-bg-color: #090a0b;
  --xet-theme-dark-content-bg-color: #0d1116;
  --xet-theme-dark-border-color: rgba(255, 255, 255, 0.1);
  --xet-theme-dark-text-strong-color: #EFF2F7;
  --xet-theme-box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, .08);
  --xet-theme-transition-all: all 0.2s linear;
  --xet-theme-transition-all-cubic-bezier: all 800ms cubic-bezier(.4, 0, .2, 1);
  --xet-theme-button-height: 38px;
  --xet-theme-grid-gap-xs: 16px;
  --xet-theme-grid-gap: 24px;
  --xet-theme-grid-gap-xl: 32px;
  --xet-theme-grid-gap-xxl: 40px;
}

html,
body,
table,
th,
td,
button,
select,
input,
textarea {
  font-size: 16px;
  font-family: var(--font), -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
  word-break: keep-all;
}

svg {
  width: 1rem;
  fill: var(--xet-theme-text-strong-color);
  transition: var(--xet-theme-transition-all);
}

body {
  background-color: var(--xet-theme-body-bg-color);
  color: var(--xet-theme-text-strong-color);
}

.xet-layout {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow: hidden;
  transition: var(--xet-theme-transition-all);
  background-color: var(--xet-theme-body-bg-color);
  color: var(--xet-theme-text-strong-color);
}
.xet-layout .vh100 {
  height: 100vh;
}
.xet-layout .vh75 {
  height: 75vh;
}
@supports (height: 100dvh) {
  .xet-layout .vh100 {
    height: 100dvh;
  }
  .xet-layout .vh75 {
    height: 75dvh;
  }
}
.xet-layout.page .xe_content,
.xet-layout.page .rhymix_content {
  font-size: 1rem;
}
.xet-layout .theme-color {
  color: var(--xet-theme-color) !important;
}
.xet-layout .xet-btn {
  z-index: 2;
  gap: 4px;
  min-width: var(--xet-theme-button-height);
  border-radius: 0;
}
.xet-layout .xet-btn > i + span {
  margin-left: 2px;
}
.xet-layout .xet-btn.btn-outline {
  border-color: var(--xet-theme-text-strong-color);
}
.xet-layout .xet-btn.btn-outline:hover {
  border-color: var(--xet-theme-color) !important;
  color: var(--xet-theme-color) !important;
}
.xet-layout .xet-btn.btn-outline:hover svg {
  fill: var(--xet-theme-color);
}
.xet-layout .xet-btn.btn-primary-theme {
  background-color: var(--xet-theme-color) !important;
  color: #fff !important;
}
.xet-layout .xet-btn.btn-submit {
  background-color: var(--xet-theme-color) !important;
  color: #fff !important;
}
.xet-layout a {
  color: inherit;
  transition: var(--xet-theme-transition-all);
}
.xet-layout a svg {
  fill: var(--xet-theme-text-strong-color);
}
.xet-layout a:hover {
  color: var(--xet-theme-color) !important;
}
.xet-layout a:hover svg {
  fill: var(--xet-theme-color) !important;
}
.xet-layout .layout-sub-top {
  position: relative;
  padding-top: 10rem;
  padding-bottom: 2rem;
}
.xet-layout .layout-sub-top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
}
.xet-layout .layout-sub-top > div {
  position: relative;
  z-index: 3;
}
.xet-layout .layout-sub-top .layout-sub-top__container {
  color: var(--xet-theme-dark-text-strong-color);
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.16);
}
.xet-layout .layout-sub-top .layout-sub-top__container > div:not(.h1) {
  font-size: 1.125rem;
}
.xet-layout .layout-sub-lnb {
  display: none;
  padding: 2rem 0;
}
.xet-layout .layout-sub-lnb .layout-sub-lnb__container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.xet-layout .layout-sub-lnb .layout-sub-lnb__container a {
  padding: 1rem 0;
  font-size: 1.125rem;
  border-bottom: 1px solid transparent;
  color: var(--xet-theme-text-base-color);
}
.xet-layout .layout-sub-lnb .layout-sub-lnb__container a.is-active, .xet-layout .layout-sub-lnb .layout-sub-lnb__container a:hover {
  color: var(--xet-theme-color) !important;
  border-color: var(--xet-theme-color);
}
.xet-layout .layout-sub-lnb .layout-sub-lnb__container a.is-active {
  font-weight: 700;
}
.xet-layout .layout-content {
  flex-grow: 1;
  background-color: var(--xet-theme-content-bg-color);
}
.xet-layout .layout-content .xet-content {
  padding: 1rem 0;
}
.xet-layout .layout-footer {
  z-index: 1;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: var(--xet-theme-dark-footer-bg-color);
  color: var(--xet-theme-dark-text-base-color);
}
.xet-layout .layout-footer .footer__container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.xet-layout .layout-footer .footer__container .item {
  flex: 1;
}
.xet-layout .layout-footer .footer__container .item .h3 {
  color: var(--xet-theme-dark-text-strong-color);
}
.xet-layout .layout-footer .footer__container .item:first-child {
  flex: 2;
}
.xet-layout .layout-footer .footer__container .item:first-child ul + div,
.xet-layout .layout-footer .footer__container .item:first-child > div + div {
  margin-top: 1rem;
}
.xet-layout .layout-footer .footer__container .item ul:not(.footer__sns) {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: 1rem;
}
.xet-layout .layout-footer .footer__container .item ul:not(.footer__sns) li strong {
  margin-right: 6px;
  color: var(--xet-theme-dark-text-strong-color);
}
.xet-layout .layout-footer .footer__container .item ul:not(.footer__sns) li a + a {
  position: relative;
  margin-left: 1rem;
}
.xet-layout .layout-footer .footer__container .item ul:not(.footer__sns) li a + a::before {
  content: "/";
  width: 1rem;
  padding-right: 1rem;
}
.xet-layout .layout-footer .footer__container .item .footer__sns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.xet-layout .layout-footer .footer__container .item .footer__sns li a {
  font-size: 1.25rem;
}
.xet-layout .layout-footer .footer__container .item .footer__sns li a:hover {
  color: var(--xet-theme-color) !important;
}
.xet-layout dialog.dialog {
  width: 100%;
  max-width: 480px;
  padding: 0;
  border: 0;
  background: none;
}
.xet-layout dialog.dialog::backdrop {
  background-color: rgba(58, 52, 42, 0.85);
}
.xet-layout dialog.dialog .dialog_container {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--xet-theme-border-color);
  background-color: var(--xet-theme-content-bg-color);
  box-shadow: var(--xet-theme-box-shadow2x);
}
.xet-layout dialog.dialog .dialog_container .dialog__title {
  text-align: center;
  margin-bottom: 2rem;
}
.xet-layout dialog.dialog .dialog_container .dialog__title > div + div {
  margin-top: 1rem;
}
.xet-layout dialog.dialog .dialog_container .dialog-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 38px;
  padding: 0;
}
.xet-layout .contact-form em.error {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #ff0000;
}
.xet-layout .contact-form .form__input-group .form__input-group__lavel {
  text-align: left;
}
.xet-layout .contact-form .form__input-group .form__input-group__input input[readonly] {
  background-color: var(--xet-theme-input-bg-color) !important;
  color: var(--xet-theme-text-strong-color) !important;
}
.xet-layout .contact-form .form__input-group .form__input-group__privacy-info {
  text-align: left;
  flex: 1;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--xet-theme-input-border-color);
}
.xet-layout a.goto-top {
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  text-decoration: none;
  font-size: 1.15rem;
  transform: translateY(100%);
  transition: var(--xet-theme-transition-all);
  color: var(--xet-theme-dark-text-strong-color);
  background-color: #000;
}
.xet-layout a.goto-top svg {
  fill: var(--xet-theme-dark-text-strong-color);
}
.xet-layout a.goto-top.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.xet-layout a.contact-kakaotalk {
  z-index: 91;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
  text-decoration: none;
  color: #3B1E1E !important;
  background-color: #FBE300 !important;
}
.xet-layout a.contact-kakaotalk.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.nav-visible {
  overflow: hidden;
}

.xet-layout.main .layout-header {
  opacity: 0;
  transition: var(--xet-theme-transition-all);
  transform: translateY(-100%);
}
.xet-layout.main .layout-main > section,
.xet-layout.main .layout-main .main-visual-swiper {
  opacity: 0;
  transition: var(--xet-theme-transition-all);
}

body.site-show .xet-layout.main .layout-header {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}
body.site-show .xet-layout.main .layout-main > section,
body.site-show .xet-layout.main .layout-main .main-visual-swiper {
  opacity: 1;
  transition-delay: 0.5s;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.28, 0.12, 0.22, 1);
}

@media (min-width: 576px) {
  .xet-layout .layout-content .xet-content {
    padding: 2rem 0;
  }
}
@media (min-width: 992px) {
  .xet-layout .layout-sub-top {
    padding-top: 20rem;
    padding-bottom: 2rem;
  }
  .xet-layout .layout-sub-lnb {
    display: block;
  }
  .xet-layout .layout-content .xet-content {
    padding: 2rem 0;
  }
  .xet-layout .layout-footer {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .xet-layout .layout-footer .footer__nav__container {
    display: flex;
    align-items: center;
  }
  .xet-layout .layout-footer .footer__container {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
  }
  .xet-layout .layout-footer .footer__container > .item:last-child {
    justify-items: flex-end;
  }
  .xet-layout.main .layout-footer {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .xet-layout a.goto-top {
    display: flex;
  }
  .xet-layout a.contact-kakaotalk {
    bottom: 4rem;
  }
}
@media (min-width: 1200px) {
  .xet-layout .layout-sub-top {
    padding-bottom: 3rem;
  }
  .xet-layout .layout-content .xet-content {
    padding: 3rem 0;
  }
  .xet-layout .layout-content .xet-content .lnb-title {
    margin-bottom: 3rem;
  }
  .xet-layout .layout-footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .xet-layout .layout-footer .footer__container {
    gap: 3rem;
  }
  .xet-layout.main .layout-footer {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
@media (min-width: 1400px) {
  .xet-layout .layout-sub-top {
    padding-bottom: 4rem;
  }
  .xet-layout .layout-content .xet-content {
    padding: 4rem 0;
  }
  .xet-layout .layout-content .xet-content .lnb-title {
    margin-bottom: 4rem;
  }
  .xet-layout .layout-footer {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
body.color_scheme_dark {
  background-color: var(--xet-theme-dark-body-bg-color);
  color: var(--xet-theme-dark-text-strong-color);
}
body.color_scheme_dark .xet-layout {
  background-color: var(--xet-theme-dark-body-bg-color);
  color: var(--xet-theme-dark-text-strong-color);
}
body.color_scheme_dark .xet-layout a svg {
  fill: var(--xet-theme-dark-text-strong-color);
}
body.color_scheme_dark .xet-layout .layout-sub-lnb {
  background-color: var(--xet-theme-dark-header-bg-color);
}
body.color_scheme_dark .xet-layout .layout-sub-lnb .layout-sub-lnb__container a {
  color: var(--xet-theme-dark-text-base-color);
}
body.color_scheme_dark .xet-layout .layout-sub-lnb .layout-sub-lnb__container a.is-active, body.color_scheme_dark .xet-layout .layout-sub-lnb .layout-sub-lnb__container a:hover {
  color: var(--xet-theme-color) !important;
  border-color: var(--xet-theme-color);
}
body.color_scheme_dark .xet-layout .layout-content {
  background-color: var(--xet-theme-dark-content-bg-color);
}
body.color_scheme_dark .xet-layout .layout-footer .footer__container .item .footer__sns li a {
  border-color: var(--xet-theme-dark-border-color);
}
body.color_scheme_dark .xet-layout dialog.dialog .dialog_container {
  border-color: var(--xet-theme-dark-border-color);
  background-color: var(--xet-theme-dark-content-bg-color);
  color: var(--xet-theme-dark-text-strong-color);
}