:root {
    /* gap */
    --side-gap-xl: 30px;
    --side-gap-l: 30px;
    --side-gap-m: 20px;
    --side-gap-s: 10px;
}

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

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

.pc {
    display: block;
}

.mo {
    display: none !important;
}

.tablet {
    display: block;
}

/* color */
.color-black {
    color: #000 !important;
}

.color-white {
    color: #fff !important;
}

.color-green {
    color: #2e815b !important;
}

.color-light-pink {
    color: #f29b76 !important;
}

.color-yellow {
    color: #f5a200 !important;
}

/* color */
.bg-black {
    background-color: #000 !important;
}

.bg-white {
    background-color: #fff !important;
}

.bg-light-pink {
    background-color: #f29b76 !important;
}

.bg-light-pink02 {
    background-color: #fcf0ec !important;
}

.bg-yellow {
    background-color: #f5a200 !important;
}

.bg-light-yellow {
    background-color: #fcf2df !important;
}

/* flex */
.d-flex {
    display: flex !important;
}

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

.align-start {
    align-items: start !important;
}

.align-end {
    align-items: end !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-around {
    justify-content: space-around !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-start {
    justify-content: start !important;
}

.justify-end {
    justify-content: end !important;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: end;
}

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

.flex-column {
    flex-direction: column;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

.flex-row {
    flex-direction: row !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

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

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

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

.hidden {
    visibility: hidden !important;
}

.opacity-0 {
    opacity: 0 !important;
}

/* overflow-hidden */
.overflow-hidden {
    overflow: hidden;
}

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

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

.postion-unset {
    position: unset !important;
}

.position-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

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

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

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

.font-bold {
    font-weight: bold !important;
}

.font-15 {
    font-size: 15px !important;
}

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

.font-22 {
    font-size: 22px !important;
}

/* text-break */
.break-all {
    word-break: break-all !important;
}

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

.text-balance {
    text-wrap: balance !important;
}

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

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

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

/* text-truncate */
.text-truncate-1 {
    overflow: hidden;
    display: inline-block !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text-truncate-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.text-truncate-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.text-truncate-5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    display: -webkit-box !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

/* border */
.border-none {
    border: none !important;
}

.border-black {
    border: 2px solid #000;
}

.border-gray {
    border: 2px solid #8b8b8b;
}

.border-bottom {
    border-bottom: 1px solid #cdcdcd;
}

.border-left {
    border-left: 1px solid #cdcdcd;
}

.border-right {
    border-right: 1px solid #cdcdcd;
}

.border {
    width: 100%;
    height: 2px;
    background-color: #ccc;
    margin: 30px 0;
}

.rounded-none {
    border-radius: 0 !important;
}

.rounded-1 {
    border-radius: 1vw !important;
}

.rounded-2 {
    border-radius: 2vw !important;
}

.rounded-3 {
    border-radius: 3vw !important;
}

.rounded-4 {
    border-radius: 4vw !important;
}

.rounded-5 {
    border-radius: 5vw !important;
}

/* width */
.w-fit {
    width: fit-content !important;
}

.w-auto {
    width: auto !important;
}

.w-25 {
    width: 25% !important;
}

.w-33 {
    width: 33.33% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

/* height */
.h-fit {
    height: fit-content !important;
}

.h-auto {
    height: auto !important;
}

.h-50 {
    height: 50% !important;
}

.h-100 {
    height: 100% !important;
}

/* margin */
.ml-none {
    margin-left: 0 !important;
}

.mr-none {
    margin-right: 0 !important;
}

.mt-none {
    margin-top: 0 !important;
}

.mb-none {
    margin-bottom: 0 !important;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.mx-l {
    margin-left: var(--side-gap-l) !important;
    margin-right: var(--side-gap-l) !important;
}

.mx-m {
    margin-left: var(--side-gap-m) !important;
    margin-right: var(--side-gap-m) !important;
}

.mx-s {
    margin-left: var(--side-gap-s) !important;
    margin-right: var(--side-gap-s) !important;
}

.my-l {
    margin-top: var(--side-gap-l) !important;
    margin-bottom: var(--side-gap-l) !important;
}

.my-m {
    margin-top: var(--side-gap-m) !important;
    margin-bottom: var(--side-gap-m) !important;
}

.my-s {
    margin-top: var(--side-gap-s) !important;
    margin-bottom: var(--side-gap-s) !important;
}

/* padding */
.p-l {
    padding: var(--side-gap-l) !important;
}

.p-m {
    padding: var(--side-gap-m) !important;
}

.p-s {
    padding: var(--side-gap-s) !important;
}

.pl-none {
    padding-left: 0 !important;
}

.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-none {
    padding-right: 0 !important;
}

.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-none {
    padding-top: 0 !important;
}

.pt-l {
    padding-top: var(--side-gap-l);
}

.pt-m {
    padding-top: var(--side-gap-m);
}

.pt-s {
    padding-top: var(--side-gap-s);
}

.pb-none {
    padding-bottom: 0 !important;
}

.pb-l {
    padding-bottom: var(--side-gap-l);
}

.pb-m {
    padding-bottom: var(--side-gap-m);
}

.pb-s {
    padding-bottom: var(--side-gap-s);
}

.px-l {
    padding-left: var(--side-gap-l);
    padding-right: var(--side-gap-l);
}

.px-m {
    padding-left: var(--side-gap-m);
    padding-right: var(--side-gap-m);
}

.px-s {
    padding-left: var(--side-gap-s);
    padding-right: var(--side-gap-s);
}

.py-l {
    padding-top: var(--side-gap-l);
    padding-bottom: var(--side-gap-l);
}

.py-m {
    padding-top: var(--side-gap-m);
    padding-bottom: var(--side-gap-m);
}

.py-s {
    padding-top: var(--side-gap-s);
    padding-bottom: var(--side-gap-s);
}

[class*=indent-] {
    display: flex;
    gap: 3px;
}

.data-txt {
    display: flex;
    justify-content: start;
    align-items: flex-start;
    gap: 5px;
}

.data-txt::before {
    content: attr(data-txt);
    white-space: nowrap;
}

.indent-dot,
.indent-dash,
.indent-ast,
.indent-ast02 {
    display: flex;
    gap: 5px;
}

.indent-dot::before {
    content: "•";
}

.indent-ast::before {
    content: "*";
}

.indent-ast02::before {
    content: "**";
}

.indent-dash::before {
    content: '-';
}

@media screen and (max-width: 1024px) {
    .flex-column-lg {
        flex-direction: column !important;
    }
}

/* tablet */
@media screen and (max-width: 769px) {
    .pc {
        display: none !important;
    }

    .mo {
        display: block !important;
    }

    .d-block-md {
        display: block !important;
    }

    /* flex */
    .d-gird-md {
        display: grid !important;
    }

    .d-flex-md {
        display: flex !important;
    }

    .align-centter-md {
        align-items: center !important;
    }

    .align-start-md {
        align-items: start !important;
    }

    .align-end-md {
        align-items: end !important;
    }

    .justify-center-md {
        justify-content: center !important;
    }

    .jutify-between-md {
        justify-content: space-between !important;
    }

    .flex-column-md {
        flex-direction: column !important;
    }

    .flex-wrap-md {
        flex-wrap: wrap !important;
    }

    .flex-column-reverse-md {
        flex-direction: column-reverse !important;
    }

    /* width */
    .w-auto-md {
        width: auto !important;
    }

    .w-50-md {
        width: 50% !important;
    }

    .w-60-md {
        width: 60% !important;
    }

    .w-75-md {
        width: 75% !important;
    }

    .w-100-md {
        width: 100% !important;
    }

    /* height */
    .h-auto-md {
        height: auto !important;
    }

    .mr-none-md {
        margin-right: 0 !important;
    }

    .ml-none-md {
        margin-left: 0 !important;
    }

    .mb-none-md {
        margin-bottom: 0 !important;
    }

    .mb-s-md {
        margin-bottom: var(--side-gap-s) !important;
    }

    .mb-m-md {
        margin-bottom: var(--side-gap-m) !important;
    }

    .mx-auto-md {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .ml-auto-md {
        margin-left: auto !important;
    }

    .mt-s-md {
        margin-top: var(--side-gap-s) !important;
    }

    .my-xl {
        margin-top: var(--side-gap-xl) !important;
        margin-bottom: var(--side-gap-xl) !important;
    }

    .mt-none-md {
        margin-top: 0 !important;
    }

    .my-l-md {
        margin-top: var(--side-gap-l) !important;
        margin-bottom: var(--side-gap-l) !important;
    }

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

/* mobile */
@media screen and (max-width: 576px) {
    .pc {
        display: none !important;
    }

    .mo {
        display: block !important;
    }

    .tablet {
        display: none !important;
    }

    /* flex */
    .d-flex-sm {
        display: flex !important;
    }

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

    .align-start-sm {
        align-items: start !important;
    }

    .align-end-sm {
        align-items: end !important;
    }

    .justify-center-sm {
        justify-content: center !important;
    }

    .jutify-between-sm {
        justify-content: space-between !important;
    }

    .flex-column-sm {
        flex-direction: column !important;
    }

    .flex-column-reverse-sm {
        flex-direction: column-reverse !important;
    }

    .flex-wrap-sm {
        flex-wrap: wrap !important;
    }

    /* width */
    .w-auto-sm {
        width: auto !important;
    }

    .w-50-sm {
        width: 50% !important;
    }

    .w-75-sm {
        width: 75% !important;
    }

    .w-80-sm {
        width: 80% !important;
    }

    .w-100-sm {
        width: 100% !important;
    }

    /* text */
    .text-center-sm {
        text-align: center !important;
    }

    /* text */
    .mr-none-sm {
        margin-right: 0 !important;
    }

    .mb-none-sm {
        margin-bottom: 0 !important;
    }

    .ml-s-sm {
        margin-left: var(--side-gap-s) !important;
    }

    .mb-s-sm {
        margin-bottom: var(--side-gap-s) !important;
    }

    .mb-m-sm {
        margin-bottom: var(--side-gap-m) !important;
    }

    /* font */
    .font-22 {
        font-size: 20px !important;
    }
}


/* 
  변수 영역

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

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

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

  --tb-gap-xl: 120px; /* 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: #faeb2c;
  --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: var(--theme-color);
  --primary-color-light: #00326d;
  --secondary-color: #0075a9;
  --secondary-color-light: #00a0e9;
  --secondary-color-deep: #0075a9; 
  --point-color: #c9a070;
  --point-color-light: #c9a070;
  --text-base: #1d1d1d;
  
  /* extended color */
  --bg-color: #fff;
  --bg-sub: #fbd17b;
  --gradient-base: linear-gradient(271.29deg, var(--primary-color) 7.01%, var(--secondary-color) 83.94%);

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

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

/* 
  rem 단위 설정

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

html, body {font-size: 18px;}

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

body.lock {overflow: hidden !important;}

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

/* layout */
.flex {display: flex; justify-content: start; align-items: start;}
.flex.a-center {align-items: center;}
.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;}

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

.block {display: block;}

.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;}

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

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

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

@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);}
}

/* ::-webkit-scrollbar {
  width: 16px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background-color: #fff;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.7);
  background-clip: padding-box;
  border: 3px solid transparent;
}
.table_overflow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-button {
  display: none;
} */

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 */
.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) !important;}
.mb-l {margin-bottom: var(--tb-gap-l) !important;}
.mb-m {margin-bottom: var(--tb-gap-m) !important;}
.mb-s {margin-bottom: var(--tb-gap-s) !important;}
.mb-xs {margin-bottom: var(--tb-gap-xs) !important;}
.mb-0 {margin-bottom: 0 !important;}
/* 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;}

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

/* 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-txt {background-color: var(--text-base) !important;}
.bg-none {background-color: transparent !important;}
.bg-gray {background-color: #f2f2f2 !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;
}

.btn-xs,
.tag-xs {
  padding: 2px 10px;
  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);}

.no-bf::before,
.no-af::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 {
  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;
}

.title-ico {
  width: auto;
  height: 1.5em;
}

.max10 {max-width: 10%;}
.max15 {max-width: 15%;}
.max20 {max-width: 20%;}
.max25 {max-width: 25%;}
.max30 {max-width: 30%;}
.max35 {max-width: 35%;}
.max40 {max-width: 40%;}
.max45 {max-width: 45%;}
.max50 {max-width: 50%;}
.max55 {max-width: 55%;}
.max60 {max-width: 60%;}
.max65 {max-width: 65%;}
.max70 {max-width: 70%;}
.max75 {max-width: 75%;}
.max80 {max-width: 80%;}
.max85 {max-width: 85%;}
.max90 {max-width: 90%;}
.max95 {max-width: 95%;}
.max100 {max-width: 100%;}

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

.indent-num {display: flex;}
.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-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 !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%;}
}

@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%;}
}

@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(--secondary-color);}
.txt-w {color: #fff;}
.txt-base {color: var(--text-base);}
.txt-gray {color: #69696a;}
.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 50%, var(--neon-yellow) 51%, 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);}

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