.inr {
  position: relative;
  margin: 0 auto;
  max-width: 90rem;
  width: 92%;
  height: 100%;
  z-index: 2;
}
.inr.wide {
  max-width: 106.625rem;
}
#header button {
  background: none;
}

/* header */
.header {
  height: var(--header_height);
}
#header {
  position: fixed;
  inset: 0 0 auto;
  letter-spacing: 0;
  color: #fff;
  z-index: 99;
  background-color: #fff;
}
#header.fixed {
  background: #fff;
  border-bottom: 1px solid #3b4364;
  border-image: linear-gradient(to right, #3b4364, #7787ca) 1;
  color: var(--black);
  box-shadow: 3px 4px 30px 0px rgba(43, 31, 54, 0.2);
}
#header .inr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header h1 {
  display: inline-block;
  position: relative;
}
#header h1 a {
  display: block;
  font-size: 0;
}

/*.logo-img {
  width: clamp(160px, 14vw, 245px);
  height: auto;
}*/
.logo_svg {
  width: 14.3375rem;
}
.logo_svg__text path {
  fill: #000;
}
@media (max-width: 1279px) {
  :root {
    --header_height: 4.0625rem;
  }
}
#header nav {
  text-align: center;
  height: 100%;
}
#header .gnb {
  position: relative;
  height: 100%;
}
#header .gnb > li {
  display: inline-block;
  position: relative;
  height: 100%;
}
#header .gnb > li > a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 2vw;
  font-size: var(--font_size22);
  font-weight: 600;
  color: #000;
}
#header .gnb > li > .sub_menu {
  overflow: hidden;
  visibility: hidden;
  position: absolute;
  top: 75%;
  min-width: 120px;
  width: max-content;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: inset 8px 8px 8px -5.92px rgba(255, 255, 255, 0.57),
    inset -8px -8px 8px -5.92px rgba(94, 79, 80, 0.18),
    3px 4px 30px 0px rgba(43, 31, 54, 0.2);
  border-radius: 20px;
  color: var(--black);
  z-index: 99;
  opacity: 0;
}
#header .gnb li:hover .sub_menu {
  visibility: visible;
  top: 75%;
  opacity: 1;
}
#header .gnb .sub_menu li a {
  display: block;
  padding: 14px;
  font-size: 14px;
  text-align: center;
}
#header .gnb .sub_menu li a:hover {
  color: #3b4364;
  font-weight: 700;
}
#header .gnb .sub_menu li:first-child a {
  border-top: 0;
}

@media (max-width: 1024px) {
  #header img {
    width: 140px;
  }
}

.btn-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-cta p {
  color: #fff;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.area_util {
  display: flex;
  align-items: center;
  gap: 0.555544em;
  font-size: var(--font_size15);
  font-weight: 500;
  color: #fff;
}
.area_util > a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 60px;
  border-radius: 60px;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
  border: 2px solid transparent;
}

.area_util > a:nth-child(1):hover,
.area_util > a:nth-child(2):hover {
  background: #fff;
  border-color: #3b4364;
  color: #3b4364;
}

.area_util > a:nth-child(1):hover .btn-cta p,
.area_util > a:nth-child(2):hover .btn-cta p {
  color: #3b4364;
}

.area_util > a:nth-child(1):hover .btn-cta svg path,
.area_util > a:nth-child(2):hover .btn-cta svg path {
  fill: #3b4364;
}
.area_util > a:nth-child(1) {
  background: #3b4364;
}
.area_util > a:nth-child(2) {
  background: #f46709;
}

.header .site_link {
  position: relative;
}
.header .site_link > .site_btn {
  position: relative;
  font-size: var(--font_size15);
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7.33333333em;
  height: 2.33333333em;
  border-radius: 4em;
  text-align: center;
  background: #e9ba00 !important;
  color: #fff;
  border: none !important;
}
.header .site_link ul {
  display: none;
  padding: 6px;
  box-sizing: border-box;
  position: absolute;
  top: 3em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  background: #fff;
  width: 100%;
  min-width: 160px;
  border-radius: 15px;
  box-shadow: inset 5px 5px 5px -5.5px rgb(255 255 255 / 10%),
    inset -5px -5px 8px -5.52px rgb(94 79 80 / 15%),
    5px 4px 20px 0px rgb(43 31 54 / 10%);
}
.header .site_link ul li {
  text-align: center;
  font-weight: 500;
}
.header .site_link ul li > a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 5px;
  color: #333;
  text-align: center;
}
.header .site_link ul li a:hover {
  color: #f46709;
  font-weight: 600;
}

