@charset "utf-8";

/* #################################### Font #################################### */

/* Pretendard - KR */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* 나눔명조 - KR */
@import url("https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css");

/* Quentin - EN */
@font-face {
  font-family: "Quentin";
  src: url("./fonts/Quentin.otf") format("otf");
  src: url("./fonts/Quentin.eot") format("eot");
  src: url("./fonts/Quentin.woff") format("woff");
  src: url("./fonts/Quentin.woff2") format("woff2");
}

/* #################################### HTML Basic Set #################################### */

*,
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: var(--font-KR-base);
  color: var(--base-color-white);
  scroll-behavior: smooth;
}

body {
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}

*,
:before,
:after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

html,
body {
  margin: 0 auto;
  width: 100vw;
  height: auto;
  min-height: 100vh;
  color: var(--font-color-base);
  font-family: var(--font-KR-base-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  background: var(--background-color-base);
  color: var(--base-color-white);
  /* border: 1px solid red; */
}

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: var(--font-KR-base);
  background: var(--background-color-base);
  color: var(--base-color-white);
}

html,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
img {
  margin: 0;
  padding: 0;
  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
a {
  display: block;
}

ul,
ol,
li,
dt,
dd,
dl {
  list-style: none;
}

a,
a:link,
a:visited,
a:hover,
a:active {
  color: var(--base-color-white);
  text-decoration: none;
}

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

select::-ms-expand {
  display: none;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 화살표 모양의 이미지 삽입가능 */
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

textarea {
  resize: none;
}

/* #################################### Contents fixed #################################### */
.fixed-init {
  position: fixed;
  height: 100svh;
  overflow: hidden;
}

/* #################################### Text Word Align#################################### */
h1,
h2,
h3,
h4,
h5,
h6,
p,
input,
textarea {
  word-break: keep-all;
}

/* #################################### 공통 스타일 #################################### */

/* --------------------max width------------------ */
.max_width {
  max-width: var(--max-width);
}

/* --------------------섹션 마진------------------ */

.section_margin {
  margin: var(--all-sec-margin);
}

.section_padding_mo {
  padding: var(--all-sec-padding_mo);
}

/* -------------------- 텍스트 효과------------------ */

.en_font {
  font-family: var(--font-EN-base);
}

.ko_font {
  font-family: var(--font-KR-point);
}

/* --------------------영어 텍스트 효과------------------ */

.sec_en_text_wrap {
  position: relative;
  top: -50px;
}

.sec_en_text {
  font-size: 84px;
  color: #b9b9b9;
}

/* --------------------타이틀------------------ */

.section_title {
  font-size: 40px;
  font-weight: 400;
}

/* --------------------서브텍스트------------------ */

.section_text {
  font-size: 20px;
  margin-bottom: 30px;
}

@media all and (max-width: 1460px) {
  .sec_en_text {
    font-size: 7vw;
  }
}

@media all and (max-width: 860px) {
  .section_margin {
    margin: var(--all-sec-margin-mo);
  }

  .section_title {
    font-size: 26px;
  }

  .sec_en_text {
    font-size: 7vw;
  }

  .sec_en_text_wrap {
    top: -30px;
  }
}

@media all and (max-width: 480px) {
  .sec_en_text {
    font-size: 12vw;
  }
}