@charset "UTF-8";
/*
* for supported in all modern browsers
* Copyright 마케터비
* 마케터비
*/
/* ====================================================================================================================
   디자인 토큰 — 단일 출처 (Single Source of Truth)
   --------------------------------------------------------------------------------------------------------------------
   [로드 순서]  css/common/base.css → css/layout.css(이 파일) → preferences.html 인라인 :root
     - base.css : 폼/버튼/유틸리티가 쓰는 공통 토큰 30개 (색상·폼·버튼·다크팔레트·레거시 치수)
     - layout.css(이 파일) : 브랜드 색상, 배경, 그림자, 트랜지션 + 타이포/여백/라운딩 "스케일" 전부
     - preferences.html 인라인 : 관리자 설정값이 있으면 --theme-color, --bg-footer-color 가 최종 승리

   [원칙]  같은 이름의 토큰을 base.css 와 이 파일에 동시에 두지 말 것.
           브랜드/레이아웃에 관계된 토큰은 반드시 이 파일에서만 선언한다.
           (2026-08-19: base.css 에 중복 선언돼 있던 죽은 6개를 제거하고 이쪽으로 일원화)
   ==================================================================================================================== */
:root {
  /* ---- 브랜드 / 배경 (base.css 의 동명 토큰을 대체. 이 파일이 유일한 출처) ---- */
  --theme-color: #d51515;          /* 관리자 설정 시 preferences.html 인라인이 최종 승리 */
  --bg-color: #f1f5f9;
  --content-bg-color: #fff;
  --bg-footer-color: #f2f5f9;      /* 관리자 설정 시 preferences.html 인라인이 최종 승리 */
  --box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, .08);

  /* ---- 어두운 면 위에 얹는 색 (다크모드가 아니라 "디자인"이다) ----
     쓰이는 곳: 투명 헤더(히어로 위), 퀵버튼, 데스크탑 퀵상담 바.
     2026-08-21 다크모드를 걷어내면서 --dark-* 라는 오해를 부르는 이름에서 바꿨다. 값은 그대로다.
       --dark-text-strong-color → --on-dark-strong-color
       --dark-text-base-color   → --on-dark-base-color   (예전 base.css 소유)
       --dark-btn-border-color  → --on-dark-border-color
       --dark-bg-color          → --bar-bg-color         (퀵상담 바 배경 전용) */
  --on-dark-strong-color: #EFF2F7;
  --on-dark-base-color: #ADB7BE;
  --on-dark-border-color: #AAB0B8;
  --bar-bg-color: #1C1D21;

  /* ==================================================================================================================
     타이포그래피 스케일  (신설 2026-08-19)
     ------------------------------------------------------------------------------------------------------------------
     ★ 2026-08-21 : 루트 폰트 크기를 전 화면 16px 로 통일했다.
       예전에는 모바일 16px / 데스크탑(1024px~) 14px 이라 같은 rem 이 데스크탑에서 12.5% 작아졌고,
       그것을 상쇄하려고 아래쪽에 @media :root 보정 블록(--fs-* 를 16/14 배로 키우는)을 두고 있었다.
       루트가 하나로 통일되면서 그 보정 블록은 필요가 없어져 삭제했다.
       → 이제 아래 rem 값이 곧 px 이다 (1rem = 16px, 전 화면 공통). 실제 렌더 px 은 예전 데스크탑과 같다.
         (예: --fs-sm 은 예전에도 모바일 0.875rem×16=14px, 데스크탑 1rem×14=14px 이었다)

     ★ 이번 작업에서는 "토큰 정의"만 한다. 기존 CSS 를 일괄 치환하지 않았다.
       (다른 작업자와의 충돌 및 회귀 위험 때문. 아래 매핑표를 보고 점진적으로 옮길 것)

     ┌ 토큰 ─────────┬ 모바일 ──┬ px ─┬ 이 값을 쓰고 있는 기존 코드(치환 후보) ────────────────────────┐
     │ --fs-xs       │ 0.75rem  │ 12  │ font-size:12px (10곳), 0.75rem, .fs-12                        │
     │ --fs-sm       │ 0.875rem │ 14  │ font-size:14px (10곳), 0.875rem (7곳) — .layout__footer 등    │
     │ --fs-base     │ 1rem     │ 16  │ font-size:1rem (20곳) — .lnb__list a, .lnb-child a 등         │
     │ --fs-md       │ 1.125rem │ 18  │ font-size:18px (11곳), 1.125rem (4곳)                         │
     │ --fs-lg       │ 1.25rem  │ 20  │ font-size:20px (8곳), 1.25rem (4곳)                           │
     │ --fs-xl       │ 1.5rem   │ 24  │ font-size:24px (7곳), 1.5rem (4곳)                            │
     │ --fs-2xl      │ 1.75rem  │ 28  │ font-size:28px (7곳), .page-top__title(모바일) 1.75rem        │
     │ --fs-3xl      │ 2rem     │ 32  │ font-size:32px (7곳), 2rem (8곳), .page-top__title @1024      │
     │ --fs-4xl      │ 3rem     │ 48  │ font-size:48px (7곳), 3rem (3곳), .page-top__title @1200      │
     └───────────────┴──────────┴─────┴──────────────────────────────────────────────────────────────┘
       ※ 애매한 중간값(1.05/1.2/1.4rem, 0.78~0.95rem 등)은 위 9단계 중 가장 가까운 쪽으로 흡수할 것.
         예) .lnb__list a @1024 의 1.2rem → --fs-base(데스크탑 환산 16px) 또는 --fs-md 로 판단.

     line-height 는 별도 3단계만 둔다(제목/본문/조밀).
     ================================================================================================================== */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2rem;
  --fs-4xl: 3rem;

  --lh-tight: 1.3;   /* 제목용. base.css 의 h1~h6 line-height:1.3 과 동일 */
  --lh-base: 1.6;    /* 본문 */
  --lh-loose: 1.8;   /* 긴 안내문 */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;    /* base.css h1~h6, .is-active 등에서 쓰는 값 */

  /* ==================================================================================================================
     여백 스케일  (신설 2026-08-19)
     ------------------------------------------------------------------------------------------------------------------
     기존 --gap / --gap2x / --gap3x / --gap4x (base.css) 는 그대로 유지한다.
     이미 20곳 넘게 쓰이고 있어 제거하면 회귀가 크다. 아래 --space-* 는 그 사이를 메우는 확장이며
     겹치는 눈금은 기존 토큰을 그대로 참조(var)해 두 계열이 절대 어긋나지 않게 했다.

     ┌ 토큰 ─────────┬ 값 ────────────┬ px(모바일) ┬ 대응 관계 / 치환 후보 ──────────────────────┐
     │ --space-0     │ 0              │  0         │ padding:0, margin:0                        │
     │ --space-1     │ 0.25rem        │  4         │ 4px (.tel > strong margin-left:4px 등)      │
     │ --space-2     │ 0.5rem         │  8         │ 8px (.xet-pagination padding:0 8px)         │
     │ --space-3     │ 0.75rem        │ 12         │ 10~12px (ul-list padding-left:12px)         │
     │ --space-4     │ var(--gap)     │ 16         │ ★ --gap 과 동일. 16px / 1rem                │
     │ --space-5     │ 1.25rem        │ 20         │ 20px (layout__body-content margin @768)     │
     │ --space-6     │ 1.5rem         │ 24         │ 24px, 26px (padding:26px 매직넘버 흡수)      │
     │ --space-8     │ var(--gap2x)   │ 32         │ ★ --gap2x 와 동일. 30px 도 여기로 흡수       │
     │ --space-10    │ 2.5rem         │ 40         │ 40px                                        │
     │ --space-12    │ var(--gap3x)   │ 48         │ ★ --gap3x 와 동일                           │
     │ --space-16    │ var(--gap4x)   │ 64         │ ★ --gap4x 와 동일. 60px 도 여기로 흡수       │
     │ --space-20    │ 5rem           │ 80         │ 5rem (.member-act padding:5rem 0)           │
     └───────────────┴────────────────┴────────────┴─────────────────────────────────────────────┘
     ================================================================================================================== */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: var(--gap);
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: var(--gap2x);
  --space-10: 2.5rem;
  --space-12: var(--gap3x);
  --space-16: var(--gap4x);
  --space-20: 5rem;

  /* 섹션 세로 여백 (본문 블록 간). 데스크탑에서는 아래 미디어쿼리에서 키운다. */
  --section-gap: var(--gap2x);

  /* ==================================================================================================================
     라운딩 스케일  (신설 2026-08-19)
     ------------------------------------------------------------------------------------------------------------------
     기존 --radius(1rem) / --radius2x(2rem) 은 유지. 아래는 실제 사용 빈도에 맞춘 확장이다.
     ┌ 토큰 ───────────┬ 값 ──────────┬ 치환 후보 ────────────────────────────────────────────────┐
     │ --radius-xs     │ 0.25rem(4px) │ 2~4px (.xet-pagination 4px, .r-2/.r-3/.r-4)              │
     │ --radius-sm     │ 0.5rem (8px) │ ★최다 사용(11곳) 0.5rem, 8px, 6px                        │
     │ --radius-md     │ 0.75rem(12px)│ 10px(5곳), 12px(3곳), 14px                               │
     │ --radius-lg     │ var(--radius)│ ★ --radius 와 동일. 1rem / 16px                          │
     │ --radius-xl     │ 1.5rem (24px)│ 20px, 24px                                               │
     │ --radius-2xl    │ var(--radius2x) │ ★ --radius2x 와 동일. 2rem / 30~40px                  │
     │ --radius-pill   │ 999px        │ 999px(7곳), 30px/40px/50px/60px/80px/100px 알약형        │
     │ --radius-circle │ 50%          │ .r-half, 아바타/점(dot)                                  │
     └─────────────────┴──────────────┴──────────────────────────────────────────────────────────┘
     ================================================================================================================== */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: var(--radius);
  --radius-xl: 1.5rem;
  --radius-2xl: var(--radius2x);
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ==================================================================================================================
     트랜지션  (--transition-all 은 21곳에서 사용 중이므로 값·이름 그대로 유지)
     ┌ 토큰 ───────────────┬ 값 ─────────────────────┬ 치환 후보 ─────────────────────────────────┐
     │ --transition-all    │ all 0.22s ease-in-out   │ (기존) 그대로 유지                          │
     │ --transition-fast   │ all 0.18s ease-in-out   │ all 0.15s~0.2s ease-out, 0.18s ease 계열   │
     │ --transition-base   │ var(--transition-all)   │ --transition-all 의 의미 있는 별칭          │
     │ --transition-slow   │ all 0.35s ease-in-out   │ all 0.3s ease-out(8곳), 0.5s 페이드         │
     └─────────────────────┴─────────────────────────┴────────────────────────────────────────────┘
     ================================================================================================================== */
  --transition-all: all 0.22s ease-in-out;
  --transition-fast: all 0.18s ease-in-out;
  --transition-base: var(--transition-all);
  --transition-slow: all 0.35s ease-in-out;
}