/* mobile-menu */
.btn_menu {
  display: none;
  position: relative;
  z-index: 90;
  width: 25px;
  height: 25px;
  box-sizing: border-box;
}
.btn_menu span {
  display: block;
  width: 100%;
  height: 1px;
  background: #333;
}
.btn_menu span + span {
  margin-top: 7px;
}

@media (min-width: 1280px) {
  #header nav {
    margin-bottom: 3px;
  }
}
@media (max-width: 1279px) {
  #header .inr {
    gap: 3.125em;
  }
  #header nav {
    display: none;
  }
  #header .inr .area_util {
    margin-left: auto; /* 28% */
  }
  .btn_menu {
    display: block;
  }
}

@media (max-width: 1080px) {
  #header .inr .area_util {
    display: none;
  }
  .btn_menu {
    width: 24px;
  }
  .btn_menu span + span {
    margin-top: 6px;
  }
}
/* 모바일 메뉴 */
.m_gnb {
  overflow: hidden auto;
  position: fixed;
  top: 0px;
  right: 0;
  transform: translateX(100%);
  max-width: 320px;
  width: 100%;
  height: 100%;
  background: #fff;
  transition-timing-function: ease-out;
  z-index: 999;
}
.m_gnb .header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.m_gnb > ul > li > a {
  display: block;
  position: relative;
  padding: 15px 25px;
  border-bottom: 1px solid #eaeaea;
  color: #424242;
  transition: all 0.3s ease 0s;
}
.m_gnb > ul > li:first-child > a {
  border-top: 1px solid #eaeaea;
}
.m_gnb > ul > li > a.open:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: 11px;
  height: 7px;
  background: url(../images/common/menu_button.svg) no-repeat 50% 0;
  transition: all 0.4s ease 0s;
  background-size: 100%;
}
.m_gnb > ul > li > a.active:before {
  transform: translateY(-50%) rotate(180deg);
}
.m_gnb > ul > li > ul {
  display: none;
  background: #efefef;
}
.m_gnb > ul > li > ul > li {
  border-bottom: 1px solid #dedede;
}
.m_gnb > ul > li > ul > li > a {
  position: relative;
  display: block;
  padding: 15px 25px;
  font-size: 14px;
  color: #333;
}
.m_gnb .btn_close {
  opacity: 0;
  flex: 0 0 25px;
  display: block;
  position: relative;
  margin-right: -100vw;
  width: 25px;
  height: 25px;
  font-size: 0px;
}
.m_gnb.active {
  transform: translateX(0);
}
.m_gnb.active .btn_close {
  opacity: 1;
  margin-right: 15px;
}
.m_gnb .btn_close:before,
.m_gnb .btn_close:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 1px;
  background: #333;
  transform: translateY(-50%) rotate(45deg);
}
.m_gnb .btn_close:after {
  transform: translateY(-50%) rotate(-45deg);
}
.m_gnb .area_util {
  padding: 15px 25px;
  justify-content: center;
}
.m_gnb .area_util > * {
  flex: 1;
}
.m_gnb .area_util .site_btn {
  width: 100%;
}
.m_gnb .area_util .site_link ul {
  left: auto;
  right: 0;
  transform: none;
}
.cover {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 995;
  visibility: hidden;
  opacity: 0;
}
.cover.active {
  visibility: visible;
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  #header {
    transition: 0.4s;
  }
  #header .gnb > li > .sub_menu {
    transition: 0.3s;
  }
  .m_gnb {
    transition-duration: 0.5s;
  }
  .m_gnb .btn_close {
    transition: 0.8s;
  }
  .cover {
    transition: 0.4s;
  }
}

