/* 
  변수 영역

  페이지 공통 변수를 관리합니다.
  공통레이아웃에 사용될 크기, 혹은 간격, 컬러가이드 등이 포함됩니다.
*/

: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: #03b085;
  --primary-color-light: #03b085;
  --primary-color-deep: #2a7d59;
  --secondary-color: #6015f8;
  --secondary-color-light: #8844f0;
  --secondary-color-deep: #009e96; 
  --point-color: #03b085;
  --point-color-light: #03b085;
  --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, #8f73ff, #c4b5ff); */
  --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: 20px;
  --tb-gap-s: 15px;
  --tb-gap-xs: 10px;
  }
}

* {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;}

.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-"]:not([class*="br"]) {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-"]:not([class*="br"]) {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-"]:not([class*="br"]) {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-"]:not([class*="br"]) {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-"]:not([class*="br"]) {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-"]:not([class*="br"]) {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-"]:not([class*="br"]) {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-"]:not([class*="br"]) {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 {border-collapse: collapse;}
table .borderless {border: none !important;}

.table-layout-basic,
.table-layout-basic th,
.table-layout-basic td {border: 1px solid #ccc;}
.table-layout-basic th {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);
}

/* 
  버튼 및 태그 서식을 지정합니다.
  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: #f2f2f2 !important;}
.bg-w {background-color: #fff !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,
.link:hover {
  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;}
.br1024 {display: none;}
.br768 {display: none;}
.br640 {display: none;}
.br475 {display: none;}
.br375 {display: none;}
.br320 {display: none;}


@media screen and (max-width: 1200px) {
  .m-break1200 {margin: 0;}
  .p-break1200 {padding: 0;}
  .br1200 {display: block;}
  .br1200-end {display: none;}
  .img-break1200 img {min-width: auto !important;}
  .flex-col-1200 {flex-direction: column !important;}
  .flex-col-1200-reverse {flex-direction: column-reverse !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;}
  .br1024-end {display: none;}
  .img-break1024 img {min-width: auto !important;}
  .flex-col-1024 {flex-direction: column !important;}
  .flex-col-1024-reverse {flex-direction: column-reverse !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;}
  .br768-end {display: none;}
  .img-break768 img {min-width: auto !important;}
  .flex-col-768 {flex-direction: column !important;}
  .flex-col-768-reverse {flex-direction: column-reverse !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%;}
}

@media screen and (max-width: 640px) {
  .m-break640 {margin: 0;}
  .p-break640 {padding: 0;}
  .br640 {display: block;}
  .br640-end {display: none;}
  .img-break640 img {min-width: auto !important;}
  .flex-col-640 {flex-direction: column !important;}
  .flex-col-640-reverse {flex-direction: column-reverse !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;}
  .br475-end {display: none;}
  .img-break475 img {min-width: auto !important;}
  .flex-col-475 {flex-direction: column !important;}
  .flex-col-475-reverse {flex-direction: column-reverse !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%;}
}

@media screen and (max-width: 375px) {
  .m-break375 {margin: 0;}
  .p-break375 {padding: 0;}
  .br375 {display: block;}
  .br375-end {display: none;}
  .img-break375 img {min-width: auto !important;}
  .flex-col-375 {flex-direction: column !important;}
  .flex-col-375-reverse {flex-direction: column-reverse !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;}
  .br320-end {display: none;}
  .img-break320 img {min-width: auto !important;}
  .flex-col-320 {margin: auto; flex-direction: column !important;}
  .flex-col-320-reverse {flex-direction: column-reverse !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;}

@media screen and (max-width: 1200px) {
  .txt-left-1200 {text-align: left !important;} 
  .txt-right-1200 {text-align: right !important;}
  .txt-justify-1200 {text-align: justify !important;}
  .txt-center-1200 {text-align: center !important;}
}

@media screen and (max-width: 1024px) {
  .txt-left-1024 {text-align: left !important;} 
  .txt-right-1024 {text-align: right !important;}
  .txt-justify-1024 {text-align: justify !important;}
  .txt-center-1024 {text-align: center !important;}
}

@media screen and (max-width: 768px) {
  .txt-left-768 {text-align: left !important;} 
  .txt-right-768 {text-align: right !important;}
  .txt-justify-768 {text-align: justify !important;}
  .txt-center-768 {text-align: center !important;}
}

@media screen and (max-width: 640px) {
  .txt-left-640 {text-align: left !important;} 
  .txt-right-640 {text-align: right !important;}
  .txt-justify-640 {text-align: justify !important;}
  .txt-center-640 {text-align: center !important;}
}

@media screen and (max-width: 475px) {
  .txt-left-475 {text-align: left !important;} 
  .txt-right-475 {text-align: right !important;}
  .txt-justify-475 {text-align: justify !important;}
  .txt-center-475 {text-align: center !important;}
}

@media screen and (max-width: 375px) {
  .txt-left-375 {text-align: left !important;} 
  .txt-right-375 {text-align: right !important;}
  .txt-justify-375 {text-align: justify !important;}
  .txt-center-375 {text-align: center !important;}
}

@media screen and (max-width: 360px) {
  .txt-left-360 {text-align: left !important;} 
  .txt-right-360 {text-align: right !important;}
  .txt-justify-360 {text-align: justify !important;}
  .txt-center-360 {text-align: center !important;}
}

@media screen and (max-width: 320px) {
  .txt-left-320 {text-align: left !important;} 
  .txt-right-320 {text-align: right !important;}
  .txt-justify-320 {text-align: justify !important;}
  .txt-center-320 {text-align: center !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;}