/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/_common/reset.sass ***!
  \*****************************************************************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, button, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, a:link, a:visited, a:hover {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  list-style-type: none;
  text-decoration: none;
  user-select: none;
  color: inherit;
}

html {
  font-size: 16px;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  font-size: 16px;
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input, label, select, button, textarea {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 1;
  outline: none;
  /* Browsers have different default form fonts */
  font-size: 13px;
  font-family: Arial;
}

* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
/*!******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/_common/colors.sass ***!
  \******************************************************************************************************************/
@charset "UTF-8";
/* 실제 프로덕트에서는 브랜드 컬러만 변경하면 됨 */
:root {
  --ids-clr-neutral-700: #191F24;
  --ids-clr-neutral-600: #262E36;
  --ids-clr-neutral-500: #474C51;
  --ids-clr-neutral-400: #737A82;
  --ids-clr-neutral-300: #C2C7CC;
  --ids-clr-neutral-200: #D1D6DB;
  --ids-clr-neutral-100: #E4E6E8;
  --ids-clr-neutral-050: #F4F5F5;
  --ids-clr-neutral-000: #FFFFFF;
  --ids-clr-gray-900: #141414;
  --ids-clr-gray-800: #2E2E2E;
  --ids-clr-gray-700: #474747;
  --ids-clr-gray-600: #616161;
  --ids-clr-gray-500: #7A7A7A;
  --ids-clr-gray-400: #C2C2C2;
  --ids-clr-gray-300: #D6D6D6;
  --ids-clr-gray-200: #E5E5E5;
  --ids-clr-gray-100: #F0F0F0;
  --ids-clr-gray-050: #FAFAFA;
  --ids-clr-gray-000: #FFFFFF;
  --ids-clr-system-success: #28A745;
  --ids-clr-system-danger: #DC3545;
  --ids-clr-system-warning: #FFC107;
  --ids-clr-system-info: #17A2B8;
  --ids-clr-prmy-500: #113E93;
  --ids-clr-prmy-400: #4064A8;
  --ids-clr-prmy-300: #708BBE;
  --ids-clr-prmy-200: #9FB1D3;
  --ids-clr-prmy-100: #E7EBF4;
  --ids-clr-prmy-050: #F8F9FC;
  --ids-clr-scnd-500: #F55308;
  --ids-clr-scnd-400: #F77539;
  --ids-clr-scnd-300: #F9976A;
  --ids-clr-scnd-200: #FBBA9C;
  --ids-clr-scnd-100: #FEEDE6;
  --ids-clr-scnd-050: #FFF8F5;
}
/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/_common/fonts.sass ***!
  \*****************************************************************************************************************/
.dsp-title--lg {
  font-family: "GmarketSans";
  font-weight: 700;
  color: var(--ids-clr-neutral-700);
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .dsp-title--lg {
    font-size: 40px;
    line-height: 46px;
  }
}

.dsp-title--md {
  font-family: "GmarketSans";
  font-weight: 700;
  color: var(--ids-clr-neutral-700);
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .dsp-title--md {
    font-size: 40px;
    line-height: 46px;
  }
}

.dsp-desc--lg {
  font-family: "Pretendard";
  font-weight: 500;
  color: var(--ids-clr-neutral-600);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .dsp-desc--lg {
    font-size: 22px;
    line-height: 28px;
  }
}

.dsp-desc--md {
  font-family: "Pretendard";
  font-weight: 500;
  color: var(--ids-clr-neutral-600);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .dsp-desc--md {
    font-size: 19px;
    line-height: 25px;
  }
}

.sec-title--lg {
  font-family: "GmarketSans";
  font-weight: 700;
  color: var(--ids-clr-neutral-700);
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .sec-title--lg {
    font-size: 40px;
    line-height: 46px;
  }
}

.sec-title--md {
  font-family: "GmarketSans";
  font-weight: 700;
  color: var(--ids-clr-neutral-700);
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .sec-title--md {
    font-size: 31px;
    line-height: 37px;
  }
}

.sec-title--sm {
  font-family: "GmarketSans";
  font-weight: 700;
  color: var(--ids-clr-neutral-700);
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .sec-title--sm {
    font-size: 25px;
    line-height: 31px;
  }
}

.sec-desc--lg {
  font-family: "Pretendard";
  font-weight: 400;
  color: var(--ids-clr-neutral-600);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .sec-desc--lg {
    font-size: 19px;
    line-height: 25px;
  }
}

.sec-desc--md {
  font-family: "Pretendard";
  font-weight: 400;
  color: var(--ids-clr-neutral-600);
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .sec-desc--md {
    font-size: 17.5px;
    line-height: 23.5px;
  }
}

.sec-desc--sm {
  font-family: "Pretendard";
  font-weight: 400;
  color: var(--ids-clr-neutral-600);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .sec-desc--sm {
    font-size: 16px;
    line-height: 22px;
  }
}

.item-title--lg {
  font-family: "Pretendard";
  font-weight: 700;
  color: var(--ids-clr-neutral-600);
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .item-title--lg {
    font-size: 25px;
    line-height: 31px;
  }
}

.item-title--md {
  font-family: "Pretendard";
  font-weight: 700;
  color: var(--ids-clr-neutral-600);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .item-title--md {
    font-size: 22px;
    line-height: 28px;
  }
}

.item-title--sm {
  font-family: "Pretendard";
  font-weight: 700;
  color: var(--ids-clr-neutral-600);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .item-title--sm {
    font-size: 19px;
    line-height: 25px;
  }
}

.item-title--xs {
  font-family: "Pretendard";
  font-weight: 700;
  color: var(--ids-clr-neutral-600);
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .item-title--xs {
    font-size: 17.5px;
    line-height: 23.5px;
  }
}

.item-desc--lg {
  font-family: "Pretendard";
  font-weight: 400;
  color: var(--ids-clr-neutral-500);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .item-desc--lg {
    font-size: 19px;
    line-height: 25px;
  }
}

.item-desc--md {
  font-family: "Pretendard";
  font-weight: 400;
  color: var(--ids-clr-neutral-500);
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .item-desc--md {
    font-size: 17.5px;
    line-height: 23.5px;
  }
}

.item-desc--sm {
  font-family: "Pretendard";
  font-weight: 400;
  color: var(--ids-clr-neutral-500);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .item-desc--sm {
    font-size: 16px;
    line-height: 22px;
  }
}

.input-label {
  font-family: "Pretendard";
  font-weight: 500;
  color: var(--ids-clr-neutral-500);
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .input-label {
    font-size: 17.5px;
    line-height: 23.5px;
  }
}

.input-field {
  font-family: "Pretendard";
  font-weight: 500;
  color: var(--ids-clr-neutral-500);
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .input-field {
    font-size: 17.5px;
    line-height: 23.5px;
  }
}
.input-field::placeholder {
  font-family: "Pretendard";
  font-weight: 400;
  color: var(--ids-clr-neutral-300);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .input-field::placeholder {
    font-size: 16px;
    line-height: 22px;
  }
}

.input-field--md {
  font-family: "Pretendard";
  font-weight: 700;
  color: var(--ids-clr-neutral-700);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .input-field--md {
    font-size: 22px;
    line-height: 28px;
  }
}
.input-field--md::placeholder {
  font-family: "Pretendard";
  font-weight: 700;
  color: var(--ids-clr-neutral-300);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.0035em;
}
@media screen and (max-width: 768px) {
  .input-field--md::placeholder {
    font-size: 22px;
    line-height: 28px;
  }
}

.text--lg {
  font-family: "Pretendard";
  font-weight: 700;
  color: var(--ids-clr-neutral-700);
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.0035em;
  line-height: 100%;
}
@media screen and (max-width: 768px) {
  .text--lg {
    font-size: 25px;
    line-height: 31px;
  }
}

.text--md {
  font-family: "Pretendard";
  font-weight: 700;
  color: var(--ids-clr-neutral-700);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.0035em;
  line-height: 100%;
}
@media screen and (max-width: 768px) {
  .text--md {
    font-size: 22px;
    line-height: 28px;
  }
}

.text--sm {
  font-family: "Pretendard";
  font-weight: 700;
  color: var(--ids-clr-neutral-700);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.0035em;
  line-height: 100%;
}
@media screen and (max-width: 768px) {
  .text--sm {
    font-size: 19px;
    line-height: 25px;
  }
}

.text--xs {
  font-family: "Pretendard";
  font-weight: 700;
  color: var(--ids-clr-neutral-700);
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.0035em;
  line-height: 100%;
}
@media screen and (max-width: 768px) {
  .text--xs {
    font-size: 17.5px;
    line-height: 23.5px;
  }
}

.text--xxs {
  font-family: "Pretendard";
  font-weight: 700;
  color: var(--ids-clr-neutral-700);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.0035em;
  line-height: 100%;
}
@media screen and (max-width: 768px) {
  .text--xxs {
    font-size: 16px;
    line-height: 22px;
  }
}
/*!*******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/_common/utility.sass ***!
  \*******************************************************************************************************************/
@charset "UTF-8";
.ff-prmy {
  font-family: "GmarketSans";
}

.ff-scnd {
  font-family: "Pretendard";
}

.fw-reg {
  font-weight: 400;
}

.fw-med {
  font-weight: 500;
}

.fw-bold {
  font-weight: 700;
}

.fw-black {
  font-weight: 900;
}

/*  * 유틸리티 클래스는 클래스 네임을 정의하는 것이 아니다.
 *  * xxs: 16 | xs: 18 | sm: 20 | md: 24 | lg: 28 | xl: 36 | xxl: 48
 *
 *  */
.fs-14 {
  font-size: 14px;
  line-height: 22px;
}
@media screen and (max-width: 768px) {
  .fs-14 {
    font-size: 14px;
    line-height: 20px;
  }
}

.fs-15 {
  font-size: 15px;
  line-height: 23px;
}
@media screen and (max-width: 768px) {
  .fs-15 {
    font-size: 15px;
    line-height: 21px;
  }
}

.fs-xxs {
  font-size: calc(16px + 0px);
  line-height: calc(16px + 0px + 8px);
}

.fs-xs {
  font-size: calc(16px + 2px);
  line-height: calc(16px + 2px + 8px);
}

.fs-sm {
  font-size: calc(16px + 4px);
  line-height: calc(16px + 4px + 8px);
}

.fs-md {
  font-size: calc(16px + 8px);
  line-height: calc(16px + 8px + 8px);
}

.fs-lg {
  font-size: calc(16px + 12px);
  line-height: calc(16px + 12px + 8px);
}

.fs-xl {
  font-size: calc(16px + 20px);
  line-height: calc(16px + 20px + 8px);
}

.fs-xxl {
  font-size: calc(16px + 32px);
  line-height: calc(16px + 32px + 8px);
}

@media screen and (max-width: 768px) {
  .fs-xxs {
    font-size: calc(16px + 0px);
    line-height: calc(16px + 0px + 6px);
  }
  .fs-xs {
    font-size: calc(16px + 1.5px);
    line-height: calc(16px + 1.5px + 6px);
  }
  .fs-sm {
    font-size: calc(16px + 3px);
    line-height: calc(16px + 3px + 6px);
  }
  .fs-md {
    font-size: calc(16px + 6px);
    line-height: calc(16px + 6px + 6px);
  }
  .fs-lg {
    font-size: calc(16px + 9px);
    line-height: calc(16px + 9px + 6px);
  }
  .fs-xl {
    font-size: calc(16px + 15px);
    line-height: calc(16px + 15px + 6px);
  }
  .fs-xxl {
    font-size: calc(16px + 24px);
    line-height: calc(16px + 24px + 6px);
  }
}
.no-height {
  line-height: 100%;
}

/* 실제 프로덕트에서는 브랜드 컬러만 변경하면 됨 */
.fc-700 {
  color: #191F24;
}

.fc-600 {
  color: #262E36;
}

.fc-500 {
  color: #474C51;
}

.fc-400 {
  color: #737A82;
}

.fc-300 {
  color: #C2C7CC;
}

.fc-200 {
  color: #D1D6DB;
}

.fc-100 {
  color: #E4E6E8;
}

.fc-050 {
  color: #F4F5F5;
}

.fc-000 {
  color: #FFFFFF;
}
/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/_common/types.sass ***!
  \*****************************************************************************************************************/
.sec-title-lg {
  font-family: "Pretendard";
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
}
@media screen and (max-width: 768px) {
  .sec-title-lg {
    font-size: 40px;
    line-height: 46px;
  }
}

.sec-title-md {
  font-family: "Pretendard";
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
}
@media screen and (max-width: 768px) {
  .sec-title-md {
    font-size: 31px;
    line-height: 37px;
  }
}

.sec-title-sm {
  font-family: "Pretendard";
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
}
@media screen and (max-width: 768px) {
  .sec-title-sm {
    font-size: 25px;
    line-height: 31px;
  }
}

.sec-desc-lg {
  font-family: "Pretendard";
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
}
@media screen and (max-width: 768px) {
  .sec-desc-lg {
    font-size: 19px;
    line-height: 25px;
  }
}

.sec-desc-md {
  font-family: "Pretendard";
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}
@media screen and (max-width: 768px) {
  .sec-desc-md {
    font-size: 17.5px;
    line-height: 23.5px;
  }
}

.sec-desc-sm {
  font-family: "Pretendard";
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
@media screen and (max-width: 768px) {
  .sec-desc-sm {
    font-size: 16px;
    line-height: 22px;
  }
}

.item-title-lg {
  font-family: "Pretendard";
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
}
@media screen and (max-width: 768px) {
  .item-title-lg {
    font-size: 25px;
    line-height: 31px;
  }
}

.item-title-md {
  font-family: "Pretendard";
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}
@media screen and (max-width: 768px) {
  .item-title-md {
    font-size: 22px;
    line-height: 28px;
  }
}

.item-title-sm {
  font-family: "Pretendard";
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
}
@media screen and (max-width: 768px) {
  .item-title-sm {
    font-size: 19px;
    line-height: 25px;
  }
}

.item-title-xs {
  font-family: "Pretendard";
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}
@media screen and (max-width: 768px) {
  .item-title-xs {
    font-size: 17.5px;
    line-height: 23.5px;
  }
}

.item-desc-lg {
  font-family: "Pretendard";
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
}
@media screen and (max-width: 768px) {
  .item-desc-lg {
    font-size: 19px;
    line-height: 25px;
  }
}

.item-desc-md {
  font-family: "Pretendard";
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
}
@media screen and (max-width: 768px) {
  .item-desc-md {
    font-size: 17.5px;
    line-height: 23.5px;
  }
}

.item-desc-md-bold {
  font-family: "Pretendard";
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
}
@media screen and (max-width: 768px) {
  .item-desc-md-bold {
    font-size: 17.5px;
    line-height: 23.5px;
  }
}

.item-desc-sm {
  font-family: "Pretendard";
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
@media screen and (max-width: 768px) {
  .item-desc-sm {
    font-size: 16px;
    line-height: 22px;
  }
}

.item-desc-xs {
  font-family: "Pretendard";
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
}
@media screen and (max-width: 768px) {
  .item-desc-xs {
    line-height: 19px;
  }
}

.txt-med-lg {
  font-family: "Pretendard";
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
}
@media screen and (max-width: 768px) {
  .txt-med-lg {
    font-size: 22px;
    line-height: 28px;
  }
}

.txt-med-md {
  font-family: "Pretendard";
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
}
@media screen and (max-width: 768px) {
  .txt-med-md {
    font-size: 19px;
    line-height: 25px;
  }
}

.txt-med-sm {
  font-family: "Pretendard";
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}
@media screen and (max-width: 768px) {
  .txt-med-sm {
    font-size: 17.5px;
    line-height: 23.5px;
  }
}

.txt-bold-sm {
  font-family: "Pretendard";
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
}
@media screen and (max-width: 768px) {
  .txt-bold-sm {
    font-size: 17.5px;
    line-height: 23.5px;
  }
}

.txt-med-xs {
  font-family: "Pretendard";
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.txt-med-xxs {
  font-family: "Pretendard";
  font-weight: 500;
  font-size: 15px;
  line-height: 15px;
}

.txt-med-min {
  font-family: "Pretendard";
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
}

.txt-bold-min {
  font-family: "Pretendard";
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
}

.nav-med-xs {
  font-family: "Pretendard";
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
}
@media screen and (max-width: 768px) {
  .nav-med-xs {
    font-size: 19px;
    line-height: 19px;
  }
}

.btn-bold-sm {
  font-family: "Pretendard";
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
}