/* --------------------------------------------------------------------------------------------------------------------
   데스크탑(1024px~) 토큰 보정
   ★ 2026-08-21 : --fs-* 보정 블록을 삭제했다.
     루트 폰트가 16px 로 통일되어 "데스크탑에서 rem 이 작아지는" 현상 자체가 사라졌기 때문이다.
     삭제 전/후 실제 렌더 px 은 동일하다 (예: --fs-sm  전 1rem×14=14px  →  후 0.875rem×16=14px).
   여백은 화면이 넓어지면 키우는 것이 자연스러우므로 --section-gap 만 남긴다.
   -------------------------------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --section-gap: var(--gap3x);
  }
}

/* ★ 루트 폰트 크기 — 전 화면 16px 고정 (2026-08-21 통일)
   예전에는 아래에 `@media (min-width:1024px) { … font-size:14px }` 가 붙어 있어
   데스크탑에서 rem 이 12.5% 작아지는 함정이 있었다. 그 규칙을 제거했다.
   ※ button/select/input/textarea 를 함께 못박는 것은 의도된 것이다.
     reset.css 가 이들에게 font-size:inherit 을 주기 때문에, 여기서 고정하지 않으면
     14px 짜리 카드 안에 들어간 입력칸이 따라 작아져 iOS 가 화면을 확대해 버린다. */
