/*
마케터비 CSS v2.0.2 2024-02-20 for supported in all modern browsers
By 마케터비
*/
/* ====================================================================================================================
   디자인 토큰 — base.css 담당분 (21개)
   --------------------------------------------------------------------------------------------------------------------
   [토큰이 사는 곳 / 로드 순서]
     1) css/common/base.css   ← 이 파일. 폼·버튼·유틸리티 등 "공통 부품"이 쓰는 기본 토큰.
     2) css/layout.css        ← 브랜드/레이아웃 토큰의 단일 출처(Single Source of Truth).
                                 여기서 선언된 값이 base.css 를 덮어쓴다.
     3) preferences.html 인라인 :root  ← 관리자 설정값(--theme-color, --bg-footer-color)이 최종 승리.

   [이 파일에서 선언하지 않는 토큰 — layout.css 로 이관됨]
     2026-08-19: --theme-color / --bg-color / --box-shadow 는 layout.css 가 뒤에 로드되며 항상
       덮어써서 죽은 선언이었다. 중복을 없애고 layout.css 에만 남겼다.
     2026-08-21: 다크모드를 완전히 제거하면서 이 파일의 다크 팔레트 9개를 삭제했다.
       그중 살아 있던 --dark-text-base-color 하나만 --on-dark-base-color 로 이름을 바꿔
       layout.css 의 :root 로 옮겼다(다크모드가 아니라 "어두운 면 위 밝은 글자" 디자인용).
     ※ 값을 바꾼 것이 아니라 "죽은 선언을 지운 것"이므로 살아 있는 토큰의 최종 계산값은 이전과 동일하다.
     ※ 이 파일을 단독으로 로드하는 곳은 없다(preferences.html 이 base → layout 순으로 항상 함께 로드).

   [layout.css 에서만 선언되는 토큰]
     --content-bg-color / --on-dark-* / --bar-bg-color /
     --transition-all / --bg-footer-color / 타이포·여백·라운딩 스케일 일체
   ==================================================================================================================== */
