@charset "UTF-8";
/*
  [260609 수진]
  - padding, margin em > rem으로 수정
  - :root 색 정의 수정
  - width, hiehgt값 빠진 부분 수정
  - line-height 클래스, 값 수정

  [260319 수진]
  - .scroll_table 수정

  [260202 수진]
  - .search_st5 추가
  - .info_box 추가

  [240806 수진] 
  - .search_wrap 모바일일때 깨지는 현상 수정
  - .btn 텍스트 커서 잡히는 현상 수정

  [240808 수진]
  - .box_multiple 추가 
  - .box_line_top 추가

  [240809 수진]
  - line 스타일 추가 

  [240812 수진]
  - pop-layer  반응형 작업
  - paging style a 태그 추가

  [240828 수진]
  - popupLayer 열릴때 body에 overflow: hidden작업
  - font, bg, line에 main color, sub color 추가
  - box_multiple 반응형 작업

  [240829 수진]
  - input type="file" .filebox 추가
*/

:root {
  /* 폰트 스타일 — 사이트에 사용할 폰트를 여기에 지정 */
  --font-st1: "Pretendard";

  /* 컬러 팔레트 */

  /* 무채색 */
  --white: #fff;
  --black: #000;

  /* yellow */
  --yellowLightest: #fffced;
  --yellowLight: #fff89f;
  --yellow: #ffdc27;
  --yellowDark: #ffbe00;
  --yellowDarkest: #8a6a00;

  /* orange */
  --orangeLightest: #ffe6d2;
  --orangeLight: #ffa519;
  --orange: #ff7d1d;
  --orangeDark: #d94800;
  --orangeDarkest: #7a2c00;

  /* red */
  --redLightest: #ffe0dd;
  --redLight: #ff564a;
  --red: #f11100;
  --redDark: #a70c00;
  --redDarkest: #5e0700;

  /* green */
  --greenLightest: #dcf9e2;
  --greenLight: #82ee75;
  --green: #1eb30d;
  --greenDark: #00964e;
  --greenDarkest: #00472a;

  /* blue ~ navy (하나의 파랑 스펙트럼) */
  --blueLightest: #d9edfd;
  --blueLight: #0087e9;
  --blue: #2452ce;
  --navyLight: #243595;
  --navy: #252f68;
  --navyDark: #131a43;
  --navyDarkest: #090c24;

  /* purple */
  --purpleLightest: #edefff;
  --purpleLight: #ba81ed;
  --purple: #8327d5;
  --purpleDark: #500e8b;
  --purpleDarkest: #2e0850;

  /* pink */
  --pinkLightest: #fff3fa;
  --pinkLight: #ffe7f5;
  --pink: #f628a1;
  --pinkDark: #b10068;
  --pinkDarkest: #6b003f;

  /* skyBlue */
  --skyBlueLightest: #e3fdff;
  --skyBlueLight: #c2faff;
  --skyBlue: #55f3ff;
  --skyBlueDark: #11b3c2;
  --skyBlueDarkest: #0a6f78;

  /* blueGray (기본색 없음) */
  --blueGrayLightest: #e8edf5;
  --blueGrayLight: #c5cddc;
  --blueGrayDark: #8d9bae;
  --blueGrayDarkest: #4f5a6a;

  /* brown */
  --brownLightest: #f3e9e1;
  --brownLight: #c8a98e;
  --brown: #8a5a34;
  --brownDark: #5e3a1e;
  --brownDarkest: #3a2412;

  /* gray */
  --grayLightest: #f5f6f9;
  --grayLight: #e7eaf0;
  --gray: #989898;
  --grayDark: #333;
  --grayDarkest: #1a1a1a;

  /* input radio checkbox 색상 */
  --input-color: #2e9fff;

  /* 메인 컬러 */
  --main-color: #005BB5;
  --main-color-dark: #2B3C4E;
  --main-color-light: #A3CDFF;
  --sub-01-color: #df0012;
  --sub-02-color: #ff9b28;
  --sub-03-color: #6a4ff0;
  --sub-04-color: #5b7cff;

  /* 텍스트 */
  --txt-color: #fff;
  --sub-txt-color: #ffffffcb;
  --txt-disabled-color: #a5acb8;

  /* 배경 */
  --bg-color: #030303;
  --bg-sub-color: #f5f7fa;

  /* 라인 — 밝은 순서: color(0.91) > dark(0.54) > darker(0.4) */
  --line-color: #ffffffe8;         /* 알파 0.91 — 표·리스트의 첫 줄(강조) */
  --line-color-dark: #ffffff8a;    /* 알파 0.54 — 칸 구분(세로선 등) */
  --line-color-darker: #ffffff66;  /* [로컬 추가] 알파 0.4 — 표·리스트 일반 구분선 */

  /* 섹션 세로 리듬 — .wFix 의 상하 패딩이자 섹션 사이 여백의 기준값.
     서브페이지 스타일(sub.css)도 이 토큰을 참조한다. */
  --sec-gap: 10rem;   /* 180px(>1600) · 160px(~1600) */
  --tit-gap: 5rem;    /*  90px(>1600) ·  80px(~1600) — title_wrap 과 그 아래 컨텐츠 */

  /* 상태 */
  --success-color: var(--green);
  --error-color: var(--red);
  --warning-color: var(--yellowDark);
  --info-color: var(--blue);
}

/* font — 기본 글자색·글자 크기를 여기서 지정 */
.ty_hero{
    font-size: clamp(3.5rem, 7vw, 8.125rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--txt-color);
}
.ty_sec{
    font-size: clamp(2.5rem, 4vw, 4.625rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--txt-color);
}
.ty_sec_sm{
    font-size: clamp(2rem, 3.2vw, 3.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--txt-color);
}
.ty_tit{
    font-size: clamp(1.5rem, 2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--txt-color);
}
.ty_list{
    font-size: clamp(1.125rem, 1.5vw, 1.625rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--sub-txt-color);
}
.ty_body{
    font-size: clamp(1rem, 1.2vw, 1.625rem);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.02em;
    color: var(--sub-txt-color);
}

.title_wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.title_wrap .tag{
  color: var(--main-color-light);
}


body{
  background-color: var(--bg-color);
}

body,
html,
a,
button,
table,
input,
select,
textarea {
  font-family: var(--font-st1), sans-serif;
  font-size: 18px;
}
/* select 공통 기본 디자인 — 테두리·라운드·크기 + 커스텀 화살표.
   reset.css 가 네이티브 화살표(appearance)를 제거하므로 머티리얼 expand_more(로컬 SVG)를 배경으로 부여.
   (select 는 자식 요소를 못 넣어 아이콘 폰트를 직접 못 씀 → SVG 파일 사용)
   ※ 검색폼(search_st*) 등은 각 컴포넌트에서 border:0 !important 로 자체 오버라이드함. */