html,
body,
table,
th,
td,
button,
select,
input,
textarea {
  font-size: 16px;
}

@media (min-width: 1024px) {
  body.cursor {
    cursor: none;
  }
}
::-webkit-scrollbar {
  display: none;
}

.animated {
  opacity: 0;
  animation-delay: 0.1s;
}

body {
  color: var(--text-strong-color);
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
}

.xet-layout {
  overflow: hidden;
  background-color: var(--bg-color);
  transition: var(--transition-all);
}
.xet-layout a:not(.btn) {
  color: var(--text-strong-color);
}
.xet-layout .flex-container {
  display: flex;
}
.xet-layout .xet-btn.bg-theme, .xet-layout .xet-btn.btn-theme {
  background-color: var(--theme-color) !important;
  color: #fff !important;
}
.xet-layout .xet-btn.text-theme {
  color: var(--theme-color) !important;
}
@media (min-width: 1024px) {
  .xet-layout .xet-btn:not(.btn-text):hover {
    border-color: var(--theme-color) !important;
    background-color: var(--theme-color) !important;
    color: #fff !important;
  }
  .xet-layout .xet-btn:not(.btn-text):hover svg {
    fill: #fff !important;
  }
  .xet-layout .xet-btn.btn-text:hover {
    color: var(--theme-color) !important;
  }
  .xet-layout .xet-btn.btn-text:hover svg {
    fill: var(--theme-color) !important;
  }
}
.xet-layout .layout__container {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh);
}
.xet-layout .layout__body-page-top {
  position: fixed;
  width: 100%;
  height: calc(100vh);
  padding-top: 6rem;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  background-color: #606773;
  color: var(--on-dark-strong-color);
}
.xet-layout .layout__body-page-top .page-top__title {
  font-size: 1.75rem;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.xet-layout .layout__body-content {
  z-index: 1;
  margin-top: 11.5rem;
  padding: var(--gap) 0;
  flex: 1 0 auto;
  border-radius: 0rem 0rem 0 0;
  background-color: var(--content-bg-color);
  transition: var(--transition-all);
  box-shadow: var(--box-shadow);
}
.xet-layout .layout__body-content .page-path {
  display: none;
  margin-bottom: var(--gap);
}
.xet-layout .layout__body-content .page-path ul li {
  position: relative;
  float: left;
  padding: 0 20px 0 0;
  margin: 0 0 0 10px;
}
.xet-layout .layout__body-content .page-path ul li::after {
  content: "";
  font-family: xeicon !important;
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-base-color);
}
.xet-layout .layout__body-content .page-path ul li:first-child {
  margin-left: 0;
}
.xet-layout .layout__body-content .page-path ul li:last-child {
  padding-right: 0;
}
.xet-layout .layout__body-content .page-path ul li:last-child::after {
  display: none;
}
.xet-layout .layout__body-content .page-path ul li a {
  display: flex;
  align-items: center;
  height: 24px;
  text-transform: uppercase;
  color: var(--text-base-color);
}
.xet-layout .layout__body-content .lnb {
  position: relative;
}
.xet-layout .layout__body-content .lnb .lnb__list {
  text-align: center;
  margin-bottom: var(--gap2x);
  white-space: nowrap;
  overflow-x: auto;
}
.xet-layout .layout__body-content .lnb .lnb__list.is-active {
  white-space: normal;
  text-align: left;
}
.xet-layout .layout__body-content .lnb .lnb__list a {
  display: inline-flex;
  align-items: center;
  height: var(--button-height);
  font-size: 1rem;
  margin-right: 1rem;
  border-bottom: 1px solid transparent;
}
.xet-layout .layout__body-content .lnb .lnb__list a.is-active {
  font-weight: 700;
  color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}