#footer {
  padding: 4.28571429em 0 3.92857143em;
  background: var(--black);
  font-size: var(--font_size14);
  color: var(--gray);
}
#footer .inr {
  display: flex;
  align-items: flex-start;
  gap: 1.5em 7.91666667vw;
}
#footer .logo_svg__text path {
  fill: var(--gray);
}
#footer .address span {
  display: inline-block;
  margin: 0 2.64285714em 0.57142857em 0;
}
#footer .address span,
#footer .address span a {
  font-weight: 300;
}
#footer .address span b {
  margin-right: 0.21428571em;
}
#footer .address p {
  margin-top: 1.57142857em;
  font-weight: 300;
}
#footer .sns {
  display: flex;
  justify-content: flex-end;
}
#footer .sns li {
  margin-left: 13px;
}
#footer .sns li a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
}
#footer .sns li a::before {
  content: "";
  display: block;
  background: no-repeat 100% 50%;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#footer .sns li:nth-child(1) {
  margin-left: 0;
}
#footer .sns li:nth-child(1) a::before {
  background-image: url(/images/common/i_blog.svg);
}
#footer .sns li:nth-child(2) a::before {
  background-image: url(/images/common/i_band.svg);
}
#footer .sns li:nth-child(3) a::before {
  background-image: url(/images/common/i_kakao.svg);
}
#footer .sns li:nth-child(4) a::before {
  background-image: url(/images/common/i_instagram.svg);
}
#footer .sns li:nth-child(5) a::before {
  background-image: url(/images/common/i_facebook.svg);
}

/* .aside_menu {width: 160px; position: fixed; right: 40px; bottom: 10%; transform: translateX(170px); opacity: 0; z-index: 80;  transition: all 0.5s ease;} */
.aside_menu {
  width: 58px;
  position: fixed;
  right: 40px;
  bottom: 0;
  transform: translateY(-20%);
  z-index: 80;
}
/* .aside_menu.on {opacity: 1; visibility: visible; transform: translateX(0);} */
.aside_menu.fixed {
  position: absolute;
  bottom: auto;
  transform: translateY(-120%);
}
.aside_menu > ul > li {
  margin: 13px 0;
  position: relative;
  width: 100%;
}
.aside_menu > ul > li a {
  display: flex;
  gap: 0 10px;
  justify-content: flex-end;
  align-items: center;
}
.aside_menu > ul > li .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 8px 8px 8px -5.92px rgb(255 255 255 / 57%),
    inset -8px -8px 8px -5.92px rgb(94 79 80 / 18%),
    3px 4px 30px 0px rgb(43 31 54 / 20%);
}
.aside_menu > ul > li .icon img {
  width: 28px;
}
.aside_menu > ul > li span {
  opacity: 0;
  display: block;
  padding: 5px 15px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 15px;
  font-size: 13px;
  font-weight: 300;
  color: #fff;
  transition: all 0.2s ease-out;
  pointer-events: none;
}
.aside_menu > ul > li:hover span {
  opacity: 1;
}
.aside_menu .btn_top {
  position: absolute;
  right: 0;
  width: 58px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 13px;
  font-weight: 300;
  color: #fff;
  border-radius: 15px;
}
.button_top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 0.45454545em;
  right: 0;
  width: 4.09090909em;
  height: 4.09090909em;
  background: #292929;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  color: #fff;
}

@media (min-width: 1280px) {
  #footer address {
    margin-top: 2px;
  }
}
@media (max-width: 1279px) {
  #footer .inr {
    flex-direction: column;
  }
  .button_top {
    top: 0;
  }
  #footer .sns {
    justify-content: flex-start;
  }
  #footer .sns li a {
    width: 36px;
    height: 36px;
  }
  #footer .sns li a::before {
    width: 19px;
    height: 19px;
  }
}

@media (max-width: 767px) {
  .aside_menu {
    right: 15px;
    transform: translateY(-15%);
  }
  .aside_menu.fixed {
    transform: translateY(-115%);
  }
  .aside_menu > ul > li {
    margin: 10px 0;
  }
  .aside_menu > ul > li .icon {
    width: 45px;
    height: 45px;
  }
  .aside_menu > ul > li .icon img {
    width: 25px;
  }
  .aside_menu .btn_top {
    width: 45px;
    padding: 5px 0;
    font-size: 12px;
  }
}

/* ===== NEW TEMPLATE (scoped under .ui-new) ===== */
.ui-new {
  font-family: var(--font-sans, inherit);
  color: var(--black, inherit);
}

@layer reset, form;