select {
  -webkit-appearance: none;
  appearance: none;
  height: 45px;
  padding: 0 2rem 0 0.8rem;   /* 우측은 화살표 자리 (height 고정이라 세로 패딩 0) */
  border: 1px solid #d4d9e0;
  border-radius: .2rem;
  background-color: #fff;
  background-image: url("../../images/common/select_arrow.svg");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 20px;
  color: #333;
  font-family: inherit;
  font-size: 0.93rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select:focus {
  outline: none;
  border-color: var(--main-color, #4f7bff);
  box-shadow: 0 0 0 3px rgba(79, 123, 255, 0.15);
}
/* 검색폼 select 은 네이티브 화살표(appearance:auto)를 쓰므로 커스텀 배경 화살표 제거(중복 방지) */
.search_wrap select { background-image: none; padding-right: 0.5rem; }

/* input(텍스트 계열) 공통 디자인 — reset 은 normalize 만, 디자인은 여기서. select 와 동일 톤.
   ※ checkbox/radio/file/button 등은 제외(타입 목록 지정). 검색폼(search_st*) 은 자체 오버라이드. */
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  height: 50px;
  padding: 0 0.8rem;
  border: 1px solid #d4d9e0;
  border-radius: .2rem;
  background-color: #fff;
  color: #333;
  font-family: inherit;
  font-size: 0.93rem;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder { color: #aab0b8; }
input[type="text"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus {
  outline: none;
  border-color: var(--main-color, #4f7bff);
  box-shadow: 0 0 0 3px rgba(79, 123, 255, 0.15);
}

/* select · input 작은 버전(sm) — 요소에 함께 부여: <select class="select_sm">, <input class="input_sm"> */
select.select_sm {
  height: 36px;
  padding: 0 1.7rem 0 0.6rem;
  font-size: 0.85rem;
  background-position: right 0.45rem center;
  background-size: 16px;
}
input.input_sm {
  height: 36px;
  padding: 0 0.6rem;
  font-size: 0.85rem;
}
body {
  /*letter-spacing: -0.025em;*/
}
/* [로컬 수정] scroll-behavior: smooth 를 껐다 — Lenis(부드러운 스크롤)와 충돌한다.
   Lenis 는 매 프레임 스크롤 위치를 직접 옮기는데, 브라우저가 그 이동을 또 자기
   방식으로 애니메이션하려 들면서 서로 싸운다. ScrollTrigger 가 위치를 재려고
   내부적으로 스크롤을 옮길 때도 그 이동이 지연돼 모든 트리거 좌표가 통째로 밀린다.
   #앵커 링크의 부드러운 이동은 common.js 의 Lenis `anchors: true` 가 대신한다.
   ※ 가이드에서 common.css 를 다시 받으면 이 줄이 되살아난다. 반드시 다시 끌 것. */
html {
   /* scroll-behavior: smooth; */
}

/* 폰트사이즈 반응형 */
/* 일반 데스크탑·노트북 */
@media screen and (max-width: 1600px) {
  body,
  html,
  a,
  button,
  table,
  input,
  select,
  textarea {
    font-size: 1rem;
  }
}
/* 좁은 노트북·태블릿 가로 */
@media screen and (max-width: 1200px) {
}
/* 모바일·태블릿 세로 */
@media screen and (max-width: 900px) {
  body,
  html,
  a,
  button,
  table,
  input,
  select,
  textarea {
    font-size: 15px;
  }
}

/* Material Icon 지정 */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

/* display layout
   .wFix 의 상하 패딩이 곧 섹션 사이 여백이다. 값은 --sec-gap 하나로 관리한다. */
.wFix {
  max-width: 1500px; /* 최대 너비값을 여기에 지정 (260828: 1660 → 1500) */
  padding: var(--sec-gap) 0rem;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
/* [로컬 추가] .wFix 섹션이 연달아 오면 앞 섹션의 아래 패딩과 뒤 섹션의 위 패딩이
   겹쳐 여백이 두 배가 된다. 뒤 섹션의 위 패딩을 지워 어디서나 --sec-gap 하나로 맞춘다. */
.wFix + .wFix {
  padding-top: 0;
}
/* 이 아래로는 폭을 화면에 맡기고 좌우 3rem 여백만 준다.
   [경계값은 위 max-width 와 짝이다] 1500 + 3rem×2(96px) = 1596.
   그래야 경계에서 콘텐츠 폭이 1500 → 1500 으로 이어진다. 짝이 어긋나면
   **화면을 좁혔는데 콘텐츠가 오히려 넓어지는** 구간이 생긴다
   (1660/1750 이었을 때도 이 계산으로 맞춰 둔 값이다).
   [로컬 수정] 예전엔 `padding: 0 3rem` 이라 이 구간부터 세로 여백이 통째로
   사라졌다(넓은 화면에만 여백이 있는 상태). 세로는 --sec-gap 을 그대로 유지한다. */
@media screen and (max-width: 1596px) {
  .wFix {
    max-width: 100%;
    padding: var(--sec-gap) 3rem;
  }
}

/* 푸터만 예전 폭(1660) 그대로 (260828, 사용자 요청)
   본문은 1500 으로 좁혔지만 푸터는 정보가 좌우로 넓게 깔리는 영역이라
   기존 폭을 유지한다. 위 .wFix 규칙과 **짝이 되는 경계도 같이 되돌린다** —
   1660 + 3rem×2 = 1756 ≈ 1750.

   [선택자] `.footer .wFix` 는 클래스 둘이라 위 `.wFix` 규칙(클래스 하나)을
   순서와 상관없이 이긴다. 파일 어디에 두든 안전하다.
   [세로 여백] 가로만 건드린다 — 푸터의 위아래 여백은 main.css 의
   `.footer_inner { padding-block }` 이 따로 정한다. shorthand 로 쓰면 그게 지워진다.
   [1596 아래] 아래 두 번째 미디어쿼리를 1597 부터로 막아 둔 것은, 그 아래에서는
   위 .wFix 규칙(3rem)과 900px 이하 규칙(2rem)을 그대로 물려받게 하기 위해서다. */
.footer .wFix {
  max-width: 1660px;
}
@media screen and (max-width: 1750px) {
  .footer .wFix {
    max-width: 100%;
  }
}
@media screen and (max-width: 1750px) and (min-width: 1597px) {
  .footer .wFix {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1200px) {
  :root {
    --sec-gap: 6.5rem;  /* 104px (이 구간부터 1rem = 16px) */
    --tit-gap: 3.25rem; /*  52px */
  }
}
@media screen and (max-width: 900px) {
  :root {
    --sec-gap: 5rem;    /* 75px (이 구간부터 1rem = 15px) */
    --tit-gap: 2.5rem;  /* 37.5px */
  }
  .wFix {
    padding: var(--sec-gap) 2rem;
  }
}

/* 숨김 */
.visibility_hidden {
  visibility: hidden;
} /* 공간은 그대로 */
.blind {
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  top: -9999em;
  left: -9999em;
  display: block;
  text-indent: -9999em;
  font-size: 0px;
  line-height: 0;
}
/* 스크린리더 전용 텍스트 */
.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* padding & margin **************************************************/
.p0 {
  padding: 0 !important;
}
.p1 {
  padding: 0.1rem !important;
}
.p2 {
  padding: 0.2rem !important;
}
.p3 {
  padding: 0.3rem !important;
}
.p4 {
  padding: 0.4rem !important;
}
.p5 {
  padding: 0.5rem !important;
}
.p6 {
  padding: 0.6rem !important;
}
.p7 {
  padding: 0.7rem !important;
}
.p8 {
  padding: 0.8rem !important;
}
.p9 {
  padding: 0.9rem !important;
}
.p10 {
  padding: 1rem !important;
}
.p11 {
  padding: 1.1rem !important;
}
.p12 {
  padding: 1.2rem !important;
}
.p13 {
  padding: 1.3rem !important;
}
.p14 {
  padding: 1.4rem !important;
}
.p15 {
  padding: 1.5rem !important;
}
.p16 {
  padding: 1.6rem !important;
}
.p17 {
  padding: 1.7rem !important;
}
.p18 {
  padding: 1.8rem !important;
}
.p19 {
  padding: 1.9rem !important;
}
.p20 {
  padding: 2rem !important;
}
.p21 {
  padding: 2.1rem !important;
}
.p22 {
  padding: 2.2rem !important;
}
.p23 {
  padding: 2.3rem !important;
}
.p24 {
  padding: 2.4rem !important;
}
.p25 {
  padding: 2.5rem !important;
}
.p26 {
  padding: 2.6rem !important;
}
.p27 {
  padding: 2.7rem !important;
}
.p28 {
  padding: 2.8rem !important;
}
.p29 {
  padding: 2.9rem !important;
}
.p30 {
  padding: 3rem !important;
}
.p31 {
  padding: 3.1rem !important;
}
.p32 {
  padding: 3.2rem !important;
}
.p33 {
  padding: 3.3rem !important;
}
.p34 {
  padding: 3.4rem !important;
}
.p35 {
  padding: 3.5rem !important;
}
.p36 {
  padding: 3.6rem !important;
}
.p37 {
  padding: 3.7rem !important;
}
.p38 {
  padding: 3.8rem !important;
}
.p39 {
  padding: 3.9rem !important;
}
.p40 {
  padding: 4rem !important;
}
.p41 {
  padding: 4.1rem !important;
}
.p42 {
  padding: 4.2rem !important;
}
.p43 {
  padding: 4.3rem !important;
}
.p44 {
  padding: 4.4rem !important;
}
.p45 {
  padding: 4.5rem !important;
}
.p46 {
  padding: 4.6rem !important;
}
.p47 {
  padding: 4.7rem !important;
}
.p48 {
  padding: 4.8rem !important;
}
.p49 {
  padding: 4.9rem !important;
}
.p50 {
  padding: 5rem !important;
}
.p51 {
  padding: 5.1rem !important;
}
.p52 {
  padding: 5.2rem !important;
}
.p53 {
  padding: 5.3rem !important;
}
.p54 {
  padding: 5.4rem !important;
}
.p55 {
  padding: 5.5rem !important;
}
.p56 {
  padding: 5.6rem !important;
}
.p57 {
  padding: 5.7rem !important;
}
.p58 {
  padding: 5.8rem !important;
}
.p59 {
  padding: 5.9rem !important;
}
.p60 {
  padding: 6rem !important;
}
.p61 {
  padding: 6.1rem !important;
}
.p62 {
  padding: 6.2rem !important;
}
.p63 {
  padding: 6.3rem !important;
}
.p64 {
  padding: 6.4rem !important;
}
.p65 {
  padding: 6.5rem !important;
}
.p66 {
  padding: 6.6rem !important;
}
.p67 {
  padding: 6.7rem !important;
}
.p68 {
  padding: 6.8rem !important;
}
.p69 {
  padding: 6.9rem !important;
}
.p70 {
  padding: 7rem !important;
}
.p71 {
  padding: 7.1rem !important;
}
.p72 {
  padding: 7.2rem !important;
}
.p73 {
  padding: 7.3rem !important;
}
.p74 {
  padding: 7.4rem !important;
}
.p75 {
  padding: 7.5rem !important;
}
.p76 {
  padding: 7.6rem !important;
}
.p77 {
  padding: 7.7rem !important;
}
.p78 {
  padding: 7.8rem !important;
}
.p79 {
  padding: 7.9rem !important;
}
.p80 {
  padding: 8rem !important;
}
.p81 {
  padding: 8.1rem !important;
}
.p82 {
  padding: 8.2rem !important;
}
.p83 {
  padding: 8.3rem !important;
}
.p84 {
  padding: 8.4rem !important;
}
.p85 {
  padding: 8.5rem !important;
}
.p86 {
  padding: 8.6rem !important;
}
.p87 {
  padding: 8.7rem !important;
}
.p88 {
  padding: 8.8rem !important;
}
.p89 {
  padding: 8.9rem !important;
}
.p90 {
  padding: 9rem !important;
}
.p91 {
  padding: 9.1rem !important;
}
.p92 {
  padding: 9.2rem !important;
}
.p93 {
  padding: 9.3rem !important;
}
.p94 {
  padding: 9.4rem !important;
}
.p95 {
  padding: 9.5rem !important;
}
.p96 {
  padding: 9.6rem !important;
}
.p97 {
  padding: 9.7rem !important;
}
.p98 {
  padding: 9.8rem !important;
}
.p99 {
  padding: 9.9rem !important;
}
.p100 {
  padding: 10rem !important;
}

/* padding-top */
.pt1 {
  padding-top: 0.1rem !important;
}
.pt2 {
  padding-top: 0.2rem !important;
}
.pt3 {
  padding-top: 0.3rem !important;
}
.pt4 {
  padding-top: 0.4rem !important;
}
.pt5 {
  padding-top: 0.5rem !important;
}
.pt6 {
  padding-top: 0.6rem !important;
}
.pt7 {
  padding-top: 0.7rem !important;
}
.pt8 {
  padding-top: 0.8rem !important;
}
.pt9 {
  padding-top: 0.9rem !important;
}
.pt10 {
  padding-top: 1rem !important;
}
.pt11 {
  padding-top: 1.1rem !important;
}
.pt12 {
  padding-top: 1.2rem !important;
}
.pt13 {
  padding-top: 1.3rem !important;
}
.pt14 {
  padding-top: 1.4rem !important;
}
.pt15 {
  padding-top: 1.5rem !important;
}
.pt16 {
  padding-top: 1.6rem !important;
}
.pt17 {
  padding-top: 1.7rem !important;
}
.pt18 {
  padding-top: 1.8rem !important;
}
.pt19 {
  padding-top: 1.9rem !important;
}
.pt20 {
  padding-top: 2rem !important;
}
.pt21 {
  padding-top: 2.1rem !important;
}
.pt22 {
  padding-top: 2.2rem !important;
}
.pt23 {
  padding-top: 2.3rem !important;
}
.pt24 {
  padding-top: 2.4rem !important;
}
.pt25 {
  padding-top: 2.5rem !important;
}
.pt26 {
  padding-top: 2.6rem !important;
}
.pt27 {
  padding-top: 2.7rem !important;
}
.pt28 {
  padding-top: 2.8rem !important;
}
.pt29 {
  padding-top: 2.9rem !important;
}
.pt30 {
  padding-top: 3rem !important;
}
.pt31 {
  padding-top: 3.1rem !important;
}
.pt32 {
  padding-top: 3.2rem !important;
}
.pt33 {
  padding-top: 3.3rem !important;
}
.pt34 {
  padding-top: 3.4rem !important;
}
.pt35 {
  padding-top: 3.5rem !important;
}
.pt36 {
  padding-top: 3.6rem !important;
}
.pt37 {
  padding-top: 3.7rem !important;
}
.pt38 {
  padding-top: 3.8rem !important;
}
.pt39 {
  padding-top: 3.9rem !important;
}
.pt40 {
  padding-top: 4rem !important;
}
.pt41 {
  padding-top: 4.1rem !important;
}
.pt42 {
  padding-top: 4.2rem !important;
}
.pt43 {
  padding-top: 4.3rem !important;
}
.pt44 {
  padding-top: 4.4rem !important;
}
.pt45 {
  padding-top: 4.5rem !important;
}
.pt46 {
  padding-top: 4.6rem !important;
}
.pt47 {
  padding-top: 4.7rem !important;
}
.pt48 {
  padding-top: 4.8rem !important;
}
.pt49 {
  padding-top: 4.9rem !important;
}
.pt50 {
  padding-top: 5rem !important;
}
.pt51 {
  padding-top: 5.1rem !important;
}
.pt52 {
  padding-top: 5.2rem !important;
}
.pt53 {
  padding-top: 5.3rem !important;
}
.pt54 {
  padding-top: 5.4rem !important;
}
.pt55 {
  padding-top: 5.5rem !important;
}
.pt56 {
  padding-top: 5.6rem !important;
}
.pt57 {
  padding-top: 5.7rem !important;
}
.pt58 {
  padding-top: 5.8rem !important;
}
.pt59 {
  padding-top: 5.9rem !important;
}
.pt60 {
  padding-top: 6rem !important;
}
.pt61 {
  padding-top: 6.1rem !important;
}
.pt62 {
  padding-top: 6.2rem !important;
}
.pt63 {
  padding-top: 6.3rem !important;
}
.pt64 {
  padding-top: 6.4rem !important;
}
.pt65 {
  padding-top: 6.5rem !important;
}
.pt66 {
  padding-top: 6.6rem !important;
}
.pt67 {
  padding-top: 6.7rem !important;
}
.pt68 {
  padding-top: 6.8rem !important;
}
.pt69 {
  padding-top: 6.9rem !important;
}
.pt70 {
  padding-top: 7rem !important;
}
.pt71 {
  padding-top: 7.1rem !important;
}
.pt72 {
  padding-top: 7.2rem !important;
}
.pt73 {
  padding-top: 7.3rem !important;
}
.pt74 {
  padding-top: 7.4rem !important;
}
.pt75 {
  padding-top: 7.5rem !important;
}
.pt76 {
  padding-top: 7.6rem !important;
}
.pt77 {
  padding-top: 7.7rem !important;
}
.pt78 {
  padding-top: 7.8rem !important;
}
.pt79 {
  padding-top: 7.9rem !important;
}
.pt80 {
  padding-top: 8rem !important;
}
.pt81 {
  padding-top: 8.1rem !important;
}
.pt82 {
  padding-top: 8.2rem !important;
}
.pt83 {
  padding-top: 8.3rem !important;
}
.pt84 {
  padding-top: 8.4rem !important;
}
.pt85 {
  padding-top: 8.5rem !important;
}
.pt86 {
  padding-top: 8.6rem !important;
}
.pt87 {
  padding-top: 8.7rem !important;
}
.pt88 {
  padding-top: 8.8rem !important;
}
.pt89 {
  padding-top: 8.9rem !important;
}
.pt90 {
  padding-top: 9rem !important;
}
.pt91 {
  padding-top: 9.1rem !important;
}
.pt92 {
  padding-top: 9.2rem !important;
}
.pt93 {
  padding-top: 9.3rem !important;
}
.pt94 {
  padding-top: 9.4rem !important;
}
.pt95 {
  padding-top: 9.5rem !important;
}
.pt96 {
  padding-top: 9.6rem !important;
}
.pt97 {
  padding-top: 9.7rem !important;
}
.pt98 {
  padding-top: 9.8rem !important;
}
.pt99 {
  padding-top: 9.9rem !important;
}
.pt100 {
  padding-top: 10rem !important;
}

/* padding-bottom */
.pb1 {
  padding-bottom: 0.1rem !important;
}
.pb2 {
  padding-bottom: 0.2rem !important;
}
.pb3 {
  padding-bottom: 0.3rem !important;
}
.pb4 {
  padding-bottom: 0.4rem !important;
}
.pb5 {
  padding-bottom: 0.5rem !important;
}
.pb6 {
  padding-bottom: 0.6rem !important;
}
.pb7 {
  padding-bottom: 0.7rem !important;
}
.pb8 {
  padding-bottom: 0.8rem !important;
}
.pb9 {
  padding-bottom: 0.9rem !important;
}
.pb10 {
  padding-bottom: 1rem !important;
}
.pb11 {
  padding-bottom: 1.1rem !important;
}
.pb12 {
  padding-bottom: 1.2rem !important;
}
.pb13 {
  padding-bottom: 1.3rem !important;
}
.pb14 {
  padding-bottom: 1.4rem !important;
}
.pb15 {
  padding-bottom: 1.5rem !important;
}
.pb16 {
  padding-bottom: 1.6rem !important;
}
.pb17 {
  padding-bottom: 1.7rem !important;
}
.pb18 {
  padding-bottom: 1.8rem !important;
}
.pb19 {
  padding-bottom: 1.9rem !important;
}
.pb20 {
  padding-bottom: 2rem !important;
}
.pb21 {
  padding-bottom: 2.1rem !important;
}
.pb22 {
  padding-bottom: 2.2rem !important;
}
.pb23 {
  padding-bottom: 2.3rem !important;
}
.pb24 {
  padding-bottom: 2.4rem !important;
}
.pb25 {
  padding-bottom: 2.5rem !important;
}
.pb26 {
  padding-bottom: 2.6rem !important;
}
.pb27 {
  padding-bottom: 2.7rem !important;
}
.pb28 {
  padding-bottom: 2.8rem !important;
}
.pb29 {
  padding-bottom: 2.9rem !important;
}
.pb30 {
  padding-bottom: 3rem !important;
}
.pb31 {
  padding-bottom: 3.1rem !important;
}
.pb32 {
  padding-bottom: 3.2rem !important;
}
.pb33 {
  padding-bottom: 3.3rem !important;
}
.pb34 {
  padding-bottom: 3.4rem !important;
}
.pb35 {
  padding-bottom: 3.5rem !important;
}
.pb36 {
  padding-bottom: 3.6rem !important;
}
.pb37 {
  padding-bottom: 3.7rem !important;
}
.pb38 {
  padding-bottom: 3.8rem !important;
}
.pb39 {
  padding-bottom: 3.9rem !important;
}
.pb40 {
  padding-bottom: 4rem !important;
}
.pb41 {
  padding-bottom: 4.1rem !important;
}
.pb42 {
  padding-bottom: 4.2rem !important;
}
.pb43 {
  padding-bottom: 4.3rem !important;
}
.pb44 {
  padding-bottom: 4.4rem !important;
}
.pb45 {
  padding-bottom: 4.5rem !important;
}
.pb46 {
  padding-bottom: 4.6rem !important;
}
.pb47 {
  padding-bottom: 4.7rem !important;
}
.pb48 {
  padding-bottom: 4.8rem !important;
}
.pb49 {
  padding-bottom: 4.9rem !important;
}
.pb50 {
  padding-bottom: 5rem !important;
}
.pb51 {
  padding-bottom: 5.1rem !important;
}
.pb52 {
  padding-bottom: 5.2rem !important;
}
.pb53 {
  padding-bottom: 5.3rem !important;
}
.pb54 {
  padding-bottom: 5.4rem !important;
}
.pb55 {
  padding-bottom: 5.5rem !important;
}
.pb56 {
  padding-bottom: 5.6rem !important;
}
.pb57 {
  padding-bottom: 5.7rem !important;
}
.pb58 {
  padding-bottom: 5.8rem !important;
}
.pb59 {
  padding-bottom: 5.9rem !important;
}
.pb60 {
  padding-bottom: 6rem !important;
}
.pb61 {
  padding-bottom: 6.1rem !important;
}
.pb62 {
  padding-bottom: 6.2rem !important;
}
.pb63 {
  padding-bottom: 6.3rem !important;
}
.pb64 {
  padding-bottom: 6.4rem !important;
}
.pb65 {
  padding-bottom: 6.5rem !important;
}
.pb66 {
  padding-bottom: 6.6rem !important;
}
.pb67 {
  padding-bottom: 6.7rem !important;
}
.pb68 {
  padding-bottom: 6.8rem !important;
}
.pb69 {
  padding-bottom: 6.9rem !important;
}
.pb70 {
  padding-bottom: 7rem !important;
}
.pb71 {
  padding-bottom: 7.1rem !important;
}
.pb72 {
  padding-bottom: 7.2rem !important;
}
.pb73 {
  padding-bottom: 7.3rem !important;
}
.pb74 {
  padding-bottom: 7.4rem !important;
}
.pb75 {
  padding-bottom: 7.5rem !important;
}
.pb76 {
  padding-bottom: 7.6rem !important;
}
.pb77 {
  padding-bottom: 7.7rem !important;
}
.pb78 {
  padding-bottom: 7.8rem !important;
}
.pb79 {
  padding-bottom: 7.9rem !important;
}
.pb80 {
  padding-bottom: 8rem !important;
}
.pb81 {
  padding-bottom: 8.1rem !important;
}
.pb82 {
  padding-bottom: 8.2rem !important;
}
.pb83 {
  padding-bottom: 8.3rem !important;
}
.pb84 {
  padding-bottom: 8.4rem !important;
}
.pb85 {
  padding-bottom: 8.5rem !important;
}
.pb86 {
  padding-bottom: 8.6rem !important;
}
.pb87 {
  padding-bottom: 8.7rem !important;
}
.pb88 {
  padding-bottom: 8.8rem !important;
}
.pb89 {
  padding-bottom: 8.9rem !important;
}
.pb90 {
  padding-bottom: 9rem !important;
}
.pb91 {
  padding-bottom: 9.1rem !important;
}
.pb92 {
  padding-bottom: 9.2rem !important;
}
.pb93 {
  padding-bottom: 9.3rem !important;
}
.pb94 {
  padding-bottom: 9.4rem !important;
}
.pb95 {
  padding-bottom: 9.5rem !important;
}
.pb96 {
  padding-bottom: 9.6rem !important;
}
.pb97 {
  padding-bottom: 9.7rem !important;
}
.pb98 {
  padding-bottom: 9.8rem !important;
}
.pb99 {
  padding-bottom: 9.9rem !important;
}
.pb100 {
  padding-bottom: 10rem !important;
}

/* padding-left */
.pl1 {
  padding-left: 0.1rem !important;
}
.pl2 {
  padding-left: 0.2rem !important;
}
.pl3 {
  padding-left: 0.3rem !important;
}
.pl4 {
  padding-left: 0.4rem !important;
}
.pl5 {
  padding-left: 0.5rem !important;
}
.pl6 {
  padding-left: 0.6rem !important;
}
.pl7 {
  padding-left: 0.7rem !important;
}
.pl8 {
  padding-left: 0.8rem !important;
}
.pl9 {
  padding-left: 0.9rem !important;
}
.pl10 {
  padding-left: 1rem !important;
}
.pl11 {
  padding-left: 1.1rem !important;
}
.pl12 {
  padding-left: 1.2rem !important;
}
.pl13 {
  padding-left: 1.3rem !important;
}
.pl14 {
  padding-left: 1.4rem !important;
}
.pl15 {
  padding-left: 1.5rem !important;
}
.pl16 {
  padding-left: 1.6rem !important;
}
.pl17 {
  padding-left: 1.7rem !important;
}
.pl18 {
  padding-left: 1.8rem !important;
}
.pl19 {
  padding-left: 1.9rem !important;
}
.pl20 {
  padding-left: 2rem !important;
}
.pl21 {
  padding-left: 2.1rem !important;
}
.pl22 {
  padding-left: 2.2rem !important;
}
.pl23 {
  padding-left: 2.3rem !important;
}
.pl24 {
  padding-left: 2.4rem !important;
}
.pl25 {
  padding-left: 2.5rem !important;
}
.pl26 {
  padding-left: 2.6rem !important;
}
.pl27 {
  padding-left: 2.7rem !important;
}
.pl28 {
  padding-left: 2.8rem !important;
}
.pl29 {
  padding-left: 2.9rem !important;
}
.pl30 {
  padding-left: 3rem !important;
}
.pl31 {
  padding-left: 3.1rem !important;
}
.pl32 {
  padding-left: 3.2rem !important;
}
.pl33 {
  padding-left: 3.3rem !important;
}
.pl34 {
  padding-left: 3.4rem !important;
}
.pl35 {
  padding-left: 3.5rem !important;
}
.pl36 {
  padding-left: 3.6rem !important;
}
.pl37 {
  padding-left: 3.7rem !important;
}
.pl38 {
  padding-left: 3.8rem !important;
}
.pl39 {
  padding-left: 3.9rem !important;
}
.pl40 {
  padding-left: 4rem !important;
}
.pl41 {
  padding-left: 4.1rem !important;
}
.pl42 {
  padding-left: 4.2rem !important;
}
.pl43 {
  padding-left: 4.3rem !important;
}
.pl44 {
  padding-left: 4.4rem !important;
}
.pl45 {
  padding-left: 4.5rem !important;
}
.pl46 {
  padding-left: 4.6rem !important;
}
.pl47 {
  padding-left: 4.7rem !important;
}
.pl48 {
  padding-left: 4.8rem !important;
}
.pl49 {
  padding-left: 4.9rem !important;
}
.pl50 {
  padding-left: 5rem !important;
}
.pl51 {
  padding-left: 5.1rem !important;
}
.pl52 {
  padding-left: 5.2rem !important;
}
.pl53 {
  padding-left: 5.3rem !important;
}
.pl54 {
  padding-left: 5.4rem !important;
}
.pl55 {
  padding-left: 5.5rem !important;
}
.pl56 {
  padding-left: 5.6rem !important;
}
.pl57 {
  padding-left: 5.7rem !important;
}
.pl58 {
  padding-left: 5.8rem !important;
}
.pl59 {
  padding-left: 5.9rem !important;
}
.pl60 {
  padding-left: 6rem !important;
}
.pl61 {
  padding-left: 6.1rem !important;
}
.pl62 {
  padding-left: 6.2rem !important;
}
.pl63 {
  padding-left: 6.3rem !important;
}
.pl64 {
  padding-left: 6.4rem !important;
}
.pl65 {
  padding-left: 6.5rem !important;
}
.pl66 {
  padding-left: 6.6rem !important;
}
.pl67 {
  padding-left: 6.7rem !important;
}
.pl68 {
  padding-left: 6.8rem !important;
}
.pl69 {
  padding-left: 6.9rem !important;
}
.pl70 {
  padding-left: 7rem !important;
}
.pl71 {
  padding-left: 7.1rem !important;
}
.pl72 {
  padding-left: 7.2rem !important;
}
.pl73 {
  padding-left: 7.3rem !important;
}
.pl74 {
  padding-left: 7.4rem !important;
}
.pl75 {
  padding-left: 7.5rem !important;
}
.pl76 {
  padding-left: 7.6rem !important;
}
.pl77 {
  padding-left: 7.7rem !important;
}
.pl78 {
  padding-left: 7.8rem !important;
}
.pl79 {
  padding-left: 7.9rem !important;
}
.pl80 {
  padding-left: 8rem !important;
}
.pl81 {
  padding-left: 8.1rem !important;
}
.pl82 {
  padding-left: 8.2rem !important;
}
.pl83 {
  padding-left: 8.3rem !important;
}
.pl84 {
  padding-left: 8.4rem !important;
}
.pl85 {
  padding-left: 8.5rem !important;
}
.pl86 {
  padding-left: 8.6rem !important;
}
.pl87 {
  padding-left: 8.7rem !important;
}
.pl88 {
  padding-left: 8.8rem !important;
}
.pl89 {
  padding-left: 8.9rem !important;
}
.pl90 {
  padding-left: 9rem !important;
}
.pl91 {
  padding-left: 9.1rem !important;
}
.pl92 {
  padding-left: 9.2rem !important;
}
.pl93 {
  padding-left: 9.3rem !important;
}
.pl94 {
  padding-left: 9.4rem !important;
}
.pl95 {
  padding-left: 9.5rem !important;
}
.pl96 {
  padding-left: 9.6rem !important;
}
.pl97 {
  padding-left: 9.7rem !important;
}
.pl98 {
  padding-left: 9.8rem !important;
}
.pl99 {
  padding-left: 9.9rem !important;
}
.pl100 {
  padding-left: 10rem !important;
}

/* padding-right */
.pr1 {
  padding-right: 0.1rem !important;
}
.pr2 {
  padding-right: 0.2rem !important;
}
.pr3 {
  padding-right: 0.3rem !important;
}
.pr4 {
  padding-right: 0.4rem !important;
}
.pr5 {
  padding-right: 0.5rem !important;
}
.pr6 {
  padding-right: 0.6rem !important;
}
.pr7 {
  padding-right: 0.7rem !important;
}
.pr8 {
  padding-right: 0.8rem !important;
}
.pr9 {
  padding-right: 0.9rem !important;
}
.pr10 {
  padding-right: 1rem !important;
}
.pr11 {
  padding-right: 1.1rem !important;
}
.pr12 {
  padding-right: 1.2rem !important;
}
.pr13 {
  padding-right: 1.3rem !important;
}
.pr14 {
  padding-right: 1.4rem !important;
}
.pr15 {
  padding-right: 1.5rem !important;
}
.pr16 {
  padding-right: 1.6rem !important;
}
.pr17 {
  padding-right: 1.7rem !important;
}
.pr18 {
  padding-right: 1.8rem !important;
}
.pr19 {
  padding-right: 1.9rem !important;
}
.pr20 {
  padding-right: 2rem !important;
}
.pr21 {
  padding-right: 2.1rem !important;
}
.pr22 {
  padding-right: 2.2rem !important;
}
.pr23 {
  padding-right: 2.3rem !important;
}
.pr24 {
  padding-right: 2.4rem !important;
}
.pr25 {
  padding-right: 2.5rem !important;
}
.pr26 {
  padding-right: 2.6rem !important;
}
.pr27 {
  padding-right: 2.7rem !important;
}
.pr28 {
  padding-right: 2.8rem !important;
}
.pr29 {
  padding-right: 2.9rem !important;
}
.pr30 {
  padding-right: 3rem !important;
}
.pr31 {
  padding-right: 3.1rem !important;
}
.pr32 {
  padding-right: 3.2rem !important;
}
.pr33 {
  padding-right: 3.3rem !important;
}
.pr34 {
  padding-right: 3.4rem !important;
}
.pr35 {
  padding-right: 3.5rem !important;
}
.pr36 {
  padding-right: 3.6rem !important;
}
.pr37 {
  padding-right: 3.7rem !important;
}
.pr38 {
  padding-right: 3.8rem !important;
}
.pr39 {
  padding-right: 3.9rem !important;
}
.pr40 {
  padding-right: 4rem !important;
}
.pr41 {
  padding-right: 4.1rem !important;
}
.pr42 {
  padding-right: 4.2rem !important;
}
.pr43 {
  padding-right: 4.3rem !important;
}
.pr44 {
  padding-right: 4.4rem !important;
}
.pr45 {
  padding-right: 4.5rem !important;
}
.pr46 {
  padding-right: 4.6rem !important;
}
.pr47 {
  padding-right: 4.7rem !important;
}
.pr48 {
  padding-right: 4.8rem !important;
}
.pr49 {
  padding-right: 4.9rem !important;
}
.pr50 {
  padding-right: 5rem !important;
}
.pr51 {
  padding-right: 5.1rem !important;
}
.pr52 {
  padding-right: 5.2rem !important;
}
.pr53 {
  padding-right: 5.3rem !important;
}
.pr54 {
  padding-right: 5.4rem !important;
}
.pr55 {
  padding-right: 5.5rem !important;
}
.pr56 {
  padding-right: 5.6rem !important;
}
.pr57 {
  padding-right: 5.7rem !important;
}
.pr58 {
  padding-right: 5.8rem !important;
}
.pr59 {
  padding-right: 5.9rem !important;
}
.pr60 {
  padding-right: 6rem !important;
}
.pr61 {
  padding-right: 6.1rem !important;
}
.pr62 {
  padding-right: 6.2rem !important;
}
.pr63 {
  padding-right: 6.3rem !important;
}
.pr64 {
  padding-right: 6.4rem !important;
}
.pr65 {
  padding-right: 6.5rem !important;
}
.pr66 {
  padding-right: 6.6rem !important;
}
.pr67 {
  padding-right: 6.7rem !important;
}
.pr68 {
  padding-right: 6.8rem !important;
}
.pr69 {
  padding-right: 6.9rem !important;
}
.pr70 {
  padding-right: 7rem !important;
}
.pr71 {
  padding-right: 7.1rem !important;
}
.pr72 {
  padding-right: 7.2rem !important;
}
.pr73 {
  padding-right: 7.3rem !important;
}
.pr74 {
  padding-right: 7.4rem !important;
}
.pr75 {
  padding-right: 7.5rem !important;
}
.pr76 {
  padding-right: 7.6rem !important;
}
.pr77 {
  padding-right: 7.7rem !important;
}
.pr78 {
  padding-right: 7.8rem !important;
}
.pr79 {
  padding-right: 7.9rem !important;
}
.pr80 {
  padding-right: 8rem !important;
}
.pr81 {
  padding-right: 8.1rem !important;
}
.pr82 {
  padding-right: 8.2rem !important;
}
.pr83 {
  padding-right: 8.3rem !important;
}
.pr84 {
  padding-right: 8.4rem !important;
}
.pr85 {
  padding-right: 8.5rem !important;
}
.pr86 {
  padding-right: 8.6rem !important;
}
.pr87 {
  padding-right: 8.7rem !important;
}
.pr88 {
  padding-right: 8.8rem !important;
}
.pr89 {
  padding-right: 8.9rem !important;
}
.pr90 {
  padding-right: 9rem !important;
}
.pr91 {
  padding-right: 9.1rem !important;
}
.pr92 {
  padding-right: 9.2rem !important;
}
.pr93 {
  padding-right: 9.3rem !important;
}
.pr94 {
  padding-right: 9.4rem !important;
}
.pr95 {
  padding-right: 9.5rem !important;
}
.pr96 {
  padding-right: 9.6rem !important;
}
.pr97 {
  padding-right: 9.7rem !important;
}
.pr98 {
  padding-right: 9.8rem !important;
}
.pr99 {
  padding-right: 9.9rem !important;
}
.pr100 {
  padding-right: 10rem !important;
}

/* margin */
.m0 {
  margin: 0 !important;
}
.m_auto {
  margin: 0 auto !important;
}
.m1 {
  margin: 0.1rem !important;
}
.m2 {
  margin: 0.2rem !important;
}
.m3 {
  margin: 0.3rem !important;
}
.m4 {
  margin: 0.4rem !important;
}
.m5 {
  margin: 0.5rem !important;
}
.m6 {
  margin: 0.6rem !important;
}
.m7 {
  margin: 0.7rem !important;
}
.m8 {
  margin: 0.8rem !important;
}
.m9 {
  margin: 0.9rem !important;
}
.m10 {
  margin: 1rem !important;
}
.m11 {
  margin: 1.1rem !important;
}
.m12 {
  margin: 1.2rem !important;
}
.m13 {
  margin: 1.3rem !important;
}
.m14 {
  margin: 1.4rem !important;
}
.m15 {
  margin: 1.5rem !important;
}
.m16 {
  margin: 1.6rem !important;
}
.m17 {
  margin: 1.7rem !important;
}
.m18 {
  margin: 1.8rem !important;
}
.m19 {
  margin: 1.9rem !important;
}
.m20 {
  margin: 2rem !important;
}
.m21 {
  margin: 2.1rem !important;
}
.m22 {
  margin: 2.2rem !important;
}
.m23 {
  margin: 2.3rem !important;
}
.m24 {
  margin: 2.4rem !important;
}
.m25 {
  margin: 2.5rem !important;
}
.m26 {
  margin: 2.6rem !important;
}
.m27 {
  margin: 2.7rem !important;
}
.m28 {
  margin: 2.8rem !important;
}
.m29 {
  margin: 2.9rem !important;
}
.m30 {
  margin: 3rem !important;
}
.m31 {
  margin: 3.1rem !important;
}
.m32 {
  margin: 3.2rem !important;
}
.m33 {
  margin: 3.3rem !important;
}
.m34 {
  margin: 3.4rem !important;
}
.m35 {
  margin: 3.5rem !important;
}
.m36 {
  margin: 3.6rem !important;
}
.m37 {
  margin: 3.7rem !important;
}
.m38 {
  margin: 3.8rem !important;
}
.m39 {
  margin: 3.9rem !important;
}
.m40 {
  margin: 4rem !important;
}
.m41 {
  margin: 4.1rem !important;
}
.m42 {
  margin: 4.2rem !important;
}
.m43 {
  margin: 4.3rem !important;
}
.m44 {
  margin: 4.4rem !important;
}
.m45 {
  margin: 4.5rem !important;
}
.m46 {
  margin: 4.6rem !important;
}
.m47 {
  margin: 4.7rem !important;
}
.m48 {
  margin: 4.8rem !important;
}
.m49 {
  margin: 4.9rem !important;
}
.m50 {
  margin: 5rem !important;
}
.m51 {
  margin: 5.1rem !important;
}
.m52 {
  margin: 5.2rem !important;
}
.m53 {
  margin: 5.3rem !important;
}
.m54 {
  margin: 5.4rem !important;
}
.m55 {
  margin: 5.5rem !important;
}
.m56 {
  margin: 5.6rem !important;
}
.m57 {
  margin: 5.7rem !important;
}
.m58 {
  margin: 5.8rem !important;
}
.m59 {
  margin: 5.9rem !important;
}
.m60 {
  margin: 6rem !important;
}
.m61 {
  margin: 6.1rem !important;
}
.m62 {
  margin: 6.2rem !important;
}
.m63 {
  margin: 6.3rem !important;
}
.m64 {
  margin: 6.4rem !important;
}
.m65 {
  margin: 6.5rem !important;
}
.m66 {
  margin: 6.6rem !important;
}
.m67 {
  margin: 6.7rem !important;
}
.m68 {
  margin: 6.8rem !important;
}
.m69 {
  margin: 6.9rem !important;
}
.m70 {
  margin: 7rem !important;
}
.m71 {
  margin: 7.1rem !important;
}
.m72 {
  margin: 7.2rem !important;
}
.m73 {
  margin: 7.3rem !important;
}
.m74 {
  margin: 7.4rem !important;
}
.m75 {
  margin: 7.5rem !important;
}
.m76 {
  margin: 7.6rem !important;
}
.m77 {
  margin: 7.7rem !important;
}
.m78 {
  margin: 7.8rem !important;
}
.m79 {
  margin: 7.9rem !important;
}
.m80 {
  margin: 8rem !important;
}
.m81 {
  margin: 8.1rem !important;
}
.m82 {
  margin: 8.2rem !important;
}
.m83 {
  margin: 8.3rem !important;
}
.m84 {
  margin: 8.4rem !important;
}
.m85 {
  margin: 8.5rem !important;
}
.m86 {
  margin: 8.6rem !important;
}
.m87 {
  margin: 8.7rem !important;
}
.m88 {
  margin: 8.8rem !important;
}
.m89 {
  margin: 8.9rem !important;
}
.m90 {
  margin: 9rem !important;
}
.m91 {
  margin: 9.1rem !important;
}
.m92 {
  margin: 9.2rem !important;
}
.m93 {
  margin: 9.3rem !important;
}
.m94 {
  margin: 9.4rem !important;
}
.m95 {
  margin: 9.5rem !important;
}
.m96 {
  margin: 9.6rem !important;
}
.m97 {
  margin: 9.7rem !important;
}
.m98 {
  margin: 9.8rem !important;
}
.m99 {
  margin: 9.9rem !important;
}
.m100 {
  margin: 10rem !important;
}

/* margin-top */
.mt1 {
  margin-top: 0.1rem !important;
}
.mt2 {
  margin-top: 0.2rem !important;
}
.mt3 {
  margin-top: 0.3rem !important;
}
.mt4 {
  margin-top: 0.4rem !important;
}
.mt5 {
  margin-top: 0.5rem !important;
}
.mt6 {
  margin-top: 0.6rem !important;
}
.mt7 {
  margin-top: 0.7rem !important;
}
.mt8 {
  margin-top: 0.8rem !important;
}
.mt9 {
  margin-top: 0.9rem !important;
}
.mt10 {
  margin-top: 1rem !important;
}
.mt11 {
  margin-top: 1.1rem !important;
}
.mt12 {
  margin-top: 1.2rem !important;
}
.mt13 {
  margin-top: 1.3rem !important;
}
.mt14 {
  margin-top: 1.4rem !important;
}
.mt15 {
  margin-top: 1.5rem !important;
}
.mt16 {
  margin-top: 1.6rem !important;
}
.mt17 {
  margin-top: 1.7rem !important;
}
.mt18 {
  margin-top: 1.8rem !important;
}
.mt19 {
  margin-top: 1.9rem !important;
}
.mt20 {
  margin-top: 2rem !important;
}
.mt21 {
  margin-top: 2.1rem !important;
}
.mt22 {
  margin-top: 2.2rem !important;
}
.mt23 {
  margin-top: 2.3rem !important;
}
.mt24 {
  margin-top: 2.4rem !important;
}
.mt25 {
  margin-top: 2.5rem !important;
}
.mt26 {
  margin-top: 2.6rem !important;
}
.mt27 {
  margin-top: 2.7rem !important;
}
.mt28 {
  margin-top: 2.8rem !important;
}
.mt29 {
  margin-top: 2.9rem !important;
}
.mt30 {
  margin-top: 3rem !important;
}
.mt31 {
  margin-top: 3.1rem !important;
}
.mt32 {
  margin-top: 3.2rem !important;
}
.mt33 {
  margin-top: 3.3rem !important;
}
.mt34 {
  margin-top: 3.4rem !important;
}
.mt35 {
  margin-top: 3.5rem !important;
}
.mt36 {
  margin-top: 3.6rem !important;
}
.mt37 {
  margin-top: 3.7rem !important;
}
.mt38 {
  margin-top: 3.8rem !important;
}
.mt39 {
  margin-top: 3.9rem !important;
}
.mt40 {
  margin-top: 4rem !important;
}
.mt41 {
  margin-top: 4.1rem !important;
}
.mt42 {
  margin-top: 4.2rem !important;
}
.mt43 {
  margin-top: 4.3rem !important;
}
.mt44 {
  margin-top: 4.4rem !important;
}
.mt45 {
  margin-top: 4.5rem !important;
}
.mt46 {
  margin-top: 4.6rem !important;
}
.mt47 {
  margin-top: 4.7rem !important;
}
.mt48 {
  margin-top: 4.8rem !important;
}
.mt49 {
  margin-top: 4.9rem !important;
}
.mt50 {
  margin-top: 5rem !important;
}
.mt51 {
  margin-top: 5.1rem !important;
}
.mt52 {
  margin-top: 5.2rem !important;
}
.mt53 {
  margin-top: 5.3rem !important;
}
.mt54 {
  margin-top: 5.4rem !important;
}
.mt55 {
  margin-top: 5.5rem !important;
}
.mt56 {
  margin-top: 5.6rem !important;
}
.mt57 {
  margin-top: 5.7rem !important;
}
.mt58 {
  margin-top: 5.8rem !important;
}
.mt59 {
  margin-top: 5.9rem !important;
}
.mt60 {
  margin-top: 6rem !important;
}
.mt61 {
  margin-top: 6.1rem !important;
}
.mt62 {
  margin-top: 6.2rem !important;
}
.mt63 {
  margin-top: 6.3rem !important;
}
.mt64 {
  margin-top: 6.4rem !important;
}
.mt65 {
  margin-top: 6.5rem !important;
}
.mt66 {
  margin-top: 6.6rem !important;
}
.mt67 {
  margin-top: 6.7rem !important;
}
.mt68 {
  margin-top: 6.8rem !important;
}
.mt69 {
  margin-top: 6.9rem !important;
}
.mt70 {
  margin-top: 7rem !important;
}
.mt71 {
  margin-top: 7.1rem !important;
}
.mt72 {
  margin-top: 7.2rem !important;
}
.mt73 {
  margin-top: 7.3rem !important;
}
.mt74 {
  margin-top: 7.4rem !important;
}
.mt75 {
  margin-top: 7.5rem !important;
}
.mt76 {
  margin-top: 7.6rem !important;
}
.mt77 {
  margin-top: 7.7rem !important;
}
.mt78 {
  margin-top: 7.8rem !important;
}
.mt79 {
  margin-top: 7.9rem !important;
}
.mt80 {
  margin-top: 8rem !important;
}
.mt81 {
  margin-top: 8.1rem !important;
}
.mt82 {
  margin-top: 8.2rem !important;
}
.mt83 {
  margin-top: 8.3rem !important;
}
.mt84 {
  margin-top: 8.4rem !important;
}
.mt85 {
  margin-top: 8.5rem !important;
}
.mt86 {
  margin-top: 8.6rem !important;
}
.mt87 {
  margin-top: 8.7rem !important;
}
.mt88 {
  margin-top: 8.8rem !important;
}
.mt89 {
  margin-top: 8.9rem !important;
}
.mt90 {
  margin-top: 9rem !important;
}
.mt91 {
  margin-top: 9.1rem !important;
}
.mt92 {
  margin-top: 9.2rem !important;
}
.mt93 {
  margin-top: 9.3rem !important;
}
.mt94 {
  margin-top: 9.4rem !important;
}
.mt95 {
  margin-top: 9.5rem !important;
}
.mt96 {
  margin-top: 9.6rem !important;
}
.mt97 {
  margin-top: 9.7rem !important;
}
.mt98 {
  margin-top: 9.8rem !important;
}
.mt99 {
  margin-top: 9.9rem !important;
}
.mt100 {
  margin-top: 10rem !important;
}

/* margin-bottom */
.mb1 {
  margin-bottom: 0.1rem !important;
}
.mb2 {
  margin-bottom: 0.2rem !important;
}
.mb3 {
  margin-bottom: 0.3rem !important;
}
.mb4 {
  margin-bottom: 0.4rem !important;
}
.mb5 {
  margin-bottom: 0.5rem !important;
}
.mb6 {
  margin-bottom: 0.6rem !important;
}
.mb7 {
  margin-bottom: 0.7rem !important;
}
.mb8 {
  margin-bottom: 0.8rem !important;
}
.mb9 {
  margin-bottom: 0.9rem !important;
}
.mb10 {
  margin-bottom: 1rem !important;
}
.mb11 {
  margin-bottom: 1.1rem !important;
}
.mb12 {
  margin-bottom: 1.2rem !important;
}
.mb13 {
  margin-bottom: 1.3rem !important;
}
.mb14 {
  margin-bottom: 1.4rem !important;
}
.mb15 {
  margin-bottom: 1.5rem !important;
}
.mb16 {
  margin-bottom: 1.6rem !important;
}
.mb17 {
  margin-bottom: 1.7rem !important;
}
.mb18 {
  margin-bottom: 1.8rem !important;
}
.mb19 {
  margin-bottom: 1.9rem !important;
}
.mb20 {
  margin-bottom: 2rem !important;
}
.mb21 {
  margin-bottom: 2.1rem !important;
}
.mb22 {
  margin-bottom: 2.2rem !important;
}
.mb23 {
  margin-bottom: 2.3rem !important;
}
.mb24 {
  margin-bottom: 2.4rem !important;
}
.mb25 {
  margin-bottom: 2.5rem !important;
}
.mb26 {
  margin-bottom: 2.6rem !important;
}
.mb27 {
  margin-bottom: 2.7rem !important;
}
.mb28 {
  margin-bottom: 2.8rem !important;
}
.mb29 {
  margin-bottom: 2.9rem !important;
}
.mb30 {
  margin-bottom: 3rem !important;
}
.mb31 {
  margin-bottom: 3.1rem !important;
}
.mb32 {
  margin-bottom: 3.2rem !important;
}
.mb33 {
  margin-bottom: 3.3rem !important;
}
.mb34 {
  margin-bottom: 3.4rem !important;
}
.mb35 {
  margin-bottom: 3.5rem !important;
}
.mb36 {
  margin-bottom: 3.6rem !important;
}
.mb37 {
  margin-bottom: 3.7rem !important;
}
.mb38 {
  margin-bottom: 3.8rem !important;
}
.mb39 {
  margin-bottom: 3.9rem !important;
}
.mb40 {
  margin-bottom: 4rem !important;
}
.mb41 {
  margin-bottom: 4.1rem !important;
}
.mb42 {
  margin-bottom: 4.2rem !important;
}
.mb43 {
  margin-bottom: 4.3rem !important;
}
.mb44 {
  margin-bottom: 4.4rem !important;
}
.mb45 {
  margin-bottom: 4.5rem !important;
}
.mb46 {
  margin-bottom: 4.6rem !important;
}
.mb47 {
  margin-bottom: 4.7rem !important;
}
.mb48 {
  margin-bottom: 4.8rem !important;
}
.mb49 {
  margin-bottom: 4.9rem !important;
}
.mb50 {
  margin-bottom: 5rem !important;
}
.mb51 {
  margin-bottom: 5.1rem !important;
}
.mb52 {
  margin-bottom: 5.2rem !important;
}
.mb53 {
  margin-bottom: 5.3rem !important;
}
.mb54 {
  margin-bottom: 5.4rem !important;
}
.mb55 {
  margin-bottom: 5.5rem !important;
}
.mb56 {
  margin-bottom: 5.6rem !important;
}
.mb57 {
  margin-bottom: 5.7rem !important;
}
.mb58 {
  margin-bottom: 5.8rem !important;
}
.mb59 {
  margin-bottom: 5.9rem !important;
}
.mb60 {
  margin-bottom: 6rem !important;
}
.mb61 {
  margin-bottom: 6.1rem !important;
}
.mb62 {
  margin-bottom: 6.2rem !important;
}
.mb63 {
  margin-bottom: 6.3rem !important;
}
.mb64 {
  margin-bottom: 6.4rem !important;
}
.mb65 {
  margin-bottom: 6.5rem !important;
}
.mb66 {
  margin-bottom: 6.6rem !important;
}
.mb67 {
  margin-bottom: 6.7rem !important;
}
.mb68 {
  margin-bottom: 6.8rem !important;
}
.mb69 {
  margin-bottom: 6.9rem !important;
}
.mb70 {
  margin-bottom: 7rem !important;
}
.mb71 {
  margin-bottom: 7.1rem !important;
}
.mb72 {
  margin-bottom: 7.2rem !important;
}
.mb73 {
  margin-bottom: 7.3rem !important;
}
.mb74 {
  margin-bottom: 7.4rem !important;
}
.mb75 {
  margin-bottom: 7.5rem !important;
}
.mb76 {
  margin-bottom: 7.6rem !important;
}
.mb77 {
  margin-bottom: 7.7rem !important;
}
.mb78 {
  margin-bottom: 7.8rem !important;
}
.mb79 {
  margin-bottom: 7.9rem !important;
}
.mb80 {
  margin-bottom: 8rem !important;
}
.mb81 {
  margin-bottom: 8.1rem !important;
}
.mb82 {
  margin-bottom: 8.2rem !important;
}
.mb83 {
  margin-bottom: 8.3rem !important;
}
.mb84 {
  margin-bottom: 8.4rem !important;
}
.mb85 {
  margin-bottom: 8.5rem !important;
}
.mb86 {
  margin-bottom: 8.6rem !important;
}
.mb87 {
  margin-bottom: 8.7rem !important;
}
.mb88 {
  margin-bottom: 8.8rem !important;
}
.mb89 {
  margin-bottom: 8.9rem !important;
}
.mb90 {
  margin-bottom: 9rem !important;
}
.mb91 {
  margin-bottom: 9.1rem !important;
}
.mb92 {
  margin-bottom: 9.2rem !important;
}
.mb93 {
  margin-bottom: 9.3rem !important;
}
.mb94 {
  margin-bottom: 9.4rem !important;
}
.mb95 {
  margin-bottom: 9.5rem !important;
}
.mb96 {
  margin-bottom: 9.6rem !important;
}
.mb97 {
  margin-bottom: 9.7rem !important;
}
.mb98 {
  margin-bottom: 9.8rem !important;
}
.mb99 {
  margin-bottom: 9.9rem !important;
}
.mb100 {
  margin-bottom: 10rem !important;
}

/* margin-left */
.ml1 {
  margin-left: 0.1rem !important;
}
.ml2 {
  margin-left: 0.2rem !important;
}
.ml3 {
  margin-left: 0.3rem !important;
}
.ml4 {
  margin-left: 0.4rem !important;
}
.ml5 {
  margin-left: 0.5rem !important;
}
.ml6 {
  margin-left: 0.6rem !important;
}
.ml7 {
  margin-left: 0.7rem !important;
}
.ml8 {
  margin-left: 0.8rem !important;
}
.ml9 {
  margin-left: 0.9rem !important;
}
.ml10 {
  margin-left: 1rem !important;
}
.ml11 {
  margin-left: 1.1rem !important;
}
.ml12 {
  margin-left: 1.2rem !important;
}
.ml13 {
  margin-left: 1.3rem !important;
}
.ml14 {
  margin-left: 1.4rem !important;
}
.ml15 {
  margin-left: 1.5rem !important;
}
.ml16 {
  margin-left: 1.6rem !important;
}
.ml17 {
  margin-left: 1.7rem !important;
}
.ml18 {
  margin-left: 1.8rem !important;
}
.ml19 {
  margin-left: 1.9rem !important;
}
.ml20 {
  margin-left: 2rem !important;
}
.ml21 {
  margin-left: 2.1rem !important;
}
.ml22 {
  margin-left: 2.2rem !important;
}
.ml23 {
  margin-left: 2.3rem !important;
}
.ml24 {
  margin-left: 2.4rem !important;
}
.ml25 {
  margin-left: 2.5rem !important;
}
.ml26 {
  margin-left: 2.6rem !important;
}
.ml27 {
  margin-left: 2.7rem !important;
}
.ml28 {
  margin-left: 2.8rem !important;
}
.ml29 {
  margin-left: 2.9rem !important;
}
.ml30 {
  margin-left: 3rem !important;
}
.ml31 {
  margin-left: 3.1rem !important;
}
.ml32 {
  margin-left: 3.2rem !important;
}
.ml33 {
  margin-left: 3.3rem !important;
}
.ml34 {
  margin-left: 3.4rem !important;
}
.ml35 {
  margin-left: 3.5rem !important;
}
.ml36 {
  margin-left: 3.6rem !important;
}
.ml37 {
  margin-left: 3.7rem !important;
}
.ml38 {
  margin-left: 3.8rem !important;
}
.ml39 {
  margin-left: 3.9rem !important;
}
.ml40 {
  margin-left: 4rem !important;
}
.ml41 {
  margin-left: 4.1rem !important;
}
.ml42 {
  margin-left: 4.2rem !important;
}
.ml43 {
  margin-left: 4.3rem !important;
}
.ml44 {
  margin-left: 4.4rem !important;
}
.ml45 {
  margin-left: 4.5rem !important;
}
.ml46 {
  margin-left: 4.6rem !important;
}
.ml47 {
  margin-left: 4.7rem !important;
}
.ml48 {
  margin-left: 4.8rem !important;
}
.ml49 {
  margin-left: 4.9rem !important;
}
.ml50 {
  margin-left: 5rem !important;
}
.ml51 {
  margin-left: 5.1rem !important;
}
.ml52 {
  margin-left: 5.2rem !important;
}
.ml53 {
  margin-left: 5.3rem !important;
}
.ml54 {
  margin-left: 5.4rem !important;
}
.ml55 {
  margin-left: 5.5rem !important;
}
.ml56 {
  margin-left: 5.6rem !important;
}
.ml57 {
  margin-left: 5.7rem !important;
}
.ml58 {
  margin-left: 5.8rem !important;
}
.ml59 {
  margin-left: 5.9rem !important;
}
.ml60 {
  margin-left: 6rem !important;
}
.ml61 {
  margin-left: 6.1rem !important;
}
.ml62 {
  margin-left: 6.2rem !important;
}
.ml63 {
  margin-left: 6.3rem !important;
}
.ml64 {
  margin-left: 6.4rem !important;
}
.ml65 {
  margin-left: 6.5rem !important;
}
.ml66 {
  margin-left: 6.6rem !important;
}
.ml67 {
  margin-left: 6.7rem !important;
}
.ml68 {
  margin-left: 6.8rem !important;
}
.ml69 {
  margin-left: 6.9rem !important;
}
.ml70 {
  margin-left: 7rem !important;
}
.ml71 {
  margin-left: 7.1rem !important;
}
.ml72 {
  margin-left: 7.2rem !important;
}
.ml73 {
  margin-left: 7.3rem !important;
}
.ml74 {
  margin-left: 7.4rem !important;
}
.ml75 {
  margin-left: 7.5rem !important;
}
.ml76 {
  margin-left: 7.6rem !important;
}
.ml77 {
  margin-left: 7.7rem !important;
}
.ml78 {
  margin-left: 7.8rem !important;
}
.ml79 {
  margin-left: 7.9rem !important;
}
.ml80 {
  margin-left: 8rem !important;
}
.ml81 {
  margin-left: 8.1rem !important;
}
.ml82 {
  margin-left: 8.2rem !important;
}
.ml83 {
  margin-left: 8.3rem !important;
}
.ml84 {
  margin-left: 8.4rem !important;
}
.ml85 {
  margin-left: 8.5rem !important;
}
.ml86 {
  margin-left: 8.6rem !important;
}
.ml87 {
  margin-left: 8.7rem !important;
}
.ml88 {
  margin-left: 8.8rem !important;
}
.ml89 {
  margin-left: 8.9rem !important;
}
.ml90 {
  margin-left: 9rem !important;
}
.ml91 {
  margin-left: 9.1rem !important;
}
.ml92 {
  margin-left: 9.2rem !important;
}
.ml93 {
  margin-left: 9.3rem !important;
}
.ml94 {
  margin-left: 9.4rem !important;
}
.ml95 {
  margin-left: 9.5rem !important;
}
.ml96 {
  margin-left: 9.6rem !important;
}
.ml97 {
  margin-left: 9.7rem !important;
}
.ml98 {
  margin-left: 9.8rem !important;
}
.ml99 {
  margin-left: 9.9rem !important;
}
.ml100 {
  margin-left: 10rem !important;
}

/* margin-right */
.mr1 {
  margin-right: 0.1rem !important;
}
.mr2 {
  margin-right: 0.2rem !important;
}
.mr3 {
  margin-right: 0.3rem !important;
}
.mr4 {
  margin-right: 0.4rem !important;
}
.mr5 {
  margin-right: 0.5rem !important;
}
.mr6 {
  margin-right: 0.6rem !important;
}
.mr7 {
  margin-right: 0.7rem !important;
}
.mr8 {
  margin-right: 0.8rem !important;
}
.mr9 {
  margin-right: 0.9rem !important;
}
.mr10 {
  margin-right: 1rem !important;
}
.mr11 {
  margin-right: 1.1rem !important;
}
.mr12 {
  margin-right: 1.2rem !important;
}
.mr13 {
  margin-right: 1.3rem !important;
}
.mr14 {
  margin-right: 1.4rem !important;
}
.mr15 {
  margin-right: 1.5rem !important;
}
.mr16 {
  margin-right: 1.6rem !important;
}
.mr17 {
  margin-right: 1.7rem !important;
}
.mr18 {
  margin-right: 1.8rem !important;
}
.mr19 {
  margin-right: 1.9rem !important;
}
.mr20 {
  margin-right: 2rem !important;
}
.mr21 {
  margin-right: 2.1rem !important;
}
.mr22 {
  margin-right: 2.2rem !important;
}
.mr23 {
  margin-right: 2.3rem !important;
}
.mr24 {
  margin-right: 2.4rem !important;
}
.mr25 {
  margin-right: 2.5rem !important;
}
.mr26 {
  margin-right: 2.6rem !important;
}
.mr27 {
  margin-right: 2.7rem !important;
}
.mr28 {
  margin-right: 2.8rem !important;
}
.mr29 {
  margin-right: 2.9rem !important;
}
.mr30 {
  margin-right: 3rem !important;
}
.mr31 {
  margin-right: 3.1rem !important;
}
.mr32 {
  margin-right: 3.2rem !important;
}
.mr33 {
  margin-right: 3.3rem !important;
}
.mr34 {
  margin-right: 3.4rem !important;
}
.mr35 {
  margin-right: 3.5rem !important;
}
.mr36 {
  margin-right: 3.6rem !important;
}
.mr37 {
  margin-right: 3.7rem !important;
}
.mr38 {
  margin-right: 3.8rem !important;
}
.mr39 {
  margin-right: 3.9rem !important;
}
.mr40 {
  margin-right: 4rem !important;
}
.mr41 {
  margin-right: 4.1rem !important;
}
.mr42 {
  margin-right: 4.2rem !important;
}
.mr43 {
  margin-right: 4.3rem !important;
}
.mr44 {
  margin-right: 4.4rem !important;
}
.mr45 {
  margin-right: 4.5rem !important;
}
.mr46 {
  margin-right: 4.6rem !important;
}
.mr47 {
  margin-right: 4.7rem !important;
}
.mr48 {
  margin-right: 4.8rem !important;
}
.mr49 {
  margin-right: 4.9rem !important;
}
.mr50 {
  margin-right: 5rem !important;
}
.mr51 {
  margin-right: 5.1rem !important;
}
.mr52 {
  margin-right: 5.2rem !important;
}
.mr53 {
  margin-right: 5.3rem !important;
}
.mr54 {
  margin-right: 5.4rem !important;
}
.mr55 {
  margin-right: 5.5rem !important;
}
.mr56 {
  margin-right: 5.6rem !important;
}
.mr57 {
  margin-right: 5.7rem !important;
}
.mr58 {
  margin-right: 5.8rem !important;
}
.mr59 {
  margin-right: 5.9rem !important;
}
.mr60 {
  margin-right: 6rem !important;
}
.mr61 {
  margin-right: 6.1rem !important;
}
.mr62 {
  margin-right: 6.2rem !important;
}
.mr63 {
  margin-right: 6.3rem !important;
}
.mr64 {
  margin-right: 6.4rem !important;
}
.mr65 {
  margin-right: 6.5rem !important;
}
.mr66 {
  margin-right: 6.6rem !important;
}
.mr67 {
  margin-right: 6.7rem !important;
}
.mr68 {
  margin-right: 6.8rem !important;
}
.mr69 {
  margin-right: 6.9rem !important;
}
.mr70 {
  margin-right: 7rem !important;
}
.mr71 {
  margin-right: 7.1rem !important;
}
.mr72 {
  margin-right: 7.2rem !important;
}
.mr73 {
  margin-right: 7.3rem !important;
}
.mr74 {
  margin-right: 7.4rem !important;
}
.mr75 {
  margin-right: 7.5rem !important;
}
.mr76 {
  margin-right: 7.6rem !important;
}
.mr77 {
  margin-right: 7.7rem !important;
}
.mr78 {
  margin-right: 7.8rem !important;
}
.mr79 {
  margin-right: 7.9rem !important;
}
.mr80 {
  margin-right: 8rem !important;
}
.mr81 {
  margin-right: 8.1rem !important;
}
.mr82 {
  margin-right: 8.2rem !important;
}
.mr83 {
  margin-right: 8.3rem !important;
}
.mr84 {
  margin-right: 8.4rem !important;
}
.mr85 {
  margin-right: 8.5rem !important;
}
.mr86 {
  margin-right: 8.6rem !important;
}
.mr87 {
  margin-right: 8.7rem !important;
}
.mr88 {
  margin-right: 8.8rem !important;
}
.mr89 {
  margin-right: 8.9rem !important;
}
.mr90 {
  margin-right: 9rem !important;
}
.mr91 {
  margin-right: 9.1rem !important;
}
.mr92 {
  margin-right: 9.2rem !important;
}
.mr93 {
  margin-right: 9.3rem !important;
}
.mr94 {
  margin-right: 9.4rem !important;
}
.mr95 {
  margin-right: 9.5rem !important;
}
.mr96 {
  margin-right: 9.6rem !important;
}
.mr97 {
  margin-right: 9.7rem !important;
}
.mr98 {
  margin-right: 9.8rem !important;
}
.mr99 {
  margin-right: 9.9rem !important;
}
.mr100 {
  margin-right: 10rem !important;
}

/* width 5% ~ 100% 비율 **************************************************/
.w_auto {
  width: auto !important;
  min-width: auto !important;
}
.w5 {
  width: 5% !important;
  min-width: 5% !important;
}
.w6 {
  width: 6% !important;
  min-width: 6% !important;
}
.w7 {
  width: 7% !important;
  min-width: 7% !important;
}
.w8 {
  width: 8% !important;
  min-width: 8% !important;
}
.w9 {
  width: 9% !important;
  min-width: 9% !important;
}
.w10 {
  width: 10% !important;
  min-width: 10% !important;
}
.w11 {
  width: 11% !important;
  min-width: 11% !important;
}
.w12 {
  width: 12% !important;
  min-width: 12% !important;
}
.w13 {
  width: 13% !important;
  min-width: 13% !important;
}
.w14 {
  width: 14% !important;
  min-width: 14% !important;
}
.w15 {
  width: 15% !important;
  min-width: 15% !important;
}
.w16 {
  width: 16% !important;
  min-width: 16% !important;
}
.w17 {
  width: 17% !important;
  min-width: 17% !important;
}
.w18 {
  width: 18% !important;
  min-width: 18% !important;
}
.w19 {
  width: 19% !important;
  min-width: 19% !important;
}
.w20 {
  width: 20% !important;
  min-width: 20% !important;
}
.w21 {
  width: 21% !important;
  min-width: 21% !important;
}
.w22 {
  width: 22% !important;
  min-width: 22% !important;
}
.w23 {
  width: 23% !important;
  min-width: 23% !important;
}
.w24 {
  width: 24% !important;
  min-width: 24% !important;
}
.w25 {
  width: 25% !important;
  min-width: 25% !important;
}
.w26 {
  width: 26% !important;
  min-width: 26% !important;
}
.w27 {
  width: 27% !important;
  min-width: 27% !important;
}
.w28 {
  width: 28% !important;
  min-width: 28% !important;
}
.w29 {
  width: 29% !important;
  min-width: 29% !important;
}
.w30 {
  width: 30% !important;
  min-width: 30% !important;
}
.w31 {
  width: 31% !important;
  min-width: 31% !important;
}
.w32 {
  width: 32% !important;
  min-width: 32% !important;
}
.w33 {
  width: 33% !important;
  min-width: 33% !important;
}
.w33_3 {
  width: 33.3333333% !important;
  min-width: 33.3333333% !important;
}
.w34 {
  width: 34% !important;
  min-width: 34% !important;
}
.w35 {
  width: 35% !important;
  min-width: 35% !important;
}
.w36 {
  width: 36% !important;
  min-width: 36% !important;
}
.w37 {
  width: 37% !important;
  min-width: 37% !important;
}
.w38 {
  width: 38% !important;
  min-width: 38% !important;
}
.w39 {
  width: 39% !important;
  min-width: 39% !important;
}
.w40 {
  width: 40% !important;
  min-width: 40% !important;
}
.w41 {
  width: 41% !important;
  min-width: 41% !important;
}
.w42 {
  width: 42% !important;
  min-width: 42% !important;
}
.w43 {
  width: 43% !important;
  min-width: 43% !important;
}
.w44 {
  width: 44% !important;
  min-width: 44% !important;
}
.w45 {
  width: 45% !important;
  min-width: 45% !important;
}
.w46 {
  width: 46% !important;
  min-width: 46% !important;
}
.w47 {
  width: 47% !important;
  min-width: 47% !important;
}
.w48 {
  width: 48% !important;
  min-width: 48% !important;
}
.w49 {
  width: 49% !important;
  min-width: 49% !important;
}
.w50 {
  width: 50% !important;
  min-width: 50% !important;
}
.w51 {
  width: 51% !important;
  min-width: 51% !important;
}
.w52 {
  width: 52% !important;
  min-width: 52% !important;
}
.w53 {
  width: 53% !important;
  min-width: 53% !important;
}
.w54 {
  width: 54% !important;
  min-width: 54% !important;
}
.w55 {
  width: 55% !important;
  min-width: 55% !important;
}
.w56 {
  width: 56% !important;
  min-width: 56% !important;
}
.w57 {
  width: 57% !important;
  min-width: 57% !important;
}
.w58 {
  width: 58% !important;
  min-width: 58% !important;
}
.w59 {
  width: 59% !important;
  min-width: 59% !important;
}
.w60 {
  width: 60% !important;
  min-width: 60% !important;
}
.w61 {
  width: 61% !important;
  min-width: 61% !important;
}
.w62 {
  width: 62% !important;
  min-width: 62% !important;
}
.w63 {
  width: 63% !important;
  min-width: 63% !important;
}
.w64 {
  width: 64% !important;
  min-width: 64% !important;
}
.w65 {
  width: 65% !important;
  min-width: 65% !important;
}
.w66 {
  width: 66% !important;
  min-width: 66% !important;
}
.w67 {
  width: 67% !important;
  min-width: 67% !important;
}
.w68 {
  width: 68% !important;
  min-width: 68% !important;
}
.w69 {
  width: 69% !important;
  min-width: 69% !important;
}
.w70 {
  width: 70% !important;
  min-width: 70% !important;
}
.w71 {
  width: 71% !important;
  min-width: 71% !important;
}
.w72 {
  width: 72% !important;
  min-width: 72% !important;
}
.w73 {
  width: 73% !important;
  min-width: 73% !important;
}
.w74 {
  width: 74% !important;
  min-width: 74% !important;
}
.w75 {
  width: 75% !important;
  min-width: 75% !important;
}
.w76 {
  width: 76% !important;
  min-width: 76% !important;
}
.w77 {
  width: 77% !important;
  min-width: 77% !important;
}
.w78 {
  width: 78% !important;
  min-width: 78% !important;
}
.w79 {
  width: 79% !important;
  min-width: 79% !important;
}
.w80 {
  width: 80% !important;
  min-width: 80% !important;
}
.w81 {
  width: 81% !important;
  min-width: 81% !important;
}
.w82 {
  width: 82% !important;
  min-width: 82% !important;
}
.w83 {
  width: 83% !important;
  min-width: 83% !important;
}
.w84 {
  width: 84% !important;
  min-width: 84% !important;
}
.w85 {
  width: 85% !important;
  min-width: 85% !important;
}
.w86 {
  width: 86% !important;
  min-width: 86% !important;
}
.w87 {
  width: 87% !important;
  min-width: 87% !important;
}
.w88 {
  width: 88% !important;
  min-width: 88% !important;
}
.w89 {
  width: 89% !important;
  min-width: 89% !important;
}
.w90 {
  width: 90% !important;
  min-width: 90% !important;
}
.w91 {
  width: 91% !important;
  min-width: 91% !important;
}
.w92 {
  width: 92% !important;
  min-width: 92% !important;
}
.w93 {
  width: 93% !important;
  min-width: 93% !important;
}
.w94 {
  width: 94% !important;
  min-width: 94% !important;
}
.w95 {
  width: 95% !important;
  min-width: 95% !important;
}
.w96 {
  width: 96% !important;
  min-width: 96% !important;
}
.w97 {
  width: 97% !important;
  min-width: 97% !important;
}
.w98 {
  width: 98% !important;
  min-width: 98% !important;
}
.w99 {
  width: 99% !important;
  min-width: 99% !important;
}
.w100 {
  width: 100% !important;
  min-width: 100% !important;
}

/* height **************************************************/
.h_auto {
  height: auto !important;
  min-height: auto !important;
}
.h5 {
  height: 5% !important;
  min-height: 5% !important;
}
.h6 {
  height: 6% !important;
  min-height: 6% !important;
}
.h7 {
  height: 7% !important;
  min-height: 7% !important;
}
.h8 {
  height: 8% !important;
  min-height: 8% !important;
}
.h9 {
  height: 9% !important;
  min-height: 9% !important;
}
.h10 {
  height: 10% !important;
  min-height: 10% !important;
}
.h11 {
  height: 11% !important;
  min-height: 11% !important;
}
.h12 {
  height: 12% !important;
  min-height: 12% !important;
}
.h13 {
  height: 13% !important;
  min-height: 13% !important;
}
.h14 {
  height: 14% !important;
  min-height: 14% !important;
}
.h15 {
  height: 15% !important;
  min-height: 15% !important;
}
.h16 {
  height: 16% !important;
  min-height: 16% !important;
}
.h17 {
  height: 17% !important;
  min-height: 17% !important;
}
.h18 {
  height: 18% !important;
  min-height: 18% !important;
}
.h19 {
  height: 19% !important;
  min-height: 19% !important;
}
.h20 {
  height: 20% !important;
  min-height: 20% !important;
}
.h21 {
  height: 21% !important;
  min-height: 21% !important;
}
.h22 {
  height: 22% !important;
  min-height: 22% !important;
}
.h23 {
  height: 23% !important;
  min-height: 23% !important;
}
.h24 {
  height: 24% !important;
  min-height: 24% !important;
}
.h25 {
  height: 25% !important;
  min-height: 25% !important;
}
.h26 {
  height: 26% !important;
  min-height: 26% !important;
}
.h27 {
  height: 27% !important;
  min-height: 27% !important;
}
.h28 {
  height: 28% !important;
  min-height: 28% !important;
}
.h29 {
  height: 29% !important;
  min-height: 29% !important;
}
.h30 {
  height: 30% !important;
  min-height: 30% !important;
}
.h31 {
  height: 31% !important;
  min-height: 31% !important;
}
.h32 {
  height: 32% !important;
  min-height: 32% !important;
}
.h33 {
  height: 33% !important;
  min-height: 33% !important;
}
.h33_3 {
  height: 33.3333333% !important;
  min-height: 33.3333333% !important;
}
.h34 {
  height: 34% !important;
  min-height: 34% !important;
}
.h35 {
  height: 35% !important;
  min-height: 35% !important;
}
.h36 {
  height: 36% !important;
  min-height: 36% !important;
}
.h37 {
  height: 37% !important;
  min-height: 37% !important;
}
.h38 {
  height: 38% !important;
  min-height: 38% !important;
}
.h39 {
  height: 39% !important;
  min-height: 39% !important;
}
.h40 {
  height: 40% !important;
  min-height: 40% !important;
}
.h41 {
  height: 41% !important;
  min-height: 41% !important;
}
.h42 {
  height: 42% !important;
  min-height: 42% !important;
}
.h43 {
  height: 43% !important;
  min-height: 43% !important;
}
.h44 {
  height: 44% !important;
  min-height: 44% !important;
}
.h45 {
  height: 45% !important;
  min-height: 45% !important;
}
.h46 {
  height: 46% !important;
  min-height: 46% !important;
}
.h47 {
  height: 47% !important;
  min-height: 47% !important;
}
.h48 {
  height: 48% !important;
  min-height: 48% !important;
}
.h49 {
  height: 49% !important;
  min-height: 49% !important;
}
.h50 {
  height: 50% !important;
  min-height: 50% !important;
}
.h51 {
  height: 51% !important;
  min-height: 51% !important;
}
.h52 {
  height: 52% !important;
  min-height: 52% !important;
}
.h53 {
  height: 53% !important;
  min-height: 53% !important;
}
.h54 {
  height: 54% !important;
  min-height: 54% !important;
}
.h55 {
  height: 55% !important;
  min-height: 55% !important;
}
.h56 {
  height: 56% !important;
  min-height: 56% !important;
}
.h57 {
  height: 57% !important;
  min-height: 57% !important;
}
.h58 {
  height: 58% !important;
  min-height: 58% !important;
}
.h59 {
  height: 59% !important;
  min-height: 59% !important;
}
.h60 {
  height: 60% !important;
  min-height: 60% !important;
}
.h61 {
  height: 61% !important;
  min-height: 61% !important;
}
.h62 {
  height: 62% !important;
  min-height: 62% !important;
}
.h63 {
  height: 63% !important;
  min-height: 63% !important;
}
.h64 {
  height: 64% !important;
  min-height: 64% !important;
}
.h65 {
  height: 65% !important;
  min-height: 65% !important;
}
.h66 {
  height: 66% !important;
  min-height: 66% !important;
}
.h67 {
  height: 67% !important;
  min-height: 67% !important;
}
.h68 {
  height: 68% !important;
  min-height: 68% !important;
}
.h69 {
  height: 69% !important;
  min-height: 69% !important;
}
.h70 {
  height: 70% !important;
  min-height: 70% !important;
}
.h71 {
  height: 71% !important;
  min-height: 71% !important;
}
.h72 {
  height: 72% !important;
  min-height: 72% !important;
}
.h73 {
  height: 73% !important;
  min-height: 73% !important;
}
.h74 {
  height: 74% !important;
  min-height: 74% !important;
}
.h75 {
  height: 75% !important;
  min-height: 75% !important;
}
.h76 {
  height: 76% !important;
  min-height: 76% !important;
}
.h77 {
  height: 77% !important;
  min-height: 77% !important;
}
.h78 {
  height: 78% !important;
  min-height: 78% !important;
}
.h79 {
  height: 79% !important;
  min-height: 79% !important;
}
.h80 {
  height: 80% !important;
  min-height: 80% !important;
}
.h81 {
  height: 81% !important;
  min-height: 81% !important;
}
.h82 {
  height: 82% !important;
  min-height: 82% !important;
}
.h83 {
  height: 83% !important;
  min-height: 83% !important;
}
.h84 {
  height: 84% !important;
  min-height: 84% !important;
}
.h85 {
  height: 85% !important;
  min-height: 85% !important;
}
.h86 {
  height: 86% !important;
  min-height: 86% !important;
}
.h87 {
  height: 87% !important;
  min-height: 87% !important;
}
.h88 {
  height: 88% !important;
  min-height: 88% !important;
}
.h89 {
  height: 89% !important;
  min-height: 89% !important;
}
.h90 {
  height: 90% !important;
  min-height: 90% !important;
}
.h91 {
  height: 91% !important;
  min-height: 91% !important;
}
.h92 {
  height: 92% !important;
  min-height: 92% !important;
}
.h93 {
  height: 93% !important;
  min-height: 93% !important;
}
.h94 {
  height: 94% !important;
  min-height: 94% !important;
}
.h95 {
  height: 95% !important;
  min-height: 95% !important;
}
.h96 {
  height: 96% !important;
  min-height: 96% !important;
}
.h97 {
  height: 97% !important;
  min-height: 97% !important;
}
.h98 {
  height: 98% !important;
  min-height: 98% !important;
}
.h99 {
  height: 99% !important;
  min-height: 99% !important;
}
.h100 {
  height: 100% !important;
  min-height: 100% !important;
}

/* font style ***************************************************/

/* font-size (18px base, rem) */
.font_12 {
  font-size: 0.6667rem !important;
}   /* caption·label */
.font_13 {
  font-size: 0.7222rem !important;
}
.font_14 {
  font-size: 0.7778rem !important;
}   /* small */
.font_15 {
  font-size: 0.8333rem !important;
}
.font_16 {
  font-size: 0.8889rem !important;
}
.font_18 {
  font-size: 1rem !important;
}   /* body 기본 */
.font_20 {
  font-size: 1.1111rem !important;
}   /* lead */
.font_22 {
  font-size: 1.2222rem !important;
}
.font_24 {
  font-size: 1.3333rem !important;
}
.font_28 {
  font-size: 1.5556rem !important;
}
.font_32 {
  font-size: 1.7778rem !important;
}
.font_36 {
  font-size: 2rem !important;
}
.font_40 {
  font-size: 2.2222rem !important;
}
.font_48 {
  font-size: 2.6667rem !important;
}

/* 의미 단축 (기본 = 1rem = 18px) */
.font_ss {
  font-size: 0.75rem !important;
}
.font_s {
  font-size: 0.875rem !important;
}
.font_m {
  font-size: 1rem !important;
}
.font_l {
  font-size: 1.125rem !important;
}
.font_xl {
  font-size: 1.5rem !important;
}

/* weight */
.font_100 {
  font-weight: 100 !important;
}
.font_200 {
  font-weight: 200 !important;
}
.font_300 {
  font-weight: 300 !important;
}
.font_normal,
.font_400 {
  font-weight: 400 !important;
}
.font_500 {
  font-weight: 500 !important;
}
.font_600 {
  font-weight: 600 !important;
}
.font_bold,
.font_700 {
  font-weight: 700 !important;
}
.font_800 {
  font-weight: 800 !important;
}
.font_900 {
  font-weight: 900 !important;
}

/* line-height (단위 없는 배수 / 숫자/10 = 배수) **************************************************/
.lh0 {
  line-height: 0 !important;
}      /* inline-block 여백 제거용 */
.lh10 {
  line-height: 1 !important;
}
.lh11 {
  line-height: 1.1 !important;
}
.lh12 {
  line-height: 1.2 !important;
}
.lh13 {
  line-height: 1.3 !important;
}
.lh14 {
  line-height: 1.4 !important;
}
.lh15 {
  line-height: 1.5 !important;
}
.lh16 {
  line-height: 1.6 !important;
}
.lh17 {
  line-height: 1.7 !important;
}
.lh18 {
  line-height: 1.8 !important;
}
.lh19 {
  line-height: 1.9 !important;
}
.lh20 {
  line-height: 2 !important;
}

/* text 정렬 **************************************************/
.t_left {
  text-align: left !important;
}
.t_center {
  text-align: center !important;
}
.t_right {
  text-align: right !important;
}
.t_justify {
  text-align: justify !important;
}

/* vertical-align **************************************************/
.v_top {
  vertical-align: top !important;
}
.v_middle {
  vertical-align: middle !important;
}
.v_bottom {
  vertical-align: bottom !important;
}
.v_baseline {
  vertical-align: baseline !important;
}
.v_sub {
  vertical-align: sub !important;
}
.v_super {
  vertical-align: super !important;
}
.v_text-top {
  vertical-align: text-top !important;
}
.v_text-bottom {
  vertical-align: text-bottom !important;
}

/* 객체 정렬 (float) ***************************************************/
.left {
  float: left !important;
}
.right {
  float: right !important;
}
.clear {
  clear: both !important;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* position ***************************************************/
.p_static {
  position: static !important;
}
.p_relative {
  position: relative !important;
}
.p_absolute {
  position: absolute !important;
}
.p_fixed {
  position: fixed !important;
}
.p_sticky {
  position: sticky !important;
}
.p_unset {
  position: unset !important;
}
/* overflow ***************************************************/
.o_auto {
  overflow: auto !important;
}
.ox_auto {
  overflow-x: auto !important;
}
.oy_auto {
  overflow-y: auto !important;
}
.o_hidden {
  overflow: hidden !important;
}
.ox_hidden {
  overflow-x: hidden !important;
}
.oy_hidden {
  overflow-y: hidden !important;
}
.o_scroll {
  overflow: scroll !important;
}
.ox_scroll {
  overflow-x: scroll !important;
}
.oy_scroll {
  overflow-y: scroll !important;
}
.o_visible {
  overflow: visible !important;
}
.ox_visible {
  overflow-x: visible !important;
}
.oy_visible {
  overflow-y: visible !important;
}
.o_revert {
  overflow: revert !important;
}
.ox_revert {
  overflow-x: revert !important;
}
.oy_revert {
  overflow-y: revert !important;
}
.o_unset {
  overflow: unset !important;
}

/* display ***************************************************/
.d_block {
  display: block !important;
}
.d_inline {
  display: inline !important;
}
.d_inline-block {
  display: inline-block !important;
}
.d_flex {
  display: flex !important;
}
.d_inline-flex {
  display: inline-flex !important;
}
.d_grid {
  display: grid !important;
}
.d_inline-grid {
  display: inline-grid !important;
}
.d_none {
  display: none !important;
}

/* flex ***************************************************/
.f_1 {
  flex: 1 !important;
}
.f_auto {
  flex: auto !important;
}
.f_none {
  flex: none !important;
}
.fd_row {
  flex-direction: row !important;
}
.fd_column {
  flex-direction: column !important;
}
.fd_row-reverse {
  flex-direction: row-reverse !important;
}
.fd_column-reverse {
  flex-direction: column-reverse !important;
}
.fw_nowrap {
  flex-wrap: nowrap !important;
}
.fw_wrap {
  flex-wrap: wrap !important;
}
.ai_center {
  align-items: center !important;
}
.ai_flex-start {
  align-items: flex-start !important;
}
.ai_flex-end {
  align-items: flex-end !important;
}
.ai_stretch {
  align-items: stretch !important;
}
.ai_baseline {
  align-items: baseline !important;
}
.ac_center {
  align-content: center !important;
}
.ac_flex-start {
  align-content: flex-start !important;
}
.ac_flex-end {
  align-content: flex-end !important;
}
.ac_space-around {
  align-content: space-around !important;
}
.ac_space-between {
  align-content: space-between !important;
}
.ac_stretch {
  align-content: stretch !important;
}
.jc_center {
  justify-content: center !important;
}
.jc_flex-start {
  justify-content: flex-start !important;
}
.jc_flex-end {
  justify-content: flex-end !important;
}
.jc_space-between {
  justify-content: space-between !important;
}
.jc_space-around {
  justify-content: space-around !important;
}
.jc_space-evenly {
  justify-content: space-evenly !important;
}


/* cursor style ***************************************************/
.c_auto {
  cursor: auto !important;
}
.c_default {
  cursor: default !important;
}
.c_pointer {
  cursor: pointer !important;
}
.c_text {
  cursor: text !important;
}
.c_crosshair {
  cursor: crosshair !important;
}
.c_help {
  cursor: help !important;
}
.c_wait {
  cursor: wait !important;
}
.c_progress {
  cursor: progress !important;
}
.c_not-allowed {
  cursor: not-allowed !important;
}
.c_zoom-in {
  cursor: zoom-in !important;
}
.c_zoom-out {
  cursor: zoom-out !important;
}
/* 크기 조정 및 이동 관련 커서 */
.c_move {
  cursor: move !important;
}
.c_all-scroll {
  cursor: all-scroll !important;
}
.c_col-resize {
  cursor: col-resize !important;
}
.c_row-resize {
  cursor: row-resize !important;
}
.c_ew-resize {
  cursor: ew-resize !important;
}
.c_ns-resize {
  cursor: ns-resize !important;
}
.c_nesw-resize {
  cursor: nesw-resize !important;
}
.c_nwse-resize {
  cursor: nwse-resize !important;
}
.c_n-resize {
  cursor: n-resize !important;
}
.c_s-resize {
  cursor: s-resize !important;
}
.c_e-resize {
  cursor: e-resize !important;
}
.c_w-resize {
  cursor: w-resize !important;
}
.c_ne-resize {
  cursor: ne-resize !important;
}
.c_nw-resize {
  cursor: nw-resize !important;
}
.c_se-resize {
  cursor: se-resize !important;
}
.c_sw-resize {
  cursor: sw-resize !important;
}
/* 드래그 앤 드롭 관련 커서 */
.c_copy {
  cursor: copy !important;
}
.c_alias {
  cursor: alias !important;
}
.c_no-drop {
  cursor: no-drop !important;
}
.c_grab {
  cursor: grab !important;
}
.c_grabbing {
  cursor: grabbing !important;
}

/* 말줄임 style ***************************************************/
.ellipsis {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ellipsis2 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ellipsis3 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ellipsis4 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  line-clamp: 4 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* font color ***************************************************/
/* 의미·상태 */
.font_mainColor {
  color: var(--main-color) !important;
}
.font_mainColorDark {
  color: var(--main-color-dark) !important;
}
.font_mainColorLight {
  color: var(--main-color-light) !important;
}
.font_sub01Color {
  color: var(--sub-01-color) !important;
}
.font_sub02Color {
  color: var(--sub-02-color) !important;
}
.font_sub03Color {
  color: var(--sub-03-color) !important;
}
.font_sub04Color {
  color: var(--sub-04-color) !important;
}
.font_txtColor {
  color: var(--txt-color) !important;
}
.font_subTxtColor {
  color: var(--sub-txt-color) !important;
}
.font_txtDisabledColor {
  color: var(--txt-disabled-color) !important;
}
.font_successColor {
  color: var(--success-color) !important;
}
.font_errorColor {
  color: var(--error-color) !important;
}
.font_warningColor {
  color: var(--warning-color) !important;
}
.font_infoColor {
  color: var(--info-color) !important;
}
.font_inputColor {
  color: var(--input-color) !important;
}
/* 무채색 */
.font_white {
  color: var(--white) !important;
}
.font_black {
  color: var(--black) !important;
}
/* yellow */
.font_yellowLightest {
  color: var(--yellowLightest) !important;
}
.font_yellowLight {
  color: var(--yellowLight) !important;
}
.font_yellow {
  color: var(--yellow) !important;
}
.font_yellowDark {
  color: var(--yellowDark) !important;
}
.font_yellowDarkest {
  color: var(--yellowDarkest) !important;
}
/* orange */
.font_orangeLightest {
  color: var(--orangeLightest) !important;
}
.font_orangeLight {
  color: var(--orangeLight) !important;
}
.font_orange {
  color: var(--orange) !important;
}
.font_orangeDark {
  color: var(--orangeDark) !important;
}
.font_orangeDarkest {
  color: var(--orangeDarkest) !important;
}
/* red */
.font_redLightest {
  color: var(--redLightest) !important;
}
.font_redLight {
  color: var(--redLight) !important;
}
.font_red {
  color: var(--red) !important;
}
.font_redDark {
  color: var(--redDark) !important;
}
.font_redDarkest {
  color: var(--redDarkest) !important;
}
/* green */
.font_greenLightest {
  color: var(--greenLightest) !important;
}
.font_greenLight {
  color: var(--greenLight) !important;
}
.font_green {
  color: var(--green) !important;
}
.font_greenDark {
  color: var(--greenDark) !important;
}
.font_greenDarkest {
  color: var(--greenDarkest) !important;
}
/* blue ~ navy */
.font_blueLightest {
  color: var(--blueLightest) !important;
}
.font_blueLight {
  color: var(--blueLight) !important;
}
.font_blue {
  color: var(--blue) !important;
}
.font_navyLight {
  color: var(--navyLight) !important;
}
.font_navy {
  color: var(--navy) !important;
}
.font_navyDark {
  color: var(--navyDark) !important;
}
.font_navyDarkest {
  color: var(--navyDarkest) !important;
}
/* purple */
.font_purpleLightest {
  color: var(--purpleLightest) !important;
}
.font_purpleLight {
  color: var(--purpleLight) !important;
}
.font_purple {
  color: var(--purple) !important;
}
.font_purpleDark {
  color: var(--purpleDark) !important;
}
.font_purpleDarkest {
  color: var(--purpleDarkest) !important;
}
/* pink */
.font_pinkLightest {
  color: var(--pinkLightest) !important;
}
.font_pinkLight {
  color: var(--pinkLight) !important;
}
.font_pink {
  color: var(--pink) !important;
}
.font_pinkDark {
  color: var(--pinkDark) !important;
}
.font_pinkDarkest {
  color: var(--pinkDarkest) !important;
}
/* skyBlue */
.font_skyBlueLightest {
  color: var(--skyBlueLightest) !important;
}
.font_skyBlueLight {
  color: var(--skyBlueLight) !important;
}
.font_skyBlue {
  color: var(--skyBlue) !important;
}
.font_skyBlueDark {
  color: var(--skyBlueDark) !important;
}
.font_skyBlueDarkest {
  color: var(--skyBlueDarkest) !important;
}
/* brown */
.font_brownLightest {
  color: var(--brownLightest) !important;
}
.font_brownLight {
  color: var(--brownLight) !important;
}
.font_brown {
  color: var(--brown) !important;
}
.font_brownDark {
  color: var(--brownDark) !important;
}
.font_brownDarkest {
  color: var(--brownDarkest) !important;
}
/* blueGray */
.font_blueGrayLightest {
  color: var(--blueGrayLightest) !important;
}
.font_blueGrayLight {
  color: var(--blueGrayLight) !important;
}
.font_blueGrayDark {
  color: var(--blueGrayDark) !important;
}
.font_blueGrayDarkest {
  color: var(--blueGrayDarkest) !important;
}
/* gray */
.font_grayLightest {
  color: var(--grayLightest) !important;
}
.font_grayLight {
  color: var(--grayLight) !important;
}
.font_gray {
  color: var(--gray) !important;
}
.font_grayDark {
  color: var(--grayDark) !important;
}
.font_grayDarkest {
  color: var(--grayDarkest) !important;
}

/* bg color style ***************************************************/
/* 의미·상태 */
.bg_mainColor {
  background: var(--main-color) !important;
}
.bg_mainColorDark {
  background: var(--main-color-dark) !important;
}
.bg_mainColorLight {
  background: var(--main-color-light) !important;
}
.bg_sub01Color {
  background: var(--sub-01-color) !important;
}
.bg_sub02Color {
  background: var(--sub-02-color) !important;
}
.bg_sub03Color {
  background: var(--sub-03-color) !important;
}
.bg_sub04Color {
  background: var(--sub-04-color) !important;
}
.bg_bgSubColor {
  background: var(--bg-sub-color) !important;
}
.bg_successColor {
  background: var(--success-color) !important;
}
.bg_errorColor {
  background: var(--error-color) !important;
}
.bg_warningColor {
  background: var(--warning-color) !important;
}
.bg_infoColor {
  background: var(--info-color) !important;
}
.bg_inputColor {
  background: var(--input-color) !important;
}
/* 무채색 */
.bg_white {
  background: var(--white) !important;
}
.bg_black {
  background: var(--black) !important;
}
/* yellow */
.bg_yellowLightest {
  background: var(--yellowLightest) !important;
}
.bg_yellowLight {
  background: var(--yellowLight) !important;
}
.bg_yellow {
  background: var(--yellow) !important;
}
.bg_yellowDark {
  background: var(--yellowDark) !important;
}
.bg_yellowDarkest {
  background: var(--yellowDarkest) !important;
}
/* orange */
.bg_orangeLightest {
  background: var(--orangeLightest) !important;
}
.bg_orangeLight {
  background: var(--orangeLight) !important;
}
.bg_orange {
  background: var(--orange) !important;
}
.bg_orangeDark {
  background: var(--orangeDark) !important;
}
.bg_orangeDarkest {
  background: var(--orangeDarkest) !important;
}
/* red */
.bg_redLightest {
  background: var(--redLightest) !important;
}
.bg_redLight {
  background: var(--redLight) !important;
}
.bg_red {
  background: var(--red) !important;
}
.bg_redDark {
  background: var(--redDark) !important;
}
.bg_redDarkest {
  background: var(--redDarkest) !important;
}
/* green */
.bg_greenLightest {
  background: var(--greenLightest) !important;
}
.bg_greenLight {
  background: var(--greenLight) !important;
}
.bg_green {
  background: var(--green) !important;
}
.bg_greenDark {
  background: var(--greenDark) !important;
}
.bg_greenDarkest {
  background: var(--greenDarkest) !important;
}
/* blue ~ navy */
.bg_blueLightest {
  background: var(--blueLightest) !important;
}
.bg_blueLight {
  background: var(--blueLight) !important;
}
.bg_blue {
  background: var(--blue) !important;
}
.bg_navyLight {
  background: var(--navyLight) !important;
}
.bg_navy {
  background: var(--navy) !important;
}
.bg_navyDark {
  background: var(--navyDark) !important;
}
.bg_navyDarkest {
  background: var(--navyDarkest) !important;
}
/* purple */
.bg_purpleLightest {
  background: var(--purpleLightest) !important;
}
.bg_purpleLight {
  background: var(--purpleLight) !important;
}
.bg_purple {
  background: var(--purple) !important;
}
.bg_purpleDark {
  background: var(--purpleDark) !important;
}
.bg_purpleDarkest {
  background: var(--purpleDarkest) !important;
}
/* pink */
.bg_pinkLightest {
  background: var(--pinkLightest) !important;
}
.bg_pinkLight {
  background: var(--pinkLight) !important;
}
.bg_pink {
  background: var(--pink) !important;
}
.bg_pinkDark {
  background: var(--pinkDark) !important;
}
.bg_pinkDarkest {
  background: var(--pinkDarkest) !important;
}
/* skyBlue */
.bg_skyBlueLightest {
  background: var(--skyBlueLightest) !important;
}
.bg_skyBlueLight {
  background: var(--skyBlueLight) !important;
}
.bg_skyBlue {
  background: var(--skyBlue) !important;
}
.bg_skyBlueDark {
  background: var(--skyBlueDark) !important;
}
.bg_skyBlueDarkest {
  background: var(--skyBlueDarkest) !important;
}
/* brown */
.bg_brownLightest {
  background: var(--brownLightest) !important;
}
.bg_brownLight {
  background: var(--brownLight) !important;
}
.bg_brown {
  background: var(--brown) !important;
}
.bg_brownDark {
  background: var(--brownDark) !important;
}
.bg_brownDarkest {
  background: var(--brownDarkest) !important;
}
/* blueGray */
.bg_blueGrayLightest {
  background: var(--blueGrayLightest) !important;
}
.bg_blueGrayLight {
  background: var(--blueGrayLight) !important;
}
.bg_blueGrayDark {
  background: var(--blueGrayDark) !important;
}
.bg_blueGrayDarkest {
  background: var(--blueGrayDarkest) !important;
}
/* gray */
.bg_grayLightest {
  background: var(--grayLightest) !important;
}
.bg_grayLight {
  background: var(--grayLight) !important;
}
.bg_gray {
  background: var(--gray) !important;
}
.bg_grayDark {
  background: var(--grayDark) !important;
}
.bg_grayDarkest {
  background: var(--grayDarkest) !important;
}

/* line (구분선) ***************************************************/
.line_top {
  border-top: 1px solid var(--line-color) !important;
}
.line_bottom {
  border-bottom: 1px solid var(--line-color) !important;
}
.line_left {
  border-left: 1px solid var(--line-color) !important;
}
.line_right {
  border-right: 1px solid var(--line-color) !important;
}
.line_top_dark {
  border-top: 1px solid var(--line-color-dark) !important;
}
.line_bottom_dark {
  border-bottom: 1px solid var(--line-color-dark) !important;
}
.line_left_dark {
  border-left: 1px solid var(--line-color-dark) !important;
}
.line_right_dark {
  border-right: 1px solid var(--line-color-dark) !important;
}

/* 체크박스 style ********************************************************************************************************************/
/*
[html]
<div class="checkbox">
	<input type="checkbox" id="a" name="" value="" class="">
	<label for="a">aa</label>
</div>
	
*/
.checkbox {
  position: relative;
  display: inline-flex;
}
.checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin-left: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.checkbox input[type="checkbox"] + label {
  width: 100%;
  cursor: pointer;
  float: left;
  position: relative;
  margin-right: 0.5em;
  display: flex;
  align-items: center;
  padding-left: 0;
  color: #000;
  font-size: .9rem;
}
.checkbox input[type="checkbox"] + label:before {
  background-color: var(--grayLight);
  content: "\e5ca";
  font-family: "Material Symbols Outlined";
  color: var(--gray);
  font-size: 20px;
  text-align: center;
  font-weight: 600;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  float: left;
  margin-right: .3rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.checkbox input[type="checkbox"] + label span {
  width: 100%;
  display: inline-block;
  padding-left: 43px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.3;
  font-weight: 500;
}
.checkbox input[type="checkbox"]:checked + label {
  float: left;
  text-align: left;
  color: var(--black);
}
.checkbox input[type="checkbox"]:checked + label:before {
  background-color: var(--input-color);
  content: "\e5ca";
  font-family: "Material Symbols Outlined";
  color: var(--white);
}
.checkbox.none_txt label {
margin-right: 0;
}

/* select box style ********************************************************************************************************************/
/* select_box 드롭다운 셀랙트박스 
[html]
<div class="select_box">
    <div class="selected">Select an option</div>
    <div class="options">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
        </ul>
    </div>
</div>

[js]
// jQuery 는 페이지 하단에서 로드되므로, 등록은 vanilla(window load) 로 하고 내부만 jQuery 사용
window.addEventListener("load", function () {
    // selected 클릭 → 옵션 토글
    $(".select_box .selected").click(function() {
        $(this).siblings('.options').find('> ul').toggle();
    });
    // 옵션 선택 → 텍스트 반영 후 닫기
    $(".select_box .options ul li").click(function() {
        $(this).closest('.options').siblings('.selected').html($(this).html());
        $(this).closest('ul').hide();
    });
    // 바깥 클릭 시 닫기
    $(document).on('click', function(e) {
        if (!$(e.target).parents().hasClass("select_box")) $(".select_box .options ul").hide();
    });
});
*/
.select_box {
  position: relative;
  min-width: 180px;
  display: inline-block;
}
/* 선택 표시(닫힌 상태) — 테두리 알약형 + 커스텀 화살표 */
.select_box .selected {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 2.2rem 0 0.9rem;
  border: 1px solid #d4d9e0;
  border-radius: 6px;
  background: #fff url("../../images/common/select_arrow.svg") no-repeat right 0.7rem center;
  background-size: 18px;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select_box .selected:hover { border-color: #b8c0cc; }
.select_box .selected:focus,
.select_box .selected:focus-visible {
  outline: none;
  border-color: var(--main-color, #4f7bff);
  box-shadow: 0 0 0 3px rgba(79, 123, 255, 0.15);
}
/* 옵션 목록(열린 상태) — 카드 + 라운드 hover 필 */
.select_box .options ul {
  width: 100%;
  box-sizing: border-box;
  display: none;
  list-style: none;
  margin: 6px 0 0;
  padding: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid #e5e8ec;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(60, 70, 90, 0.14);
}
.select_box .selected span.value,
.select_box .options span.value {
  display: none;
}
.select_box .options ul li {
  padding: 0.55rem 0.7rem;
  border-radius: 5px;
  color: #444;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.select_box .options ul li:hover {
  background: var(--main-color, #4f7bff);
  color: #fff;
}

/* 드롭다운 style ********************************************************************************************************************/
/* 드롭다운 메뉴 공통
[html]
<div class="dropdown_menu_wrap">
	<span class="material-symbols-outlined dropdown_btn">menu</span>
    <div class="dropdown_menu" style="display: block;">
    	<button type="button" class="msg_share mr3 msg_correctio" onclick="modal.msg.open('126');">메세지 수정</button>
	</div>
</div>

*/
.dropdown_menu_wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dropdown_btn {
  color: #ababab;
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dropdown_btn:hover {
  color: #000;
}

/* dropdown_menu_st1 — 말풍선형 팝오버 (아이콘 클릭 시 열림)
[html]
<div class="dropdown_menu_wrap">
	<span class="material-symbols-outlined dropdown_btn">menu</span>
	<div class="dropdown_menu dropdown_menu_st1">
		<button type="button">메세지 수정</button>
		<button type="button">메세지 삭제</button>
	</div>
</div>
[js]
// jQuery 는 페이지 하단에서 로드되므로, 등록은 vanilla(window load) 로 하고 내부만 jQuery 사용
window.addEventListener("load", function () {
	$(".dropdown_menu_wrap").find(".dropdown_menu").hide();          // 처음엔 닫힘
	$(".dropdown_menu_wrap").find(".dropdown_btn").on("click", function (e) {
		e.stopPropagation();
		$(this).next(".dropdown_menu").toggle();
	});
	$(document).on("click", function (e) {                            // 바깥 클릭 시 닫기
		if (!$(e.target).closest(".dropdown_menu_wrap").length) $(".dropdown_menu").hide();
	});
});
*/
.dropdown_menu_st1 {
  min-width: 120px;
  width: max-content;
  padding: 0.4rem;
  position: absolute;
  top: 32px;
  left: 0;
  z-index: 99;
  background-color: var(--white);
  border-radius: 8px;
  border: 1px solid #e0e4ea;
  box-shadow: 0 8px 20px rgba(60, 70, 90, 0.14);
}
/* 말풍선 꼬리 — CSS 삼각형(이미지 불필요). z-index:-1 → 버튼 hover 배경 위로 안 뜨게 */
.dropdown_menu_st1::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 12px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #e0e4ea;
  border-top: 1px solid #e0e4ea;
  transform: rotate(45deg);
  z-index: -1;
}
/* 메뉴 버튼 */
.dropdown_menu_st1 button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0;
  background: none;
  border-radius: 5px;
  color: #444;
  font-size: 0.88rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.dropdown_menu_st1 button:hover {
  background: var(--main-color, #4f7bff);
  color: #fff;
}

/* dropdown_menu_st2 
[html]
<div class="dropdown_menu_wrap">
	<span class="material-symbols-outlined dropdown_btn">menu</span>
	<div class="dropdown_menu dropdown_menu_st2">
		<button type="button" class="d_flex" onclick=""><span class="material-symbols-outlined mr3">delete</span><span>메세지 삭제</span></button>
		<button type="button" class="d_flex" onclick=""><span class="material-symbols-outlined mr3">delete</span><span>메세지 삭제</span></button>
	</div>
</div>
*/
.dropdown_menu_st2 {
  min-width: 180px;
  width: max-content;
  padding: 0.5em 0.3em 0.5em 0.3em;
  position: absolute;
  top: 22px;
  left: 0;
  z-index: 99;
  background-color: var(--white);
  border: 1px solid #e1e1e1;
  box-shadow: 3px 3px 6px rgba(104 112 138 / 30%);
}
.dropdown_menu_st2 > * {
  width: 100%;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  font-size: 0.85rem;
  color: var(--black);
  border-bottom: 1px solid #e5e5e5;
}
.dropdown_menu_st2 > *:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.dropdown_menu_st2 > *:hover {
  font-weight: 600;
}
.dropdown_menu_st2 > *:hover .material-symbols-outlined {
  color: var(--black);
}
.dropdown_menu_st2 .material-symbols-outlined {
  font-size: 18px;
  color: #5f6368;
}

/* side_right_wrap 오른쪽 사이드 메뉴 ********************************************************************************************************************/
/*
[html]
<!-- 여는 버튼 (아이콘 전용 → aria-label 필수, 아이콘은 aria-hidden) -->
<button type="button" class="btn btn_50 bg_grayLight font_black side_btn" aria-label="활동추적 열기">
	<span class="material-symbols-outlined" aria-hidden="true">history</span>
</button>

<div class="right_side_wrap">
	<div class="top_wrap mb10">
		<div class="d_inline-flex">
			<strong class="title_st1 mr10">활동추적</strong>
			<form name="searchForm" id="searchForm" method="post" onsubmit="return false;">
				<select name="searchOrder" title="정렬 선택" aria-label="정렬 선택" onchange="search();">
					<option value="DESC" selected>최신 순</option>
					<option value="ASC">오래된 순</option>
				</select>
			</form>
		</div>
		<button type="button" class="side_close_btn" aria-label="닫기">
			<span class="material-symbols-outlined" aria-hidden="true">close</span>
		</button>
	</div>
	<div class="cont">
		<div class="box_st5 mb5">
			<div class="top_wrap">
				<span class="btn btn_s bg_white font_black btn_hover_none border_r_20 c_default">📨 메세지 수신</span>
				<span class="date">17:34:00</span>
			</div>
			<p class="font_black mt5">기획부서장 홍길동에게 14:15분 <span class="message_type mb4 bg_white font_red">보고 메세지</span> 받음</p>
		</div>
		<div class="box_st5 mb5">
			<div class="top_wrap">
				<span class="btn btn_s bg_white font_black btn_hover_none border_r_20 c_default">📩 메세지 발신</span>
				<span class="date">17:36:00</span>
			</div>
			<p class="font_black mt5">기획부서장 홍길동에게 14:23분 <span class="message_type mb4 bg_white font_red">보고 메세지</span> 보냄</p>
		</div>
		<div class="box_st5 mb5">
			<div class="top_wrap">
				<span class="btn btn_s bg_white font_black btn_hover_none border_r_20 c_default">📝 개인활동일지</span>
				<span class="date">17:40:00</span>
			</div>
			<p class="font_black mt5">기획부서장 홍길동에게 14:23분 개인활동일지 작성</p>
		</div>
	</div>
</div><!-- \\right_side_wrap -->
[js]
// side_right_wrap 오른쪽 사이드 메뉴
// jQuery 는 페이지 하단에서 로드되므로, 등록은 vanilla(window load) 로 하고 내부만 jQuery 사용
window.addEventListener("load", function () {
    $(".side_btn").click(function() {
        $(".right_side_wrap").toggleClass("on");
    });
    $(".side_close_btn").click(function(event) {
        event.stopPropagation();
        $(".right_side_wrap").removeClass("on");
    });
    $(document).click(function(event) {
        if (!$(event.target).closest('.right_side_wrap, .side_btn').length) {
            $(".right_side_wrap").removeClass("on");
        }
    });
    $(".right_side_wrap").click(function(event) {
        event.stopPropagation();
    });
});
*/
.side_btn .material-symbols-outlined {
  font-size: 24px;
}
/* ===== 오른쪽 슬라이드 패널 (right_side_wrap) ===== */
.right_side_wrap {
  width: 400px;
  max-width: 90vw;
  height: 100%;
  position: fixed;
  top: 0;
  right: -420px;                 /* 폭 + 그림자만큼 숨김 */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  padding: 1.2rem 1.2rem 0;
  box-shadow: -10px 0 30px rgba(30, 40, 60, 0.16);
  transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.right_side_wrap.on {
  right: 0;
}
/* 헤더 — 직접 자식 top_wrap 만 (아이템 내부 top_wrap 과 구분) */
.right_side_wrap > .top_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid #eceff3;
}
.right_side_wrap > .top_wrap .d_inline-flex { align-items: center; }
.side_close_btn {
  cursor: pointer;
  color: #8a93a6;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.side_close_btn:hover { background: #f1f3f5; color: #333; }
/* 헤더 정렬 select — 컴팩트 (전역 select 화살표 위에 테두리·크기만 부여) */
.right_side_wrap > .top_wrap form { margin: 0; }
.right_side_wrap > .top_wrap select {
  height: 32px;
  padding: 0 1.8rem 0 0.6rem;
  border: 1px solid #d7dce5;
  border-radius: 6px;
  background-color: #fff;
  background-position: right 0.45rem center;
  background-size: 16px;
  font-size: 0.82rem;
  color: #555;
  cursor: pointer;
}
/* 스크롤 목록 영역 */
.right_side_wrap .cont {
  flex: 1;
  overflow-y: auto;
  margin: 0 -0.4rem;
  padding: 0 0.4rem 1.2rem;
}
/* 목록 아이템 카드 (box_st5) */
.right_side_wrap .box_st5 {
  background: #fff;
  border: 1px solid #eceff3;
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 6px rgba(30, 40, 60, 0.05);
}
.right_side_wrap .box_st5 .top_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.right_side_wrap .box_st5 .date { font-size: 0.75rem; color: #99a0ac; }
.right_side_wrap .box_st5 p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: #444; }
.right_side_wrap .message_type {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  border: 1px solid #f0a0a0;
  color: #d33;
  background: #fff;
}

/* table style ********************************************************************************************************************/
:root {
  /* 테이블 색상 */
  --table1-th-th-bg: #d0e4ff;
  --table1-th-th-border: #c3d8f3;
  --table1-th-bg: #eff5fd;
  --table1-th-border: #d7dfe9;
  --table1-td-bg: #fff;
  --table1-td-border: #e7e7e7;
  --table1-tf-th-bg: #d5dfed;
  --table1-tf-th-border: #c0cad7;
  --table1-tf-td-bg: #edf1f6;
  --table1-tf-td-border: #cbd3dd;

  --table2-th-th-bg: #f4f4f4;
  --table2-th-th-border: #d6d8dc;
  --table2-th-bg: #f4f4f4;
  --table2-th-border: #d6d8dc;
  --table2-td-bg: #fff;
  --table2-td-border: #e7e7e7;
  --table2-tf-th-bg: #e2e2e2;
  --table2-tf-th-border: #c9c9c9;
  --table2-tf-td-bg: #f6f6f6;
  --table2-tf-td-border: #e7e7e7;

  --table3-th-th-bg: #3a3a3a;
  --table3-th-th-border: #4c4c4c;
  --table3-th-bg: #f3f3f3;
  --table3-th-border: #e7e7e7;
  --table3-td-bg: #fff;
  --table3-td-border: #e7e7e7;
  --table3-tf-th-bg: #f1f1f1;
  --table3-tf-th-border: #3a3a3a;
  --table3-tf-td-bg: #f9f9f9;
  --table3-tf-td-border: #3a3a3a;

  --table4-th-th-bg: #4d525e;
  --table4-th-th-border: #313541;
  --table4-th-bg: #6b7180;
  --table4-th-border: #5c606a;
  --table4-td-bg: #fff;
  --table4-td-border: #e7e7e7;
  --table4-tf-th-bg: #595f70;
  --table4-tf-th-border: #323848;
  --table4-tf-td-bg: #e3e4eb;
  --table4-tf-td-border: #c8c8cb;

  --table5-th-th-bg: #fff;
  --table5-th-th-border: #c5c9d6;
  --table5-th-bg: #6b7180;
  --table5-th-border: #5c606a;
  --table5-td-bg: #fff;
  --table5-td-border: #e7e7e7;
  --table5-tf-th-bg: #595f70;
  --table5-tf-th-border: #323848;
  --table5-tf-td-bg: #e3e4eb;
  --table5-tf-td-border: #c8c8cb;
}
/* 
[html]

<table class="table_st1">
    <colgroup>
        <col width="*">
    </colgroup>
    <thead>
    	<tr>
    		<th>11</th>
    		<th>22</th>
    	</tr>
    </thead>
    <tbody>
        <tr>
            <th>11</th>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
    		<th>aa</th>
    		<Td>bb</Td>
    	</tr>
    </tfoot>
</table>
 */
/* table style1 */
.table_st1 {
  overflow: hidden;
  width: 100%;
  border-top: 2px solid #2b3456;
  border-bottom: 1px solid #ddd;
  position: relative;
  overflow: hidden;
  width: calc(100% + 1px);
  margin-left: -1px;
  font-weight: 300;
  line-height: 1.25;
  border-collapse: collapse;
}
.table_st1 th {
  padding: 0.4em 0.4em;
  border: 1px solid var(--table1-th-border);
  color: #000620;
  font-weight: 600;
  font-size: 1rem;
}
.table_st1 td {
  word-break: keep-all;
  padding: 0.4rem 0.4rem;
  background: #fff;
  border: solid #e7e7e7;
  border-width: 1px;
  color: #333;
  position: relative;
  min-height: 3.95rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  transition: background 0.3s;
  -webkit-transition: background 0.3s;
}
.table_st1 tbody tr:first-child th,
.table_st1 tbody tr:first-child td {
  border-top-width: 0;
}
.table_st1 tbody th {
  text-align: left;
  background: var(--table1-th-bg);
}
.table_st1 thead th {
  background: var(--table1-th-th-bg);
  border-color: var(--table1-th-th-border);
  font-weight: 600;
}
.table_st1 tfoot td {
  background: var(--table1-tf-td-bg);
  border-color: var(--table1-tf-td-border);
  color: #000;
}
.table_st1 tfoot th {
  background: var(--table1-tf-th-bg);
  border-color: var(--table1-tf-th-border);
  color: #000620;
}

/* table style2 */
.table_st2 {
  overflow: hidden;
  width: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #ddd;
  position: relative;
  overflow: hidden;
  width: calc(100% + 1px);
  margin-left: -1px;
  font-weight: 300;
  line-height: 1.25;
  border-collapse: collapse;
}
.table_st2 th {
  padding: 0.4em 0.4em;
  border: 1px solid var(--table2-th-border);
  color: #000620;
  font-weight: 500;
  font-size: 1rem;
}
.table_st2 td {
  word-break: keep-all;
  padding: 0.4rem 0.4rem;
  background: #fff;
  border: solid #e7e7e7;
  border-width: 1px;
  color: #333;
  position: relative;
  min-height: 3.95rem;
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  transition: background 0.3s;
  -webkit-transition: background 0.3s;
}
.table_st2 tbody tr:first-child th,
.table_st2 tbody tr:first-child td {
  border-top-width: 0;
}
.table_st2 tbody th {
  text-align: left;
  background: var(--table2-th-bg);
}
.table_st2 thead th {
  background: var(--table2-th-th-bg);
  border-color: var(--table2-th-th-border);
  font-weight: 500;
  color: #000;
  border-top: 1px solid #000;
}
.table_st2 tfoot td {
  background: var(--table2-tf-td-bg);
  border-color: var(--table2-tf-td-border);
  color: #000;
}
.table_st2 tfoot th {
  background: var(--table2-tf-th-bg);
  border-color: var(--table2-tf-th-border);
  color: #000620;
}

/* table style3 */
.table_st3 {
  overflow: hidden;
  width: 100%;
  border-top: 2px solid #000;
  border-bottom: 1px solid #ddd;
  position: relative;
  overflow: hidden;
  width: calc(100% + 1px);
  margin-left: -1px;
  font-weight: 300;
  line-height: 1.25;
  border-collapse: collapse;
}
.table_st3 th {
  padding: 0.4em 0.4em;
  border: 1px solid var(--table3-th-border);
  color: #000620;
  font-weight: 600;
  font-size: 1rem;
  border-width: 1px 0;
}
.table_st3 td {
  word-break: keep-all;
  padding: 0.4rem 0.4rem;
  background: #fff;
  border: solid #e7e7e7;
  border-width: 1px;
  color: #333;
  position: relative;
  min-height: 3.95rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  transition: background 0.3s;
  -webkit-transition: background 0.3s;
  border-width: 1px 0;
}
.table_st3 tbody tr:first-child th,
.table_st3 tbody tr:first-child td {
  border-top-width: 0;
}
.table_st3 tbody th {
  text-align: left;
  background: var(--table3-th-bg);
  font-weight: 500;
}
.table_st3 thead th {
  background: var(--table3-th-th-bg);
  border-color: var(--table3-th-th-border);
  font-weight: 600;
  color: #fff;
  border-width: 0 1px;
}
.table_st3 tfoot td {
  background: var(--table3-tf-td-bg);
  border-color: var(--table3-tf-td-border);
  color: #000;
}
.table_st3 tfoot th {
  background: var(--table3-tf-th-bg);
  border-color: var(--table3-tf-th-border);
  color: #000620;
}

/* table style4 */
.table_st4 {
  width: 100%;
  position: relative;
  overflow: auto;
  border-top: 1px solid #313541;
  width: calc(100% + 1px);
  margin-left: -1px;
  font-weight: 300;
  line-height: 1.25;
  border-collapse: collapse;
}
.table_st4 th {
  padding: 0.4em 0.4em;
  border: 1px solid var(--table4-th-border);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}
.table_st4 td {
  word-break: keep-all;
  padding: 0.4rem 0.4rem;
  background: #fff;
  border: solid #e7e7e7;
  border-width: 1px;
  color: #333;
  position: relative;
  min-height: 3.95rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  transition: background 0.3s;
  -webkit-transition: background 0.3s;
}
.table_st4 tbody tr:first-child th,
.table_st4 tbody tr:first-child td {
  border-top-width: 0;
}
.table_st4 tbody th {
  background: var(--table4-th-bg);
  border: 1px solid var(--table4-th-border);
}
.table_st4 thead th {
  background: var(--table4-th-th-bg);
  font-weight: 500;
  border: 1px solid var(--table4-th-th-border);
}
.table_st4 tfoot td {
  background: var(--table4-tf-td-bg);
  border-color: var(--table4-tf-td-border);
  color: #000;
}
.table_st4 tfoot th {
  background: var(--table4-tf-th-bg);
  border-color: var(--table4-tf-th-border);
  color: #fff;
}

/* table style5 */
.table_st5 {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #e5e8ec;
  border-bottom: 1px solid #e5e8ec;
  line-height: 1.4;
  font-weight: 400;
}
.table_st5 th,
.table_st5 td {
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #eef1f5;
}
/* 열 헤더 — 흰 배경 + 하단 라인 (미니멀) */
.table_st5 thead th {
  background: #fff;
  color: #222;
  font-weight: 700;
  border-bottom: 2px solid #d4d9e0;
}
/* 행 라벨(th) — 아주 옅은 회색 */
.table_st5 tbody th {
  background: #fafbfc;
  color: #3a4250;
  font-weight: 600;
}
.table_st5 tbody td { background: #fff; color: #333; }
/* hover 행 강조 */
.table_st5 tbody tr:hover th,
.table_st5 tbody tr:hover td { background: #f6f8fa; }
/* 마지막 행 구분선 제거 */
.table_st5 tbody tr:last-child th,
.table_st5 tbody tr:last-child td { border-bottom: 0; }
/* tfoot — 요약 강조 (상단 라인) */
.table_st5 tfoot th,
.table_st5 tfoot td {
  background: #fafbfc;
  color: #222;
  font-weight: 700;
  border-top: 2px solid #d4d9e0;
  border-bottom: 0;
}

/* 반응형 테이블 클래스 추가: table_responsive

@media screen and (max-width: 1600px) {
  .table_responsive th,
  .table_responsive td {
    padding: 0.35rem 0.3rem;
    font-size: 0.95rem;
  }
}

@media screen and (max-width: 1200px) {
  .table_responsive {
    font-size: 0.9rem;
  }

  .table_responsive th,
  .table_responsive td {
    padding: 0.3rem 0.25rem;
    font-size: 0.9rem;
  }

  .table_responsive colgroup col:nth-child(1) {
    width: 8%;
  }
  .table_responsive colgroup col:nth-child(3),
  .table_responsive colgroup col:nth-child(4),
  .table_responsive colgroup col:nth-child(5),
  .table_responsive colgroup col:nth-child(6) {
    width: 13%;
  }
}

@media screen and (max-width: 900px) {
  .table_responsive {
    border-top: 2px solid #000;
  }

  .table_responsive thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .table_responsive,
  .table_responsive tbody,
  .table_responsive tr,
  .table_responsive td {
    display: block;
    width: 100%;
  }
  .table_responsive td,
  .table_responsive th {
    text-align: center !important;
    height: auto !important;
  }

  .table_responsive tbody tr {
    margin-bottom: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
  }

  .table_responsive tbody td {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0.5rem;
    align-items: center;
    text-align: center !important;
    padding: 0.75rem 0.5rem;
    border-width: 0 0 1px 0;
    border-color: #f0f0f0;
    text-align: left;
    min-height: auto;
  }

  .table_responsive tbody td:first-child {
    border-top-width: 0;
  }

  .table_responsive tbody td:last-child {
    border-bottom-width: 0;
  }

  .table_responsive tbody td::before {
    content: attr(data-cell-header);
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
  }

  .table_responsive tbody td.table_td_left a {
    display: block;
    word-break: break-all;
    line-height: 1.5;
  }

  .table_responsive tbody td .btn {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
  }
}

@media screen and (max-width: 600px) {
  .table_responsive tbody td {
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
  }

  .table_responsive tbody td::before {
    font-size: 0.85rem;
  }

  .table_responsive tbody td .btn {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
  }
}*/

@media (max-width: 900px) {
  .table_responsive thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .table_responsive colgroup {
    display: none;
  }

  .table_responsive tbody tr {
    display: block;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ccc;
  }

  .table_responsive tbody tr + tr {
    margin-top: 0;
  }

  .table_responsive tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 0.0625rem solid #f0f0f0;
    text-align: right;
    width: 100% !important;
  }

  .table_responsive tbody td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .table_responsive tbody td:first-child {
    padding-top: 0;
  }

  .table_responsive tbody td::before {
    content: attr(data-title);
    font-weight: 600;
    color: #333;
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-right: 1rem;
    text-align: left;
  }

  .table_responsive tbody td.subject {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .table_responsive tbody td.subject a {
    margin-top: 0.25rem;
    font-weight: 500;
  }

  .table_responsive tbody td.num {
    display: none;
  }

  .table_responsive tbody td.go {
    justify-content: center;
  }

  .table_responsive tbody td.go::before {
    display: none;
  }

  .table_responsive tbody td.go .btn {
    width: 100%;
    text-align: center;
  }
}

/* table style 공통 */
/* 
[html]

<table class="table_st1 table_td_center">
 */
.table_td_center td,
td.table_td_center {
  text-align: center !important;
}
.table_td_left td,
td.table_td_left {
  text-align: left !important;
}
.table_td_right td,
td.table_td_right {
  text-align: right !important;
}
.table_th_left th,
th.table_th_left {
  text-align: left !important;
}
.table_th_right th,
th.table_th_right {
  text-align: right !important;
}
.table_th_center th,
th.table_th_center {
  text-align: center !important;
}

/* 테이블 사이즈 */
/* 
[html]

<table class="table_st1 table_s">
 */
.table_ss > thead > tr > th,
.table_ss > thead > tr > td,
.table_ss > tbody > tr > th,
.table_ss > tbody > tr > td,
.table_ss > tfoot > tr > th,
.table_ss > tfoot > tr > td {
  height: 26px;
  font-size: 0.85rem;
  padding: 0.1em 0.4em;
}
.table_s > thead > tr > th,
.table_s > thead > tr > td,
.table_s > tbody > tr > th,
.table_s > tbody > tr > td,
.table_s > tfoot > tr > th,
.table_s > tfoot > tr > td {
  height: 30px;
  font-size: 0.9rem;
  padding: 0.2em 0.4em;
}
.table_m > thead > tr > th,
.table_m > thead > tr > td,
.table_m > tbody > tr > th,
.table_m > tbody > tr > td,
.table_m > tfoot > tr > th,
.table_m > tfoot > tr > td {
  height: 36px;
  font-size: 0.95rem;
  padding: 0.2em 0.4em;
}
.table_l > thead > tr > th,
.table_l > thead > tr > td,
.table_l > tbody > tr > th,
.table_l > tbody > tr > td,
.table_l > tfoot > tr > th,
.table_l > tfoot > tr > td {
  height: 46px;
  font-size: 1rem;
  padding: 0.2em 0.4em;
}
.table_xl > thead > tr > th,
.table_xl > thead > tr > td,
.table_xl > tbody > tr > th,
.table_xl > tbody > tr > td,
.table_xl > tfoot > tr > th,
.table_xl > tfoot > tr > td {
  height: 56px;
  font-size: 1.05rem;
  padding: 0.2em 0.4em;
}


/* 테이블 thead th 고정
[html]

<table class="table_st1 table_thead_fix" style="max-height: 500px"> <!-- max-height로 사이즈 조절 -->
 */
.table_thead_fix {
  display: block;
  max-height: 200px; /* Adjust the height as needed */
  overflow-y: auto;
  width: 100%; /* Ensure the table takes the full width */
}
.table_thead_fix thead tr th,
.table_thead_fix thead tr,
.table_thead_fix thead {
  position: sticky;
  top: 0;
  z-index: 9;
}

/* scroll_table 
[html]
<p class="scroll_txt"><span class="material-symbols-outlined">exclamation</span>좌우로 스크롤하여 전체 내용을 확인하세요.</p>
<div class="scroll_table">
	<table>
	</table>
</div>

*/
.scroll_txt {
  display: none;
}
@media screen and (max-width: 1500px) {
}
@media screen and (max-width: 1200px) {
  /* scroll_table */
  .scroll_txt {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.5em;
  }
  .scroll_txt .material-symbols-outlined {
    font-size: 22px;
    background-color: #e5e6ec;
    width: 26px;
    height: 26px;
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    margin-right: 0.3em;
  }
  .scroll_table {
  	overflow-x: auto;
  }
  .scroll_table table{
  	min-width: 1200px !important;
  }
}
@media screen and (max-width: 900px) {
}

/* button style **************************************************/

/* btn 기본 btn 부모로 div.btn_wrap 기본으로 넣어주기 */
.btn_wrap {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.btn_wrap > .btn {
  cursor: pointer !important;
}
.btn {
  font-size: 0.9rem;
  width: auto;
  min-width: 50px;
  height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5f697e;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* input 옆이나 함께 쓰는 버튼에 넣으면 input height(50px)에 맞춰짐 — 기본 input(height:50px)과 동일 */
.input_btn {
  height: 50px;
  padding: 1rem !important;
  font-size: 0.9rem !important;
}
/* input 사이즈 클래스(input_sm/m/l/xl)와 height 를 1:1 로 맞춘 input_btn 크기 변형.
   예) <input class="input_sm"> 옆에는 <button class="btn input_btn input_btn_sm"> */
.input_btn.input_btn_sm { height: 36px; padding: 0 0.8rem !important; font-size: 0.85rem !important; }  /* = input_sm */
.input_btn.input_btn_m  { height: 40px; }                                                              /* = input_m */
.input_btn.input_btn_l  { height: 50px; font-size: 1rem !important; }                                  /* = input_l (기본 input 과 동일) */
.input_btn.input_btn_xl { height: 54px; font-size: 1.1rem !important; }                                /* = input_xl */

/* .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(104, 112, 138, 0.3);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(104, 112, 138, 0.2);
} */
/* 키보드 포커스 링 (접근성) — 마우스 클릭엔 안 뜨고 Tab 이동 시에만 */
.btn:focus-visible {
  outline: 2px solid var(--main-color-dark);
  outline-offset: 2px;
}

.btn > .material-symbols-outlined {
  font-size: 18px;               /* 기본(크기 미지정 .btn) */
  margin: 0 0.1em;
  transition: transform 0.2s ease;
}
/* 버튼 크기(.btn_xs~.btn_xl)에 맞춰 아이콘 크기도 함께 조절 */
.btn_xs > .material-symbols-outlined { font-size: 16px; }
.btn_s  > .material-symbols-outlined { font-size: 17px; }
.btn_m  > .material-symbols-outlined { font-size: 19px; }
.btn_l  > .material-symbols-outlined { font-size: 22px; }
.btn_xl > .material-symbols-outlined { font-size: 24px; }

.btn:hover > .material-symbols-outlined {
  transform: scale(1.1);
}
/* btn 정렬 */
.btn_right {
  display: flex;
  justify-content: flex-end;
}
.btn_left {
  display: flex;
  justify-content: flex-start;
} 

/* btn hover none */
.btn_hover_none {
  cursor: default;
}
.btn_hover_none:hover {
  transform: none !important;
  text-decoration: none;
  box-shadow: none;
}

/* hover underline */
.hover_underline:hover {
  text-decoration: underline;
}

/* btn_sparkle 버튼 깜빡거리는 효과 */
.btn_sparkle {
  animation: sparkle 0.6s infinite;
}
@keyframes sparkle {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}

/* btn disabled
<button class="btn btn_l btn_dark" disabled>버튼 비활성화</button>
*/
.btn:disabled,
.btn[disabled] {
  background-color: var(--grayLight) !important;
  color: var(--gray) !important;
  cursor: not-allowed !important;
  border-color: var(--gray) !important;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  transform: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  background-color: var(--grayLight) !important;
  color: var(--gray) !important;
  cursor: not-allowed !important;
  border-color: var(--gray) !important;
}
/* btn_text 비활성: hover 밑줄 제거 */
.btn_text:disabled,
.btn_text[disabled] {
  color: var(--gray) !important;
  cursor: not-allowed !important;
}
.btn_text:disabled:hover,
.btn_text[disabled]:hover {
  text-decoration: none !important;
}
.btn_text:disabled .material-symbols-outlined,
.btn_text[disabled] .material-symbols-outlined {
  color: var(--gray) !important;
}

/* btn 그림자 */
.btn_shadow {
  box-shadow: 2px 2px 4px rgba(104, 112, 138, 0.1);
}

/* btn_motion — hover 시 버튼이 살짝 커졌다 작아지는 펄스 (버튼 자체에 적용, 내부 span 불필요) */
.btn_motion:hover {
  animation: btn_motion 1s ease-in-out infinite;
}

@keyframes btn_motion {
  0%,
  100% {
    transform: translateY(-2px) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.05);
  }
}

/* btn_arrow — 오른쪽 화살표(::after)가 hover 시 슬라이드. CTA("다음/더보기")에 적합, span 불필요 */
.btn_arrow::after {
  content: "→";
  margin-left: 8px;
  transition: transform 0.2s ease;
}
.btn_arrow:hover::after {
  transform: translateX(5px);
}

/* btn_shine — hover 시 빛이 좌→우로 스쳐 지나감 (fill 버튼에 어울림) */
.btn_shine {
  position: relative;
  overflow: hidden;
}
.btn_shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn_shine:hover::before {
  animation: btn_shine 0.8s;
}
@keyframes btn_shine {
  to {
    left: 125%;
  }
}

/* btn_float — 계속 살짝 떠오르는 애니메이션 (주목 CTA) */
.btn_float {
  animation: btn_float 2.2s ease-in-out infinite;
}
@keyframes btn_float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* btn text
[html]
<button class="btn_text">텍스트 버튼<span class="material-symbols-outlined ml3">link</span></button>
*/
.btn_text {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn_text .material-symbols-outlined {
  font-size: 20px;
}
/* hover — .btn_icon 과 동일한 연한 회색 배경 + 진한 글자 (.btn 위에 얹어도 평평하게: 뜸·그림자 제거) */
.btn_text:hover {
  background: #f1f3f5;
  color: #333;
  transform: none;
  box-shadow: none;
}
.btn_text:hover .material-symbols-outlined {
  color: #333;
  transform: none;
}

/* btn_icon — 아이콘 전용 원형 버튼(텍스트 없이 아이콘만). 단독 사용: <button class="btn_icon"><span class="material-symbols-outlined">edit</span></button> */
.btn_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50% !important;   /* .btn 의 3px !important 보다 우선 */
  background: transparent;
  color: #5f697e;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn_icon .material-symbols-outlined { font-size: 20px; }
.btn_icon:hover { background: #f1f3f5; color: #333; transform: none; box-shadow: none; }
.btn_icon:hover .material-symbols-outlined { color: #333; transform: none; }
/* 크기 변형 */
.btn_icon.btn_icon_s { width: 28px; height: 28px; }
.btn_icon.btn_icon_s .material-symbols-outlined { font-size: 17px; }
.btn_icon.btn_icon_l { width: 44px; height: 44px; }
.btn_icon.btn_icon_l .material-symbols-outlined { font-size: 24px; }

/* btn 사이즈 */
.btn_xs {
  min-width: 50px !important;
  padding: 0 0.3rem !important;
  height: 30px !important;
  font-size: 0.75rem !important;
}
.btn_s {
  min-width: 70px !important;
  padding: 0 0.3rem !important;
  height: 30px !important;
  font-size: 0.8rem !important;
}
.btn_m {
  padding: 0 1rem !important;
  height: 40px !important;
  font-size: 0.95rem !important;
  min-width: 90px;
}
.btn_l {
  padding: 0 1rem !important;
  height: 54px !important;
  font-size: 1.1rem !important;
  min-width: 160px;
}
.btn_xl {
  padding: 0 1rem !important;
  height: 65px !important;
  font-size: 1.1rem !important;
  min-width: 190px;
}
/* 반응형 */
@media (max-width: 900px) {
  .btn_xl {
    min-width: auto !important;
    padding: 0 1.5rem !important;
    height: 54px !important;
  }
}

/* 전체폭 버튼 — 폼 제출 등 */
.btn_full { width: 100% !important; }

.btn_30 {
  padding: 0 !important;
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  min-width: 30px !important;
}
.btn_40 {
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  min-width: 40px !important;
}
.btn_50 {
  padding: 0 !important;
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  min-width: 50px !important;
}
.btn_60 {
  padding: 0 !important;
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  min-width: 60px !important;
}
.btn_70 {
  padding: 0 !important;
  width: 70px !important;
  height: 70px !important;
  max-width: 70px !important;
  min-width: 70px !important;
}
.btn_80 {
  padding: 0 !important;
  width: 80px !important;
  height: 80px !important;
  max-width: 80px !important;
  min-width: 80px !important;
}
.btn_90 {
  padding: 0 !important;
  width: 90px !important;
  height: 90px !important;
  max-width: 90px !important;
  min-width: 90px !important;
}
.btn_100 {
  padding: 0 !important;
  width: 100px !important;
  height: 100px !important;
  max-width: 100px !important;
  min-width: 100px !important;
}

/* btn_flex_1 버튼 flex:1 btn_wrap이랑 같이 써주기
[html]

<div class="btn_wrap btn_flex_1">
	<button></button>
</div>
 */
.btn_flex_1 > * {
  flex: 1;
}

/* btn 색상 변형 (hover 포함) ***************************************************/
/* 사용: <button class="btn btn_l btn_primary">확인</button> */
/* ========== 채움(fill) 버튼 ==========
   btn_primary  기본 (글쓰기·저장 등 주요 액션)  — #4f7bff
   btn_cancel   취소                              — blueGrayDark #8d9bae
   btn_dark     다크톤 (삭제 등 보조 액션)        — grayDarkest  #1a1a1a
   btn_main     메인컬러                          — main-color   #6fc2ff
   btn_sub1~4   서브 컬러                         — sub-01~04    */
.btn_primary {
  background: #4f7bff !important;
  color: var(--white) !important;
  border: 1px solid #4f7bff !important;
}
.btn_primary:hover {
  background: #4369d9 !important;
  border-color: #4369d9 !important;
}
.btn_dark {
  background: var(--grayDarkest) !important;
  color: var(--white) !important;
  border: 1px solid var(--grayDarkest) !important;
}
.btn_dark:hover {
  background: var(--black) !important;
  border-color: var(--black) !important;
}
.btn_main {
  background: var(--main-color) !important;
  color: var(--white) !important;
  border: 1px solid var(--main-color) !important;
}
.btn_main:hover {
  background: var(--main-color-dark) !important;
  border-color: var(--main-color-dark) !important;
}

/* ========== 라인(outline) 버튼 — 위 채움색을 테두리/글자색으로, hover 시 채워짐 ========== */
.btn_line {
  background: transparent !important;
  color: #4f7bff !important;
  border: 1px solid #4f7bff !important;
}
.btn_line:hover {
  background: #4f7bff !important;
  color: var(--white) !important;
}
.btn_line_dark {
  background: transparent !important;
  color: var(--grayDarkest) !important;
  border: 1px solid var(--grayDarkest) !important;
}
.btn_line_dark:hover {
  background: var(--grayDarkest) !important;
  color: var(--white) !important;
}
.btn_line_main {
  background: transparent !important;
  color: var(--main-color) !important;
  border: 1px solid var(--main-color) !important;
}
.btn_line_main:hover {
  background: var(--main-color) !important;
  color: var(--white) !important;
}
/* 취소 — 뮤트 블루그레이(#8d9bae = --blueGrayDark) */
.btn_cancel {
  background: var(--blueGrayDark) !important;
  color: var(--white) !important;
  border: 1px solid var(--blueGrayDark) !important;
}
.btn_cancel:hover {
  background: #7a8899 !important;
  border-color: #7a8899 !important;
}
.btn_line_cancel {
  background: transparent !important;
  color: var(--blueGrayDark) !important;
  border: 1px solid var(--blueGrayDark) !important;
}
.btn_line_cancel:hover {
  background: var(--blueGrayDark) !important;
  color: var(--white) !important;
}
/* ========== 서브 컬러 버튼 (--sub-01~04) ========== */
.btn_sub1 { background: var(--sub-01-color) !important; color: var(--white) !important; border: 1px solid var(--sub-01-color) !important; }   /* #df0012 */
.btn_sub1:hover { background: #be000f !important; border-color: #be000f !important; }
.btn_sub2 { background: var(--sub-02-color) !important; color: var(--white) !important; border: 1px solid var(--sub-02-color) !important; }   /* #ff9b28 */
.btn_sub2:hover { background: #d98422 !important; border-color: #d98422 !important; }
.btn_sub3 { background: var(--sub-03-color) !important; color: var(--white) !important; border: 1px solid var(--sub-03-color) !important; }   /* #6a4ff0 */
.btn_sub3:hover { background: #573ad6 !important; border-color: #573ad6 !important; }
.btn_sub4 { background: var(--sub-04-color) !important; color: var(--white) !important; border: 1px solid var(--sub-04-color) !important; }   /* #5b7cff */
.btn_sub4:hover { background: #4d69d9 !important; border-color: #4d69d9 !important; }
/* 서브 라인 */
.btn_line_sub1 { background: transparent !important; color: var(--sub-01-color) !important; border: 1px solid var(--sub-01-color) !important; }
.btn_line_sub1:hover { background: var(--sub-01-color) !important; color: var(--white) !important; }
.btn_line_sub2 { background: transparent !important; color: var(--sub-02-color) !important; border: 1px solid var(--sub-02-color) !important; }
.btn_line_sub2:hover { background: var(--sub-02-color) !important; color: var(--white) !important; }
.btn_line_sub3 { background: transparent !important; color: var(--sub-03-color) !important; border: 1px solid var(--sub-03-color) !important; }
.btn_line_sub3:hover { background: var(--sub-03-color) !important; color: var(--white) !important; }
.btn_line_sub4 { background: transparent !important; color: var(--sub-04-color) !important; border: 1px solid var(--sub-04-color) !important; }
.btn_line_sub4:hover { background: var(--sub-04-color) !important; color: var(--white) !important; }
/* 메인 다크 / 라이트 */
.btn_main_dark { background: var(--main-color-dark) !important; color: var(--white) !important; border: 1px solid var(--main-color-dark) !important; }   /* #1a94ff */
.btn_main_dark:hover { background: #167ed9 !important; border-color: #167ed9 !important; }
.btn_main_light { background: var(--main-color-light) !important; color: var(--grayDarkest) !important; border: 1px solid var(--main-color-light) !important; }   /* #a8b7d8 (밝아서 글자 다크) */
.btn_main_light:hover { background: #93a3c8 !important; border-color: #93a3c8 !important; }
.btn_line_main_dark { background: transparent !important; color: var(--main-color-dark) !important; border: 1px solid var(--main-color-dark) !important; }
.btn_line_main_dark:hover { background: var(--main-color-dark) !important; color: var(--white) !important; }
.btn_line_main_light { background: transparent !important; color: var(--main-color-light) !important; border: 1px solid var(--main-color-light) !important; }
.btn_line_main_light:hover { background: var(--main-color-light) !important; color: var(--grayDarkest) !important; }

/* tab style ********************************************************************************************************************/
/* 
사용 시 .nav_tabs(기본 스타일) 기본으로 넣어주고 
.nav_tabsSt1 .nav_tabsSt2 등 넣어주면 스타일 적용됨 

[html코드]
<ul class="nav_tabs">
	<li><a href="javascript:void(0);" id="tab_a" class="tab active">a</a></li>
	<li><a href="javascript:void(0);" id="tab_b" class="tab">b</a></li>
	<li><a href="javascript:void(0);" id="tab_c" class="tab">c</a></li>
</ul>
<div class="tab_content active" id="section_a">a
</div><!-- \\tab_a -->
<div class="tab_content" id="section_b">b
</div><!-- \\tab_b -->
<div class="tab_content" id="section_c">c
</div><!-- \\tab_c -->

[js 코드]
$(".tab").click(function(){
  $iid = $(this).attr("id").split("_").pop();
  currentTab = $iid;

  $(".tab_content").hide();
  $("#section_"+$iid).show();

  $(".tab").attr("class","tab");
  $(this).attr("class","tab active");
});
*/

/* tab 레이아웃 */
.top_wrap .navTabsCloseBtn {
  font-size: 10px !important;
  cursor: pointer;
  margin-left: 6px;
  font-style: normal;
  line-height: 20px;
  font-family: inherit;
  position: relative;
  top: 9px;
  color: #a49fba;
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0;
  float: right;
  line-height: 1;
  text-shadow: 0 1px 0 #fff;
  background: #d8d5e7;
  border-radius: 50%;
  padding: 2px;
  font-weight: 600;
  position: absolute;
  right: 2px;
  z-index: 1;
}
.top_wrap .navTabsCloseBtn:hover {
  color: red !important;
  font-weight: 700;
}
.nav_tabs {
  --tab-h: 60px; /* 탭 높이 — 모든 변형 공통. nav_tabs_sm 이 40px 로 축소 */
  width: 100%;
  border: 0;
  overflow: hidden;
  height: auto;
  top: 0;
  position: relative;
}
/* 작은 버전 — .nav_tabs 에 함께 부여: <ul class="nav_tabs nav_tabsSt3 nav_tabs_sm"> */
.nav_tabs.nav_tabs_sm {
  --tab-h: 40px;
}
.nav_tabs > li {
  float: left;
  display: inline-block;
}
.nav_tabs > li > a {
  color: #b8b5c7;
  font-size: 13px;
  display: inline-block;
  margin: 0;
  margin-right: 5px;
  position: relative;
}
.tab_content {
  display: none;
}
.tab_content.active {
  display: block;
}

/* nav_tabsSt1 */
.nav_tabsSt1:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #e8e8f6;
  position: absolute;
  bottom: 0;
  left: 0;
}
.nav_tabsSt1 > li:first-child a {
  padding: 0 22px !important;
}
.nav_tabsSt1 > li > a {
  box-sizing: border-box;
  color: #b8b5c7;
  padding: 0 22px;
  height: var(--tab-h);
  line-height: var(--tab-h);
  border-left: 1px solid #e2e2eb;
  border-top: 1px solid #e2e2eb;
  border-right: 1px solid #e2e2eb;
  border-radius: 10px 10px 0 0;
  background: #fafafe;
  font-size: 1rem;
  font-weight: 500;
}
.nav_tabsSt1 > li > a:before {
  content: "";
  border-bottom: var(--tab-h) solid #e8e8f6;
  border-right: 14px solid transparent;
  display: inline-block;
  position: absolute;
  right: -13px;
  bottom: -1px;
}
.nav_tabsSt1 > li > a:after {
  content: "";
  border-bottom: var(--tab-h) solid #fafafe;
  border-right: 15px solid transparent;
  display: inline-block;
  position: absolute;
  right: -13px;
  bottom: -3px;
}
.nav_tabsSt1 li a.active,
.nav_tabsSt1 li a.on {
  color: var(--blue);
  font-weight: 600;
  background: #fff;
  box-shadow: 5px 3px 10px rgb(125 127 174 / 29%);
  z-index: 1;
}
.nav_tabsSt1 li a.active .navTabsCloseBtn,
.nav_tabsSt1 li a.on .navTabsCloseBtn {
  color: #666666;
}
.nav_tabsSt1 li a.active:after,
.nav_tabsSt1 li a.on:after {
  border-bottom-color: #fff;
}
.nav_tabsSt1 li a .navTabsCloseBtn:hover {
  background: #ff9800;
  color: #fff !important;
}

/* nav_tabsSt2 */
.nav_tabsSt2 {
  height: auto;
}
.nav_tabsSt2:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #e8e8f6;
  position: absolute;
  bottom: 0;
  left: 0;
}
.nav_tabsSt2 > li > a {
  display: inline-flex;
  align-items: center;
  height: var(--tab-h);
  padding: 0 15px;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  background: transparent;
  font-size: 1rem;
}
.nav_tabsSt2 li a.active,
.nav_tabsSt2 li a.on {
  background: transparent;
  color: var(--black);
  font-weight: 500;
}
.nav_tabsSt2 > li > a:before,
.nav_tabsSt2 li a.active:after,
.nav_tabsSt2 li a.on:after,
.nav_tabsSt2 > li > a:after {
  display: none;
}
.nav_tabsSt2 li a.active:after,
.nav_tabsSt2 li a.on:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: var(--black);
  display: block;
  bottom: 0;
  left: 0;
  border: 0;
  right: auto;
}

/* nav_tabsSt3 — 알약형 세그먼트 (라이트 트랙 + 활성 알약) */
.nav_tabsSt3 {
  width: auto;
  max-width: 100%;
  height: auto;
  display: inline-flex;
  flex-wrap: wrap;   /* 좁으면 알약이 다음 줄로 (모바일 넘침 방지) */
  gap: 4px;
  padding: 6px;
  background: #eef1f7;
  border-radius: 999px;
  overflow: visible;
}
.nav_tabsSt3 > li {
  float: none;
  height: auto;
}
.nav_tabsSt3 li a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--tab-h) - 12px); /* 트랙 패딩(6px×2) 제외 → 컨트롤 전체 높이 = --tab-h */
  padding: 0 20px;
  margin: 0;
  border-radius: 999px;
  background: transparent;
  color: #5f697e;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.nav_tabsSt3 li a:hover {
  color: var(--black);
}
.nav_tabsSt3 li a.active,
.nav_tabsSt3 li a.on {
  background: var(--black);
  color: var(--white);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
/* 가운데 정렬 — St3(알약/세그먼트)에 함께 부여: <ul class="nav_tabs nav_tabsSt3 nav_tabs_center"> */
.nav_tabsSt3.nav_tabs_center {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.5rem;
}
/* 모바일 — 알약 여백·글자 축소(한 줄에 더 많이, 넘치면 flex-wrap 줄바꿈), 가운데 변형은 전체폭 중앙 */
@media screen and (max-width: 900px) {
  .nav_tabsSt3 li a { padding: 0 14px; font-size: 0.88rem; }
  .nav_tabsSt3.nav_tabs_center { width: 100%; justify-content: center; }
}

/* nav_tabsSt4 — 균등 분할(개수만큼 자동 균등, 폭 부족하면 자동 줄바꿈 — auto-fit). 라인: 컨테이너 위·왼쪽 + 셀 오른쪽·아래 */
.nav_tabsSt4 {
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid #e0e3eb;
  border-left: 1px solid #e0e3eb;
}
.nav_tabsSt4 li {
  min-width: 0;
}
.nav_tabsSt4 li a {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: var(--tab-h);
  margin: 0;
  padding: 10px 12px;
  text-align: center;
  overflow-wrap: anywhere;   /* 긴 텍스트 줄바꿈(잘림 방지) */
  background-color: #f4f5f9;
  border-right: 1px solid #e0e3eb;
  border-bottom: 1px solid #e0e3eb;
  font-size: 1rem;
  color: var(--black);
}
.nav_tabsSt4 li a.active,
.nav_tabsSt4 li a.on {
  background-color: var(--white);
  color: var(--black);
  border-bottom-color: #fff;
}

/* nav_tabsSt5 — 균등 분할(개수만큼 자동 균등, 폭 부족하면 자동 줄바꿈 — auto-fit). 라인: 컨테이너 위·왼쪽 + 셀 오른쪽·아래 */
.nav_tabsSt5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  height: auto;
  border-top: 1px solid var(--line-color);
  border-left: 1px solid var(--line-color);
}
.nav_tabsSt5 li {
  min-width: 0;
}
.nav_tabsSt5 li a {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: var(--tab-h);
  margin: 0;
  padding: 10px 12px;
  text-align: center;
  overflow-wrap: anywhere;   /* 긴 텍스트 줄바꿈(잘림 방지) */
  background-color: #fff;
  border-right: 1px solid var(--line-color);
  border-bottom: 1px solid var(--line-color);
  font-size: 1rem;
  color: var(--black);
  transition: all 0.3s ease;
}

.nav_tabsSt5 li a:hover {
  background-color: var(--grayDark);
  color: var(--white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.nav_tabsSt5 li a.active,
.nav_tabsSt5 li a.on {
  background-color: var(--grayDark);
  color: var(--white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 1200px 이하 */
@media (max-width: 1200px) {
  .nav_tabsSt5 li a {
    font-size: 1rem;
  }
}

/* 900px 이하 */
@media (max-width: 900px) {
  .nav_tabsSt5 li a {
    font-size: 0.95rem;
    padding: 10px;
  }
}

/* search_wrap style ********************************************************************************************************************/
/*
.search_wrap를 공통으로 무조건 써주고, 
search_st1 search_st2 등 스타일 넣어주기

[html]
<div class="search_wrap search_st1">
    <input type="text" class="" id="" placeholder="캠페인을 검색해 주세요." name="keyword">
    <button type="submit" class="ic"><span class="material-symbols-outlined">search</span><span class="hide">검색</span></button>
</div><!-- \\search_wrap -->
*/
.search_wrap {
  display: flex;
  align-items: center;
  position: relative; /* .autocomplete_list 의 절대배치 기준 */
}
/* 검색폼 정렬 — .search_wrap 에 함께 부여 (search_st1~st5 공통).
   · 알약형(search_st4 등, width:fit-content) 은 좌우 margin 으로 이동
   · 패널형(search_st5, 세로 컬럼) 은 search_row 를 전체 폭으로 늘려 내부 정렬 */
.search_wrap.search_center { justify-content: center; margin-left: auto;  margin-right: auto; }
.search_wrap.search_left   { justify-content: flex-start; margin-left: 0;   margin-right: auto; }
.search_wrap.search_right  { justify-content: flex-end;   margin-left: auto; margin-right: 0; }
.search_wrap.search_center.search_st5,
.search_wrap.search_left.search_st5,
.search_wrap.search_right.search_st5 { align-items: stretch; }
.search_wrap.search_center.search_st5 .search_row { justify-content: center; }
.search_wrap.search_left.search_st5   .search_row { justify-content: flex-start; }
.search_wrap.search_right.search_st5  .search_row { justify-content: flex-end; }
.search_wrap select {
  appearance: auto;
  min-width: 130px;
  max-width: 130px;
}
.search_wrap input[type="text"] {
  min-width: 200px;
  max-width: 200px;
}
.search_wrap input[type="text"],
.search_wrap input[type="password"],
.search_wrap input[type="tel"],
.search_wrap input[type="number"],
.search_wrap input[type="price"],
.search_wrap input[type="search"],
.search_wrap input[type="email"],
.search_wrap input[type="time"],
.search_wrap input[type="month"],
.search_wrap input[type="date"],
.search_wrap input[type="url"],
.search_wrap input[type="image"],
.search_wrap input[type="button"],
.search_wrap input[type="submit"],
.search_wrap input[type="reset"],
.search_wrap input[type="file"],
.search_wrap input[type="price"],
.search_wrap input[type="button"],
.search_wrap input[type="submit"],
.search_wrap input[type="reset"] {
  /*padding: 0;*/
  width: auto;
}
/* input 모바일 일때 width 100% */
@media screen and (max-width: 900px) {
  .search_wrap {
    flex-direction: column;
  }
  .search_wrap input[type="text"],
  .search_wrap input[type="password"],
  .search_wrap input[type="tel"],
  .search_wrap input[type="number"],
  .search_wrap input[type="price"],
  .search_wrap input[type="search"],
  .search_wrap input[type="email"],
  .search_wrap input[type="time"],
  .search_wrap input[type="month"],
  .search_wrap input[type="date"],
  .search_wrap input[type="url"],
  .search_wrap input[type="image"],
  .search_wrap input[type="button"],
  .search_wrap input[type="submit"],
  .search_wrap input[type="reset"],
  .search_wrap input[type="file"],
  .search_wrap input[type="price"],
  .search_wrap input[type="button"],
  .search_wrap input[type="submit"],
  .search_wrap input[type="reset"],
  .search_wrap select {
    margin: 0 0 0.2em 0 !important;
  }

  .search_wrap.search_st1,
  .search_wrap.search_st2 {
    flex-direction: row;
  }
}
/* search_st1 

[html]
<div class="search_wrap search_st1">
    <input type="text" class="" id="" placeholder="캠페인을 검색해 주세요." name="keyword">
    <button type="submit" class="ic"><span class="material-symbols-outlined">search</span><span class="hide">검색</span></button>
</div><!-- \\search_wrap -->
*/
.search_st1 {
  height: 50px;
  border-bottom: 2px solid var(--black);
}
.search_st1 input[type="text"],
.search_st1 input[type="password"],
.search_st1 input[type="tel"],
.search_st1 input[type="number"],
.search_st1 input[type="price"],
.search_st1 input[type="search"],
.search_st1 input[type="email"],
.search_st1 input[type="time"],
.search_st1 input[type="month"],
.search_st1 input[type="date"],
.search_st1 input[type="url"],
.search_st1 input[type="image"],
.search_st1 input[type="button"],
.search_st1 input[type="submit"],
.search_st1 input[type="reset"],
.search_st1 input[type="file"],
.search_st1 input[type="price"],
.search_st1 input[type="button"],
.search_st1 input[type="submit"],
.search_st1 input[type="reset"],
.search_st1 select {
  border: 0 !important;
  background: transparent;
  height: 100%;
  padding: 0 4px;
  width: calc(100% - 40px) !important;
  min-width: auto !important;
  max-width: none !important;
}
.search_st1 button {
  width: 40px;
  height: 100%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search_st1 .ic {
  color: var(--black);
  font-size: 20px;
}
/* search_st2 

[html]
<div class="search_wrap search_st2 mb5">
    <input type="text" class=" id=" "="" placeholder="캠페인을 검색해 주세요." name="keyword">
    <button type="submit" class="ic"><span class="material-symbols-outlined">search</span><span class="hide">검색</span></button>
</div>
*/
.search_st2 {
  border-radius: 4px;
  border: 1px solid #000;
  height: 50px;
  overflow: hidden;
}
.search_st2 button {
  width: 44px;
  height: 100%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search_st2 .ic { font-size: 20px; }
.search_st2 input[type="text"],
.search_st2 input[type="password"],
.search_st2 input[type="tel"],
.search_st2 input[type="number"],
.search_st2 input[type="price"],
.search_st2 input[type="search"],
.search_st2 input[type="email"],
.search_st2 input[type="time"],
.search_st2 input[type="month"],
.search_st2 input[type="date"],
.search_st2 input[type="url"],
.search_st2 input[type="image"],
.search_st2 input[type="button"],
.search_st2 input[type="submit"],
.search_st2 input[type="reset"],
.search_st2 input[type="file"],
.search_st2 input[type="price"],
.search_st2 input[type="button"],
.search_st2 input[type="submit"],
.search_st2 input[type="reset"] {
  border: 0 !important;
  height: 100%;
  padding: 0 12px;
  width: calc(100% - 44px) !important;
  min-width: auto !important;
  max-width: none !important;
}
.search_st2 input[type="text"]:focus {
  border: 0 !important;
  box-shadow: none;
}
/* search_st3 
[html]
<div class="search_wrap search_st3 mb10 box_st2 bg_skyBlueLight"><!-- bg 빼고 싶으면 box_st2 bg_skyBlueLight 클래스 빼주기  -->
	<select name="searchBbscate_tcd" id="searchBbscate_tcd" onchange="" valign="bottom" align="absmiddle" title="분류"></select>
	<select name="searchCondition" id="searchCondition" title="검색조건선택">
		<option value="title">제목</option>
		<option value="context">내용</option>
	</select>
	<input id="searchKeyword" type="text" value="" name="searchKeyword" title="검색어를 입력해주세요" placeholder="검색어를 입력해주세요">
	<button onclick="" class="bg_blue btn font_white"><span class="material-symbols-outlined">search</span>검색</button>
</div>
*/
.search_st3 input[type="text"],
.search_st3 input[type="password"],
.search_st3 input[type="tel"],
.search_st3 input[type="number"],
.search_st3 input[type="price"],
.search_st3 input[type="search"],
.search_st3 input[type="email"],
.search_st3 input[type="time"],
.search_st3 input[type="month"],
.search_st3 input[type="date"],
.search_st3 input[type="url"],
.search_st3 input[type="image"],
.search_st3 input[type="button"],
.search_st3 input[type="submit"],
.search_st3 input[type="reset"],
.search_st3 input[type="file"],
.search_st3 input[type="price"],
.search_st3 input[type="button"],
.search_st3 input[type="submit"],
.search_st3 input[type="reset"],
.search_st3 select {
  margin: 0 0.15em;
  font-size: 0.95rem;
  height: 38px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 10px;
}
.search_st3 .btn {
  height: 38px;
}
@media screen and (max-width: 900px) {
  .search_wrap.search_st3 select,
  .search_wrap.search_st3 input[type="text"] {
    width: 100%;
    max-width: none;   /* 모바일 세로 배치 시 오른쪽 안 비게 꽉 채움 */
  }
  .search_wrap.search_st3 .btn {
    width: 100%;
  }
}

/* search_st4 
[html]
<div class="search_wrap search_st4 mb25">
    <select name="searchCondition" id="searchCondition" title="검색조건선택">
        <option value="">장비명</option>
    </select>
    <input id="searchKeyword" type="text" value="" name="searchKeyword" title="검색어를 입력해주세요" placeholder="검색어를 입력해주세요">
    <button onclick="" class="bg_navy btn font_white"><span class="material-symbols-outlined">search</span></button>
</div><!-- search_wrap -->
*/
.search_st4 {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  gap: 0.25rem;
  background: #fff;
  border: 1px solid #d7dce5;
  border-radius: 999px;
  padding: 0.35rem 0.35rem 0.35rem 1.1rem;
  box-shadow: 0 8px 20px rgba(30, 45, 90, 0.08);
}
.search_st4 select,
.search_st4 input[type="text"] {
  border: 0 !important;
  background: transparent;
  height: 44px;
  font-size: 1rem;
  outline: none;
  margin: 0;
}
.search_st4 select { min-width: 110px; max-width: 150px; padding: 0 0.25rem; }
.search_st4 input[type="text"] { min-width: 240px; max-width: none; padding: 0 0.75rem; border-left: 1px solid #e5e9f0 !important; }
.search_st4 .btn { height: 50px; width: 50px; flex-shrink: 0; border-radius: 50% !important; padding: 0; } /* .btn 의 border-radius:3px !important 보다 우선 */
@media screen and (max-width: 900px) {
  .search_st4 { flex-direction: row; width: 100%; padding: 0.3rem 0.3rem 0.3rem 0.9rem; }
  .search_st4 select, .search_st4 input[type="text"] { margin: 0 !important; }
  /* ⚠ 전역 @900 규칙 `input[type=text], select { width:99% !important }` 이 pill(한 줄) 을 깨므로 !important 로 무력화.
     셀렉트는 축소, 입력이 남은 폭을 flex 로 채워 select+input+button 한 줄 유지. */
  .search_st4 select { width: auto !important; min-width: 84px !important; max-width: 130px !important; }
  .search_st4 input[type="text"] { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
}

/* search_st5 
[html]
<div class="search_wrap search_st5 mb25">
    <div class="search_row">
        <div class="search_item">
            <label class="search_label">접수기간</label>
            <input type="date" id="startDate" name="startDate" title="시작일">
            <span class="date_separator">~</span>
            <input type="date" id="endDate" name="endDate" title="종료일">
        </div>
        <div class="search_item">
            <span class="search_label">접수상태</span>
            <div class="radio_group">
                <span class="radi_box">
                    <input type="radio" name="status" id="statusAll" class="" value="all" checked="checked">
                    <label for="statusAll" class="">전체</label>
                </span>
                <span class="radi_box">
                    <input type="radio" name="status" id="statusIng" class="" value="ing">
                    <label for="statusIng" class="">접수중</label>
                </span>
                <span class="radi_box">
                    <input type="radio" name="status" id="statusEnd" class="" value="end">
                    <label for="statusEnd" class="">접수마감</label>
                </span>
            </div>
        </div>
    </div>
    <div class="search_row">
        <div class="search_item">
            <label for="searchCondition" class="search_label">키워드</label>
            <select name="searchCondition" id="searchCondition" title="검색조건선택">
                <option value="">전체</option>
            </select>
            <input id="searchKeyword" type="text" value="" name="searchKeyword" title="검색어를 입력해주세요" placeholder="검색어를 입력해주세요">
            <button type="button" onclick="" class="bg_navy btn font_white"><span class="material-symbols-outlined">search</span></button>
        </div>
    </div>
</div><!-- search_wrap -->

*/
.search_st5 {
  padding: 1.2rem 1rem;
  background-color: #f1f4fa;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.search_st5 .search_row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.search_st5 .search_item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.search_st5 .search_label {
  font-size: 0.9rem;
  color: #333;
  white-space: nowrap;
}

.search_st5 .date_separator {
  color: #666;
}

.search_st5 input[type="date"] {
  min-width: 160px;
  height: 50px;
  padding: 0 10px;
  border: 1px solid #ddd;
  font-size: 1rem;
}

.search_st5 .radio_group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.search_st5 .radio_group label {
  margin-right: 15px;
  font-size: 1rem;
  cursor: pointer;
}

.search_st5 select {
  min-width: 120px;
  height: 50px;
  padding: 0 10px;
  border: 1px solid #ddd;
  font-size: 1rem;
}

.search_st5 input[type="text"] {
  min-width: 300px;
  height: 50px;
  padding: 0 15px;
  border: 1px solid #ddd;
  font-size: 1rem;
}

.search_st5 .btn {
  height: 50px;
  width: 50px;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 반응형 */
@media screen and (max-width: 900px) {
  .search_st5 .search_row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .search_st5 .search_item {
    flex-wrap: wrap;
  }

  .search_st5 input[type="date"],
  .search_st5 input[type="text"],
  .search_st5 select {
    min-width: auto;
    flex: 1;
  }

  .search_st5 .btn {
    width: 100%;
  }
}

/* ── 검색 필드 공통 크기 (search_st5 기준: 높이 50px / 폰트 1rem) — st1~st4 통일 ── */
.search_wrap select,
.search_wrap input[type="text"] {
  height: 50px;
  font-size: 1rem;
}
.search_wrap .btn {
  height: 50px;
}
/* search_sm — 작은 버전 모디파이어. .search_wrap 에 함께 부여:
   <div class="search_wrap search_st4 search_sm"> (어느 변형이든 적용) */
.search_wrap.search_sm select,
.search_wrap.search_sm input[type="text"] {
  height: 38px;
  font-size: 0.9rem;
}
.search_wrap.search_sm .btn {
  height: 38px;
}
.search_wrap.search_sm.search_st1,
.search_wrap.search_sm.search_st2 {
  height: 38px;
}
.search_wrap.search_sm.search_st4 .btn {
  width: 38px;
}

/* 공통 .w100 (width:100%) 을 .search_wrap 에 함께 부여하면 검색창이 컨테이너 100% 폭.
   input 의 고정폭(min/max 200px)만 별도 해제 */
.search_wrap.w100 input[type="text"] { flex: 1; min-width: 0 !important; max-width: none !important; }

/* 최근검색어, 자동검색 autocomplete_list
[html]
<div class="search_wrap search_st2 border_r_0">
    <input type="text" class="search_autocomplete" id="" autocomplete="off" placeholder="메세지 통합검색" name="keyword">
    <button type="submit" class="ic"><span class="material-symbols-outlined">search</span><span class="hide">검색</span></button>
	<div class="autocomplete_list">
		<span class="tit mb5">최근 검색어</span>
		<div class="recent_list mb10">
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
		</div>
		<span class="tit mb5">연관 검색어</span>
		<ul class="relation_list">
			<li><a href="javascript:void(0);" class="ellipsis txt">위기상황</a><span class="material-symbols-outlined delete_ic">close</span></li>
			<li><a href="javascript:void(0);" class="ellipsis txt">위기상황</a><span class="material-symbols-outlined delete_ic">close</span></li>
			<li><a href="javascript:void(0);" class="ellipsis txt">위기상황</a><span class="material-symbols-outlined delete_ic">close</span></li>
		</ul>
	</div>
</div>

[js]
//검색창 자동검색
$('.autocomplete_list').hide();
$('.search_autocomplete').on('click', function () {
    $('.autocomplete_list').show();
});
$(document).on('click', function (e) {
    if (!$(e.target).closest('.search_wrap').length) {
        $('.autocomplete_list').hide();
    }
});
$('.search_wrap > .ic').on('click', function () {
    $('.autocomplete_list').hide();
});
$('.autocomplete_list').on('click', '.delete_ic', function () {
    $(this).closest('.recent_ic, li').remove();
});
*/

.autocomplete_list {
  padding: 0.75em;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 100;
  max-height: 320px;
  overflow-y: auto;
  background-color: var(--white);
  border: 1px solid #e8e8e8;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 16px rgba(104 112 138 / 25%);
}
.autocomplete_list .tit {
  display: block;
  margin: 0 0 0.35em;
  font-weight: 600;
  color: var(--gray);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.autocomplete_list .relation_list .delete_ic {
  cursor: pointer;
  color: var(--gray);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0.4em;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.autocomplete_list .relation_list > li {
  position: relative;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.autocomplete_list .relation_list > li .txt {
  display: block;
  font-size: 0.9rem;
  padding: 0.45em 1.8em 0.45em 0.5em;
  color: var(--black);
}
.autocomplete_list .relation_list > li:hover {
  background-color: var(--grayLightest);
}
.autocomplete_list .relation_list > li:hover a {
  font-weight: 500;
}
.autocomplete_list .relation_list > li:hover .delete_ic {
  opacity: 1;
  color: var(--black);
}

.autocomplete_list .recent_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35em;
  padding-bottom: 0.75em;
  margin-bottom: 0.75em;
  border-bottom: 1px solid #eee;
}
/* btn_ss 가 정의돼 있지 않아 .btn 기본 크기로 커지는 문제 보정 — 태그형 칩 */
.autocomplete_list .recent_list .recent_ic {
  cursor: pointer;
  margin: 0;
  min-width: auto !important;
  height: auto !important;
  padding: 0.28em 0.5em 0.28em 0.72em !important;
  font-size: 0.82rem !important;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.15s ease;
}
.autocomplete_list .recent_list .recent_ic:hover {
  background-color: #dbe0ea !important;
}
.autocomplete_list .recent_list .delete_ic {
  cursor: pointer;
  font-size: 14px;
  color: var(--grayDark);
  opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.autocomplete_list .recent_list .recent_ic:hover .delete_ic {
  opacity: 1;
  color: var(--black);
}

/* 첨부파일(.post_files / .attach_list) 스타일은 게시판 전용이라 각 테마의 bbs/bbs-basic.css 로 이동함 */

/* paging style ********************************************************************************************************************/
/* 페이징 스타일 board paging style 공통 
[html]
<ul class="paging_wrap mt10">
	<li class="first"><button title="첫 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_left</span></button></li>
	<li class="prev"><button title="이전 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_left</span></button></li>
	<li class="active"><button readonly="readonly" onclick="">1</button></li>
	<li><button readonly="readonly" onclick="">2</button></li>
	<li><button readonly="readonly" onclick="">3</button></li>
	<li class="next"><button title="다음 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_right</span></button></li>
	<li class="last"><button title="끝 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_right</span></button></li>
</ul><!-- \\paging_wrap -->
*/
.paging_wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;          /* 페이지 많을 때(특히 모바일) 한 줄 넘치면 줄바꿈 — 가로 넘침 방지 */
  align-items: center;
  justify-content: center;
  row-gap: 4px;
}
.paging_wrap li button,
.paging_wrap li a {
  width: 30px;
  height: 30px;
  margin: 0 0.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.paging_wrap li.first button .material-symbols-outlined,
.paging_wrap li.prev button .material-symbols-outlined,
.paging_wrap li.next button .material-symbols-outlined,
.paging_wrap li.last button .material-symbols-outlined,
.paging_wrap li.first a .material-symbols-outlined,
.paging_wrap li.prev a .material-symbols-outlined,
.paging_wrap li.next a .material-symbols-outlined,
.paging_wrap li.last a .material-symbols-outlined {
  font-size: 22px;   /* 페이징 화살표 아이콘 크기 — 세 변형(st1/2/3) 공통 (.paging_wrap 베이스) */
  color: #888;
}
.paging_wrap li.first:hover button .material-symbols-outlined,
.paging_wrap li.prev:hover button .material-symbols-outlined,
.paging_wrap li.next:hover button .material-symbols-outlined,
.paging_wrap li.last:hover button .material-symbols-outlined,
.paging_wrap li.first:hover a .material-symbols-outlined,
.paging_wrap li.prev:hover a .material-symbols-outlined,
.paging_wrap li.next:hover a .material-symbols-outlined,
.paging_wrap li.last:hover a .material-symbols-outlined {
  color: #000;
}
.paging_wrap li button:hover,
.paging_wrap li a:hover {
  font-weight: 500;
}

/* paging_st1 
[html]
<ul class="paging_wrap paging_st1 mt10">
	<li class="first"><button title="첫 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_left</span></button></li>
	<li class="prev"><button title="이전 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_left</span></button></li>
	<li class="active"><button readonly="readonly" onclick="">1</button></li>
	<li><button readonly="readonly" onclick="">2</button></li>
	<li><button readonly="readonly" onclick="">3</button></li>
	<li class="next"><button title="다음 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_right</span></button></li>
	<li class="last"><button title="끝 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_right</span></button></li>
</ul><!-- \\paging_wrap -->
*/
.paging_st1 li button,
.paging_st1 li a {
  width: 54px;
  height: 54px;
}
.paging_st1 li.active button,
.paging_st1 li.active a {
  background-color: #333;
  color: #fff;
  border-radius: 80px;
}
@media screen and (max-width: 900px) {
  .paging_st1 li button,
  .paging_st1 li a {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
}

/* paging_st2 
[html]
<ul class="paging_wrap paging_st2 mt10">
	<li class="first"><button title="첫 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_left</span></button></li>
	<li class="prev"><button title="이전 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_left</span></button></li>
	<li class="active"><button readonly="readonly" onclick="">1</button></li>
	<li><button readonly="readonly" onclick="">2</button></li>
	<li><button readonly="readonly" onclick="">3</button></li>
	<li class="next"><button title="다음 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_right</span></button></li>
	<li class="last"><button title="끝 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_right</span></button></li>
</ul><!-- \\paging_wrap -->
*/
.paging_st2 li:last-child {
  border-right: 1px solid #eee;
}
.paging_st2 li button,
.paging_st2 li a {
  width: 54px;
  height: 54px;
  margin: 0;
  background-color: #fff;
  border: 1px solid #eee;
  border-width: 1px 0 1px 1px;
}
.paging_st2 li.active button,
.paging_st2 li.active a {
  background-color: #333;
  color: #fff;
}
@media screen and (max-width: 900px) {
  .paging_st2 li button,
  .paging_st2 li a {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
}

/* paging_st3
[html]
<ul class="paging_wrap paging_st3 mt10">
	<li class="first"><button title="첫 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_left</span></button></li>
	<li class="prev"><button title="이전 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_left</span></button></li>
	<li class="active"><button readonly="readonly" onclick="">1</button></li>
	<li><button readonly="readonly" onclick="">2</button></li>
	<li><button readonly="readonly" onclick="">3</button></li>
	<li class="next"><button title="다음 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_right</span></button></li>
	<li class="last"><button title="끝 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_right</span></button></li>
</ul><!-- \\paging_wrap -->
*/

.paging_st3 li button,
.paging_st3 li a {
  width: 54px;
  height: 54px;
  margin: 0;
  background-color: #fff;
}

.paging_st3 li.first button,
.paging_st3 li.first a,
.paging_st3 li.prev button,
.paging_st3 li.prev a,
.paging_st3 li.next button,
.paging_st3 li.next a,
.paging_st3 li.last button,
.paging_st3 li.last a {
  width: 54px;
  height: 54px;
  margin: 0;
  background-color: #fff;
  border: 1px solid #eee;
}
.paging_st3 li.prev button,
.paging_st3 li.prev a,
.paging_st3 li.last button,
.paging_st3 li.last a {
  border-left: 0;
}

.paging_st3 li.active button,
.paging_st3 li.active a {
  color: var(--black);
  font-weight: 600;
}

@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 900px) {
  .paging_st3 li button,
  .paging_st3 li a {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
  .paging_st3 li.first button,
  .paging_st3 li.first a,
  .paging_st3 li.prev button,
  .paging_st3 li.prev a,
  .paging_st3 li.next button,
  .paging_st3 li.next a,
  .paging_st3 li.last button,
  .paging_st3 li.last a {
    width: 34px;
    height: 34px;
  }
}

/* paging_sm — 작은 버전 모디파이어. paging_wrap 에 함께 부여하면 버튼·아이콘이 작아짐.
   변형(st1/st2/st3) 무관: <ul class="paging_wrap paging_st3 paging_sm"> */
.paging_sm li button,
.paging_sm li a {
  width: 38px;
  height: 38px;
}
.paging_sm .material-symbols-outlined {
  font-size: 16px;
}
@media screen and (max-width: 900px) {
  .paging_sm li button,
  .paging_sm li a {
    width: 30px;
    height: 30px;
  }
  .paging_sm .material-symbols-outlined {
    font-size: 14px;
  }
}

/* none_image style 

<div class="none_image">
    <span class="material-symbols-outlined">image</span>
</div>
********************************************************************************************************************/
.none_image {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  background-color: #e2e7ec;
}
.none_image .icon {
  font-size: 2.2em;
  color: #c0c4c8;
}

/* none_data style 

<div class="none_data">
  <span class="material-symbols-outlined">inbox</span>
  등록된 데이터가 없습니다.
</div>
********************************************************************************************************************/
.none_data {
  padding: 2em 1em;
  background: #fff;
  color: #000;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.5em;
}
.none_data .material-symbols-outlined {
  font-size: 2rem;
  margin-bottom: 0.2em;
}

/* 분류 배지 (.cate) — 목록·상세 공용 (갤러리/공지/카드 스킨 공통) ***********************************************/
.cate {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  color: #4b6cff;
  background: #eef1ff;
  padding: 0.12rem 0.5rem;
  border-radius: 4px;
}

/* TOP 버튼 ********************************************************************************************************************/
/* 우하단 고정, 전 페이지 공통(main.js initTopButton 가 스크롤 200px↑ 시 표시 + 클릭 시 상단 이동).
   기본(다크 배경): 투명 + 흰 라인/화살표. 흰 배경 구간에서는 .on-light(검정 라인/화살표) — main.js 가 토글. */
#topBtn {position: fixed;bottom: 1.875rem;right: 1.875rem;width: 3.5rem;height: 3.5rem;display: flex;justify-content: center;align-items: center;border-radius: 50%;color: #fff;background: transparent;border: 1px solid rgba(255,255,255,.75);box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.12);z-index: 999;overflow: hidden;transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;}
/* 흰 배경 구간(서브페이지 / 메인 포트폴리오 화이트) — 채움 없이 라인·화살표만 검정 */
#topBtn.on-light {color: #222;border-color: #222;}
#topBtn .material-symbols-outlined {font-size: 1.625rem;line-height: 1;transition: transform .35s cubic-bezier(.34,1.56,.64,1);}
/* hover — 다크/라이트 공통: 메인컬러 채움 + 흰 화살표 */
#topBtn:hover {background: var(--main-color);border-color: var(--main-color);color: #fff;transform: translateY(-0.25rem);box-shadow: 0 0.875rem 1.875rem rgba(59,110,245,.45);}
#topBtn:hover .material-symbols-outlined {transform: translateY(-0.25rem);}
@media screen and (max-width: 1200px) {
  #topBtn {right: 1.25rem;bottom: 1.25rem;}
}

/* box-shadow * ********************************************************************************************************************/
.shadow_5 {
  box-shadow: 3px 3px 5px rgba(0 0 0 / 13%) !important;
}
.shadow_10 {
  box-shadow: 3px 3px 10px rgba(0 0 0 / 13%) !important;
}

/* border-radius * ********************************************************************************************************************/
.border_r_0 {
  border-radius: 0 !important;
}
.border_r_2 {
  border-radius: 2px !important;
}
.border_r_3 {
  border-radius: 3px !important;
}
.border_r_4 {
  border-radius: 4px !important;
}
.border_r_5 {
  border-radius: 5px !important;
}
.border_r_6 {
  border-radius: 6px !important;
}
.border_r_7 {
  border-radius: 7px !important;
}
.border_r_8 {
  border-radius: 8px !important;
}
.border_r_9 {
  border-radius: 9px !important;
}
.border_r_10 {
  border-radius: 10px !important;
}
.border_r_11 {
  border-radius: 11px !important;
}
.border_r_12 {
  border-radius: 12px !important;
}
.border_r_13 {
  border-radius: 13px !important;
}
.border_r_14 {
  border-radius: 14px !important;
}
.border_r_15 {
  border-radius: 15px !important;
}
.border_r_16 {
  border-radius: 16px !important;
}
.border_r_17 {
  border-radius: 17px !important;
}
.border_r_18 {
  border-radius: 18px !important;
}
.border_r_19 {
  border-radius: 19px !important;
}
.border_r_20 {
  border-radius: 20px !important;
}

.border_t_l_r_2 {
  border-top-left-radius: 2px !important;
}
.border_t_l_r_3 {
  border-top-left-radius: 3px !important;
}
.border_t_l_r_4 {
  border-top-left-radius: 4px !important;
}
.border_t_l_r_5 {
  border-top-left-radius: 5px !important;
}
.border_t_l_r_6 {
  border-top-left-radius: 6px !important;
}
.border_t_l_r_7 {
  border-top-left-radius: 7px !important;
}
.border_t_l_r_8 {
  border-top-left-radius: 8px !important;
}
.border_t_l_r_9 {
  border-top-left-radius: 9px !important;
}
.border_t_l_r_10 {
  border-top-left-radius: 10px !important;
}
.border_t_l_r_11 {
  border-top-left-radius: 11px !important;
}
.border_t_l_r_12 {
  border-top-left-radius: 12px !important;
}
.border_t_l_r_13 {
  border-top-left-radius: 13px !important;
}
.border_t_l_r_14 {
  border-top-left-radius: 14px !important;
}
.border_t_l_r_15 {
  border-top-left-radius: 15px !important;
}
.border_t_l_r_16 {
  border-top-left-radius: 16px !important;
}
.border_t_l_r_17 {
  border-top-left-radius: 17px !important;
}
.border_t_l_r_18 {
  border-top-left-radius: 18px !important;
}
.border_t_l_r_19 {
  border-top-left-radius: 19px !important;
}
.border_t_l_r_20 {
  border-top-left-radius: 20px !important;
}

.border_t_r_r_2 {
  border-top-right-radius: 2px !important;
}
.border_t_r_r_3 {
  border-top-right-radius: 3px !important;
}
.border_t_r_r_4 {
  border-top-right-radius: 4px !important;
}
.border_t_r_r_5 {
  border-top-right-radius: 5px !important;
}
.border_t_r_r_6 {
  border-top-right-radius: 6px !important;
}
.border_t_r_r_7 {
  border-top-right-radius: 7px !important;
}
.border_t_r_r_8 {
  border-top-right-radius: 8px !important;
}
.border_t_r_r_9 {
  border-top-right-radius: 9px !important;
}
.border_t_r_r_10 {
  border-top-right-radius: 10px !important;
}
.border_t_r_r_11 {
  border-top-right-radius: 11px !important;
}
.border_t_r_r_12 {
  border-top-right-radius: 12px !important;
}
.border_t_r_r_13 {
  border-top-right-radius: 13px !important;
}
.border_t_r_r_14 {
  border-top-right-radius: 14px !important;
}
.border_t_r_r_15 {
  border-top-right-radius: 15px !important;
}
.border_t_r_r_16 {
  border-top-right-radius: 16px !important;
}
.border_t_r_r_17 {
  border-top-right-radius: 17px !important;
}
.border_t_r_r_18 {
  border-top-right-radius: 18px !important;
}
.border_t_r_r_19 {
  border-top-right-radius: 19px !important;
}
.border_t_r_r_20 {
  border-top-right-radius: 20px !important;
}

.border_b_l_r_2 {
  border-bottom-left-radius: 2px !important;
}
.border_b_l_r_3 {
  border-bottom-left-radius: 3px !important;
}
.border_b_l_r_4 {
  border-bottom-left-radius: 4px !important;
}
.border_b_l_r_5 {
  border-bottom-left-radius: 5px !important;
}
.border_b_l_r_6 {
  border-bottom-left-radius: 6px !important;
}
.border_b_l_r_7 {
  border-bottom-left-radius: 7px !important;
}
.border_b_l_r_8 {
  border-bottom-left-radius: 8px !important;
}
.border_b_l_r_9 {
  border-bottom-left-radius: 9px !important;
}
.border_b_l_r_10 {
  border-bottom-left-radius: 10px !important;
}
.border_b_l_r_11 {
  border-bottom-left-radius: 11px !important;
}
.border_b_l_r_12 {
  border-bottom-left-radius: 12px !important;
}
.border_b_l_r_13 {
  border-bottom-left-radius: 13px !important;
}
.border_b_l_r_14 {
  border-bottom-left-radius: 14px !important;
}
.border_b_l_r_15 {
  border-bottom-left-radius: 15px !important;
}
.border_b_l_r_16 {
  border-bottom-left-radius: 16px !important;
}
.border_b_l_r_17 {
  border-bottom-left-radius: 17px !important;
}
.border_b_l_r_18 {
  border-bottom-left-radius: 18px !important;
}
.border_b_l_r_19 {
  border-bottom-left-radius: 19px !important;
}
.border_b_l_r_20 {
  border-bottom-left-radius: 20px !important;
}

.border_b_r_r_2 {
  border-bottom-right-radius: 2px !important;
}
.border_b_r_r_3 {
  border-bottom-right-radius: 3px !important;
}
.border_b_r_r_4 {
  border-bottom-right-radius: 4px !important;
}
.border_b_r_r_5 {
  border-bottom-right-radius: 5px !important;
}
.border_b_r_r_6 {
  border-bottom-right-radius: 6px !important;
}
.border_b_r_r_7 {
  border-bottom-right-radius: 7px !important;
}
.border_b_r_r_8 {
  border-bottom-right-radius: 8px !important;
}
.border_b_r_r_9 {
  border-bottom-right-radius: 9px !important;
}
.border_b_r_r_10 {
  border-bottom-right-radius: 10px !important;
}
.border_b_r_r_11 {
  border-bottom-right-radius: 11px !important;
}
.border_b_r_r_12 {
  border-bottom-right-radius: 12px !important;
}
.border_b_r_r_13 {
  border-bottom-right-radius: 13px !important;
}
.border_b_r_r_14 {
  border-bottom-right-radius: 14px !important;
}
.border_b_r_r_15 {
  border-bottom-right-radius: 15px !important;
}
.border_b_r_r_16 {
  border-bottom-right-radius: 16px !important;
}
.border_b_r_r_17 {
  border-bottom-right-radius: 17px !important;
}
.border_b_r_r_18 {
  border-bottom-right-radius: 18px !important;
}
.border_b_r_r_19 {
  border-bottom-right-radius: 19px !important;
}
.border_b_r_r_20 {
  border-bottom-right-radius: 20px !important;
}

/* wrap_between 
.wrap_between 쓰면 좌우로 붙게
*/
.wrap_between {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.wrap_between .btn_wrap {
  width: auto !important;
}

/* title style ********************************************************************************************************************/
.title_st1 {
  color: #000;
  font-weight: 500;
  font-size: 1.3rem;
  display: block;
}
.title_st2 {
  color: #000;
  font-weight: 600;
  font-size: 1.1rem;
  display: block;
}
.title_st3 {
  color: #000;
  font-weight: 600;
  font-size: 0.95rem;
  display: block;
}

/* title size */
.title_ss {
  font-size: 0.9rem;
}
.title_s {
  font-size: 1rem;
}
.title_m {
  font-size: 1.3rem;
}
.title_l {
  font-size: 1.5rem;
}
.title_xl {
  font-size: 1.9rem;
}

/* card box style ********************************************************************************************************************/

/* card_box_flex card */
.card_box_flex {
  display: flex;
  justify-content: space-between;
}

/* card */
.card {
  border: 1px solid var(--navyDark);
  border-radius: 3px !important;
}
.card_tit {
  padding: 0.3em 0.5em;
  display: block;
  font-size: 0.9rem;
  text-align: left; /*border-bottom: 1px solid #d8dce5;*/
  color: var(--white);
  background-color: var(--navyDark);
}
.card_cont {
  padding: 0.5em;
}
.card > .top_wrap {
  background-color: var(--navyDark);
}

/* box style ********************************************************************************************************************/
.box_line {
  padding: 0.8em;
  border: 1px solid #d5d5d5;
  position: relative;
}
.box_line_top {
  border-top: 1px solid #000 !important;
}
.box_st1 {
  padding: 0.8em;
  border: 1px solid #e7e7e7;
  box-shadow: 0 0 8px rgb(0 0 0 / 10%);
  position: relative;
}
.box_st2 {
  padding: 0.8em;
  border: 1px solid #dae1f1;
  position: relative;
  background-color: #dae1f1;
}
.box_st3 {
  padding: 0.8em;
  border: 1px solid #dfdfdf;
  position: relative;
  background: #f2f4f8;
}
.box_st4 {
  padding: 0.8em;
  border: 1px dotted #8b8e9c;
  box-shadow: 0 0 8px rgb(14 25 69 / 10%);
  position: relative;
  border-radius: 5px !important;
}
.cont_line_box {
  padding-bottom: 4em;
  margin-bottom: 4em;
  position: relative;
}
.cont_line_box::after {
  content: "";
  height: 2px;
  width: 100%;
  margin-top: 33px;
  background: var(--line-color-dark);   /* 외부 도메인 gif 제거 → 공통 라인 토큰 */
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.orange_box {
  padding: 1.5em 1.5em;
  background: #f7f6f4;
  position: relative;
}

/* box_multiple 
[html]
<ul class="box_multiple box_st1 box_line_top">
	<li>
		<span class="tit">현재 포인트</span>
		<span class="txt font_600 font_orange font_20">0 P</span>
	</li>
	<li>
		<span class="tit">누적 포인트</span>
		<span class="txt font_600 font_orange font_20">0 P</span>
	</li>
</ul>
*/
.box_multiple {
  display: flex;
}
.box_multiple > li {
  flex: 1;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  position: relative;
}
.box_multiple > li:after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #e3e3e3;
  position: absolute;
  top: 0;
  right: 0;
}
.box_multiple > li:last-child:after {
  display: none;
}
.box_multiple > li .tit {
  font-size: 0.96rem;
  color: var(--black);
  font-weight: 600;
}
@media screen and (max-width: 900px) {
  .box_multiple {
    flex-direction: column;
  }
  .box_multiple > li {
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
  }
  .box_multiple > li:after {
    width: 100%;
    height: 1px;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }
  .box_multiple > li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

/* tip_box
<span class="tip_ic material-symbols-outlined">info</span>
<div class="tip_box" style="display: none;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
*/
.tip_ic {
  display: flex;
  align-items: center;
  cursor: pointer;
  height: auto;
  width: auto;
  color: #9499a7;
  font-size: 22px !important;
}
.tip_ic:hover {
  color: black;
}
.tip_box {
  padding: 0.3em;
  max-width: 400px;
  position: absolute; /*position: absolute;top: 40px;right: 0;*/
  z-index: 99;
  background-color: #fffbed;
  border-radius: 5px;
  border: 1px solid #e8ddb4;
  box-shadow: 3px 3px 6px rgba(104 112 138 / 30%);
  color: var(--black);
  font-weight: 400;
  font-size: 0.85rem;
  word-break: keep-all;
  display: none;
}

/* file_box
<div class="file_box">
    <span>Drop files here</span>
    <label for="file">Upload a file</label>
    <input type="file" name="file" id="file">
</div>
         
*/
.file_box {
  width: 100%;
  border: 1px dashed #d7dce5;
  background-color: #f2f6fa;
  text-align: center;
  position: relative;
  height: 130px !important;
}
.file_box span {
  font-size: 1.9em;
  color: #cfd4d9;
  line-height: 130px !important;
}
.file_box label {
  padding: 0.8em;
  background: #333;
  color: white;
  font-weight: 600;
  font-size: 0.9em;
  border-radius: 5px;
  position: absolute;
  left: 10px;
  top: 10px !important;
}
.file_box input[type="file"] {
  display: none;
}

/* info_box */
.info_box {
  width: 100%;
  padding: 1.5rem;
  border: 1px solid #000;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 0 1rem rgba(0 0 0 / 15%);
}

.info_box .info_row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.info_box .info_row + .info_row {
  margin-top: 15px;
}

.info_box .info_row dt {
  flex-shrink: 0;
  min-width: 80px;
  font-size: 0.95rem;
  color: #666;
}

.info_box .info_row dd {
  font-size: 1rem;
  color: #333;
  line-height: 1.5;
}

/* 반응형 */
@media screen and (max-width: 900px) {
  .info_box {
    padding: 1rem;
  }

  .info_box .info_row {
    flex-direction: column;
    gap: 0.3rem;
  }

  .info_box .info_row + .info_row {
    margin-top: 12px;
  }
}

/* list style ********************************************************************************************************************/
/*
[html]
<ul class="list_st1">
	<li></li>
	<li></li>
	<li></li>
</ul>
*/
.list_st1 li {
  position: relative;
  padding-left: 9px;
  width: 100% !important;
  font-size: 1rem;
}
.list_st1 > li:before {
  content: "";
  background: #1f59a3;
  width: 4px;
  height: 4px;
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 10px;
  border-radius: 8px !important;
}

.list_st2 > li {
  position: relative;
  padding-left: 0.7em;
  margin-bottom: 0.6em;
  font-size: 1rem;
  color: #444;
}
.list_st2 > li::after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 3px;
  height: 3px;
  background: #555;
}

.list_st3 > li {
  position: relative;
  padding-left: 0.7em;
  margin-bottom: 0.6em;
  font-size: 1rem;
  color: #444;
}
.list_st3 > li::after {
  content: "-";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
/* list_size */
/*
[html]
<ul class="list_st1 list_size_s">
	<li></li>
	<li></li>
	<li></li>
</ul>
*/
.list_size_ss li {
  font-size: 0.8rem;
  margin-bottom: 0.1em;
}
.list_size_s li {
  font-size: 0.85rem;
  margin-bottom: 0.2em;
}
.list_size_m li {
  font-size: 0.95rem;
  margin-bottom: 0.2em;
}
.list_size_l li {
  font-size: 1.1rem;
  margin-bottom: 0.3em;
}
.list_size_xl li {
  font-size: 1.2rem;
  margin-bottom: 0.4em;
}

/* dl_list_st1 style ********************************************************************************************************************/
/*
.dl_list 공통으로 써주고 dl_list_st1 스타일 클래스 넣어주기

[html]
<dl class="dl_list dl_list_st1">
	<dt></dt>
	<dd></dd>
</dl>
*/
.dl_list {
  display: flex;
}
.dl_list dt {
  width: 100px;
} /* width 사이즈 조정 */
.dl_list dd {
  width: calc(100% - 100px);
} /* width 사이즈 조정 */
/* dl_list_st1 */
.dl_list_st1 {
  position: relative;
  padding-left: 9px;
}
.dl_list_st1:before {
  content: "";
  background: #1f59a3;
  width: 4px;
  height: 4px;
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 10px;
  border-radius: 8px !important;
}
.dl_list_st1 dt {
  font-weight: 600;
  color: var(--blue);
}
.dl_list_st1 dd {
  color: #666;
}

/* dl_list_st2 */
.dl_list_st2 {
  position: relative;
  padding-left: 0.7em;
  margin-bottom: 0.6em;
  font-size: 1rem;
  color: #444;
}
.dl_list_st2::after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 3px;
  height: 3px;
  background: #555;
}
.dl_list_st2 dt {
  font-weight: 600;
  color: var(--black);
}
.dl_list_st2 dd {
  color: #666;
}

/* dl_list_st3 */
.dl_list_st3 {
  position: relative;
  padding-left: 0.7em;
  margin-bottom: 0.6em;
  font-size: 1rem;
  color: #444;
}
.dl_list_st3::after {
  content: "-";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.dl_list_st3 dt {
  font-weight: 600;
  color: var(--black);
}
.dl_list_st3 dd {
  color: #666;
}

/* dl_list size */
.dl_list_size_ss dl {
  margin-bottom: 0.1em;
}
.dl_list_size_ss dt,
.dl_list_size_ss dd {
  font-size: 0.8rem;
}
.dl_list_size_s {
  margin-bottom: 0.2em;
}
.dl_list_size_s dt,
.dl_list_size_s dd {
  font-size: 0.85rem;
}
.dl_list_size_m dl {
  margin-bottom: 0.2em;
}
.dl_list_size_m dt,
.dl_list_size_m dd {
  font-size: 0.95rem;
}
.dl_list_size_l dl {
  margin-bottom: 0.3em;
}
.dl_list_size_l dt,
.dl_list_size_l dd {
  font-size: 1.1rem;
}
.dl_list_size_xl dl {
  margin-bottom: 0.4em;
}
.dl_list_size_xl dt,
.dl_list_size_xl dd {
  font-size: 1.2rem;
}

/* input size ********************************************************************************************************************/
input.input_m {
  height: 40px !important;
}
input.input_l {
  height: 50px !important;
  font-size: 1rem !important;
}
input.input_xl {
  height: 54px !important;
  font-size: 1.1rem !important;
}

/* input 모바일 일때 width 100% */
@media screen and (max-width: 900px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  select {
    width: 99% !important;
    min-width: 99% !important;
    max-width: 99% !important;
  }
}

/* input_wrap ********************************************************************************************************************/
/*
input_wrap에 넣으면 다 한줄로 정렬되고, 모바일일때는 width 100%
[html]
<div class="input_wrap">
 <input type="text" class="" maxlength="" id="" name="" title=""  placeholder="" value="">
 <input type="text" class="" maxlength="" id="" name="" title=""  placeholder="" value="">
</div>
*/
.input_wrap {
  display: flex;
  align-items: center;
}
.input_wrap > * {
  margin: 0 0.1em;
}
@media screen and (max-width: 900px) {
  .input_wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .input_wrap > * {
    margin: 0 0 0.1em 0;
  }
}

/* form size style ********************************************************************************************************************/
.form_ss {
  height: 22px !important;
  min-width: 44px;
  font-size: 0.85rem !important;
}
.form_s {
  min-width: 44px !important ;
  padding: 0 7px !important;
  height: 26px !important;
  font-size: 0.9rem !important;
}
.form_m {
  height: 40px !important;
  font-size: 0.95rem !important;
}
.form_l {
  height: 50px !important;
  font-size: 1.1rem !important;
}
.form_xl {
  height: 65px !important;
  font-size: 1.2rem !important;
}

/* 라디오박스 style ********************************************************************************************************************/
/*
	
[html]
<div class="radi_box">
	<input type="radio" id="a" value="" name="" class="">
	<label for="a">aa</label>
</div>
*/
.radi_box {
  position: relative; /*height:25px;*/
  display: inline-block;
}
.radi_box input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin-left: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.radi_box input[type="radio"] + label {
  width: 100%;
  cursor: pointer;
  float: left;
  position: relative;
  margin-right: 0.3em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.radi_box input[type="radio"] + label:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #aeaeae;
  border: 5px solid #ececec;
  float: left;
  margin-right: 4px;
  margin-top: 2px !important;
  box-sizing: unset;
}
.radi_box input[type="radio"] + label span {
  width: 100%;
  display: inline-block;
  padding-left: 43px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.3;
  font-weight: 500;
}
.radi_box input[type="radio"]:checked + label {
  float: left;
  text-align: left;
}
.radi_box input[type="radio"]:checked + label:before {
  content: "";
  background-color: #fff;
  border-color: var(--input-color);
}
.radi_box input[type="radio"]:checked + label span {
  color: #f2443a;
}

/* 라디오박스 switch style */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

/*스위치바탕 ie에서 테두리생김방지*/
.switch input {
  display: none;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}
/*스위치버튼 안쪽에 동그란모양*/
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background: white;
  transition: 0.4s;
}
/*체크된(on된)스위치바탕*/
input:checked + .slider {
  background: var(--greenLight);
}
/*스위치버튼을 클릭하면 버튼주위에 글로우효과*/
input:focus + .slider {
  box-shadow: 0 0 3px #2196f3;
}
/*스위치버튼을 클릭하면 우측으로 26px이동*/
input:checked + .slider:before {
  transform: translateX(22px);
}
/*Rounded sliders*/
.slider.round {
  border-radius: 34px !important;
}
/*스위치버튼 안쪽에 동그란모양*/
.slider.round:before {
  border-radius: 50%;
}

/* 파일 업로드 style ********************************************************************************************************************/
/*
[html]
<div class="filebox">
    <input class="upload-name" value="첨부파일" placeholder="첨부파일">
    <label for="file">파일찾기</label> 
    <input type="file" id="file">
</div>

*/
.filebox .upload-name {
  display: inline-block;
  height: 40px;
  padding: 0 0.4em;
  vertical-align: middle;
  border: 1px solid #dddddd;
  width: 78%;
  color: #999999;
}
.filebox label {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  vertical-align: middle;
  background-color: #999999;
  cursor: pointer;
  height: 40px;
  margin-left: 10px;
}
.filebox input[type="file"] {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}

/********** 파일 업로드 
[html]
<div class="file_upload_section">
  <div class="file_upload_header">
      <h4 class="file_upload_title">파일 업로드</h4>
      <button type="button" class="btn btn_add">추가</button>
  </div>
  <ul class="file_upload_list">
      <li class="file_upload_item">
          <label class="file_select_btn">
              <span>파일 선택</span>
              <input type="file" class="file_input">
          </label>
          <span class="file_name">사업계획서.hwp</span>
          <button type="button" class="btn_remove"><span class="material-symbols-outlined">close</span></button>
      </li>
      <li class="file_upload_item">
          <label class="file_select_btn">
              <span>파일 선택</span>
              <input type="file" class="file_input">
          </label>
          <span class="file_name">수요조사서.hwp</span>
          <button type="button" class="btn_remove"><span class="material-symbols-outlined">close</span></button>
      </li>
      <li class="file_upload_item">
          <label class="file_select_btn">
              <span>파일 선택</span>
              <input type="file" class="file_input">
          </label>
          <span class="file_name">연구비활용계획서.hwp</span>
          <button type="button" class="btn_remove"><span class="material-symbols-outlined">close</span></button>
      </li>
  </ul>
</div>
**********/
/* file_upload_section */
.file_upload_section {
  width: 100%;
}

.file_upload_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.file_upload_title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.file_upload_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.file_upload_item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  gap: 15px;
}

.file_select_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border: 1px solid var(--line-color);
  border-radius: 4px;
  background-color: #f5f5f5;
  font-size: 0.9rem;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.file_select_btn:hover {
  background-color: #f1f1f1;
  color: #000;
}

.file_select_btn .file_input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.file_name {
  flex: 1;
  font-size: 0.95rem;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file_name.empty {
  color: #999;
}

.btn_remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  cursor: pointer;
  color: #888;
  transition: color 0.2s ease;
}

.btn_remove:hover {
  color: #333;
}

.btn_remove .material-symbols-outlined {
  font-size: 1.2rem;
}

/* 반응형 */
@media screen and (max-width: 900px) {
  .file_upload_item {
    padding: 10px 12px;
    gap: 10px;
  }

  .file_select_btn {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  .file_name {
    font-size: 0.9rem;
  }
}

/*========================수집동의 박스========================
[html]
<ul class="agree_box mt30">
  <li>개인정보의 수집 및 이용에 대한 동의</li>
  <li>
      <article class="policy">
  
          <strong class="font_500 font_black mb5 d_block">개인정보 수집․이용 및 제3자 제공 동의서</strong>
          <p class="mb30">본 『영천스파밸리 지식산업혁신센터』은 개인정보보호법 제 15조(개인정보
              수집,이용)에 따라 플랫폼 시설 및 장비 공유·개방과 관련하여 사용자의 개인정보를 수집·이용 및 제3자에게 제공하는데 동의를
              받고자 합니다.</p>
  
          <strong class="font_500 font_black mb5 d_block">개인정보 수집․이용 내역</strong>
          <table class="table_st2">
              <thead>
                  <tr>
                      <th>항목</th>
                      <th>수집•이용 목적</th>
                      <th>보유•이용 기간</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>기업명(기관명), 대표자, 주소, 담당자명, 사업자등록번호, 연락처(이메일, 연락처)</td>
                      <td>장비 예약</td>
                      <td class="blue">1년</td>
                  </tr>
              </tbody>
          </table>
          <p class="mt5 mb30">※ 위의 개인정보 수집‧이용에 대한 동의를 거부할 권리가 있습니다. 그러나 동의를
              거부할 경우 플랫폼 장비 이용 시 제한을 받을 수 있습니다.</p>
      </article>
  </li>
  <li>
      <span class="radi_box">
          <input type="radio" name="agree" id="ag_1" class="" value="Y" checked="checked">
          <label for="ag_1" class="">동의합니다</label>
      </span>
      <span class="radi_box">
          <input type="radio" name="agree" id="ag_2" class="" value="N">
          <label for="ag_2" class="">동의하지 않습니다</label>
      </span>
  </li>
</ul>
*/
.agree_box {
}
.agree_box li:nth-child(1) {
  font-size: 1.2rem;
  font-weight: 500;
  border: 1px solid #ddd;
  border-bottom: none;
  padding: 20px 20px;
  color: var(--black);
}
.agree_box li:nth-child(2) {
  padding: 20px;
  border: 1px solid #ddd;
  height: 220px;
  overflow: auto;
  background: #f9f9f9;
}
.agree_box li:nth-child(2) b {
  display: inline-block;
  margin-bottom: 5px;
}
.agree_box li:nth-child(2) p {
  margin-bottom: 20px;
}
.agree_box li:nth-child(3) {
  padding: 15px 0px;
  border: 1px solid #ddd;
  border-top: none;
  text-align: right;
}
.agree_box .policy {
  padding: 0.8rem;
}

/*========================파일 다운로드========================
[html]
<div id="fileListArea">
    <button type="button" class="file_load" onclick="downloadAndRefresh(); return false;">
        <span class="left">
                    <span class="material-symbols-outlined">vertical_align_bottom</span>
        </span>
        <span class="right">
            Download
            <b>대회의실 시설 사용신청서 파일.hwp</b>
            <!-- <span class="download-count">(191회 다운로드)</span> -->
        </span>
    </button>
</div><!-- fileListArea -->
*/
.file_load {
  width: 100%;
  border: 1px solid #d7d7d7;
  display: flex;
  align-items: stretch;
  margin: 0 auto;
  transition: all 0.3s ease;
}
.file_load:hover b {
  text-decoration: underline;
}
.file_load .left {
  border-right: 1px solid #ddd;
  padding: 20px;
  background: #f7f7f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.file_load .left img {
  width: 30px;
}
.file_load .right {
  width: calc(100% - 40px);
  padding: 0.4rem 1rem;
  text-align: left;
  color: #888;
  font-size: 0.9rem;
}
.file_load .right b {
  width: 100%;
  display: inline-block;
  font-size: 1.1rem;
  text-align: left;
  color: #000;
}

/* 팝업 콘텐츠 배경 */
.front-popup-content { background: #fff; overflow: hidden; }


/*========================팝업창========================*/
/* 박스 — 둥근 모서리 + 그림자(입체감). overflow:hidden 은 front-popup.js 가 지정 */
.front-popup .front-popup-box {
  background: #fff;
  border-radius: .6rem;
  box-shadow: 0 14px 44px rgba(20, 28, 55, .22);
}
/* 상단 바(가로 띠) 형태(PDSP003)는 화면 폭 꽉 차므로 라운드 제거 */
.front-popup[data-type="PDSP003"] .front-popup-box { border-radius: 0; }

/* 하단 바 — 오늘 하루 안보기 + 닫기. 콘텐츠와 구분되는 옅은 배경 + 상단 구분선 */
.front-popup .front-popup-bar {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: #fafafb;
  border-top: 1px solid #eef0f4;
  padding: .2rem .5rem;
}
.front-popup .front-popup-bar .checkbox label { font-size: .88rem; color: #5f697e; }
.front-popup .front-popup-close { color: #555; font-size: .85rem; }
.front-popup .checkbox input[type="checkbox"]:checked + label { color: #333; }

/* textarea ********************************************************************************************************************/
textarea {
  width: 100%;
  box-sizing: border-box;
  height: auto;
  background: #fff;
  border: 1px solid #d7dce5;
  resize: none;
}
textarea:focus {
  background: white;
  color: black;
}

/* input file ********************************************************************************************************************/
.filebox {
  display: inline-flex;
}
.filebox input[type="file"] {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  border: 0 !important;
  opacity: 0;
}
.filebox .upload-name {
  display: inline-block;
  height: 34px;
  padding: 0 10px;
  vertical-align: middle;
  border: 1px solid #c2c6cd !important;
  border-radius: 3px;
  width: 78%;
  color: #999999;
  font-size: 0.9rem;
}
.filebox label {
  display: inline-block;
  padding: 0 10px;
  color: #fff;
  vertical-align: middle;
  background-color: #333;
  cursor: pointer;
  height: 34px;
  margin-left: 0.2em;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 32px;
  border-radius: 3px !important;
}

/* 파일업로드 ********************************************************************************************************************/
.qq-upload-file {
  font-size: 12px !important;
}
.qq-btn span {
  font-size: 19px;
  vertical-align: middle;
}
.qq-btn {
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0px 4px 0px 2px !important;
}

/* input error
[html]
<input type="text" class="error">
<span class="error_txt">오류메세지</span>
*/
input.error {
  border-color: var(--red) !important;
  border-width: 2px !important;
}
.error_txt {
  color: var(--red);
  font-weight: 500;
  margin-top: 2px;
  display: block;
  font-size: 0.95rem;
  display: none;
}

/* 로딩화면 ********************************************************************************************************************/
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  min-height: 100vh;
}
.loading span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: gray;
  border-radius: 50%;
  animation: loading 1s linear infinite;
  background-color: black;
}
.loading span:nth-child(1) {
  animation-delay: 0s;
}
.loading span:nth-child(2) {
  animation-delay: 0.2s;
  margin: 0px 10px;
}
.loading span:nth-child(3) {
  animation-delay: 0.4s;
}
.loading .txt {
  color: var(--black);
  display: block;
  margin-top: 1.4em;
  font-size: 1.2rem;
}

@keyframes loading {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* loading_st2 

<span class="loading_st2" id="" style="display:;">
	<span class="load"></span>
</span><!-- \\loading_st2 -->
*/
.loading_st2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
.loading_st2 .txt {
  color: var(--black);
  display: block;
  margin-top: 1.4em;
  font-size: 1.2rem;
}
.load {
  font-size: 10px;
  width: 1em;
  height: 1em;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #cd000b,
    1.8em -1.8em 0 0em rgba(205, 0, 11, 0.2),
    2.5em 0em 0 0em rgba(205, 0, 11, 0.2),
    1.75em 1.75em 0 0em rgba(205, 0, 11, 0.2),
    0em 2.5em 0 0em rgba(205, 0, 11, 0.2),
    -1.8em 1.8em 0 0em rgba(205, 0, 11, 0.2),
    -2.6em 0em 0 0em rgba(205, 0, 11, 0.5),
    -1.8em -1.8em 0 0em rgba(205, 0, 11, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(205, 0, 11, 0.7),
    1.8em -1.8em 0 0em #cd000b, 2.5em 0em 0 0em rgba(205, 0, 11, 0.2),
    1.75em 1.75em 0 0em rgba(205, 0, 11, 0.2),
    0em 2.5em 0 0em rgba(205, 0, 11, 0.2),
    -1.8em 1.8em 0 0em rgba(205, 0, 11, 0.2),
    -2.6em 0em 0 0em rgba(205, 0, 11, 0.2),
    -1.8em -1.8em 0 0em rgba(205, 0, 11, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(205, 0, 11, 0.5),
    1.8em -1.8em 0 0em rgba(205, 0, 11, 0.7), 2.5em 0em 0 0em #cd000b,
    1.75em 1.75em 0 0em rgba(205, 0, 11, 0.2),
    0em 2.5em 0 0em rgba(205, 0, 11, 0.2),
    -1.8em 1.8em 0 0em rgba(205, 0, 11, 0.2),
    -2.6em 0em 0 0em rgba(205, 0, 11, 0.2),
    -1.8em -1.8em 0 0em rgba(205, 0, 11, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(205, 0, 11, 0.2),
    1.8em -1.8em 0 0em rgba(205, 0, 11, 0.5),
    2.5em 0em 0 0em rgba(205, 0, 11, 0.7), 1.75em 1.75em 0 0em #cd000b,
    0em 2.5em 0 0em rgba(205, 0, 11, 0.2),
    -1.8em 1.8em 0 0em rgba(205, 0, 11, 0.2),
    -2.6em 0em 0 0em rgba(205, 0, 11, 0.2),
    -1.8em -1.8em 0 0em rgba(205, 0, 11, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(205, 0, 11, 0.2),
    1.8em -1.8em 0 0em rgba(205, 0, 11, 0.2),
    2.5em 0em 0 0em rgba(205, 0, 11, 0.5),
    1.75em 1.75em 0 0em rgba(205, 0, 11, 0.7), 0em 2.5em 0 0em #cd000b,
    -1.8em 1.8em 0 0em rgba(205, 0, 11, 0.2),
    -2.6em 0em 0 0em rgba(205, 0, 11, 0.2),
    -1.8em -1.8em 0 0em rgba(205, 0, 11, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(205, 0, 11, 0.2),
    1.8em -1.8em 0 0em rgba(205, 0, 11, 0.2),
    2.5em 0em 0 0em rgba(205, 0, 11, 0.2),
    1.75em 1.75em 0 0em rgba(205, 0, 11, 0.5),
    0em 2.5em 0 0em rgba(205, 0, 11, 0.7), -1.8em 1.8em 0 0em #cd000b,
    -2.6em 0em 0 0em rgba(205, 0, 11, 0.2),
    -1.8em -1.8em 0 0em rgba(205, 0, 11, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(205, 0, 11, 0.2),
    1.8em -1.8em 0 0em rgba(205, 0, 11, 0.2),
    2.5em 0em 0 0em rgba(205, 0, 11, 0.2),
    1.75em 1.75em 0 0em rgba(205, 0, 11, 0.2),
    0em 2.5em 0 0em rgba(205, 0, 11, 0.5),
    -1.8em 1.8em 0 0em rgba(205, 0, 11, 0.7), -2.6em 0em 0 0em #cd000b,
    -1.8em -1.8em 0 0em rgba(205, 0, 11, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(205, 0, 11, 0.2),
    1.8em -1.8em 0 0em rgba(205, 0, 11, 0.2),
    2.5em 0em 0 0em rgba(205, 0, 11, 0.2),
    1.75em 1.75em 0 0em rgba(205, 0, 11, 0.2),
    0em 2.5em 0 0em rgba(205, 0, 11, 0.2),
    -1.8em 1.8em 0 0em rgba(205, 0, 11, 0.5),
    -2.6em 0em 0 0em rgba(205, 0, 11, 0.7), -1.8em -1.8em 0 0em #cd000b;
  }
}

/* 레이어팝업 ********************************************************************************************************************/
/*
[html]
<p class="btn" onClick="popupLayer('layer1');">Open</p>

<div id="layer1" class="dim-layer">
  <div class="dimBg"></div>
  <div class="pop-layer">
    <strong class="pop-head">
    	<span class="tit">레이어팝업창 입니다.</span>
    	<span class="material-symbols-outlined btn-layerClose">close</span>
    </strong>
    <div class="pop-conts">
      간혹 레이어배경 .dimBg이 늦게 떠지는 경우가 있으면 스크립트에 fadein/out 문제임 show/hide로 수정하면됨
    </div>
  </div>
</div>

[js]
function popupLayer(layerId){

    $("#"+layerId).fadeIn();
    $contents = $("#"+layerId).find(".pop-layer");
    $("body").css("overflow", "hidden");
    
    var $elWidth = ~~($contents.outerWidth()),
      $elHeight = ~~($contents.outerHeight());

    $contents.css({
      marginTop: -$elHeight /2,
      marginLeft: -$elWidth/2
    })
    $contents.find(".btn-layerClose").click(function(){
      $("#"+layerId).fadeOut();
      $("body").css("overflow", "");
    });
  
  }
*/
.dim-layer {
  display: none;
}
.pop-layer {
  width: 800px;
  height: auto;
  min-height: 340px;
  max-height: 800px;
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0 0 0 / 50%);
}
.pop-head {
  height: 50px;
  padding: 0.4em 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(247, 247, 247);
  border-radius: 5px 5px 0 0;
}
.pop-head .tit {
  font-size: 1.1rem;
  color: var(--black);
  font-weight: 500;
}
.pop-conts {
  padding: 1em 1em 70px 1em;
  max-height: 710px;
  overflow-y: auto;
}
.btn-layerClose {
  cursor: pointer;
  font-size: 23px;
  color: #000;
  box-sizing: border-box;
}
.btn-layerClose > span {
  vertical-align: middle;
}
.pop-btns {
  height: 50px;
  background-color: #f6f6f6;
  border-radius: 0 0 5px 5px;
  justify-content: flex-end;
  padding-right: 0.5em;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 2;
}
@media screen and (max-width: 900px) {
  .pop-layer {
    width: 90%;
  }
}


/* ==========================================================================
   [로컬 추가] Lenis(부드러운 스크롤) 연동 보정
   ※ 카이누리 가이드 원본에 없는 블록이다. common.css 를 다시 받으면 사라지므로
     반드시 재적용할 것. (같은 이유로 위쪽 html{scroll-behavior} 도 확인)
   ========================================================================== */

/* lenis.css 의 `.lenis.lenis-smooth iframe { pointer-events:none }` 규칙은
   iframe 위에서 휠이 가로채이는 것을 막으려는 것인데, 지도·유튜브처럼 조작해야 하는
   iframe 까지 통째로 죽인다. 조작이 필요한 iframe 은 감싼 요소에 data-lenis-prevent 를
   달아 되살린다. (data-lenis-prevent 자체가 그 안에서 Lenis 를 비활성화하는 표준 속성) */
.lenis.lenis-smooth [data-lenis-prevent] iframe,
.lenis.lenis-smooth iframe[data-lenis-prevent] {
  pointer-events: auto;
}