:root {
  /* 색상 */
  --red-color: #aa0000;
  --muted-color: #9b9ea0;
  --text-base-color: #707070;
  --text-strong-color: #000000;
  --border-color: #D6E4E5;

  /* 폼 */
  --input-bg-color: #FFFFFF;
  --input-border-color: rgba(0, 0, 0, 0.2);
  --focus-border-color: rgba(0, 0, 0, 0.5);
  --disabled-bg-color: #F0F0F0;
  --disabled-color: #B1B1B1;

  /* 버튼 */
  --btn-border-color: #c1c1c1;
  --btn-bg-color: #f0f0f0;

  /* 그림자 (--box-shadow 는 layout.css 소유) */
  --box-shadow2x: 0px 3px 10px rgba(0, 0, 0, .2);

  /* 다크모드 팔레트 9개는 2026-08-21 삭제했다 (다크모드 완전 제거).
     그중 실제로 "어두운 면 위 밝은 글자" 디자인에 쓰이던 --dark-text-base-color 만
     --on-dark-base-color 로 이름을 바꿔 layout.css 의 :root 로 옮겼다.
     → CSS 변수의 단일 출처는 css/layout.css 다. 새 토큰도 그쪽에 만들 것. */

  /* 형태 / 치수 (레거시 별칭. 신규 스케일은 layout.css 의 --radius-* / --space-* 참고) */
  --radius: 1rem;
  --radius2x: 2rem;
  --gap: 1rem;
  --gap2x: 2rem;
  --gap3x: 3rem;
  --gap4x: 4rem;
  --input-height: 2.75rem;
  --button-height: 2.75rem;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Typography
/* ------------------------------------------------------------------------------------------------------------------ */
h1,
.h1 {
  font-size: 1.7rem !important;
}

h2,
.h2 {
  font-size: 1.5rem !important;
}

h3,
.h3 {
  font-size: 1.17rem !important;
}

h4,
.h4 {
  font-size: 1rem !important;
}

h5,
.h5 {
  font-size: 0.83rem !important;
}

h6,
.h6 {
  font-size: 0.67rem !important;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

h1 .thin,
.h1 .thin,
h2 .thin,
.h2 .thin,
h3 .thin,
.h3 .thin,
h4 .thin,
.h4 .thin,
h5 .thin,
.h5 .thin,
h6 .thin,
.h6 .thin {
  font-weight: 400 !important;
}

h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small {
  font-size: 80% !important;
}

h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small {
  font-size: 75% !important;
}

.dropcap {
  float: left !important;
  font-size: 4rem !important;
  line-height: 0.8rem !important;
  margin-right: 0.1rem !important;
  color: #3498db !important;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Numeric utilities  (lightened build 2026-08-19)
/* 원본은 fs 9~100px / mg,pd 0~100px 를 1px 단위로 전부 정의(1,400여 개)했으나
/* 실사용은 mg-b20, mg-t1rem 뿐이었다. 아래 스케일만 남기고 나머지는 제거함.
/*   fs- : 10~30(1px), 32~50(2px), 55,60,64,70,80,90,100 / 1~8rem
/*   mg-,mg-t,mg-b,mg-l,mg-r, pd-,pd-t,pd-b,pd-l,pd-r :
/*         0,2,4,5,6,8,10,12,14,15,16,18,20,22,24,25,28,30,35,40,45,50,55,60,70,80,90,100 / 1~6rem
/*   r-  : 0,1,2,3,4,5,6,8,10,12,15,16,20,24,25,30,40,50,60,80,100 / r-half
/* ------------------------------------------------------------------------------------------------------------------ */
.fs-10{font-size:10px!important}
.fs-11{font-size:11px!important}
.fs-12{font-size:12px!important}
.fs-13{font-size:13px!important}
.fs-14{font-size:14px!important}
.fs-15{font-size:15px!important}
.fs-16{font-size:16px!important}
.fs-17{font-size:17px!important}
.fs-18{font-size:18px!important}
.fs-19{font-size:19px!important}
.fs-20{font-size:20px!important}
.fs-21{font-size:21px!important}
.fs-22{font-size:22px!important}
.fs-23{font-size:23px!important}
.fs-24{font-size:24px!important}
.fs-25{font-size:25px!important}
.fs-26{font-size:26px!important}
.fs-27{font-size:27px!important}
.fs-28{font-size:28px!important}
.fs-29{font-size:29px!important}
.fs-30{font-size:30px!important}
.fs-32{font-size:32px!important}
.fs-34{font-size:34px!important}
.fs-36{font-size:36px!important}
.fs-38{font-size:38px!important}
.fs-40{font-size:40px!important}
.fs-42{font-size:42px!important}
.fs-44{font-size:44px!important}
.fs-46{font-size:46px!important}
.fs-48{font-size:48px!important}
.fs-50{font-size:50px!important}
.fs-55{font-size:55px!important}
.fs-60{font-size:60px!important}
.fs-64{font-size:64px!important}
.fs-70{font-size:70px!important}
.fs-80{font-size:80px!important}
.fs-90{font-size:90px!important}
.fs-100{font-size:100px!important}
.fs-1rem{font-size:1rem!important}
.fs-2rem{font-size:2rem!important}
.fs-3rem{font-size:3rem!important}
.fs-4rem{font-size:4rem!important}
.fs-5rem{font-size:5rem!important}
.fs-6rem{font-size:6rem!important}
.fs-7rem{font-size:7rem!important}
.fs-8rem{font-size:8rem!important}

.mg-0{margin:0px!important}
.mg-2{margin:2px!important}
.mg-4{margin:4px!important}
.mg-5{margin:5px!important}
.mg-6{margin:6px!important}
.mg-8{margin:8px!important}
.mg-10{margin:10px!important}
.mg-12{margin:12px!important}
.mg-14{margin:14px!important}
.mg-15{margin:15px!important}
.mg-16{margin:16px!important}
.mg-18{margin:18px!important}
.mg-20{margin:20px!important}
.mg-22{margin:22px!important}
.mg-24{margin:24px!important}
.mg-25{margin:25px!important}
.mg-28{margin:28px!important}
.mg-30{margin:30px!important}
.mg-35{margin:35px!important}
.mg-40{margin:40px!important}
.mg-45{margin:45px!important}
.mg-50{margin:50px!important}
.mg-55{margin:55px!important}
.mg-60{margin:60px!important}
.mg-70{margin:70px!important}
.mg-80{margin:80px!important}
.mg-90{margin:90px!important}
.mg-100{margin:100px!important}
.mg-1rem{margin:1rem!important}
.mg-2rem{margin:2rem!important}
.mg-3rem{margin:3rem!important}
.mg-4rem{margin:4rem!important}
.mg-5rem{margin:5rem!important}
.mg-6rem{margin:6rem!important}

.mg-t0{margin-top:0px!important}
.mg-t2{margin-top:2px!important}
.mg-t4{margin-top:4px!important}
.mg-t5{margin-top:5px!important}
.mg-t6{margin-top:6px!important}
.mg-t8{margin-top:8px!important}
.mg-t10{margin-top:10px!important}
.mg-t12{margin-top:12px!important}
.mg-t14{margin-top:14px!important}
.mg-t15{margin-top:15px!important}
.mg-t16{margin-top:16px!important}
.mg-t18{margin-top:18px!important}
.mg-t20{margin-top:20px!important}
.mg-t22{margin-top:22px!important}
.mg-t24{margin-top:24px!important}
.mg-t25{margin-top:25px!important}
.mg-t28{margin-top:28px!important}
.mg-t30{margin-top:30px!important}
.mg-t35{margin-top:35px!important}
.mg-t40{margin-top:40px!important}
.mg-t45{margin-top:45px!important}
.mg-t50{margin-top:50px!important}
.mg-t55{margin-top:55px!important}
.mg-t60{margin-top:60px!important}
.mg-t70{margin-top:70px!important}
.mg-t80{margin-top:80px!important}
.mg-t90{margin-top:90px!important}
.mg-t100{margin-top:100px!important}
.mg-t1rem{margin-top:1rem!important}
.mg-t2rem{margin-top:2rem!important}
.mg-t3rem{margin-top:3rem!important}
.mg-t4rem{margin-top:4rem!important}
.mg-t5rem{margin-top:5rem!important}
.mg-t6rem{margin-top:6rem!important}

.mg-b0{margin-bottom:0px!important}
.mg-b2{margin-bottom:2px!important}
.mg-b4{margin-bottom:4px!important}
.mg-b5{margin-bottom:5px!important}
.mg-b6{margin-bottom:6px!important}
.mg-b8{margin-bottom:8px!important}
.mg-b10{margin-bottom:10px!important}
.mg-b12{margin-bottom:12px!important}
.mg-b14{margin-bottom:14px!important}
.mg-b15{margin-bottom:15px!important}
.mg-b16{margin-bottom:16px!important}
.mg-b18{margin-bottom:18px!important}
.mg-b20{margin-bottom:20px!important}
.mg-b22{margin-bottom:22px!important}
.mg-b24{margin-bottom:24px!important}
.mg-b25{margin-bottom:25px!important}
.mg-b28{margin-bottom:28px!important}
.mg-b30{margin-bottom:30px!important}
.mg-b35{margin-bottom:35px!important}
.mg-b40{margin-bottom:40px!important}
.mg-b45{margin-bottom:45px!important}
.mg-b50{margin-bottom:50px!important}
.mg-b55{margin-bottom:55px!important}
.mg-b60{margin-bottom:60px!important}
.mg-b70{margin-bottom:70px!important}
.mg-b80{margin-bottom:80px!important}
.mg-b90{margin-bottom:90px!important}
.mg-b100{margin-bottom:100px!important}
.mg-b1rem{margin-bottom:1rem!important}
.mg-b2rem{margin-bottom:2rem!important}
.mg-b3rem{margin-bottom:3rem!important}
.mg-b4rem{margin-bottom:4rem!important}
.mg-b5rem{margin-bottom:5rem!important}
.mg-b6rem{margin-bottom:6rem!important}

.mg-l0{margin-left:0px!important}
.mg-l2{margin-left:2px!important}
.mg-l4{margin-left:4px!important}
.mg-l5{margin-left:5px!important}
.mg-l6{margin-left:6px!important}
.mg-l8{margin-left:8px!important}
.mg-l10{margin-left:10px!important}
.mg-l12{margin-left:12px!important}
.mg-l14{margin-left:14px!important}
.mg-l15{margin-left:15px!important}
.mg-l16{margin-left:16px!important}
.mg-l18{margin-left:18px!important}
.mg-l20{margin-left:20px!important}
.mg-l22{margin-left:22px!important}
.mg-l24{margin-left:24px!important}
.mg-l25{margin-left:25px!important}
.mg-l28{margin-left:28px!important}
.mg-l30{margin-left:30px!important}
.mg-l35{margin-left:35px!important}
.mg-l40{margin-left:40px!important}
.mg-l45{margin-left:45px!important}
.mg-l50{margin-left:50px!important}
.mg-l55{margin-left:55px!important}
.mg-l60{margin-left:60px!important}
.mg-l70{margin-left:70px!important}
.mg-l80{margin-left:80px!important}
.mg-l90{margin-left:90px!important}
.mg-l100{margin-left:100px!important}
.mg-l1rem{margin-left:1rem!important}
.mg-l2rem{margin-left:2rem!important}
.mg-l3rem{margin-left:3rem!important}
.mg-l4rem{margin-left:4rem!important}
.mg-l5rem{margin-left:5rem!important}
.mg-l6rem{margin-left:6rem!important}

.mg-r0{margin-right:0px!important}
.mg-r2{margin-right:2px!important}
.mg-r4{margin-right:4px!important}
.mg-r5{margin-right:5px!important}
.mg-r6{margin-right:6px!important}
.mg-r8{margin-right:8px!important}
.mg-r10{margin-right:10px!important}
.mg-r12{margin-right:12px!important}
.mg-r14{margin-right:14px!important}
.mg-r15{margin-right:15px!important}
.mg-r16{margin-right:16px!important}
.mg-r18{margin-right:18px!important}
.mg-r20{margin-right:20px!important}
.mg-r22{margin-right:22px!important}
.mg-r24{margin-right:24px!important}
.mg-r25{margin-right:25px!important}
.mg-r28{margin-right:28px!important}
.mg-r30{margin-right:30px!important}
.mg-r35{margin-right:35px!important}
.mg-r40{margin-right:40px!important}
.mg-r45{margin-right:45px!important}
.mg-r50{margin-right:50px!important}
.mg-r55{margin-right:55px!important}
.mg-r60{margin-right:60px!important}
.mg-r70{margin-right:70px!important}
.mg-r80{margin-right:80px!important}
.mg-r90{margin-right:90px!important}
.mg-r100{margin-right:100px!important}
.mg-r1rem{margin-right:1rem!important}
.mg-r2rem{margin-right:2rem!important}
.mg-r3rem{margin-right:3rem!important}
.mg-r4rem{margin-right:4rem!important}
.mg-r5rem{margin-right:5rem!important}
.mg-r6rem{margin-right:6rem!important}

.pd-0{padding:0px!important}
.pd-2{padding:2px!important}
.pd-4{padding:4px!important}
.pd-5{padding:5px!important}
.pd-6{padding:6px!important}
.pd-8{padding:8px!important}
.pd-10{padding:10px!important}
.pd-12{padding:12px!important}
.pd-14{padding:14px!important}
.pd-15{padding:15px!important}
.pd-16{padding:16px!important}
.pd-18{padding:18px!important}
.pd-20{padding:20px!important}
.pd-22{padding:22px!important}
.pd-24{padding:24px!important}
.pd-25{padding:25px!important}
.pd-28{padding:28px!important}
.pd-30{padding:30px!important}
.pd-35{padding:35px!important}
.pd-40{padding:40px!important}
.pd-45{padding:45px!important}
.pd-50{padding:50px!important}
.pd-55{padding:55px!important}
.pd-60{padding:60px!important}
.pd-70{padding:70px!important}
.pd-80{padding:80px!important}
.pd-90{padding:90px!important}
.pd-100{padding:100px!important}
.pd-1rem{padding:1rem!important}
.pd-2rem{padding:2rem!important}
.pd-3rem{padding:3rem!important}
.pd-4rem{padding:4rem!important}
.pd-5rem{padding:5rem!important}
.pd-6rem{padding:6rem!important}

.pd-t0{padding-top:0px!important}
.pd-t2{padding-top:2px!important}
.pd-t4{padding-top:4px!important}
.pd-t5{padding-top:5px!important}
.pd-t6{padding-top:6px!important}
.pd-t8{padding-top:8px!important}
.pd-t10{padding-top:10px!important}
.pd-t12{padding-top:12px!important}
.pd-t14{padding-top:14px!important}
.pd-t15{padding-top:15px!important}
.pd-t16{padding-top:16px!important}
.pd-t18{padding-top:18px!important}
.pd-t20{padding-top:20px!important}
.pd-t22{padding-top:22px!important}
.pd-t24{padding-top:24px!important}
.pd-t25{padding-top:25px!important}
.pd-t28{padding-top:28px!important}
.pd-t30{padding-top:30px!important}
.pd-t35{padding-top:35px!important}
.pd-t40{padding-top:40px!important}
.pd-t45{padding-top:45px!important}
.pd-t50{padding-top:50px!important}
.pd-t55{padding-top:55px!important}
.pd-t60{padding-top:60px!important}
.pd-t70{padding-top:70px!important}
.pd-t80{padding-top:80px!important}
.pd-t90{padding-top:90px!important}
.pd-t100{padding-top:100px!important}
.pd-t1rem{padding-top:1rem!important}
.pd-t2rem{padding-top:2rem!important}
.pd-t3rem{padding-top:3rem!important}
.pd-t4rem{padding-top:4rem!important}
.pd-t5rem{padding-top:5rem!important}
.pd-t6rem{padding-top:6rem!important}

.pd-b0{padding-bottom:0px!important}
.pd-b2{padding-bottom:2px!important}
.pd-b4{padding-bottom:4px!important}
.pd-b5{padding-bottom:5px!important}
.pd-b6{padding-bottom:6px!important}
.pd-b8{padding-bottom:8px!important}
.pd-b10{padding-bottom:10px!important}
.pd-b12{padding-bottom:12px!important}
.pd-b14{padding-bottom:14px!important}
.pd-b15{padding-bottom:15px!important}
.pd-b16{padding-bottom:16px!important}
.pd-b18{padding-bottom:18px!important}
.pd-b20{padding-bottom:20px!important}
.pd-b22{padding-bottom:22px!important}
.pd-b24{padding-bottom:24px!important}
.pd-b25{padding-bottom:25px!important}
.pd-b28{padding-bottom:28px!important}
.pd-b30{padding-bottom:30px!important}
.pd-b35{padding-bottom:35px!important}
.pd-b40{padding-bottom:40px!important}
.pd-b45{padding-bottom:45px!important}
.pd-b50{padding-bottom:50px!important}
.pd-b55{padding-bottom:55px!important}
.pd-b60{padding-bottom:60px!important}
.pd-b70{padding-bottom:70px!important}
.pd-b80{padding-bottom:80px!important}
.pd-b90{padding-bottom:90px!important}
.pd-b100{padding-bottom:100px!important}
.pd-b1rem{padding-bottom:1rem!important}
.pd-b2rem{padding-bottom:2rem!important}
.pd-b3rem{padding-bottom:3rem!important}
.pd-b4rem{padding-bottom:4rem!important}
.pd-b5rem{padding-bottom:5rem!important}
.pd-b6rem{padding-bottom:6rem!important}

.pd-l0{padding-left:0px!important}
.pd-l2{padding-left:2px!important}
.pd-l4{padding-left:4px!important}
.pd-l5{padding-left:5px!important}
.pd-l6{padding-left:6px!important}
.pd-l8{padding-left:8px!important}
.pd-l10{padding-left:10px!important}
.pd-l12{padding-left:12px!important}
.pd-l14{padding-left:14px!important}
.pd-l15{padding-left:15px!important}
.pd-l16{padding-left:16px!important}
.pd-l18{padding-left:18px!important}
.pd-l20{padding-left:20px!important}
.pd-l22{padding-left:22px!important}
.pd-l24{padding-left:24px!important}
.pd-l25{padding-left:25px!important}
.pd-l28{padding-left:28px!important}
.pd-l30{padding-left:30px!important}
.pd-l35{padding-left:35px!important}
.pd-l40{padding-left:40px!important}
.pd-l45{padding-left:45px!important}
.pd-l50{padding-left:50px!important}
.pd-l55{padding-left:55px!important}
.pd-l60{padding-left:60px!important}
.pd-l70{padding-left:70px!important}
.pd-l80{padding-left:80px!important}
.pd-l90{padding-left:90px!important}
.pd-l100{padding-left:100px!important}
.pd-l1rem{padding-left:1rem!important}
.pd-l2rem{padding-left:2rem!important}
.pd-l3rem{padding-left:3rem!important}
.pd-l4rem{padding-left:4rem!important}
.pd-l5rem{padding-left:5rem!important}
.pd-l6rem{padding-left:6rem!important}

.pd-r0{padding-right:0px!important}
.pd-r2{padding-right:2px!important}
.pd-r4{padding-right:4px!important}
.pd-r5{padding-right:5px!important}
.pd-r6{padding-right:6px!important}
.pd-r8{padding-right:8px!important}
.pd-r10{padding-right:10px!important}
.pd-r12{padding-right:12px!important}
.pd-r14{padding-right:14px!important}
.pd-r15{padding-right:15px!important}
.pd-r16{padding-right:16px!important}
.pd-r18{padding-right:18px!important}
.pd-r20{padding-right:20px!important}
.pd-r22{padding-right:22px!important}
.pd-r24{padding-right:24px!important}
.pd-r25{padding-right:25px!important}
.pd-r28{padding-right:28px!important}
.pd-r30{padding-right:30px!important}
.pd-r35{padding-right:35px!important}
.pd-r40{padding-right:40px!important}
.pd-r45{padding-right:45px!important}
.pd-r50{padding-right:50px!important}
.pd-r55{padding-right:55px!important}
.pd-r60{padding-right:60px!important}
.pd-r70{padding-right:70px!important}
.pd-r80{padding-right:80px!important}
.pd-r90{padding-right:90px!important}
.pd-r100{padding-right:100px!important}
.pd-r1rem{padding-right:1rem!important}
.pd-r2rem{padding-right:2rem!important}
.pd-r3rem{padding-right:3rem!important}
.pd-r4rem{padding-right:4rem!important}
.pd-r5rem{padding-right:5rem!important}
.pd-r6rem{padding-right:6rem!important}

.mg-auto{margin:auto!important}
.mg-l-auto{margin-left:auto!important}
.mg-r-auto{margin-right:auto!important}

.xet-box {
  padding: 1rem !important;
  border: 1px solid var(--border-color) !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-overflow {
  text-overflow: ellipsis !important;
}

/* (구) IE7 hasLayout 용 `*zoom:1` 은 제거했다 — 표준 파서에서 문법 에러였고,
   아래 ::after clearfix 만으로 충분하다. */
.xet-clearfix:after,
.clearfix:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

.vertical-align {
  display: table !important;
  table-layout: fixed !important;
  width: 100% !important;
  height: inherit !important;
}
.vertical-align > .inner {
  width: 100% !important;
  height: inherit !important;
  display: table-cell !important;
  vertical-align: middle !important;
}
.vertical-align > .inner.top {
  vertical-align: top !important;
}
.vertical-align > .inner.middle {
  vertical-align: middle !important;
}
.vertical-align > .inner.bottom {
  vertical-align: bottom !important;
}

/* [수정 2026-08-21] 페이지네이션의 현재 페이지 색이 --xet-theme-color 를 참조했는데
   이 변수는 이 테마 어디에도 정의된 적이 없다(원본 테마부터 그랬다).
   정의 없는 var() 는 값이 무효가 되어 색이 적용되지 않는다 -> 실제 토큰 --theme-color 로 교체. */
.xet-pagination {
  list-style: none;
  padding: 0;
  margin: var(--gap) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xet-pagination > li {
  position: relative;
  margin: 0;
  padding: 0;
}
.xet-pagination > li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin: 0;
  padding: 0 8px;
  font-size: 14px;
  font-weight: normal;
  min-width: 24px;
  height: 38px;
  white-space: nowrap;
  text-align: center;
  border: 0;
  background-color: transparent;
  color: var(--board-text-default, var(--text-base-color)); /* Rhymix 코어 주입 변수. 없을 때 대비 */
}
.xet-pagination > li a.is-disable {
  opacity: 0.4;
}
.xet-pagination > li a.is-active {
  position: relative;
  color: var(--theme-color) !important;
}
.xet-pagination > li a.is-active::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-bottom: 1px solid var(--theme-color) !important;
}
.xet-pagination > li.is-active > a,
.xet-pagination > li.is-active > span {
  position: relative;
  color: var(--theme-color) !important;
}
.xet-pagination > li.is-active > a::before,
.xet-pagination > li.is-active > span::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-bottom: 1px solid var(--theme-color) !important;
}
.xet-pagination > li.prevEnd, .xet-pagination > li.nextEnd {
  margin: 0 8px;
}
.xet-pagination > li.prevEnd a, .xet-pagination > li.nextEnd a {
  width: auto;
  padding: 0 10px;
  font-size: 18px;
}
.xet-pagination > li input[type=number] {
  padding: 0 10px !important;
  width: 40px !important;
  height: var(--input-height) !important;
  border-radius: 4px 0 0 4px !important;
  text-align: center;
  border: 1px solid var(--border-color);
  background-color: var(--bgColor, var(--input-bg-color)); /* --bgColor 는 Rhymix 코어(게시판)가 주입. 없을 때 대비 */
  color: var(--text-strong-color);
}
.xet-pagination > li input::-webkit-outer-spin-button,
.xet-pagination > li input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.xet-pagination > li button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-width: 40px;
  height: var(--input-height) !important;
  cursor: pointer;
  outline: 0;
  background: var(--btn-bgColor, var(--btn-bg-color)); /* --btn-bgColor 는 Rhymix 코어(게시판)가 주입. 없을 때 대비 */
  transition: all 0.2s ease-in-out;
  border-radius: 0 4px 4px 0;
  color: var(--text-strong-color);
  border: 1px solid var(--border-color);
  border-left: 0;
}
.xet-pagination > li .goto-page {
  position: absolute;
  left: 50%;
  bottom: 100%;
  display: none;
  align-items: center;
  transform: translateX(-50%);
}
.xet-pagination > li.goto:hover .goto-page {
  display: flex;
}

table.xet-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
table.xet-table thead th {
  padding: 1rem 0.5rem;
  white-space: nowrap;
  text-align: center;
  font-weight: bold;
  color: inherit;
  border-bottom: 1px solid var(--border-color);
}
table.xet-table thead th a {
  font-weight: bold;
  color: var(--text-strong-color);
}
table.xet-table tbody td {
  padding: 10px 5px;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid var(--border-color);
}
table.xet-table tbody td.subject {
  width: 100%;
  white-space: normal;
  text-align: left;
  font-weight: 700;
}
table.xet-table tbody td.nowrap {
  white-space: nowrap;
}

@media (max-width: 575px) {
  .xet-table-scroll,
.xet-table-responsive {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: scroll !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-inherit {
  position: inherit !important;
}

.position-static {
  position: static !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-scroll {
  overflow: scroll !important;
  -webkit-overflow-scrolling: touch !important;
}

.overflow-scroll-x {
  overflow-x: scroll !important;
  -webkit-overflow-scrolling: touch !important;
}

.overflow-scroll-y {
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
}

.dp-visible,
.visibility-visible {
  visibility: visible !important;
  opacity: 1 !important;
}

.dp-hidden,
.visibility-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
}

.dp-block {
  display: block !important;
}

.dp-inline {
  display: inline !important;
}

.dp-inline-block {
  display: inline-block !important;
}

.dp-none {
  display: none !important;
}

.dp-table {
  display: table !important;
}

.dp-table-cell {
  display: table-cell !important;
}

.dp-flex {
  display: flex;
}

.dp-inline-flex {
  display: inline-block !important;
}

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

ul.ul-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.ul-list > li {
  position: relative;
  margin: 0 0 2px;
  padding: 0 0 0 12px;
}
ul.ul-list > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--text-base-color);
}

ol.ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
ol.ol > li {
  margin: 0;
  padding: 0;
}

ol.ol-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
ol.ol-list > li {
  position: relative;
  margin: 0 0 2px;
  padding: 0 0 0 12px;
}
ol.ol-list > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--text-base-color);
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.xet-bg-cover {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.xet-bg-cover-top {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.xet-bg-fixed {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-position: 50% 50% \9 ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media \0 screen {
  .xet-bg-fixed {
    background-attachment: scroll;
    background-position: 50% 0;
  }
}
@media (max-width: 575px) {
  .xet-bg-fixed {
    background-attachment: scroll;
  }
}
.xet-bg-contain {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* border-radius */
.r-0{border-radius:0px!important}
.r-1{border-radius:1px!important}
.r-2{border-radius:2px!important}
.r-3{border-radius:3px!important}
.r-4{border-radius:4px!important}
.r-5{border-radius:5px!important}
.r-6{border-radius:6px!important}
.r-8{border-radius:8px!important}
.r-10{border-radius:10px!important}
.r-12{border-radius:12px!important}
.r-15{border-radius:15px!important}
.r-16{border-radius:16px!important}
.r-20{border-radius:20px!important}
.r-24{border-radius:24px!important}
.r-25{border-radius:25px!important}
.r-30{border-radius:30px!important}
.r-40{border-radius:40px!important}
.r-50{border-radius:50px!important}
.r-60{border-radius:60px!important}
.r-80{border-radius:80px!important}
.r-100{border-radius:100px!important}

.r-half {
  border-radius: 50% !important;
}

.box-shadow {
  box-shadow: var(--box-shadow) !important;
}

.box-shadow2x {
  box-shadow: var(--box-shadow2x) !important;
}

.text-shadow {
  text-shadow: 1px 1px 2px rgba(100, 100, 100, 0.6) !important;
}

.xet-warning {
  padding: 1rem !important;
  color: red !important;
  border: 1px solid red !important;
}

@media (min-width: 1024px) {
  h1,
.h1 {
    font-size: 35px !important;
  }

  h2,
.h2 {
    font-size: 28px !important;
  }

  h3,
.h3 {
    font-size: 21px !important;
  }

  h4,
.h4 {
    font-size: 18.6px !important;
  }

  h5,
.h5 {
    font-size: 16.4px !important;
  }

  h6,
.h6 {
    font-size: 14px !important;
  }
}