.ui-new {
  interpolate-size: allow-keywords;
  --header-height: clamp(60px, calc(100 / var(--container) * 100vw), 100px);
  --container-narrow: 1280;
  --container: 1400;
  --container-wide: 1700;
  --container-scale: 0.92;
  --container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
  --primary: #3b4364;
  --secondary: #e87a4a;
  --placeholder-bg: #444444;
  --white: #fff;
  --black: #222;
  --border-color: #ddd;
  /* components.css 공유 */
  --hover-border-color: #444;
  /* components.css 공유 */
  --font-pret: "Noto Sans KR", "Pretendard Variable", "Pretendard",
    "Malgun Gothic", "Dotum", "Gulim", sans-serif;
  --font-sans: var(--font-pret);
  --site-menu-button-size: 25px;
  /* 
     * 사이트 공통 이미지 플레이스홀더 변수
     * 
     * - --placeholder-image-bg : 기본 배경색 (이미지 로딩 실패 또는 미설정 시 표시)
     * - --placeholder-image-url : 플레이스홀더 로고 이미지 경로
     * - --placeholder-image-size : 플레이스홀더 로고 크기 (최대 크기 제한 포함)
     *
     * layout.css 에 선언하여 전역에서 동일한 디자인 컨셉 유지 및 관리.
     * 접근성 향상을 위해 이미지가 없을 경우에도 시각적 빈 공간이 없도록 함.
     */
  --placeholder-image-bg: #e0e0e0;
  --placeholder-image-url: url("/assets/images/layouts/placeholder-image.png");
  --placeholder-image-size: min(60%, 200px);
}

@media (prefers-reduced-motion: no-preference) {
  .ui-new /* @view-transition{ navigation: auto; } */
.ui-new html {
    scroll-behavior: smooth;
  }
}

.ui-new .container {
  position: relative;
  width: calc(var(--container-scale) * 100%);
  max-width: calc(var(--container) * 1px);
  margin-inline: auto;
}

.ui-new .container.container--narrow {
  max-width: calc(var(--container-narrow) * 1px);
}

.ui-new .container.container--wide {
  max-width: calc(var(--container-wide) * 1px);
}

.ui-new .container.container--fluid {
  width: auto;
  max-width: none;
}

.ui-new .site-header {
  background-color: #fff;
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
}

.ui-new .site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.ui-new .site-header .logo {
  position: relative;
  display: inline-block;
  justify-self: start;
}

.ui-new .site-header .logo-image {
  display: block;
  height: auto;
  width: clamp(160px, 12.5vw, 245px);
  max-width: 100%;
}

.ui-new .site-header .main-nav .nav-menu-level-1 {
  display: flex;
}

.ui-new .site-header .main-nav .nav-item-level-1 {
  position: relative;
}

.ui-new .site-header .main-nav .nav-link-level-1 {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding-inline: clamp(10px, calc(50.5 / 1920 * 100vw), 40px);
  font: 20px var(--font-sans);
  font-weight: 600;
}

.ui-new .site-header .main-nav .nav-link-level-1:hover {
  color: #3b4364;
  font-weight: 700;
}

.ui-new .site-header .main-nav .nav-menu-level-2 {
  position: absolute;
  top: 75%;
  left: 50%;
  width: max-content;
  min-width: 120px;
  background: #fff;
  border: 1px solid #ddd;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
}

.ui-new .site-header .main-nav li:hover .nav-menu-level-2 {
  top: 80%;
  visibility: visible;
  opacity: 1;
}

.ui-new .site-header .main-nav .nav-link-level-2 {
  display: block;
  padding: 14px;
  font-size: 14px;
  text-align: center;
  color: #333;
}

.ui-new .site-header .main-nav .nav-link-level-2:hover {
  color: #fff;
  background: var(--primary);
}

.ui-new .site-header .main-nav .nav-item-level-2 + .nav-item-level-2 {
  border-top: 1px solid #ddd;
}

@media (prefers-reduced-motion: no-preference) {
  .ui-new .site-header .main-nav .nav-menu-level-2 {
    transition: 0.3s;
  }
}

@media (width < 1280px) {
  .ui-new .site-header .main-nav {
    display: none;
  }
}

.ui-new .site-header .site-menu-toggle {
  position: relative;
  display: block;
  width: var(--site-menu-button-size);
  aspect-ratio: 1;
  cursor: pointer;
}

.ui-new .site-header .site-menu-toggle .bar {
  position: absolute;
  inset: 0;
  height: 2px;
  margin: auto;
  background: currentcolor;
}

.ui-new .site-header .site-menu-toggle .bar-1 {
  translate: 0 -8px;
}

.ui-new .site-header .site-menu-toggle .bar-3 {
  translate: 0 8px;
}

.ui-new .site-header .site-menu {
  --border-color: #eaeaea;
  --padding-block: 15px;
  --padding-inline: 16px;
  left: auto;
  z-index: 12;
  width: 100%;
  max-width: 280px;
  height: 100dvh;
  padding: 0;
  color: #000;
  background: #fff;
  border: 0;
}