.xet-layout .layout__body-content .lnb .lnb__list .lnb__list-btn-open {
  z-index: 3;
  display: none;
  position: absolute;
  top: 0;
  right: -2px;
  width: var(--button-height);
  padding: 0;
  border-radius: 40px;
  background-color: var(--content-bg-color);
  border-color: var(--btn-border-color);
}
.xet-layout .layout__body-content .lnb .lnb__list .lnb__list-btn-open.is-active svg {
  transform: rotate(180deg);
}
.xet-layout .layout__body-content .lnb-child {
  text-align: center;
  margin-bottom: var(--gap);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.xet-layout .layout__body-content .lnb-child a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5rem;
  height: 3.25rem;
  font-size: 1rem;
  margin-right: -1px;
  margin-bottom: -1px;
  border: 1px solid var(--border-color);
}
.xet-layout .layout__body-content .lnb-child a.is-active {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  color: var(--on-dark-strong-color) !important;
}
.xet-layout .layout__body-content .xet-content .xet-layout__article .article-title .h2 {
  color: var(--text-strong-color);
}
.xet-layout .layout__body-content .xet-content .xet-layout__article .article-customer {
  color: var(--text-base-color);
}
.xet-layout .layout__body-content .xet-content .xet-layout__article .article-customer .h4 {
  color: var(--text-strong-color);
}
.xet-layout .layout__body-content .xet-content .xet-layout__article .article-customer div > strong {
  color: var(--text-strong-color);
}
.xet-layout .layout__body-content .xet-content .btnArea {
  padding: 0 !important;
}
.xet-layout .layout__footer {
  z-index: 1;
  padding: var(--gap2x) 0;
  font-size: 0.875rem;
  color: #9da2a5;
  transition: var(--transition-all);
  background-color: var(--bg-footer-color);
}
.xet-layout .layout__footer > div > div + div {
  margin-top: var(--gap);
}
.xet-layout .layout__footer .footer-logo {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  text-align: center;
  padding-bottom: var(--gap);
  border-bottom: 1px solid #9da2a5;
}
.xet-layout .layout__footer .h3 {
  order: 2;
  color: #000;
}
.xet-layout .layout__footer .h3 > img {
  display: inline-block;
}
.xet-layout .layout__footer .h3 > img.logo__dark {
  display: none;
}
.xet-layout .layout__footer .tel {
  order: 1;
}
.xet-layout .layout__footer .tel > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border-radius: 30px;
  font-size: 2rem;
  color: var(--theme-color) !important;
}
.xet-layout .layout__footer .tel > span > strong {
  display: block;
  margin-left: 4px;
}
.xet-layout .layout__footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.xet-layout .layout__footer ul li {
  white-space: nowrap;
}
.xet-layout .layout__footer ul li a {
  display: flex;
  align-items: center;
  color: #9da2a5;
}
.xet-layout .layout__footer ul li strong {
  display: inline-block;
  margin-right: 6px;
  color: #b9b9b9;
}

