@charset "UTF-8";
/* 스크린 리더에서도 숨김 */
.hidden {
  display: none !important;
}

body {
  overscroll-behavior: contain;
}

button , a , input {
  -webkit-tap-highlight-color: transparent; /* iOS & Android */
}

input, textarea, select, button {
  -webkit-appearance: none; /* Safari 기본 스타일 제거 */
  appearance: none;
  font-family: 'Pretendard Variable', sans-serif !important;
}

/* 스크린 리더에서만 읽힘 */
.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/* 키보드로 포커스 받았을때 보이기 */
.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}

/* 스킵 네비게이션 */
.skip-nav {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 9999;
  width: 100%;
}

.skip-nav .skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0 0 4px 0;
  transition: top 0.3s ease;
}

.skip-nav .skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.skip-nav .skip-link:hover {
  background: #333;
}

/* 포커스 표시 개선 */
*:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* 버튼과 링크의 포커스 표시 */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* 포커스 표시 숨김 (마우스 사용자용) */
*:focus:not(:focus-visible) {
  outline: none;
}

/* 키보드 포커스만 표시 */
*:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* float */
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

/* display none / block */
.d-none {
  display: none;
}

.d-block {
  display: block;
}

@media screen and (max-width: 1599px) {
  .d-tb-block {
    display: block;
  }
  .d-tb-none {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .d-mo-block {
    display: block;
  }
  .d-mo-none {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .d-w500-block {
    display: block;
  }
  .d-w500-none {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .d-mini-block {
    display: block;
  }
  .d-mini-none {
    display: none;
  }
}
/* grid */
:root {
  --gutter: 20px;
  --col-base: 12;
}

@media (max-width: 1599px) {
  :root {
    --gutter: 16px;
    --col-base: 10;
  }
}
@media (max-width: 1023px) {
  :root {
    --gutter: 16px;
    --col-base: 8;
  }
}
@media (max-width: 767px) {
  :root {
    --gutter: 12px;
    --col-base: 4;
  }
}
.container {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding-left: calc(var(--gutter) / 2);
  padding-right: calc(var(--gutter) / 2);
}

@media screen and (max-width: 1599px) {
  .container {
    max-width:100%;
    padding-left: calc(var(--gutter) * 3 - 8px);
    padding-right: calc(var(--gutter) * 3 - 8px);
  }
}
@media screen and (max-width: 1023px) {
  .container {
    padding-left: calc(var(--gutter) * 2);
    padding-right: calc(var(--gutter) * 2);
  }
}
@media screen and (max-width: 767px) {
  .container {
    padding-left: calc(var(--gutter) * 2 - 4px);
    padding-right: calc(var(--gutter) * 2 - 4px);
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-left: calc(var(--gutter) / -2);
  margin-right: calc(var(--gutter) / -2);
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  padding-left: calc(var(--gutter) / 2);
  padding-right: calc(var(--gutter) / 2);
  box-sizing: border-box;
  margin-bottom: var(--gutter);
  background-color: #f5f5f5;
  text-align: center;
  min-height: 50px;
}

.col > div {
  height: 100%;
  box-sizing: border-box;
}

/* col-1 ~ col-12: 12-column 기준 기본 정의 */
.col-1 {
  flex: 0 0 8.3333%;
  max-width: 8.3333%;
}

.col-2 {
  flex: 1 1 16.6667%;
  max-width: 16.6667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

.col-5 {
  flex: 0 0 41.6667%;
  max-width: 41.6667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.3333%;
  max-width: 58.3333%;
}

.col-8 {
  flex: 0 0 66.6667%;
  max-width: 66.6667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
}

.col-11 {
  flex: 0 0 91.6667%;
  max-width: 91.6667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* 10-column 기준 재정의 */
@media (max-width: 1599px) {
  .col-lg-1 {
    flex: 0 0 10%;
    max-width: 10%;
  }
  .col-lg-2 {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .col-lg-3 {
    flex: 0 0 30%;
    max-width: 30%;
  }
  .col-lg-4 {
    flex: 0 0 40%;
    max-width: 40%;
  }
  .col-lg-5 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-6 {
    flex: 0 0 60%;
    max-width: 60%;
  }
  .col-lg-7 {
    flex: 0 0 70%;
    max-width: 70%;
  }
  .col-lg-8 {
    flex: 0 0 80%;
    max-width: 80%;
  }
  .col-lg-9 {
    flex: 0 0 90%;
    max-width: 90%;
  }
  .col-lg-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* 8-column 기준 재정의 */
@media (max-width: 1023px) {
  .col-md-1 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
  .col-md-2 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-3 {
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }
  .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-5 {
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }
  .col-md-6 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-7 {
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }
  .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* 4-column 기준 재정의 */
@media (max-width: 767px) {
  .col-sm-1 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-3 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* flex */
.flex-cont {
  display: flex;
}

.flex-box {
  display: flex;
  flex-flow: wrap row;
  justify-content: flex-start;
  gap: 20px;
}

.gap-12 {
  gap: 12px;
}

.gap-20 {
  gap: 20px;
}

.gap-40 {
  gap: 40px;
}

@media screen and (max-width: 1599px) {
  .gap-tb-12 {
    gap: 12px;
  }
}
@media screen and (max-width: 1023px) {
  .gap-mo-16 {
    gap: 16px;
  }
}
@media screen and (max-width: 767px) {
  .gap-0-mo {
    gap: 0;
  }
  .gap-mini-20 {
    gap: 20px;
  }
}
.between {
  justify-content: space-between !important;
}

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

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

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

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

.self-start {
  align-self: flex-start !important;
}

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

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

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

/* display */
.dp-n {
  display: none;
}

.dp-b {
  display: block;
}

.dp-ib {
  display: inline-block;
}

/* position */
.po-rl {
  position: relative;
}

.po-ab {
  position: absolute;
}

.po-fix {
  position: fixed;
}

.po-st {
  position: static;
}

/* text-align */
.t-lt,
.txt-lt,
.t-left,
.txt-left {
  text-align: left !important;
}

.t-ct,
.txt-ct,
.t-center,
.txt-center {
  text-align: center !important;
}

.t-rt,
.txt-rt,
.t-right,
.txt-right {
  text-align: right !important;
}

/* vertical-align */
.va-ba {
  vertical-align: baseline !important;
}

.va-t {
  vertical-align: top !important;
}

.va-b {
  vertical-align: bottom !important;
}

.va-m {
  vertical-align: middle !important;
}

.va-s {
  vertical-align: sub !important;
}

.va-sp {
  vertical-align: super !important;
}

.va-tt {
  vertical-align: text-top !important;
}

.va-tb {
  vertical-align: text-bottom !important;
}

/* text-decoration */
.txt-line-top {
  text-decoration: overline;
}

.txt-line-center {
  text-decoration: line-through;
}

.txt-line-bottom {
  text-decoration: underline;
}

/* font-style */
.fst-no {
  font-style: normal;
}

.fst-it {
  font-style: italic;
}

.fst-ob {
  font-style: oblique;
}

/* font-weight */
.fw-900 {
  font-weight: 900 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-300 {
  font-weight: 300 !important;
}

.fw-200 {
  font-weight: 200 !important;
}

.fw-100 {
  font-weight: 100 !important;
}

/* font-style */
.fs-display-60 {
  font-size: 6rem;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fs-display-42 {
  font-size: 4.2rem;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fs-headline-40 {
  font-size: 4rem;
  line-height: 1.36;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fs-headline-40-type01 {
  font-size: 4rem;
  line-height: 1.36;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fs-headline-40-type02 {
  font-size: 4rem;
  line-height: 1.36;
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media screen and (max-width: 1599px) {
  .fs-headline-40-type01 {
    font-size: 3.2rem;
    /* padding-left:4px; */
    /* padding-right:4px; */
  }
  .fs-headline-40-type02 {
    font-size: 3.2rem;
    /* padding-left:4px; */
    /* padding-right:4px; */
  }
}
@media screen and (max-width: 1023px) {
  .fs-headline-40-type01 {
    font-size: 2.6rem;
  }
  .fs-headline-40-type02 {
    font-size: 2.8rem;
  }
}
.fs-headline-32 {
  font-size: 3.2rem;
  line-height: 1.36;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fs-title-30 {
  font-size: 3rem;
  line-height: 1.44;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fs-title-28 {
  font-size: 2.8rem;
  line-height: 1.44;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fs-title-24 {
  font-size: 2.4rem;
  line-height: 1.44;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fs-title-22 {
  font-size: 2.2rem;
  line-height: 1.44;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fs-title-22-sb {
  font-size: 2.2rem;
  line-height: 1.44;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fs-title-20-media {
  font-size: 2.2rem;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fs-title-20 {
  font-size: 2rem;
  line-height: 1.44;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fs-title-20-sb {
  font-size: 2rem;
  line-height: 1.44;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fs-title-18 {
  font-size: 1.8rem;
  line-height: 1.44;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fs-title-18-sb {
  font-size: 1.8rem;
  line-height: 1.44;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fs-txt-20-sb {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fs-txt-20-md {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.fs-txt-18-sb {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fs-txt-18-md {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.fs-txt-18-media {
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.fs-txt-16-sb {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fs-txt-16-md {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.fs-caption-14 {
  font-size: 1.4rem;
  line-height: 1.44;
  font-weight: 700;
  letter-spacing: 0;
}

.fs-caption-14-sb {
  font-size: 1.4rem;
  line-height: 1.44;
  font-weight: 600;
  letter-spacing: 0;
}

.fs-caption-14-md {
  font-size: 1.4rem;
  line-height: 1.44;
  font-weight: 500;
  letter-spacing: 0;
}

@media screen and (max-width: 1599px) {
  .fs-tb-display-42 {
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.84px;
  }
  .fs-tb-headline-32 {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.36;
    letter-spacing: -0.64px;
  }
  .fs-tb-headline-26 {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.36;
    letter-spacing: -0.52px;
  }
  .fs-tb-title-24 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.44;
    letter-spacing: -0.48px;
  }
  .fs-tb-title-22 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.44;
    letter-spacing: -0.44px;
  }
  .fs-tb-title-20 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.44;
    letter-spacing: -0.4px;
  }
  .fs-tb-title-18 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.44;
    letter-spacing: -0.36px;
  }
  .fs-tb-txt-18-sb {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.18px;
  }
  .fs-tb-txt-18-md {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.18px;
  }
  .fs-tb-txt-16-sb {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.16px;
  }
  .fs-tb-txt-16-md {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.16px;
  }
  .fs-tb-txt-15-sb {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.15px;
  }
  .fs-tb-txt-14-md {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.14px;
  }
  .fs-tb-caption-14-md {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.44;
  }
}
@media screen and (max-width: 1023px) {
  .fs-mo-display-32 {
    font-size: 3.2rem;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .fs-mo-headline-28 {
    font-size: 2.8rem;
    line-height: 1.36;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .fs-mo-headline-26 {
    font-size: 2.6rem;
    line-height: 1.36;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .fs-mo-headline-24 {
    font-size: 2.4rem;
    line-height: 1.36;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .fs-mo-headline-22 {
    font-size: 2.2rem;
    line-height: 1.36;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .fs-mo-title-20 {
    font-size: 2rem;
    line-height: 1.44;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .fs-mo-title-20-sb {
    font-size: 2rem;
    line-height: 1.44;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .fs-mo-title-18 {
    font-size: 1.8rem;
    line-height: 1.44;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .fs-mo-title-18-media {
    font-size: 2rem;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .fs-mo-title-18-sb {
    font-size: 1.8rem;
    line-height: 1.44;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .fs-mo-title-17 {
    font-size: 1.7rem;
    line-height: 1.44;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .fs-mo-title-15 {
    font-size: 1.5rem;
    line-height: 1.44;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .fs-mo-txt-16-sb {
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .fs-mo-txt-16-md {
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .fs-mo-txt-15-sb {
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .fs-mo-txt-15-md {
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .fs-mo-txt-14-sb {
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .fs-mo-txt-14 {
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .fs-mo-txt-14-md {
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .fs-mo-txt-13-sb {
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .fs-mo-txt-12-sb {
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .fs-mo-txt-12-md {
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
}
@media screen and (max-width: 767px) {
  .fs-title-18-mini {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.44;
    letter-spacing: -0.18px;
  }
}
/* font-color */
.fc-primary {
  color: var(--primary);
}

.fc-green {
  color: var(--green);
}

.fc-red {
  color: var(--red);
}

.fc-blue {
  color: var(--blue);
}

.fc-white {
  color: var(--white100);
}

.fc-white40 {
  color: var(--white40);
}

.fc-black5 {
  color: var(--black5);
}

.fc-black10 {
  color: var(--black10);
}

.fc-black15 {
  color: var(--black15);
}

.fc-black20 {
  color: var(--black20);
}

.fc-black25 {
  color: var(--black25);
}

.fc-black30 {
  color: var(--black30);
}

.fc-black35 {
  color: var(--black35);
}

.fc-black40 {
  color: var(--black40);
}

.fc-black45 {
  color: var(--black45);
}

.fc-black50 {
  color: var(--black50);
}

.fc-black55 {
  color: var(--black55);
}

.fc-black60 {
  color: var(--black60);
}

.fc-black65 {
  color: var(--black65);
}

.fc-black70 {
  color: var(--black70);
}

.fc-black80 {
  color: var(--black80);
}

.fc-black85 {
  color: var(--black85);
}

.fc-black90 {
  color: var(--black90);
}

.fc-black100 {
  color: var(--black100);
}

/* background-color */
.bg-primary {
  background-color: var(--primary) !important;
}

.bg-green {
  background-color: var(--green) !important;
}

.bg-red {
  background-color: var(--red) !important;
}

.bg-blue {
  background-color: var(--blue) !important;
}

.bg-white {
  background-color: var(--white100) !important;
}

.bg-white40 {
  background-color: var(--white40) !important;
}

.bg-black5 {
  background-color: var(--black5) !important;
}

.bg-black10 {
  background-color: var(--black10) !important;
}

.bg-black15 {
  background-color: var(--black15) !important;
}

.bg-black20 {
  background-color: var(--black20) !important;
}

.bg-black25 {
  background-color: var(--black25) !important;
}

.bg-black30 {
  background-color: var(--black30) !important;
}

.bg-black35 {
  background-color: var(--black35) !important;
}

.bg-black40 {
  background-color: var(--black40) !important;
}

.bg-black45 {
  background-color: var(--black45) !important;
}

.bg-black50 {
  background-color: var(--black50) !important;
}

.bg-black55 {
  background-color: var(--black55) !important;
}

.bg-black60 {
  background-color: var(--black60) !important;
}

.bg-black65 {
  background-color: var(--black65) !important;
}

.bg-black70 {
  background-color: var(--black70) !important;
}

.bg-black80 {
  background-color: var(--black80) !important;
}

.bg-black85 {
  background-color: var(--black85) !important;
}

.bg-black90 {
  background-color: var(--black90) !important;
}

.bg-black100 {
  background-color: var(--black100) !important;
}

/* border-radius */
.bd-rd-8 {
  border-radius: 8px;
}

.bd-rd-12 {
  border-radius: 12px;
}

.bd-rd-16 {
  border-radius: 16px;
}

.bd-rd-20 {
  border-radius: 20px;
}

@media screen and (max-width: 1599px) {
  .bd-rd-8-tb {
    border-radius: 8px;
  }
  .bd-rd-12-tb {
    border-radius: 12px;
  }
  .bd-rd-16-tb {
    border-radius: 16px;
  }
  .bd-rd-20-tb {
    border-radius: 20px;
  }
  .bd-rd-20 {
    border-radius: 16px;
  }
}
@media screen and (max-width: 1023px) {
  .bd-rd-8-mo {
    border-radius: 8px;
  }
  .bd-rd-12-mo {
    border-radius: 12px;
  }
  .bd-rd-16-mo {
    border-radius: 16px;
  }
  .bd-rd-20-mo {
    border-radius: 20px;
  }
}
/* width */
.w5p {
  width: 5% !important;
}

.w10p {
  width: 10% !important;
}

.w15p {
  width: 15% !important;
}

.w20p {
  width: 20% !important;
}

.w25p {
  width: 25% !important;
}

.w30p {
  width: 30% !important;
}

.w35p {
  width: 35% !important;
}

.w40p {
  width: 40% !important;
}

.w45p {
  width: 45% !important;
}

.w50p {
  width: 50% !important;
}

.w55p {
  width: 55% !important;
}

.w60p {
  width: 60% !important;
}

.w65p {
  width: 65% !important;
}

.w70p {
  width: 70% !important;
}

.w75p {
  width: 75% !important;
}

.w80p {
  width: 80% !important;
}

.w85p {
  width: 85% !important;
}

.w90p {
  width: 90% !important;
}

.w95p {
  width: 95% !important;
}

.w100p {
  width: 100% !important;
}

/* margin */
.m-auto {
  margin: 0 auto;
}

.m0 {
  margin: 0 !important;
}

.ml0 {
  margin-left: 0 !important;
}

.mr0 {
  margin-right: 0 !important;
}

.mt0 {
  margin-top: 0 !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.m2 {
  margin: 2px;
}

.ml2 {
  margin-left: 2px;
}

.mr2 {
  margin-right: 2px;
}

.mt2 {
  margin-top: 2px;
}

.mb2 {
  margin-bottom: 2px;
}

.m4 {
  margin: 4px;
}

.ml4 {
  margin-left: 4px;
}

.mr4 {
  margin-right: 4px;
}

.mt4 {
  margin-top: 4px;
}

.mb4 {
  margin-bottom: 4px;
}

.m8 {
  margin: 8px;
}

.ml8 {
  margin-left: 8px;
}

.mr8 {
  margin-right: 8px;
}

.mt8 {
  margin-top: 8px;
}

.mb8 {
  margin-bottom: 8px;
}

.m10 {
  margin: 10px;
}

.ml10 {
  margin-left: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mt10 {
  margin-top: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.m12 {
  margin: 12px;
}

.ml12 {
  margin-left: 12px;
}

.mr12 {
  margin-right: 12px;
}

.mt12 {
  margin-top: 12px;
}

.mb12 {
  margin-bottom: 12px;
}

.m16 {
  margin: 16px;
}

.ml16 {
  margin-left: 16px;
}

.mr16 {
  margin-right: 16px;
}

.mt16 {
  margin-top: 16px;
}

.mb16 {
  margin-bottom: 16px;
}

.m20 {
  margin: 20px;
}

.ml20 {
  margin-left: 20px;
}

.mr20 {
  margin-right: 20px;
}

.mt20 {
  margin-top: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.m24 {
  margin: 24px;
}

.ml24 {
  margin-left: 24px;
}

.mr24 {
  margin-right: 24px;
}

.mt24 {
  margin-top: 24px;
}

.mb24 {
  margin-bottom: 24px;
}

.m28 {
  margin: 28px;
}

.ml28 {
  margin-left: 28px;
}

.mr28 {
  margin-right: 28px;
}

.mt28 {
  margin-top: 28px;
}

.mb28 {
  margin-bottom: 28px;
}

.m30 {
  margin: 30px;
}

.ml30 {
  margin-left: 30px;
}

.mr30 {
  margin-right: 30px;
}

.mt30 {
  margin-top: 30px;
}

.mb30 {
  margin-bottom: 30px;
}

.m32 {
  margin: 32px;
}

.ml32 {
  margin-left: 32px;
}

.mr32 {
  margin-right: 32px;
}

.mt32 {
  margin-top: 32px;
}

.mb32 {
  margin-bottom: 32px;
}

.m36 {
  margin: 36px;
}

.ml36 {
  margin-left: 36px;
}

.mr36 {
  margin-right: 36px;
}

.mt36 {
  margin-top: 36px;
}

.mb36 {
  margin-bottom: 36px;
}

.m40 {
  margin: 40px;
}

.ml40 {
  margin-left: 40px;
}

.mr40 {
  margin-right: 40px;
}

.mt40 {
  margin-top: 40px;
}

.mb40 {
  margin-bottom: 40px;
}

.m44 {
  margin: 44px;
}

.ml44 {
  margin-left: 44px;
}

.mr44 {
  margin-right: 44px;
}

.mt44 {
  margin-top: 44px;
}

.mb44 {
  margin-bottom: 44px;
}

.m48 {
  margin: 48px;
}

.ml48 {
  margin-left: 48px;
}

.mr48 {
  margin-right: 48px;
}

.mt48 {
  margin-top: 48px;
}

.mb48 {
  margin-bottom: 48px;
}

.m50 {
  margin: 50px;
}

.ml50 {
  margin-left: 50px;
}

.mr50 {
  margin-right: 50px;
}

.mt50 {
  margin-top: 50px;
}

.mb50 {
  margin-bottom: 50px;
}

.m52 {
  margin: 52px;
}

.ml52 {
  margin-left: 52px;
}

.mr52 {
  margin-right: 52px;
}

.mt52 {
  margin-top: 52px;
}

.mb52 {
  margin-bottom: 52px;
}

.m56 {
  margin: 56px;
}

.ml56 {
  margin-left: 56px;
}

.mr56 {
  margin-right: 56px;
}

.mt56 {
  margin-top: 56px;
}

.mb56 {
  margin-bottom: 56px;
}

.m60 {
  margin: 60px;
}

.ml60 {
  margin-left: 60px;
}

.mr60 {
  margin-right: 60px;
}

.mt60 {
  margin-top: 60px;
}

.mb60 {
  margin-bottom: 60px;
}

.m64 {
  margin: 64px;
}

.ml64 {
  margin-left: 64px;
}

.mr64 {
  margin-right: 64px;
}

.mt64 {
  margin-top: 64px;
}

.mb64 {
  margin-bottom: 64px;
}

.m68 {
  margin: 68px;
}

.ml68 {
  margin-left: 68px;
}

.mr68 {
  margin-right: 68px;
}

.mt68 {
  margin-top: 68px;
}

.mb68 {
  margin-bottom: 68px;
}

.m72 {
  margin: 72px;
}

.ml72 {
  margin-left: 72px;
}

.mr72 {
  margin-right: 72px;
}

.mt72 {
  margin-top: 72px;
}

.mb72 {
  margin-bottom: 72px;
}

.m76 {
  margin: 76px;
}

.ml76 {
  margin-left: 76px;
}

.mr76 {
  margin-right: 76px;
}

.mt76 {
  margin-top: 76px;
}

.mb76 {
  margin-bottom: 76px;
}

.m80 {
  margin: 80px;
}

.ml80 {
  margin-left: 80px;
}

.mr80 {
  margin-right: 80px;
}

.mt80 {
  margin-top: 80px;
}

.mb80 {
  margin-bottom: 80px;
}

.m160 {
  margin: 160px;
}

.ml160 {
  margin-left: 160px;
}

.mr160 {
  margin-right: 160px;
}

.mt160 {
  margin-top: 160px;
}

.mb160 {
  margin-bottom: 160px;
}

.mt200 {
  margin-top: 200px;
}

.mb200 {
  margin-bottom: 200px;
}

@media screen and (max-width: 1599px) {
  .mt12-tb {
    margin-top: 12px;
  }
  .mt16-tb {
    margin-top: 16px;
  }
  .mt20-tb {
    margin-top: 20px;
  }
  .mb24-tb {
    margin-bottom: 24px;
  }
  .mb30-tb {
    margin-bottom: 30px;
  }
  .mb40-tb {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 1023px) {
  .mb0-mo {
    margin-bottom: 0 !important;
  }
  .mb6-mo {
    margin-bottom: 6px;
  }
  .mb8-mo {
    margin-bottom: 8px;
  }
  .mt12-mo {
    margin-top: 12px;
  }
  .mb12-mo {
    margin-bottom: 12px;
  }
  .mb14-mo {
    margin-bottom: 14px;
  }
  .mb15-mo {
    margin-bottom: 15px;
  }
  .mb16-mo {
    margin-bottom: 16px;
  }
  .mt20-mo {
    margin-top: 20px;
  }
  .mb20-mo {
    margin-bottom: 20px;
  }
  .mb24-mo {
    margin-bottom: 24px;
  }
  .mt40-mo {
    margin-top: 40px;
  }
  .mb50-mo {
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 767px) {
  .mb0-mini {
    margin-bottom: 0;
  }
  .mb2-mini {
    margin-bottom: 2px;
  }
  .mb12-mini {
    margin-bottom: 12px;
  }
  .mb20-mini {
    margin-bottom: 20px;
  }
}
/* padding */
.p0 {
  padding: 0 !important;
}

.pl0 {
  padding-left: 0 !important;
}

.pr0 {
  padding-right: 0 !important;
}

.pt0 {
  padding-top: 0 !important;
}

.pb0 {
  padding-bottom: 0 !important;
}

.p4 {
  padding: 4px;
}

.pl4 {
  padding-left: 4px;
}

.pr4 {
  padding-right: 4px;
}

.pt4 {
  padding-top: 4px;
}

.pb4 {
  padding-bottom: 4px;
}

.p8 {
  padding: 8px;
}

.pl8 {
  padding-left: 8px;
}

.pr8 {
  padding-right: 8px;
}

.pt8 {
  padding-top: 8px;
}

.pb8 {
  padding-bottom: 8px;
}

.p10 {
  padding: 10px;
}

.pl10 {
  padding-left: 10px;
}

.pr10 {
  padding-right: 10px;
}

.pt10 {
  padding-top: 10px;
}

.pb10 {
  padding-bottom: 10px;
}

.p12 {
  padding: 12px;
}

.pl12 {
  padding-left: 12px;
}

.pr12 {
  padding-right: 12px;
}

.pt12 {
  padding-top: 12px;
}

.pb12 {
  padding-bottom: 12px;
}

.p16 {
  padding: 16px;
}

.pl16 {
  padding-left: 16px;
}

.pr16 {
  padding-right: 16px;
}

.pt16 {
  padding-top: 16px;
}

.pb16 {
  padding-bottom: 16px;
}

.p20 {
  padding: 20px;
}

.pl20 {
  padding-left: 20px;
}

.pr20 {
  padding-right: 20px;
}

.pt20 {
  padding-top: 20px;
}

.pb20 {
  padding-bottom: 20px;
}

.p24 {
  padding: 24px;
}

.pl24 {
  padding-left: 24px;
}

.pr24 {
  padding-right: 24px;
}

.pt24 {
  padding-top: 24px;
}

.pb24 {
  padding-bottom: 24px;
}

.p28 {
  padding: 28px;
}

.pl28 {
  padding-left: 28px;
}

.pr28 {
  padding-right: 28px;
}

.pt28 {
  padding-top: 28px;
}

.pb28 {
  padding-bottom: 28px;
}

.p30 {
  padding: 30px;
}

.pl30 {
  padding-left: 30px;
}

.pr30 {
  padding-right: 30px;
}

.pt30 {
  padding-top: 30px;
}

.pb30 {
  padding-bottom: 30px;
}

.p32 {
  padding: 32px;
}

.pl32 {
  padding-left: 32px;
}

.pr32 {
  padding-right: 32px;
}

.pt32 {
  padding-top: 32px;
}

.pb32 {
  padding-bottom: 32px;
}

.p34 {
  padding: 34px;
}

.pt34 {
  padding-top: 34px;
}

.pb34 {
  padding-bottom: 34px;
}

.pl34 {
  padding-left: 34px;
}

.pr34 {
  padding-right: 34px;
}

.p36 {
  padding: 36px;
}

.pl36 {
  padding-left: 36px;
}

.pr36 {
  padding-right: 36px;
}

.pt36 {
  padding-top: 36px;
}

.pb36 {
  padding-bottom: 36px;
}

.p40 {
  padding: 40px;
}

.pl40 {
  padding-left: 40px;
}

.pr40 {
  padding-right: 40px;
}

.pt40 {
  padding-top: 40px;
}

.pb40 {
  padding-bottom: 40px;
}

.p44 {
  padding: 44px;
}

.pl44 {
  padding-left: 44px;
}

.pr44 {
  padding-right: 44px;
}

.pt44 {
  padding-top: 44px;
}

.pb44 {
  padding-bottom: 44px;
}

.p48 {
  padding: 48px;
}

.pl48 {
  padding-left: 48px;
}

.pr48 {
  padding-right: 48px;
}

.pt48 {
  padding-top: 48px;
}

.pb48 {
  padding-bottom: 48px;
}

.p52 {
  padding: 52px;
}

.pl52 {
  padding-left: 52px;
}

.pr52 {
  padding-right: 52px;
}

.pt52 {
  padding-top: 52px;
}

.pb52 {
  padding-bottom: 52px;
}

.p56 {
  padding: 56px;
}

.pl56 {
  padding-left: 56px;
}

.pr56 {
  padding-right: 56px;
}

.pt56 {
  padding-top: 56px;
}

.pb56 {
  padding-bottom: 56px;
}

.p60 {
  padding: 60px;
}

.pl60 {
  padding-left: 60px;
}

.pr60 {
  padding-right: 60px;
}

.pt60 {
  padding-top: 60px;
}

.pb60 {
  padding-bottom: 60px;
}

.p64 {
  padding: 64px;
}

.pl64 {
  padding-left: 64px;
}

.pr64 {
  padding-right: 64px;
}

.pt64 {
  padding-top: 64px;
}

.pb64 {
  padding-bottom: 64px;
}

.p68 {
  padding: 68px;
}

.pl68 {
  padding-left: 68px;
}

.pr68 {
  padding-right: 68px;
}

.pt68 {
  padding-top: 68px;
}

.pb68 {
  padding-bottom: 68px;
}

.p72 {
  padding: 72px;
}

.pl72 {
  padding-left: 72px;
}

.pr72 {
  padding-right: 72px;
}

.pt72 {
  padding-top: 72px;
}

.pb72 {
  padding-bottom: 72px;
}

.p76 {
  padding: 76px;
}

.pl76 {
  padding-left: 76px;
}

.pr76 {
  padding-right: 76px;
}

.pt76 {
  padding-top: 76px;
}

.pb76 {
  padding-bottom: 76px;
}

.p80 {
  padding: 80px;
}

.pl80 {
  padding-left: 80px;
}

.pr80 {
  padding-right: 80px;
}

.pt80 {
  padding-top: 80px;
}

.pb80 {
  padding-bottom: 80px;
}

.pl100 {
  padding-left: 100px;
}

.pr100 {
  padding-right: 100px;
}

.pt100 {
  padding-top: 100px;
}

.pb100 {
  padding-bottom: 100px;
}

.pl160 {
  padding-left: 160px;
}

.pr160 {
  padding-right: 160px;
}

.pt160 {
  padding-top: 160px;
}

.pb160 {
  padding-bottom: 160px;
}

.pl200 {
  padding-left: 200px;
}

.pr200 {
  padding-right: 200px;
}

.pt200 {
  padding-top: 200px;
}

.pb200 {
  padding-bottom: 200px;
}

@media screen and (max-width: 1599px) {
  .p22-tb {
    padding: 22px;
  }
  .pt22-tb {
    padding-top: 22px;
  }
  .pb22-tb {
    padding-bottom: 22px;
  }
  .pl22-tb {
    padding-left: 22px;
  }
  .pr22-tb {
    padding-right: 22px;
  }
  .p24-tb {
    padding: 24px;
  }
  .pt24-tb {
    padding-top: 24px;
  }
  .pb24-tb {
    padding-bottom: 24px;
  }
  .pl24-tb {
    padding-left: 24px;
  }
  .pr24-tb {
    padding-right: 24px;
  }
  .p30-tb {
    padding: 30px;
  }
  .pt30-tb {
    padding-top: 30px;
  }
  .pb30-tb {
    padding-bottom: 30px;
  }
  .pl30-tb {
    padding-left: 30px;
  }
  .pr30-tb {
    padding-right: 30px;
  }
  .pt50-tb {
    padding-top: 50px;
  }
  .pb50-tb {
    padding-bottom: 50px;
  }
  .pl100 {
    padding-left: 80px;
  }
  .pr100 {
    padding-right: 80px;
  }
  .pt100 {
    padding-top: 80px;
  }
  .pb100 {
    padding-bottom: 80px;
  }
}
@media screen and (max-width: 1023px) {
  .pl0-mo {
    padding-left: 0;
  }
  .p30-mo {
    padding: 30px;
  }
  .pt30-mo {
    padding-top: 30px;
  }
  .pb30-mo {
    padding-bottom: 30px;
  }
  .pl30-mo {
    padding-left: 30px;
  }
  .pr30-mo {
    padding-right: 30px;
  }
  .p24-mo {
    padding: 24px;
  }
  .pt24-mo {
    padding-top: 24px;
  }
  .pb24-mo {
    padding-bottom: 24px;
  }
  .pl24-mo {
    padding-left: 24px;
  }
  .pr24-mo {
    padding-right: 24px;
  }
  .p22-mo {
    padding: 22px;
  }
  .pt22-mo {
    padding-top: 22px;
  }
  .pb22-mo {
    padding-bottom: 22px;
  }
  .pl22-mo {
    padding-left: 22px;
  }
  .pr22-mo {
    padding-right: 22px;
  }
  .p20-mo {
    padding: 20px;
  }
  .pt20-mo {
    padding-top: 20px;
  }
  .pb20-mo {
    padding-bottom: 20px;
  }
  .pl20-mo {
    padding-left: 20px;
  }
  .pr20-mo {
    padding-right: 20px;
  }
  .p40-mo {
    padding: 40px;
  }
  .pt40-mo {
    padding-top: 40px;
  }
  .pb40-mo {
    padding-bottom: 40px;
  }
  .pl40-mo {
    padding-left: 40px;
  }
  .pr40-mo {
    padding-right: 40px;
  }
  .pl100 {
    padding-left: 50px;
  }
  .pr100 {
    padding-right: 50px;
  }
  .pt100 {
    padding-top: 50px;
  }
  .pb100 {
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 767px) {
  .pr20-mini {
    padding-right: 20px;
  }
}
/* overflow */
.of-hidden {
  overflow: hidden;
}

/* 말줄임 처리 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.v-ellipsis-3 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

@media screen and (max-width: 1599px) {
  .v-lg-ellipsis-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
@media screen and (max-width: 1023px) {
  .v-mo-ellipsis-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .v-mo-ellipsis-3 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
/* 요소 중앙정렬 */
.elm-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* svg icon */
.ic {
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  background-color: var(--black100);
}

.ic-xxl {
  width: 32px !important;
  height: 32px !important;
}

.ic-xl {
  width: 30px !important;
  height: 30px !important;
}

.ic-lg {
  width: 24px !important;
  height: 24px !important;
}

.ic-md {
  width: 20px !important;
  height: 20px !important;
}

.ic-sm {
  width: 16px !important;
  height: 16px !important;
}

.ic-sm-xl {
  width: 12px !important;
  height: 12px !important;
}

@media screen and (max-width:767px) {
  .ic-lg-mo {
    width:20px !important;
    height:20px !important;
  }
}

.ic-white {
  background-color: var(--white100);
}

.ic-black {
  background-color: var(--black100);
}

.ic-black:hover {
  background-color: var(--black80);
}

.ic-black60 {
  background-color: var(--black60);
}

.ic-black60:hover {
  background-color: var(--black80);
}

.ic-black80 {
  background-color: var(--black80);
}

.ic-black80:hover {
  background-color: var(--black100);
}

.ic-arrow-left {
  -webkit-mask-image: url("../../images/ic/ic-arrow-left.svg");
  mask-image: url("../../images/ic/ic-arrow-left.svg");
}

.ic-arrow-right {
  -webkit-mask-image: url("../../images/ic/ic-arrow-right.svg");
  mask-image: url("../../images/ic/ic-arrow-right.svg");
}

.ic-arrow-right-white {
  -webkit-mask-image: url("../../images/ic/ic-arrow-right-white.svg");
  mask-image: url("../../images/ic/ic-arrow-right.svg");
}

.ic-arrow-up {
  -webkit-mask-image: url("../../images/ic/ic-arrow-up.svg");
  mask-image: url("../../images/ic/ic-arrow-up.svg");
}

.ic-link-right-b {
  -webkit-mask-image: url("../../images/ic/ic-link-arrow-right-black.svg");
  mask-image: url("../../images/ic/ic-link-arrow-right-black.svg");
}

.ic-link-right-w {
  -webkit-mask-image: url("../../images/ic/ic-link-arrow-right-white.svg");
  mask-image: url("../../images/ic/ic-link-arrow-right-white.svg");
}

.ic-brunch {
  -webkit-background-image: url("../../images/ic/ic-brunch.png");
  background-image: url("../../images/ic/ic-brunch.png");
}

.ic-call {
  -webkit-mask-image: url("../../images/ic/ic-call.svg");
  mask-image: url("../../images/ic/ic-call.svg");
}

.ic-chevron-left {
  -webkit-mask-image: url("../../images/ic/ic-chevron-left.svg");
  mask-image: url("../../images/ic/ic-chevron-left.svg");
}

.ic-chevron-right-mo {
  -webkit-mask-image: url("../../images/ic/ic-chevron-right-mo.svg");
  mask-image: url("../../images/ic/ic-chevron-right-mo.svg");
}

.ic-chevron-right {
  -webkit-mask-image: url("../../images/ic/ic-chevron-right.svg");
  mask-image: url("../../images/ic/ic-chevron-right.svg");
}

.ic-close-up {
  -webkit-mask-image: url("../../images/ic/ic-close-up.svg");
  mask-image: url("../../images/ic/ic-close-up.svg");
}

.ic-close {
  -webkit-mask-image: url("../../images/ic/ic-close.svg");
  mask-image: url("../../images/ic/ic-close.svg");
}

.ic-download-m {
  -webkit-mask-image: url("../../images/ic/ic-download-m.svg");
  mask-image: url("../../images/ic/ic-download-m.svg");
}

.ic-download-s {
  -webkit-mask-image: url("../../images/ic/ic-download-s.svg");
  mask-image: url("../../images/ic/ic-download-s.svg");
}

.ic-en {
  -webkit-mask-image: url("../../images/ic/ic-en.svg");
  mask-image: url("../../images/ic/ic-en.svg");
}

.ic-headphone {
  -webkit-mask-image: url("../../images/ic/ic-headphone.svg");
  mask-image: url("../../images/ic/ic-headphone.svg");
}

.ic-kr {
  -webkit-mask-image: url("../../images/ic/ic-kr.svg");
  mask-image: url("../../images/ic/ic-kr.svg");
}

.ic-lg-check {
  -webkit-mask-image: url("../../images/ic/ic-lg-check.svg");
  mask-image: url("../../images/ic/ic-lg-check.svg");
}

.ic-lg-copy {
  -webkit-mask-image: url("../../images/ic/ic-lg-copy.svg");
  mask-image: url("../../images/ic/ic-lg-copy.svg");
}

.ic-lg-filter {
  -webkit-mask-image: url("../../images/ic/ic-lg-filter.svg");
  mask-image: url("../../images/ic/ic-lg-filter.svg");
}

.ic-lg-kakaotalk {
  -webkit-mask-image: url("../../images/ic/ic-lg-kakaotalk.svg");
  mask-image: url("../../images/ic/ic-lg-kakaotalk.svg");
}

.ic-lg-list {
  -webkit-mask-image: url("../../images/ic/ic-lg-list.svg");
  mask-image: url("../../images/ic/ic-lg-list.svg");
}

.ic-lg-outlink {
  -webkit-mask-image: url("../../images/ic/ic-lg-outlink.svg");
  mask-image: url("../../images/ic/ic-lg-outlink.svg");
}

.ic-lg-outlink-white {
  -webkit-mask-image: url("../../images/ic/ic-lg-outlink-white.svg");
  mask-image: url("../../images/ic/ic-lg-outlink-white.svg");
}

.ic-lg-pause {
  -webkit-mask-image: url("../../images/ic/ic-lg-pause.svg");
  mask-image: url("../../images/ic/ic-lg-pause.svg");
}

.ic-lg-play {
  -webkit-mask-image: url("../../images/ic/ic-lg-play.svg");
  mask-image: url("../../images/ic/ic-lg-play.svg");
}

.ic-lg-search {
  -webkit-mask-image: url("../../images/ic/ic-lg-search.svg");
  mask-image: url("../../images/ic/ic-lg-search.svg");
}

.ic-lg-three-dots {
  -webkit-mask-image: url("../../images/ic/ic-lg-three-dots.svg");
  mask-image: url("../../images/ic/ic-lg-three-dots.svg");
}

.ic-md-ban {
  /* -webkit-mask-image: url("../../images/ic/ic-md-ban.svg"); */
  /* mask-image: url("../../images/ic/ic-md-ban.svg"); */
  /* -webkit-mask-image: url("../../images/ic/ic-md-ban.svg"); */
  background: url("../../images/ic/ic-md-ban.svg") no-repeat center/contain;
}

.ic-md-check {
  -webkit-mask-image: url("../../images/ic/ic-md-check.svg");
  mask-image: url("../../images/ic/ic-md-check.svg");
}

.ic-md-delete {
  -webkit-background: url("../../images/ic/ic-md-delete.svg") no-repeat center/contain;
  background: url("../../images/ic/ic-md-delete.svg") no-repeat center/contain;
}

.ic-md-headphone {
  -webkit-mask-image: url("../../images/ic/ic-md-headphone.svg");
  mask-image: url("../../images/ic/ic-md-headphone.svg");
}

.ic-md-kakaotalk {
  -webkit-mask-image: url("../../images/ic/ic-md-kakaotalk.svg");
  mask-image: url("../../images/ic/ic-md-kakaotalk.svg");
}

.ic-menu {
  -webkit-mask-image: url("../../images/ic/ic-menu.svg");
  mask-image: url("../../images/ic/ic-menu.svg");
}

.ic-minus {
  -webkit-mask-image: url("../../images/ic/ic-minus.svg");
  mask-image: url("../../images/ic/ic-minus.svg");
}

.ic-open-down {
  -webkit-mask-image: url("../../images/ic/ic-open-down.svg");
  mask-image: url("../../images/ic/ic-open-down.svg");
}

.ic-plus {
  -webkit-mask-image: url("../../images/ic/ic-plus.svg");
  mask-image: url("../../images/ic/ic-plus.svg");
}

.ic-sm-ban {
  -webkit-mask-image: url("../../images/ic/ic-sm-ban.svg");
  mask-image: url("../../images/ic/ic-sm-ban.svg");
}

.ic-sm-chevron {
  -webkit-mask-image: url("../../images/ic/ic-sm-chevron.svg");
  mask-image: url("../../images/ic/ic-sm-chevron.svg");
}

.ic-sm-close-up {
  -webkit-mask-image: url("../../images/ic/ic-sm-close-up.svg");
  mask-image: url("../../images/ic/ic-sm-close-up.svg");
}

.ic-sm-open-down {
  -webkit-mask-image: url("../../images/ic/ic-sm-open-down.svg");
  mask-image: url("../../images/ic/ic-sm-open-down.svg");
}

.ic-sm-outlink {
  -webkit-mask-image: url("../../images/ic/ic-sm-outlink.svg");
  mask-image: url("../../images/ic/ic-sm-outlink.svg");
}

.ic-circle-outlink-b {
  -webkit-mask-image: url("../../images/ic/ic-circle-outlink-b.svg");
  mask-image: url("../../images/ic/ic-circle-outlink-b.svg");
}

.ic-circle-outlink-b-sm {
  -webkit-mask-image: url("../../images/ic/ic-circle-outlink-b-sm.svg");
  mask-image: url("../../images/ic/ic-circle-outlink-b-sm.svg");
}

.ic-circle-outlink-w {
  -webkit-mask-image: url("../../images/ic/ic-circle-outlink-w.svg");
  mask-image: url("../../images/ic/ic-circle-outlink-w.svg");
}

.ic-scroll-down {
  -webkit-mask-image: url("../../images/ic/ic-scroll-down.svg");
  mask-image: url("../../images/ic/ic-scroll-down.svg");
}

.ic-youtube {
  -webkit-background-image: url("../../images/ic/ic-youtube.png");
  background-image: url("../../images/ic/ic-youtube.png");
}

/* 반응형 접근성 개선 */
/* 고해상도 디스플레이 대응 */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) {
  /* 고해상도에서 선명한 포커스 표시 */
  *:focus-visible {
    outline-width: 2px;
  }
}
/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  *:focus-visible {
    outline-color: #66b3ff;
  }
}
/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 2px;
  }
  /* 기존 링크 스타일 유지하면서 접근성만 개선 */
  a:focus-visible {
    text-decoration: underline;
    font-weight: bold;
  }
}
/* 인쇄 스타일 */
@media print {
  /* 스킵 네비게이션 숨김 */
  .skip-nav {
    display: none !important;
  }
  /* 모바일 메뉴 숨김 */
  .mobile-nav-wrap {
    display: none !important;
  }
  /* 링크에 URL 표시 */
  a[href]:after {
    content: " (" attr(href) ")";
  }
}/*# sourceMappingURL=common.css.map */