.ui-new .site-header .site-menu::backdrop {
  background: #000;
}

.ui-new .site-header .site-menu .site-menu-header {
  display: grid;
  align-items: center;
  justify-content: flex-end;
  height: var(--header-height);
}

.ui-new .site-header .site-menu .site-menu-close {
  position: relative;
  display: block;
  width: var(--site-menu-button-size);
  aspect-ratio: 1;
  margin-right: 16px;
  background: 0;
}

.ui-new .site-header .site-menu .site-menu-close::before,
.ui-new .site-header .site-menu .site-menu-close::after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: currentcolor;
  transform: translateY(-50%) rotate(45deg);
  content: "";
}

.ui-new .site-header .site-menu .site-menu-close::after {
  transform: translateY(-50%) rotate(-45deg);
}

.ui-new .site-header .site-menu .nav-menu-level-1 > li {
  border-top: 1px solid var(--border-color);
}

.ui-new .site-header .site-menu .nav-menu-level-1 > li:last-child {
  border-bottom: 1px solid var(--border-color);
}

.ui-new .site-header .site-menu .nav-menu-level-1 .nav-link-level-1 {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--padding-block) 30px var(--padding-block) var(--padding-inline);
  font-size: 16px;
  text-align: left;
}

.ui-new
  .site-header
  .site-menu
  .nav-menu-level-1
  summary.nav-link-level-1::before {
  position: absolute;
  inset: 0;
  display: block;
  width: 8px;
  aspect-ratio: 1;
  margin: auto 16px auto auto;
  border: solid currentcolor;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg) translateY(-75%);
  content: "";
}

.ui-new
  .site-header
  .site-menu
  .nav-menu-level-1[open]
  summary.nav-link-level-1::before {
  translate: 0 -50%;
  scale: 1 -1;
}

.ui-new .site-header .site-menu .nav-menu-level-1::details-content {
  height: 0;
  overflow: clip;
}

.ui-new .site-header .site-menu .nav-menu-level-1[open]::details-content {
  height: auto;
}

.ui-new .site-header .site-menu .nav-menu-level-1 .nav-menu-level-2 {
  background: #f8f8f8;
}

.ui-new .site-header .site-menu .nav-menu-level-1 .nav-menu-level-2 > li {
  border-top: 1px solid var(--border-color);
}

.ui-new .site-header .site-menu .nav-menu-level-1 .nav-link-level-2 {
  position: relative;
  display: block;
  padding: var(--padding-block) var(--padding-inline);
  font-size: 14px;
}

@media (prefers-reduced-motion: no-preference) {
  .ui-new .site-header .site-menu {
    translate: 100%;
    transition: 0.3s allow-discrete;
  }
  .ui-new .site-header .site-menu::backdrop {
    opacity: 0;
    transition: 0.3s allow-discrete;
  }
  .ui-new .site-header .site-menu:popover-open {
    translate: 0;
  }
  .ui-new .site-header .site-menu:popover-open::backdrop {
    opacity: 0.6;
  }
  @starting-style {
    .ui-new .site-header .site-menu:popover-open::backdrop {
      opacity: 0;
    }
  }
  .ui-new .site-header .site-menu .nav-menu-level-1 .nav-link-level-1,
  .ui-new .site-header .site-menu .nav-menu-level-1 summary::before,
  .ui-new .site-header .site-menu .nav-menu-level-1::details-content {
    transition: 0.3s allow-discrete;
  }
  .ui-new .site-header .site-menu .nav-menu-level-1::details-content {
    height: 0;
    overflow: clip;
  }
  .ui-new .site-header .site-menu .nav-menu-level-1[open]::details-content {
    height: auto;
  }
}

.ui-new .cta-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 21px;
  background-color: #3b4364;
  border-radius: 60px;
  width: 179px;
  height: 60px;
  font-family: "roboto";
  color: #fff;
  transition: background-color 0.3s ease-in, color 0.3s ease-in,
    border-color 0.3s ease-in;
}

.ui-new .cta-button svg path {
  fill: currentColor;
}

.ui-new .cta-button:hover {
  background-color: #fff;
  color: #3b4364;
  border: solid 1.8px #3b4364;
}

