@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');

/**
* Typography
*/
.font-body1-400 {
  font-family: 'Noto Sans KR';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.font-body1-500 {
  font-family: 'Noto Sans KR';
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}
.font-body1-700 {
  font-family: 'Noto Sans KR';
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
}
.font-body2-400 {
  font-family: 'Noto Sans KR';
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.font-body2-500 {
  font-family: 'Noto Sans KR';
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.font-body2-700 {
  font-family: 'Noto Sans KR';
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
}
.font-h2-700 {
  font-family: 'Noto Sans KR';
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
}
.font-h4-700 {
  font-family: 'Noto Sans KR';
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 27px;
}
.font-title1-700 {
  font-family: 'Noto Sans CJK KR';
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 74px;
}
.font-title2-700 {
  font-family: 'Noto Sans CJK KR';
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--space-5-250, 42px);
}
.font-subtitle1-400 {
  font-family: 'Noto Sans KR';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}
.font-subtitle2-400 {
  font-family: 'Noto Sans KR';
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.font-subtitle3-400 {
  font-family: 'Noto Sans KR';
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
}
.font-request {
  font-family: 'Noto Sans KR';
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
}
.font-price {
  font-family: 'Noto Sans KR';
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.font-reference {
  font-family: 'Noto Sans CJK KR';
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--space-3-000, 24px);
}
.font-reference-features {
  font-family: 'Noto Sans CJK KR';
  font-size: var(--space-2-000, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
}

/**
* Font Color
*/
.font-white {
  color: white;
}
.font-gray-secondary-main {
  color: var(--gray-secondary-main, #3c3d4f);
}
.font-gray-secondary-500 {
  color: var(--gray-secondary-500, #83839a);
}
.font-gray-secondary-600 {
  color: var(--gray-secondary-600, #6f6f83);
}
.font-gray-secondary-a700 {
  color: var(--gray-secondary-a700, #172967);
}
.font-primary-400 {
  color: var(--primary-400, #2763ea);
}
.font-primary-light {
  color: var(--primary-light, #6280ff);
}

/**
* Font Option
*/
.font-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-center {
  text-align: center;
}
.v-align-super {
  vertical-align: super;
}

/* 360px 이하 화면용 스타일 (mobile) */
@media (max-width: 360px) {
  .font-title1-700 {
    font-size: 28px;
    line-height: 42px;
  }
  .font-title2-700 {
    font-size: 28px;
  }
  .font-subtitle1-400 {
    font-size: 15px;
    line-height: 23px;
  }
}

/* 361px ~ 480px 화면용 스타일 (mobile) */
@media (min-width: 361px) and (max-width: 480px) {
  .font-title1-700 {
    font-size: 32px;
    line-height: 46px;
  }
  .font-title2-700 {
    font-size: 30.8px;
  }
  .font-subtitle1-400 {
    font-size: 16px;
    line-height: 24px;
  }
}

/* 481px ~ 760px 화면용 스타일 (mobile) */
@media (min-width: 481px) and (max-width: 760px) {
  .font-title1-700 {
    font-size: 36px;
    line-height: 52px;
  }
  .font-title2-700 {
    font-size: 34px;
  }
  .font-subtitle1-400 {
    font-size: 17px;
    line-height: 25px;
  }
}

/* 761px ~ 960px 화면용 스타일 (tablet) */
@media (min-width: 761px) and (max-width: 960px) {
  .font-title1-700 {
    font-size: 42px;
    line-height: 60px;
  }
  .font-title2-700 {
    font-size: 36.8px;
  }
  .font-subtitle1-400 {
    font-size: 17px;
    line-height: 26px;
  }
}

/* 961px ~ 1200px 화면용 스타일 (tablet) */
@media (min-width: 961px) and (max-width: 1200px) {
  .font-title1-700 {
    font-size: 48px;
    line-height: 68px;
  }
  .font-title2-700 {
    font-size: 39.6px;
  }
  .font-subtitle1-400 {
    font-size: 17.5px;
    line-height: 27px;
  }
}