@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css");

/*--------------------------------------------------------------
# i18n Preload - 번역 적용 전 한글이 먼저 보이는 현상 방지
--------------------------------------------------------------*/
html.i18n-preload {
  opacity: 0;
}

html {
  transition: opacity 0.1s ease-in;
}

/* Colors */
:root {
  --color-default: #000f2b;
  --color-primary: #23d5a5;
  --color-secondary: #333;
  --color-point: #2586ff;
}

:root {
  --scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--color-default);
  overflow-x: hidden;

  /*드래그 방지*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a {
  color: var(--color-default);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
}

ul {
  list-style: none;
}

li {
  list-style: none;
}

/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/

section {
  padding: 130px 0;
  overflow: hidden;
}

.section-bg {
  background-color: #f5f6f7;
}

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

.section-header h2 {
  font-size: 32px;
  font-weight: 800;
  position: relative;
  color: #2e3135;
}

.section-header h2:before {
  margin: 0 15px 10px 0;
}

.section-header h2:after {
  margin: 0 0 10px 15px;
}

.section-header p {
  font-size: 32px;
  font-weight: 500;
}

@media (min-width: 1199px) {
  .section-header p {
    max-width: 80%;
  }
}

.sub-header {
  margin-bottom: 60px;
}

.sub-header h2 {
  font-size: 32px;
  font-weight: 800;
  position: relative;
  color: #2e3135;
  text-align: center;
}

.ip-header {
  margin-bottom: 30px;
}

.ip-header h2 {
  font-size: 28px;
  font-weight: 800;
  position: relative;
  color: #2e3135;
  text-align: center;
}

.sub-header p {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  color: var(--color-secondary);
}

.margintop60 {
  margin-top: 60px;
}

.margintop80 {
  margin-top: 80px;
}

.marginbottom80 {
  margin-bottom: 80px;
}

.margintop20 {
  margin-top: 20px;
}

@media screen and (max-width: 575px) {
  .sub-header {
    margin-bottom: 40px;
  }

  .section-header h2 {
    font-size: 24px;
  }

  .section-header p {
    font-size: 24px;
  }

  .sub-header h2 {
    font-size: 28px;
  }
}