.ui-new .p-tel {
  color: inherit;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (width >= 1280px) {
  .ui-new .site-header .site-menu-toggle {
    display: none;
  }
  .ui-new .site-header .cta-button {
    display: inline-flex;
  }
}

@media (width < 1280px) {
  .ui-new .site-header .cta-button {
    display: none;
  }
  .ui-new .site-header .site-menu-toggle {
    display: block;
  }
}

.ui-new .site-menu-cta {
  display: block;
  padding: var(--padding-block) var(--padding-inline);
}

.ui-new .site-menu-cta .cta-button {
  width: 100%;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 12px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: 500 14px var(--font-sans);
}

.ui-new .site-footer {
  padding-block: 26px 80px;
  color: #bfbfbf;
  background: #222;
}

.ui-new .site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ui-new .site-footer .nav-menu {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 8px;
}

.ui-new .site-footer .nav-link {
  padding: 8px 16px;
  border-radius: 2px;
  border: 1px solid #555;
  font-size: 11px;
  color: #eee;
}

.ui-new .site-info-list {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 40px;
  margin-top: 0;
}

.ui-new .site-info-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ui-new .site-info-item dt {
  font-weight: 600;
  color: #b8b8b8;
  font-size: 16px;
}

.ui-new .site-info-item dd {
  font-size: 16px;
  color: #b8b8b8;
  font-weight: 600;
  margin: 0;
}

.ui-new .site-info-item--row2 {
  flex-basis: 100%;
  margin-top: 4px;
  gap: 40px;
}

.ui-new .site-info .copyright {
  margin-top: 38px;
  font-size: 16px;
  color: #b8b8b8;
  font-weight: 400;
}

.ui-new .terms {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
}

.ui-new .terms .f-nav {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.ui-new .terms-nav {
  display: flex;
  gap: 12px;
}

.ui-new .footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  border-bottom: solid 1px #555;
  padding-bottom: 17px;
}

.ui-new .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.ui-new .footer-sns {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 1024px) {
  .ui-new .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .ui-new .footer-top .footer-logo img {
    max-width: 200px;
    height: auto;
  }
  .ui-new .terms-nav {
    margin-left: 0;
  }
  .ui-new .footer-bottom {
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
  }
  .ui-new .footer-sns {
    align-self: flex-start;
  }
}

@media (max-width: 640px) {
  .ui-new .site-footer {
    padding-block: 24px 40px;
  }
  .ui-new .footer-top {
    align-items: flex-start;
    text-align: left;
  }
  .ui-new .terms-nav {
    display: flex;
    gap: 8px;
  }
  .ui-new .terms {
    padding: 8px 14px;
  }
  .ui-new .terms .f-nav {
    font-size: 13px;
  }
  .ui-new .footer-bottom {
    align-items: flex-start;
  }
  .ui-new .site-info-list {
    gap: 8px 20px;
  }
  .ui-new .site-info-item dt,
  .ui-new .site-info-item dd {
    font-size: 14px;
  }
  .ui-new .site-info-item--row2 {
    flex-basis: 100%;
    margin-top: 8px;
    gap: 20px;
    flex-wrap: wrap;
  }
  .ui-new .site-info .copyright {
    margin-top: 24px;
    font-size: 13px;
  }
  .ui-new .footer-sns {
    margin-top: 16px;
    gap: 10px;
  }
  .ui-new .footer-sns-link {
    width: 100%;
  }
}

.ui-new {
  --font-min-xl: 32px;
  /* 60–70 */
  --font-min-lg: 24px;
  /* 50–59 */
  --font-min-md: 20px;
  /* 36–49 */
  --font-min-sm: 18px;
  /* 26–35 */
  --font-min-xs: 16px;
  /* 16–25 */
  --font-min-xxs: 14px;
  /* 15 */
  --font-min-minimum: 12px;
  /* 12 */

  --font-size-heading-xl: var(--font-size-32);
  --font-size-heading-md: var(--font-size-24);
  --font-size-body-lg: var(--font-size-18);
  --font-size-body: var(--font-size-16);
  --font-size-caption: var(--font-size-13);
  --font-size-70: clamp(
    var(--font-min-xl),
    calc(70 / var(--container) * 100vw),
    70px
  );
  --font-size-69: clamp(
    var(--font-min-xl),
    calc(69 / var(--container) * 100vw),
    69px
  );
  --font-size-68: clamp(
    var(--font-min-xl),
    calc(68 / var(--container) * 100vw),
    68px
  );
  --font-size-67: clamp(
    var(--font-min-xl),
    calc(67 / var(--container) * 100vw),
    67px
  );
  --font-size-66: clamp(
    var(--font-min-xl),
    calc(66 / var(--container) * 100vw),
    66px
  );
  --font-size-65: clamp(
    var(--font-min-xl),
    calc(65 / var(--container) * 100vw),
    65px
  );
  --font-size-64: clamp(
    var(--font-min-xl),
    calc(64 / var(--container) * 100vw),
    64px
  );
  --font-size-63: clamp(
    var(--font-min-xl),
    calc(63 / var(--container) * 100vw),
    63px
  );
  --font-size-62: clamp(
    var(--font-min-xl),
    calc(62 / var(--container) * 100vw),
    62px
  );
  --font-size-61: clamp(
    var(--font-min-xl),
    calc(61 / var(--container) * 100vw),
    61px
  );
  --font-size-60: clamp(
    var(--font-min-xl),
    calc(60 / var(--container) * 100vw),
    60px
  );
  --font-size-59: clamp(
    var(--font-min-lg),
    calc(59 / var(--container) * 100vw),
    59px
  );
  --font-size-58: clamp(
    var(--font-min-lg),
    calc(58 / var(--container) * 100vw),
    58px
  );
  --font-size-57: clamp(
    var(--font-min-lg),
    calc(57 / var(--container) * 100vw),
    57px
  );
  --font-size-56: clamp(
    var(--font-min-lg),
    calc(56 / var(--container) * 100vw),
    56px
  );
  --font-size-55: clamp(
    var(--font-min-lg),
    calc(55 / var(--container) * 100vw),
    55px
  );
  --font-size-54: clamp(
    var(--font-min-lg),
    calc(54 / var(--container) * 100vw),
    54px
  );
  --font-size-53: clamp(
    var(--font-min-lg),
    calc(53 / var(--container) * 100vw),
    53px
  );
  --font-size-52: clamp(
    var(--font-min-lg),
    calc(52 / var(--container) * 100vw),
    52px
  );
  --font-size-51: clamp(
    var(--font-min-lg),
    calc(51 / var(--container) * 100vw),
    51px
  );
  --font-size-50: clamp(
    var(--font-min-lg),
    calc(50 / var(--container) * 100vw),
    50px
  );
  --font-size-49: clamp(
    var(--font-min-md),
    calc(49 / var(--container) * 100vw),
    49px
  );
  --font-size-48: clamp(
    var(--font-min-md),
    calc(48 / var(--container) * 100vw),
    48px
  );
  --font-size-47: clamp(
    var(--font-min-md),
    calc(47 / var(--container) * 100vw),
    47px
  );
  --font-size-46: clamp(
    var(--font-min-md),
    calc(46 / var(--container) * 100vw),
    46px
  );
  --font-size-45: clamp(
    var(--font-min-md),
    calc(45 / var(--container) * 100vw),
    45px
  );
  --font-size-44: clamp(
    var(--font-min-md),
    calc(44 / var(--container) * 100vw),
    44px
  );
  --font-size-43: clamp(
    var(--font-min-md),
    calc(43 / var(--container) * 100vw),
    43px
  );
  --font-size-42: clamp(
    var(--font-min-md),
    calc(42 / var(--container) * 100vw),
    42px
  );
  --font-size-41: clamp(
    var(--font-min-md),
    calc(41 / var(--container) * 100vw),
    41px
  );
  --font-size-40: clamp(
    var(--font-min-md),
    calc(40 / var(--container) * 100vw),
    40px
  );
  --font-size-39: clamp(
    var(--font-min-md),
    calc(39 / var(--container) * 100vw),
    39px
  );
  --font-size-38: clamp(
    var(--font-min-md),
    calc(38 / var(--container) * 100vw),
    38px
  );
  --font-size-37: clamp(
    var(--font-min-md),
    calc(37 / var(--container) * 100vw),
    37px
  );
  --font-size-36: clamp(
    var(--font-min-md),
    calc(36 / var(--container) * 100vw),
    36px
  );
  --font-size-35: clamp(
    var(--font-min-sm),
    calc(35 / var(--container) * 100vw),
    35px
  );
  --font-size-34: clamp(
    var(--font-min-sm),
    calc(34 / var(--container) * 100vw),
    34px
  );
  --font-size-33: clamp(
    var(--font-min-sm),
    calc(33 / var(--container) * 100vw),
    33px
  );
  --font-size-32: clamp(
    var(--font-min-sm),
    calc(32 / var(--container) * 100vw),
    32px
  );
  --font-size-31: clamp(
    var(--font-min-sm),
    calc(31 / var(--container) * 100vw),
    31px
  );
  --font-size-30: clamp(
    var(--font-min-sm),
    calc(30 / var(--container) * 100vw),
    30px
  );
  --font-size-29: clamp(
    var(--font-min-sm),
    calc(29 / var(--container) * 100vw),
    29px
  );
  --font-size-28: clamp(
    var(--font-min-sm),
    calc(28 / var(--container) * 100vw),
    28px
  );
  --font-size-27: clamp(
    var(--font-min-sm),
    calc(27 / var(--container) * 100vw),
    27px
  );
  --font-size-26: clamp(
    var(--font-min-sm),
    calc(26 / var(--container) * 100vw),
    26px
  );
  --font-size-25: clamp(
    var(--font-min-xs),
    calc(25 / var(--container) * 100vw),
    25px
  );
  --font-size-24: clamp(
    var(--font-min-xs),
    calc(24 / var(--container) * 100vw),
    24px
  );
  --font-size-23: clamp(
    var(--font-min-xs),
    calc(23 / var(--container) * 100vw),
    23px
  );
  --font-size-22: clamp(
    var(--font-min-xs),
    calc(22 / var(--container) * 100vw),
    22px
  );
  --font-size-21: clamp(
    var(--font-min-xs),
    calc(21 / var(--container) * 100vw),
    21px
  );
  --font-size-20: clamp(
    var(--font-min-xs),
    calc(20 / var(--container) * 100vw),
    20px
  );
  --font-size-20-to-14: clamp(14px, calc(20 / var(--container) * 100vw), 20px);
  --font-size-19: clamp(
    var(--font-min-xs),
    calc(19 / var(--container) * 100vw),
    19px
  );
  --font-size-18: clamp(
    var(--font-min-xs),
    calc(18 / var(--container) * 100vw),
    18px
  );
  --font-size-18-to-14: clamp(14px, calc(18 / var(--container) * 100vw), 18px);
  --font-size-17: clamp(
    var(--font-min-xs),
    calc(17 / var(--container) * 100vw),
    17px
  );
  --font-size-16: clamp(
    var(--font-min-xxs),
    calc(16 / var(--container) * 100vw),
    16px
  );
  --font-size-16-to-12: clamp(12px, calc(16 / var(--container) * 100vw), 16px);
  --font-size-15: clamp(
    var(--font-min-xxs),
    calc(15 / var(--container) * 100vw),
    15px
  );
  --font-size-15-to-12: clamp(12px, calc(15 / var(--container) * 100vw), 15px);
  --font-size-14: clamp(
    var(--font-min-minimum),
    calc(14 / var(--container) * 100vw),
    14px
  );
  --font-size-13: clamp(
    var(--font-min-minimum),
    calc(13 / var(--container) * 100vw),
    13px
  );
}

@media (min-width: 1921px) {
  .ui-new html {
    font-size: clamp(0px, calc((100 / 1920) * 1vw), 100px);
  }
}

@media (width: 1920px) {
  /*
	1920px 해상도 환경: 글꼴 크기 6.25% 고정값 적용
	브라우저 기본 글꼴 크기 대응을 위한 최적화 설정
	다른 해상도에서는 clamp 함수로 동적 크기 조정을 하지만, 1920px에서는 브라우저 기본 글꼴 크기 기준 6.25% 고정 비율로
	일관된 글꼴 표시 보장
	*/
  .ui-new html {
    font-size: 6.25%;
  }
}

@media (max-width: 1919px) and (min-width: 1280px) {
  .ui-new html {
    font-size: clamp(
      0px,
      calc((100 / var(--container)) * var(--container-scale) * 1vw),
      1px
    );
  }
}

@media (max-width: 1279px) and (min-width: 768px) {
  /* 태블릿 화면 환경: 가독성 향상을 위한 0.875 계수 적용, 16rem이 14px로 표시되도록 비율 세부 조정 */
  .ui-new /* html{ font-size: clamp(0px, calc((100 / 768) * 875vw), 1px); } */
.ui-new html {
    font-size: clamp(0px, calc((100 / 768) * 1vw), 1px);
  }
}

@media (max-width: 767px) {
  .ui-new html {
    font-size: clamp(0px, calc((100 / 360) * 1vw), 1px);
  }
}

@media (max-width: 1278px) {
  #header.header-new > .container .area_util {
    display: none !important;
  }
  .area_util > a {
    width: 100%;
    height: 40px;
    gap: 12px;
  }
}