:root {
  --header-height: 100px;
}

/* css 기본서식 리셋 */
* {margin: 0; padding: 0; color: inherit; box-sizing: border-box; word-break: break-all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
html, body {font-size: 16px; line-height: 1.5;}
body {overflow-x: hidden;}
ul, ol, li {list-style: none;}
p {line-height: 1.7;}
a {text-decoration: none; color: inherit;}
a:focus {outline: none;}
a, button {cursor: pointer;}
b {font-weight: 700;}
button {border: none; outline: none; background-color: transparent; font-size: 1rem;}
button:focus {outline: none;}
label, img {user-select: none;}
img, svg {width: auto; max-width: 100%;}
form {width: 100%;}
textarea {resize: none;}
sub, sup {white-space: nowrap;}
small {font-size: 0.9em;}

:root {
  /* layout */
  --outer-size: 1700px;
  --outer-gap: 30px;
  --inner-size: 1400px;
  --inner-gap: 20px;

  /* gap */
  --side-gap-l: 30px;
  --side-gap-m: 20px;
  --side-gap-s: 10px;

  --tb-gap-xl: 80px; /* top, bottom */
  --tb-gap-l: 80px;
  --tb-gap-m: 50px;
  --tb-gap-s: 25px;
  --tb-gap-xs: 10px;

  /* color */
  accent-color: var(--text-base);

  /* gray scale */
  --gray10: #ebeaea;
  --gray30: #c2c1c1;
  --gray50: #999797;
  --gray70: #707070;
  --gray80: #555;

  /* gray scale(dark mode) */
  --dark-gray10: #f9fafc;
  --dark-gray20: #f2f4f6;
  --dark-gray40: #788893;
  --dark-gray70: #303550;
  --dark-gray80: #2a2e47;
  --dark-gray90: #1e233e;
  --dark-gray100: #0c0e18;

  /* neon color */
  --neon-magenta: #ff0081;
  --neon-violet: #8b03ff;
  --neon-teal: #27d4b6;
  --neon-lightgreen: #33ff04;
  --neon-lime: #bdea14;
  --neon-orange: #ff9b00;
  --neon-hotpink: #fc00ff;
  --neon-mint: #00ffa0;
  --neon-sky: #008fff;
  --neon-yellow: #d8e118;
  --neon-purple: #3d144c;

  /* pastel color */
  --pastel-red: #ffdddd;
  --pastel-orange: #ffeedd;
  --pastel-yellow: #ffffdd;
  --pastel-green: #eeffdd;
  --pastel-teal: #ddfff6;
  --pastel-blue: #ddffff;
  --pastel-indigo: #ddf6ff;
  --pastel-lavender: #dde5ff;
  --pastel-purple : #e5ddff;

  /* theme color */
  --primary-color: #00b08c;
  --primary-color-mid: #62b694;
  --primary-color-light: #54cab2;
  --primary-color-deep: #018d70;
  --primary-filter: invert(49%) sepia(54%) saturate(4814%) hue-rotate(141deg) brightness(99%) contrast(101%);
  --secondary-color: #6015f8;
  --point-color: #009e96;
  --point-color-light: rgb(195, 238, 236);
  --text-base: #1d1d1d;
  
  /* extended color */
  --bg-color: #fff;
  --bg-sub: #fbd17b;
  --gradient-base: linear-gradient(to right, #2a7d59, #39a275);
  --gradient-base2: linear-gradient(to right, #6015f8, #8844f0);

  /* alert color */
  --success-color: #2bff00;
  --success-light-color: #f0faee;
  --warning-color: #ffc84b;
  --warning-light-color: #fff7e4;
  --error-color: #d7260d;
  --error-light-color: #ffe9e9;

  /* SNS color */
  --naver-green: #2fbd35;
  --naver-black: #121212;
  --kakao-yellow: #ffe000;
  --kakao-brown: #391b1b;

  /* lib color */
  --swiper-theme-color : #000;
}

@media screen and (max-width: 640px) {
  :root {
  /* gap */
  --side-gap-l: 20px;
  --side-gap-m: 15px;
  --side-gap-s: 10px;

  --tb-gap-xl: 80px;
  /* top, bottom */
  --tb-gap-l: 50px;
  --tb-gap-m: 30px;
  --tb-gap-s: 20px;
  --tb-gap-xs: 10px;
  }
}
@media screen and (max-width: 475px) {
  :root {
  --outer-gap: 20px;
  --inner-gap: 15px;

  /* gap */
  --side-gap-l: 20px;
  --side-gap-m: 15px;
  --side-gap-s: 10px;

  --tb-gap-xl: 60px;
  /* top, bottom */
  --tb-gap-l: 40px;
  --tb-gap-m: 25px;
  --tb-gap-s: 15px;
  --tb-gap-xs: 10px;
  }
}

body * {font-family: inherit; -webkit-font-smoothing: antialiased;}

::selection {background-color: var(--text-base); color: #fff;}

/* 
  rem 단위 설정

  페이지 전체 폰트 크기에 관여할 rem 기준을 설정합니다.
  단위를 픽셀 단위로 변경 시 삭제될 수 있습니다.
*/

/* html, body {font-size: 19px;}

@media screen and (max-width: 768px) {
  html, body {font-size: 18px;}
}
@media screen and (max-width: 475px) {
  html, body {font-size: 17px;}
} */

body.lock {overflow: hidden !important;}

/* 
  레이아웃에 관련한 항목입니다.
  flex, grid레이아웃, 스크롤 바, 콘텐츠 드래그 시 배경색상 변경,
  대화형 요소 기본 서식 초기화 등의 내용이 포함됩니다.
*/

/* layout */
.flex {display: flex; justify-content: flex-start; align-items: flex-start;}
.flex-center {display: flex; justify-content: center; align-items: center;}
.flex-col {display: flex; flex-direction: column;}
.flex-col-center {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.flex-full {flex: 1;}

.j-center {justify-content: center;}
.j-between {justify-content: space-between;}
.a-center {align-items: center;}
.a-stretch {align-items: stretch;}
.a-end-center {align-items: flex-end;}

.flow-root {display: flow-root;}
.flow-root img {margin: 0;}
.flow-root .float-l {float: left;}
.flow-root .float-r {float: right;}
.flow-root [class*="float-"] {display: block;}

@media screen and (max-width: 1200px) {
  .float-break-1200 .float-l,
  .float-break-1200 .float-r { float: none; }
  .float-break-1200 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
}

@media screen and (max-width: 1024px) {
  .float-break-1024 .float-l,
  .float-break-1024 .float-r { float: none; }
  .float-break-1024 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
  .float-break-1024 .mb0 {margin-bottom: 0;}
}

@media screen and (max-width: 768px) {
  .float-break-768 .float-l,
  .float-break-768 .float-r { float: none; }
  .float-break-768 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
  .float-break-768 .mb0 {margin-bottom: 0;}
}

@media screen and (max-width: 640px) {
  .float-break-640 .float-l,
  .float-break-640 .float-r { float: none; }
  .float-break-640 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
  .float-break-640 .mb0 {margin-bottom: 0;}
}

@media screen and (max-width: 475px) {
  .float-break-475 .float-l,
  .float-break-475 .float-r { float: none; }
  .float-break-475 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
  .float-break-475 .mb0 {margin-bottom: 0;}
}

@media screen and (max-width: 375px) {
  .float-break-375 .float-l,
  .float-break-375 .float-r { float: none; }
  .float-break-375 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
  .float-break-375 .mb0 {margin-bottom: 0;}
}

@media screen and (max-width: 320px) {
  .float-break-320 .float-l,
  .float-break-320 .float-r { float: none; }
  .float-break-320 [class*="float-"] {margin-inline: auto; margin-bottom: var(--tb-gap-m);}
  .float-break-320 .mb0 {margin-bottom: 0;}
}

.gap30 {gap: 30px;}
.gap20 {gap: 20px;}
.gap10 {gap: 10px;}

.gap-xs {gap: var(--tb-gap-xs);}
.gap-s {gap: var(--tb-gap-s);}
.gap-m {gap: var(--tb-gap-m);}
.gap-l {gap: var(--tb-gap-l);}
.gap-xl {gap: var(--tb-gap-xl);}

.gap-m-xs {gap: var(--tb-gap-m) var(--tb-gap-xs);}
.gap-m-s {gap: var(--tb-gap-m) var(--tb-gap-s);}
.gap-m-m {gap: var(--tb-gap-m) var(--tb-gap-m);}
.gap-m-l {gap: var(--tb-gap-m) var(--tb-gap-l);}
.gap-m-xl {gap: var(--tb-gap-m) var(--tb-gap-xl);}

.block {display: block;}
.cover {width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 5;}

.align-c {align-items: center !important;}

.line-px1 {width: 100%; height: 1px; display: block; background-color: var(--gray30);}

.i-flex {display: inline-flex;}
.i-flex-center {display: inline-flex; justify-content: center; align-items: center;}
.i-flex-col {display: inline-flex; flex-direction: column;}
.i-flex-col-center {display: inline-flex; flex-direction: column; justify-content: center; align-items: center;}

.grid {width: 100%; display: grid; grid-template-columns: repeat(var(--start-fr, 1), 1fr);}
.fr-5 {--start-fr: 5;}
.fr-4 {--start-fr: 4;}
.fr-3 {--start-fr: 3;}
.fr-2 {--start-fr: 2;}

@media screen and (max-width: 1200px) {
  .fr-step1-1200 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-1200 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-1200 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

@media screen and (max-width: 1024px) {
  .fr-step1-1024 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-1024 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-1024 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

@media screen and (max-width: 768px) {
  .fr-step1-768 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-768 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-768 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

@media screen and (max-width: 640px) {
  .fr-step1-640 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-640 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-640 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

@media screen and (max-width: 475px) {
  .fr-step1-475 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-475 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-475 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

@media screen and (max-width: 375px) {
  .fr-step1-375 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-375 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-375 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

@media screen and (max-width: 320px) {
  .fr-step1-320 {grid-template-columns: repeat(calc(var(--start-fr) - 1), 1fr);}
  .fr-step2-320 {grid-template-columns: repeat(calc(var(--start-fr) - 2), 1fr);}
  .fr-step3-320 {grid-template-columns: repeat(calc(var(--start-fr) - 3), 1fr);}
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: var(--bg-color) 5000s ease-in-out 0s;
  -webkit-transition: var(--bg-color) 9999s ease-out;
}

.outer-wrap {
  width: 100%;
  max-width: var(--outer-size);
  padding: 0 var(--outer-gap);
}

.inner-wrap {
  width: 100%;
  max-width: var(--inner-size);
  padding: 0 var(--inner-gap);
}

.outer-wrap,
.inner-wrap {margin-inline: auto;}

/* 
  화면 출력에 관한 항목입니다.
  우선적용되어야 하는 내용이므로 important를 사용합니다.
*/

/* view */
.hide {display: none !important;}
.hidden {visibility: hidden !important;}
.op0 {opacity: 0 !important;}
.op1 {opacity: 1 !important;}

/* 
  UI간격에 관한 항목입니다.
  좌우 3가지, 상하 5가지 기준으로 구분합니다.
  추후 세분화되거나 삭제될 수 있습니다.
*/

/* gap */
/* margin */
.i-auto {margin-inline: auto;}

.ml-l {margin-left: var(--side-gap-l);}
.ml-m {margin-left: var(--side-gap-m);}
.ml-s {margin-left: var(--side-gap-s);}

.mr-l {margin-right: var(--side-gap-l);}
.mr-m {margin-right: var(--side-gap-m);}
.mr-s {margin-right: var(--side-gap-s);}

.mt-xl {margin-top: var(--tb-gap-xl);}
.mt-l {margin-top: var(--tb-gap-l);}
.mt-m {margin-top: var(--tb-gap-m);}
.mt-s {margin-top: var(--tb-gap-s);}
.mt-xs {margin-top: var(--tb-gap-xs);}
.mt-0 {margin-top: 0 !important;}

.mb-xl {margin-bottom: var(--tb-gap-xl);}
.mb-l {margin-bottom: var(--tb-gap-l);}
.mb-m {margin-bottom: var(--tb-gap-m);}
.mb-s {margin-bottom: var(--tb-gap-s);}
.mb-xs {margin-bottom: var(--tb-gap-xs);}
/* padding */
.pl-l {padding-left: var(--side-gap-l);}
.pl-m {padding-left: var(--side-gap-m);}
.pl-s {padding-left: var(--side-gap-s);}

.pr-l {padding-right: var(--side-gap-l);}
.pr-m {padding-right: var(--side-gap-m);}
.pr-s {padding-right: var(--side-gap-s);}

.pt-xl {padding-top: var(--tb-gap-xl);}
.pt-l {padding-top: var(--tb-gap-l);}
.pt-m {padding-top: var(--tb-gap-m);}
.pt-s {padding-top: var(--tb-gap-s);}
.pt-xs {padding-top: var(--tb-gap-xs);}

.pb-xl {padding-bottom: var(--tb-gap-xl);}
.pb-l {padding-bottom: var(--tb-gap-l);}
.pb-m {padding-bottom: var(--tb-gap-m);}
.pb-s {padding-bottom: var(--tb-gap-s);}
.pb-xs {padding-bottom: var(--tb-gap-xs);}

/* 
  포지션 값을 지정합니다
*/

.pos-rel {position: relative;}
.pos-abs {position: absolute; top: 0; left: 0; z-index: 1;}
.pos-abs-center {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.pos-fx {position: fixed; top: 0; left: 0;}

.ex-h {position: relative; top: 0.5ex;}
.ex-q {position: relative; top: 0.25ex;}

/* 
  표 서식을 지정합니다.
  현재는 기본 표 서식만 존재합니다.
*/

/* table */
.table-overflow {width: 100%; overflow-x: auto;}

table {width: 100%; border-collapse: collapse;}
table .borderless {border: none !important;}

.table-layout-basic,
.table-layout-basic th,
.table-layout-basic td {border: 1px solid #ccc; padding: 15px; vertical-align: middle;}
.table-layout-basic th {background-color: #eee;}
.table-layout-basic .gray {background-color: #eee;}



table .diagonal {
  padding: 30px 10px;
  position: relative;
  background-image: linear-gradient(to left bottom, transparent calc(50% - 1px), var(--text-base), transparent calc(50% + 1px));
  background-size: 120% 120%;
  background-position: center;
}
table .diagonal .left,
table .diagonal .right {position: absolute;}
table .diagonal .left {bottom: 10px; left: 10px;}
table .diagonal .right {top: 10px; right: 10px;}

table .bg-pattern-diagonal {
  background: repeating-linear-gradient(-45deg, #eee, 2px, #fff 1px, #fff 7px);
}

@media screen and (max-width: 640px) {
  .table-layout-basic {min-width: 640px;}
  .table-layout-basic * {font-size: 14px;}
}

/* 
  버튼 및 태그 서식을 지정합니다.
  3가지 크기로 구성합니다.
  모양에 따라 타입 클래스를 변경합니다.
  색상 변경은 text, background 클래스를 이용합니다.
*/

/* ui */
.bg-main {background-color: var(--primary-color) !important;}
.bg-sub {background-color: var(--secondary-color) !important;}
.bg-sub-deep {background-color: var(--secondary-color-deep) !important;}
.bg-point {background-color: var(--point-color) !important;}
.bg-gradient {background: var(--gradient-base) !important;}
.bg-gradient2 {background: var(--gradient-base2) !important;}
.bg-txt {background-color: var(--text-base) !important;}
.bg-none {background-color: transparent !important;}
.bg-gray {background-color: var(--gray10) !important;}
.bg-light-green {background-color: #f6faed !important;}

.border-main {border-color: var(--primary-color);}
.border-sub {border-color: var(--secondary-color);}
.border-point {border-color: var(--point-color);}

.type-round {border-radius: 20vw !important;}
.type-soft {border-radius: 10px !important;}
.type-rect {border-radius: 2px !important;}
.type-circle {border-radius: 50% !important;}

.btn {cursor: pointer;}
.btn:hover {filter: brightness(0.9);}
.btn,
.tag {
  width: max-content;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ededed;
}

.btn-l,
.tag-l {
  padding: 15px 30px;
  font-size: 1.25rem;
}
.btn-m,
.tag-m {
  padding: 10px 25px;
  font-size: 1rem;
}

.btn-s,
.tag-s {
  padding: 7px 20px;
  font-size: 0.9rem;
}

.underline {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* 
  의사 클래스에 관한 내용입니다.
  html상에서 텍스트를 추가하거나
  의사 요소를 제거하기 위해 사용합니다.
*/

/* pseudo class */
.bf-attr::before {content: attr(-data-before);}
.af-attr::after {content: attr(-data-after);}

.bf-none::before,
.af-none::after {display: none !important;}

/* 
  실제 페이지 작성 시 사용하게 될 항목입니다.
*/

/* pages */
.border-box {
  border: 1px solid #ccc;
  padding: 30px;
}
.border-tb {
  border: 1px solid #ccc;
  border-width: 1px 0 1px 0;
}
.border-side {
  border: 1px solid #ccc;
  border-width: 0 1px 0 1px;
}

.border-main {border-color: var(--primary-color);}
.border-sub {border-color: var(--secondary-color);}
.border-point {border-color: var(--point-color);}
.border-point-light {border-color: var(--point-color-light);}

.line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.img {font-size: 0;}
.img img:not([class*="br"]) {
  width: auto;
  max-width: 100%;
  display: block;
}

.img-caption {
  margin-top: 5px;
  display: block;
  font-size: clamp(12px, 0.8rem, 16px);
  color: #aaa;
  text-wrap: wrap;
  word-break: keep-all;
  text-align: left;
}

/* js로 설정 */
.img-size-auto {
  width: var(--img-natural-size);
  margin: 0;
  display: block;
}

.max10 {max-width: 10%;}
.max20 {max-width: 20%;}
.max25 {max-width: 25%;}
.max30 {max-width: 30%;}
.max40 {max-width: 40%;}
.max50 {max-width: 50%;}
.max60 {max-width: 60%;}
.max70 {max-width: 70%;}
.max80 {max-width: 80%;}
.max90 {max-width: 90%;}
.max100 {max-width: 100%;}
.max-cont {width: max-content;}

/* 
  해상도별 분기를 지정합니다.
  줄바꿈태그나, 레이아웃 요소를 해상도에 따라 노출or제거합니다.
*/

.indent-num {display: flex; align-items: flex-start;}
.indent-num::before {content: attr(data-indent-num); margin-right: 0.25em; white-space: nowrap; color: inherit; font-weight: inherit;}
.indent-num.underline::before {margin-right: 0;}
.bf-bold::before {font-weight: 600;}

/* break points */
.br1200 {display: none !important;}
.br1024 {display: none !important;}
.br768 {display: none !important;}
.br640 {display: none !important;}
.br475 {display: none !important;}
.br375 {display: none !important;}
.br320 {display: none !important;}


@media screen and (max-width: 1200px) {
  .m-break1200 {margin: 0;}
  .p-break1200 {padding: 0;}
  .br1200 {display: block !important;}
  .br1200-end {display: none !important;}
  .img-break1200 img {min-width: auto !important;}
  .flex-col-1200 {flex-direction: column !important;}

  .flex-col-1200 > .pr-l,
  .flex-col-1200 > .pr-m,
  .flex-col-1200 > .pr-s {padding-right: 0;}
  .flex-col-1200 > .pl-l,
  .flex-col-1200 > .pl-m,
  .flex-col-1200 > .pl-s {padding-left: 0;}

  .flex-col-1200 > .mr-l,
  .flex-col-1200 > .mr-m,
  .flex-col-1200 > .mr-s {margin-right: 0;}
  .flex-col-1200 > .ml-l,
  .flex-col-1200 > .ml-m,
  .flex-col-1200 > .ml-s {margin-left: 0;}

  .flex-col-1200 .max10,
  .flex-col-1200 .max20,
  .flex-col-1200 .max30,
  .flex-col-1200 .max40,
  .flex-col-1200 .max50,
  .flex-col-1200 .max60,
  .flex-col-1200 .max70,
  .flex-col-1200 .max80,
  .flex-col-1200 .max90 {max-width: 100%;}
}

@media screen and (max-width: 1024px) {
  .m-break1024 {margin: 0;}
  .br1024 {display: block !important;}
  .br1024-end {display: none !important;}
  .img-break1024 img {min-width: auto !important;}
  .flex-col-1024 {flex-direction: column !important;}

  .flex-col-1024 > .pr-l,
  .flex-col-1024 > .pr-m,
  .flex-col-1024 > .pr-s {padding-right: 0;}
  .flex-col-1024 > .pl-l,
  .flex-col-1024 > .pl-m,
  .flex-col-1024 > .pl-s {padding-left: 0;}

  .flex-col-1024 > .mr-l,
  .flex-col-1024 > .mr-m,
  .flex-col-1024 > .mr-s {margin-right: 0;}
  .flex-col-1024 > .ml-l,
  .flex-col-1024 > .ml-m,
  .flex-col-1024 > .ml-s {margin-left: 0;}

  .flex-col-1024 .max10,
  .flex-col-1024 .max20,
  .flex-col-1024 .max30,
  .flex-col-1024 .max40,
  .flex-col-1024 .max50,
  .flex-col-1024 .max60,
  .flex-col-1024 .max70,
  .flex-col-1024 .max80,
  .flex-col-1024 .max90 {max-width: 100%;}
}

@media screen and (max-width: 768px) {
  .m-break768 {margin: 0;}
  .p-break768 {padding: 0;}
  .br768 {display: block !important;}
  .br768-end {display: none !important;}
  .img-break768 img {min-width: auto !important;}
  .flex-col-768 {flex-direction: column !important;}
  
  .flex-col-768 > .pr-l,
  .flex-col-768 > .pr-m,
  .flex-col-768 > .pr-s {padding-right: 0;}
  .flex-col-768 > .pl-l,
  .flex-col-768 > .pl-m,
  .flex-col-768 > .pl-s {padding-left: 0;}

  .flex-col-768 > .mr-l,
  .flex-col-768 > .mr-m,
  .flex-col-768 > .mr-s {margin-right: 0;}
  .flex-col-768 > .ml-l,
  .flex-col-768 > .ml-m,
  .flex-col-768 > .ml-s {margin-left: 0;}

  .flex-col-768 .max10,
  .flex-col-768 .max20,
  .flex-col-768 .max30,
  .flex-col-768 .max40,
  .flex-col-768 .max50,
  .flex-col-768 .max60,
  .flex-col-768 .max70,
  .flex-col-768 .max80,
  .flex-col-768 .max90 {max-width: 100%;}

  .flex-col-768.a-end-center {align-items: center;}
}

@media screen and (max-width: 640px) {
  .m-break640 {margin: 0;}
  .p-break640 {padding: 0;}
  .br640 {display: block !important;}
  .br640-end {display: none !important;}
  .img-break640 img {min-width: auto !important;}
  .flex-col-640 {flex-direction: column !important;}
  
  .flex-col-640 > .pr-l,
  .flex-col-640 > .pr-m,
  .flex-col-640 > .pr-s {padding-right: 0;}
  .flex-col-640 > .pl-l,
  .flex-col-640 > .pl-m,
  .flex-col-640 > .pl-s {padding-left: 0;}

  .flex-col-640 > .mr-l,
  .flex-col-640 > .mr-m,
  .flex-col-640 > .mr-s {margin-right: 0;}
  .flex-col-640 > .ml-l,
  .flex-col-640 > .ml-m,
  .flex-col-640 > .ml-s {margin-left: 0;}

  .flex-col-640 .max10,
  .flex-col-640 .max20,
  .flex-col-640 .max30,
  .flex-col-640 .max40,
  .flex-col-640 .max50,
  .flex-col-640 .max60,
  .flex-col-640 .max70,
  .flex-col-640 .max80,
  .flex-col-640 .max90 {max-width: 100%;}
}

@media screen and (max-width: 475px) {
  .m-break475 {margin: 0;}
  .p-break475 {padding: 0;}
  .br475 {display: block !important;}
  .br475-end {display: none !important;}
  .img-break475 img {min-width: auto !important;}
  .flex-col-475 {flex-direction: column !important;}
  
  .flex-col-475 > .pr-l,
  .flex-col-475 > .pr-m,
  .flex-col-475 > .pr-s {padding-right: 0;}
  .flex-col-475 > .pl-l,
  .flex-col-475 > .pl-m,
  .flex-col-475 > .pl-s {padding-left: 0;}

  .flex-col-475 > .mr-l,
  .flex-col-475 > .mr-m,
  .flex-col-475 > .mr-s {margin-right: 0;}
  .flex-col-475 > .ml-l,
  .flex-col-475 > .ml-m,
  .flex-col-475 > .ml-s {margin-left: 0;}

  .flex-col-475 .max10,
  .flex-col-475 .max20,
  .flex-col-475 .max30,
  .flex-col-475 .max40,
  .flex-col-475 .max50,
  .flex-col-475 .max60,
  .flex-col-475 .max70,
  .flex-col-475 .max80,
  .flex-col-475 .max90 {max-width: 100%;}

  .a-center.m-a-start {align-items: start;}
}

@media screen and (max-width: 375px) {
  .m-break375 {margin: 0;}
  .p-break375 {padding: 0;}
  .br375 {display: block !important;}
  .br375-end {display: none !important;}
  .img-break375 img {min-width: auto !important;}
  .flex-col-375 {flex-direction: column !important;}

  .flex-col-375 > .pr-l,
  .flex-col-375 > .pr-m,
  .flex-col-375 > .pr-s {padding-right: 0;}
  .flex-col-375 > .pl-l,
  .flex-col-375 > .pl-m,
  .flex-col-375 > .pl-s {padding-left: 0;}

  .flex-col-375 > .mr-l,
  .flex-col-375 > .mr-m,
  .flex-col-375 > .mr-s {margin-right: 0;}
  .flex-col-375 > .ml-l,
  .flex-col-375 > .ml-m,
  .flex-col-375 > .ml-s {margin-left: 0;}

  .flex-col-375 .max10,
  .flex-col-375 .max20,
  .flex-col-375 .max30,
  .flex-col-375 .max40,
  .flex-col-375 .max50,
  .flex-col-375 .max60,
  .flex-col-375 .max70,
  .flex-col-375 .max80,
  .flex-col-375 .max90 {max-width: 100%;}
}

@media screen and (max-width: 320px) {
  .m-break320 {margin: 0;}
  .p-break320 {padding: 0;}
  .br320 {display: block !important;}
  .br320-end {display: none !important;}
  .img-break320 img {min-width: auto !important;}
  .flex-col-320 {margin: auto; flex-direction: column !important;}

  .flex-col-320 > .pr-l,
  .flex-col-320 > .pr-m,
  .flex-col-320 > .pr-s {padding-right: 0;}
  .flex-col-320 > .pl-l,
  .flex-col-320 > .pl-m,
  .flex-col-320 > .pl-s {padding-left: 0;}

  .flex-col-320 > .mr-l,
  .flex-col-320 > .mr-m,
  .flex-col-320 > .mr-s {margin-right: 0;}
  .flex-col-320 > .ml-l,
  .flex-col-320 > .ml-m,
  .flex-col-320 > .ml-s {margin-left: 0;}

  .flex-col-320 .max10,
  .flex-col-320 .max20,
  .flex-col-320 .max30,
  .flex-col-320 .max40,
  .flex-col-320 .max50,
  .flex-col-320 .max60,
  .flex-col-320 .max70,
  .flex-col-320 .max80,
  .flex-col-320 .max90 {max-width: 100%;}
}

/* 
  텍스트와 관련된 요소입니다.
  페이지에 사용될 폰트 체계를 지정합니다.
*/

/* fonts */
html, body {color: var(--text-base);}

.font0 {font-size: 0;}

.txt-main {color: var(--primary-color);}
.txt-sub {color: var(--primary-color-light);}
.txt-w {color: #fff;}
.txt-base {color: var(--text-base);}
.txt-gray {color: var(--gray50);}
.txt-point {color: var(--point-color);}
.txt-point-light {color: var(--point-color);}
.txt-gradient {
    width: max-content !important;
    max-width: 100%;
    background: var(--gradient-base);
    color: transparent !important;
    display: inline-block;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    font-weight: 900;
}

.txt-left {text-align: left !important;} 
.txt-right {text-align: right !important;}
.txt-justify {text-align: justify !important;}
.txt-center {text-align: center !important;}
.txt-120 {font-size: 1.2em !important;}
.txt-110 {font-size: 1.1em !important;}
.txt-100 {font-size: 1em !important;}
.txt-90 {font-size: 0.9em !important;}
.txt-80 {font-size: 0.8em !important;}

.semi-bold {font-weight: 600 !important;}
.bold {font-weight: 900 !important;}
.italic {font-style: italic !important;}

[class*="highlight-"] {display: inline !important;}
[class*="highlight-"].bg-clone {box-decoration-break: clone;}
.highlight-magenta {background: linear-gradient(to bottom, transparent 50%, var(--neon-magenta) 51%, var(--neon-magenta));}
.highlight-violet {background: linear-gradient(to bottom, transparent 50%, var(--neon-violet) 51%, var(--neon-violet));}
.highlight-teal {background: linear-gradient(to bottom, transparent 50%, var(--neon-teal) 51%, var(--neon-teal));}
.highlight-lightgreen {background: linear-gradient(to bottom, transparent 50%, var(--neon-lightgreen) 51%, var(--neon-lightgreen));}
.highlight-lime {background: linear-gradient(to bottom, transparent 50%, var(--neon-lime) 51%, var(--neon-lime));}
.highlight-orange {background: linear-gradient(to bottom, transparent 50%, var(--neon-orange) 51%, var(--neon-orange));}
.highlight-hotpink {background: linear-gradient(to bottom, transparent 50%, var(--neon-hotpink) 51%, var(--neon-hotpink));}
.highlight-mint {background: linear-gradient(to bottom, transparent 50%, var(--neon-mint) 51%, var(--neon-mint));}
.highlight-sky {background: linear-gradient(to bottom, transparent 50%, var(--neon-sky) 51%, var(--neon-sky));}
.highlight-yellow {background: linear-gradient(to bottom, transparent 66%, var(--neon-yellow) 66%, var(--neon-yellow));}
.highlight-purple {background: linear-gradient(to bottom, transparent 50%, var(--neon-purple) 51%, var(--neon-purple));}

.keep-all {word-break: keep-all !important;}
.break-all {word-break: break-all !important;}

/* 
  border 색상을 지정합니다
*/
.border-base {border-color: var(--text-base);}
.border-main {border-color: var(--primary-color);}
.border-sub {border-color: var(--secondary-color);}

/* 
  텍스트가 넘치는 경우 말줄임표로 표시합니다.
*/

/* ellipsis */
.t-ellipsis {overflow: hidden; display: inline-block !important; text-overflow: ellipsis; white-space: nowrap;}
.t-ellipsis-line2 {overflow: hidden; text-overflow: ellipsis; display: inline-block; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.t-ellipsis-line3 {overflow: hidden; text-overflow: ellipsis; display: inline-block; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.t-ellipsis-line4 {overflow: hidden; text-overflow: ellipsis; display: inline-block; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.t-ellipsis-line5 {overflow: hidden; text-overflow: ellipsis; display: inline-block; display: -webkit-box !important; -webkit-line-clamp: 5; -webkit-box-orient: vertical;}

/* 
  width값 조정을 위한 항목입니다.
*/
.w100 {width: 100%;}
.h100 {height: 100%;}
.wh100 {width: 100%; height: 100%;}

/* 
  marquee UI 기본 속성값입니다.
*/
.marquee {width: 100%; overflow: hidden;}
.marquee-wrapper {width: max-content; display: flex; justify-content: start; will-change: transform;}
.marquee-wrapper img {width: auto;}


.inner_wrap {
  width: 92%;
  max-width: 1200px;
  margin-inline: auto;
}

body {
  font-family: 'Paperlogy';
  font-size: 18px;
  font-weight: 500;
  margin: 0 auto;
  overflow-x: hidden;
  width: 100%;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0px;
}

/* 헤더 */
header {
  width: 100%;
  height: var(--header-height, 100px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  z-index: 100;
}

header .header_core {
  display: flex;
  flex: 1;
  align-items: center;
}

header .logo_wrap {
  margin-left: 50px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0;
}

header .logo_wrap .vol_wrap {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-size: 17px;
}

header .logo_wrap .vol_wrap span {
  margin-bottom: 5px;
}

header .logo_wrap .vol_wrap b {
  font-weight: 900;
}

header nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: end;
  height: 100%;
}

header nav ul {
  height: 100%;
  display: flex;
  gap: 30px;
  margin-right: 100px;
  font-weight: 600;
}

header nav ul li {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

header nav ul li.active,
header nav ul li a:hover {
  color: var(--primary-color, #00b08c);
}

header nav ul li::after {
  content: "";
  width: 0;
  height: 4px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary-color, #00b08c);
  transition: all .35s
}

header nav ul li.active::after {
  width: 120px;
}

header .btns {
  display: flex;
  align-items: center;
  gap: 30px;
}

header .btns .gnb {
  width: var(--header-height, 100px);
  height: var(--header-height, 100px);
  position: relative;
  background-color: var(--primary-color, #00b08c);
  border: none;
  outline: none;
}

header .btns .gnb * {
  pointer-events: none;
}

header .btns .gnb span {
  width: 50%;
  height: 6px;
  display: block;
  position: absolute;
  transition: all .35s;
  background-color: var(--primary-color-light);
}

header .btns .gnb .top {
  top: calc(50% - 16px);
  left: 50%;
  transform: translate(-50%, -50%);
}

body:has(.mo_nav.active) header .btns .gnb .top {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

header .btns .gnb .left {
  width: 22%;
  top: 50%;
  left: 47%;
  transform: translate(-100%, -50%);
}

header .btns .gnb .right {
  width: 22%;
  top: 50%;
  right: 47%;
  transform: translate(100%, -50%);
}

body:has(.mo_nav.active) header .btns .gnb .right {
  right: 40%;
  opacity: 0;
}

header .btns .gnb .bot {
  top: calc(50% + 16px);
  left: 50%;
  transform: translate(-50%, -50%);
}

body:has(.mo_nav.active) header .btns .gnb .bot {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

body:has(.mo_nav.active) header nav ul li.active {
  color: #010101; 
}

body:has(.mo_nav.active) header nav ul li::after {
    display: none !important;
}


@media screen and (max-width: 1200px) {
  header nav ul {
    margin-right: 60px;
    gap: 15px;
    font-size: 16px;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --header-height: 80px;
  }

  header .btns {gap: 15px;}
  header .logo_wrap {margin-left: 20px; gap: 10px;}
  header .logo_wrap img {width: 200px;}
  header .logo_wrap .vol_wrap * {font-size: 15px;}
}

@media screen and (max-width: 768px) {
  header nav {
    display: none;
  }
}

@media screen and (max-width: 475px) {
  header .logo_wrap img {
    width: 150px;
  }

  header .logo_wrap {
    flex-direction: column;
    align-items: start;
    gap: 7px;
  }

  header .logo_wrap .vol_wrap {
    flex-direction: row;
    gap: 5px;
  }

  header .logo_wrap .vol_wrap * {
    font-size: 14px;
  }

  header .logo_wrap .vol_wrap span {
    margin-bottom: 0;
  }
}


/* 서브메뉴 */
.nav {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  position: fixed;
  top: -100vh;
  left: 0;
  z-index: 101;
  overflow-y: auto;
  transition: all 0.5s;
}

.nav header {
  box-shadow: none;
  position: static;
}

.nav header .btns {
  width: var(--header-height);
  height: var(--header-height);
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav header .btns .gnb .left,
.nav header .btns .gnb .right {
  display: none;
}

.nav header .btns .gnb {
  width: calc(var(--header-height) - 30px);
  height: calc(var(--header-height) - 30px);
  border-radius: 50%;
}

.nav header .btns .gnb .top {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav header .btns .gnb .bot {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (max-width: 768px) {
  .nav header nav {
    display: flex;
  }

  .nav header {
    height: auto;
    align-items: start;
  }

  .nav header nav ul {
    margin-right: 0;
    font-size: 15px;
  }

  .nav header .logo_wrap {
    margin-left: 0;
  }

  .nav header .header_core {
    padding-top: 20px;
    margin-left: 20px;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 20px;
  }
}

.nav.on {
  top: 0;
}

.nav .nav-inner {
  width: 100%;
  max-width: 1780px;
  padding: 20px;
  box-sizing: border-box;
  margin: 0 auto;
}

.nav .nav-inner .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav .nav-inner .top .logo-wrap {
  display: flex;
  align-items: end;
  gap: 10px;
}

.nav .nav-inner .top .logo-wrap a {
  font-size: 36px;
  font-weight: 900;
  color: #000;
}

.nav .nav-inner .top .logo-wrap p {
  font-size: 16px;
  font-weight: 700;
  transform: translateY(-3px);
}

.nav .nav-inner .top .lnb-wrap {
  display: flex;
  align-items: center;
  gap: 100px;
}

.nav .nav-inner .top .lnb-wrap .lnb a {
  font-size: 16px;
  color: #000;
  font-weight: 700;
}

.nav .nav-inner .top .lnb-wrap .lnb a:nth-child(1)::after {
  content: 'ㅣ';
  margin: 0 10px;
  font-weight: 400;
}

.nav .nav-inner .top .lnb-wrap button {
  width: 66px;
  height: 66px;
  background: var(--primary-color);
  border: none;
  position: relative;
  padding: 0;
  border-radius: 50%;
}

.nav .nav-inner .top .lnb-wrap button span {
  height: 3px;
  width: 35px;
  background-color: #fff;
  display: block;
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav .nav-inner .top .lnb-wrap button span:nth-child(1) {
  transform: rotate(45deg) translate(0%, 0%);
}

.nav .nav-inner .top .lnb-wrap button span:nth-child(2) {
  transform: rotate(-45deg) translate(0%, 0%);
}

.nav .nav-inner .middle {
  width: 100%;
  max-width: 1480px;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  align-items: start;
  gap: 70px;
}

.nav .nav-inner .middle .list {
  width: 25%;
}

.nav .nav-inner .middle ul {
  width: 100%;
  border-top: 1px solid var(--primary-color)42;
  padding-top: 20px;
  margin-top: 50px;
}

.nav .nav-inner .middle ul li {
  margin-bottom: 30px;
}

.nav .nav-inner .middle ul li:last-child {
  margin-bottom: 0;
}

.nav .nav-inner .middle ul li.title h2 {
  font-size: 32px;
  color: var(--primary-color);
  font-weight: 700;
  line-height: 1.3;
}

.nav .nav-inner .middle ul li.title p {
  color: var(--primary-color);
}

.nav .nav-inner .middle ul li a {
  font-size: 15px;
  color: #0A0A0A;
  transition: 0.1s;
  word-break: keep-all;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  display: inline-block;
  display: -webkit-box !important;
  /* -webkit-line-clamp: 4; */
  -webkit-box-orient: vertical;
}

.nav .nav-inner .middle ul li a b {
  font-weight: 700;
  display: block;
}

.nav .nav-inner .middle ul li a:hover {
  color: var(--primary-color);
}

@media screen and (max-width: 768px) {
  .nav .nav-inner .middle ul:first-of-type {
    border-top: 1px solid #ddd;
    margin-top: 0;
  }
  .nav .nav-inner .middle ul {
    margin-top: 30px;
  }
}

/* 푸터 */
.footer {
  background-color: #1B1B1B;
}

.footer .footer-inner {
  width: 100%;
  max-width: 1650px;
  padding: 30px 20px;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer .footer-inner .left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.footer .footer-inner .left .logo {
  width: 250px;
}

.footer .footer-inner .left .logo img {
  width: 100%;
  display: block;
}

.footer .footer-inner .left .text {
  transform: translateY(5px);
}

.footer .footer-inner .left .text p {
  font-size: 13px;
  color: #929292;
  margin-bottom: 5px;
}

.footer .footer-inner .left .text p:nth-child(2) {
  margin-bottom: 0;
}

.footer .footer-inner .right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.footer .footer-inner .right p {
  font-size: 13px;
  color: #929292;
  text-align: end;
}

.footer .footer-inner .right .btn-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer .footer-inner .right .btn-wrap a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #303030;
  width: 50px;
  height: 50px;
  transition: 0.2s;
}

.footer .footer-inner .right .btn-wrap a img {
  width: fit-content;
  display: block;
}

.footer .footer-inner .right .btn-wrap a:hover {
  background-color: #5e5e5e;
}

/*  플로팅 */
.floating {
  position: fixed;
  top: 50%;
  right: 20px;
  z-index: 98;
  display: none;
}

.floating a {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  background-color: #E9E9E9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: 0.2s;
  cursor: pointer;
  margin-bottom: 5px;
}

.floating a:hover {
  background-color: #34516A;
  color: #fff;
}

.floating a:hover img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);

}

.floating .btn-top {
  background-color: #34516A;
  color: #fff;
  line-height: 1.2;
}

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

  /* 푸터 */
  .footer .footer-inner .left {
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }

  .footer .footer-inner .right {
    flex-direction: column;
    gap: 10px;
    align-items: end;
  }
}

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

  /* 서브메뉴 */
  .nav .nav-inner .middle {
    flex-wrap: wrap;
    gap: 30px;
  }

  .nav .nav-inner .middle .list {
    width: calc(50% - 15px);
  }
}


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

  /* 서브메뉴 */
  .nav .nav-inner .top {
    flex-direction: column;
    align-items: start;
    position: relative;
  }

  .nav .nav-inner .top .lnb-wrap {
    margin-top: 10px;
  }

  .nav .nav-inner .top .lnb-wrap button {
    position: absolute;
    top: 40px;
    right: 0px;
    transform: translate(0%, -50%);
  }

  /* 푸터 */
  .footer .footer-inner {
    flex-direction: column;
  }

  .footer .footer-inner .left {
    flex-direction: column;
    align-items: center;
  }

  .footer .footer-inner p {
    text-align: center;
    text-wrap: balance;
  }

  .footer .footer-inner .right {
    flex-direction: column;
    align-items: center;
  }

  .footer .footer-inner .right p {
    text-align: center;
  }

  /* 플로팅 */
  .floating {
    top: unset;
    bottom: 20px;
    right: 10px;
  }
}

@media screen and (max-width: 576px) {
  body {
    font-size: 15px;
    line-height: 1.4;
  }

  /* 서브메뉴 */
  .nav .nav-inner .top .logo-wrap {
    flex-direction: column;
    align-items: start;
    gap: 5px;
  }

  .nav .nav-inner .top .logo-wrap a {
    font-size: 25px;
  }

  .nav .nav-inner .top .logo-wrap p {
    font-size: 12px;
  }

  .nav .nav-inner .top .lnb-wrap button {
    width: 50px;
    height: 50px;
    top: 20px;
  }

  .nav .nav-inner .top .lnb-wrap button span {
    width: 25px;
  }

  .nav .nav-inner .top .lnb-wrap .lnb a {
    font-size: 14px;
  }

  .nav .nav-inner .middle {
    gap: 0;
  }

  .nav .nav-inner .middle .list {
    width: 100%;
  }

  .nav .nav-inner .middle ul li.title h2 {
    font-size: 22px;
  }

  .nav .nav-inner .middle ul li {
    margin-bottom: 15px;
  }

  /* 플로팅 */
  .floating a {
    width: 45px;
    height: 45px;
    font-size: 10px;
  }
}