.xet-layout.sub.is-scroll .layout__body-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.xet-layout.sub.is-scroll .layout__footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.xet-layout.member-act .layout__body-content {
  margin: 0 !important;
  padding: 5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.xet-layout.member-act .layout__footer {
  margin: 0 !important;
}

.xet-layout-mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translateZ(0);
  visibility: hidden;
}
.xet-layout-mouse-cursor.cursor-inner {
  margin-left: 2px;
  margin-top: 2px;
  width: 6px;
  height: 6px;
  z-index: 10000001;
  background-color: var(--theme-color);
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.xet-layout-mouse-cursor.cursor-inner.cursor-hover {
  margin-left: -40px;
  margin-top: -40px;
  width: 80px;
  height: 80px;
  background-color: var(--theme-color);
  opacity: 0.3;
}
.xet-layout-mouse-cursor.cursor-outer {
  margin-left: -15px;
  margin-top: -15px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--theme-color);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.5;
  transition: all 0.08s ease-out;
}
.xet-layout-mouse-cursor.cursor-outer.cursor-hover {
  opacity: 0;
}

/* (구) 플로팅 스크롤탑 버튼(#xet-layout-scrolltop-btn)은 제거되었습니다.
   TOP 이동 링크는 이제 푸터 내부(.footer-top-btn)에 고정으로 들어갑니다. */

body.quickbutton .xet-layout {
  padding-bottom: 4rem;
}

/* ====================================================================================================================
   ===== 다크모드 : 2026-08-21 완전 제거 =====
   --------------------------------------------------------------------------------------------------------------------
   발주자 확정으로 이 테마는 항상 라이트로 고정 운영한다.
   js/header.js 가 body 의 color_scheme_dark 클래스를 떼는 동작은 그대로 유지되므로
   (Rhymix 코어·게시판 스킨이 붙이는 클래스를 지우는 역할) 이쪽 JS 는 건드리지 않았다.
   css/ 전체에서 body.color_scheme_dark 규칙 103개(셀렉터 130개)와 미사용 --dark-* 토큰 10개를 삭제했다.

   ※ "어두운 배경 위 밝은 글자" 는 다크모드가 아니라 디자인이다.
     투명 헤더 / 퀵버튼 / 퀵상담 바가 여기에 해당하며, 아래 :root 의 --on-dark-* / --bar-bg-color
     토큰으로 이름을 바로잡아 유지했다. (예전 --dark-text-strong-color 등)
   ※ 남은 다크 코드: include/page_contact/css/style.css 89~92행. 이 폴더는 다른 작업자 담당이라 두었다.
   ==================================================================================================================== */

@media (min-width: 768px) {
  .xet-layout .layout__body-content {
    margin-left: 20px;
    margin-right: 20px;
  }

  .xet-layout.sub .layout__footer {
    margin-left: 20px;
    margin-right: 20px;
  }
}
@media (min-width: 1024px) {
  .xet-layout .layout__body-page-top {
    padding-top: 140px;
  }
  .xet-layout .layout__body-page-top .page-top__title {
    font-size: 28px;
  }
  .xet-layout .layout__body-content {
    margin-top: 252px;
    margin-left: 20px;
    margin-right: 20px;
    padding: var(--gap2x) 0;
  }
  .xet-layout .layout__body-content .page-path {
    display: block;
    margin-bottom: var(--gap2x);
  }
  .xet-layout .layout__body-content .lnb .lnb__list {
    margin-bottom: var(--gap2x);
  }
  .xet-layout .layout__body-content .lnb .lnb__list a {
    font-size: 16.8px;
    margin: 0 14px;
  }
  .xet-layout .layout__body-content .lnb-child {
    margin-bottom: var(--gap2x);
  }
  .xet-layout .layout__footer {
    padding: var(--gap2x) 0;
    font-size: 14px;
  }
  .xet-layout .layout__footer .footer-logo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .xet-layout .layout__footer .footer-logo .h3 {
    order: 1;
  }
  .xet-layout .layout__footer .footer-logo .tel {
    order: 2;
  }

  .xet-layout.sub .layout__footer {
    margin-left: 20px;
    margin-right: 20px;
  }

  .xet-layout.member-act .layout__body-content {
    padding-top: 140px;
  }

  body.quickbutton .xet-layout {
    padding-bottom: 0;
  }
}
@media (min-width: 1200px) {
  .xet-layout .layout__body-page-top {
    padding-top: 168px;
  }
  .xet-layout .layout__body-page-top .page-top__title {
    font-size: 42px;
  }
  .xet-layout .layout__body-content {
    margin-top: 336px;
    margin-left: 24px;
    margin-right: 24px;
    padding: var(--gap3x) 0;
  }
  .xet-layout .layout__body-content .page-path {
    margin-bottom: var(--gap3x);
  }
  .xet-layout .layout__body-content .lnb {
    margin-bottom: var(--gap3x);
  }
  .xet-layout .layout__body-content .lnb-child {
    margin-bottom: var(--gap3x);
  }
  .xet-layout .layout__footer {
    padding: var(--gap3x) 0;
  }
  .xet-layout .layout__footer > div > div + div {
    margin-top: var(--gap2x);
  }
  .xet-layout.sub .layout__footer {
    margin-left: 24px;
    margin-right: 24px;
  }
}
@media (min-width: 1440px) {
  .xet-layout .layout__body-content {
    margin-left: 30px;
    margin-right: 30px;
    padding: var(--gap4x) 0;
  }

  .xet-layout.sub .layout__footer {
    margin-left: 30px;
    margin-right: 30px;
  }
}