/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: last 2 version
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: normal;
 src: local('※'),
  url('../fonts/Roboto-Regular.ttf') format('truetype');
 unicode-range: U+0041-005A, U+0061-007A, U+0030-0039;
}

@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 500;
 src: local('※'),
  url('../fonts/Roboto-Medium.ttf') format('truetype');
 unicode-range: U+0041-005A, U+0061-007A, U+0030-0039;
}

@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 600;
 src: local('※'),
  url('../fonts/Roboto-Bold.ttf') format('truetype');
 unicode-range: U+0041-005A, U+0061-007A, U+0030-0039;
}

/**********************************************************
                         common
***********************************************************/
html,
body {
 position: relative;
 width: 100%;
}

body {
 margin: 0 auto;
 font-family: "Roboto", "Noto Sans KR", sans-serif;
 font-weight: normal;
 letter-spacing: -0.5px;
 color: #000;
 background-color: #fff;
 line-height: 1.2;
}

body.active {
  height: 100%;
  overflow: hidden;
}

body.active::-webkit-scrollbar{
  display: none;
}

body.active::after{
  content: "";
  display: block;
  width:100%;
  height: 100%;
  background-color:rgba(0,0,0,0.5);
  position: fixed;
  top:0;
  left:0;
  z-index:10;
  transition-delay:0.3s;
}

select,
input, textarea {
 font-family: "Roboto", "Noto Sans KR", sans-serif;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

.header,
.nav,
.section,
.footer {
 width: 100%;
}

img {
 pointer-events: none;
}

p, span {
 cursor: default;
}

a p, a span {
 cursor: pointer;
}

/**********************************************************
                       common_class
***********************************************************/
:root {
 --main-color: #02387a;
 --sub-color: #0083a7;
 --text-2xl: 52px;
 --text-xl: 38px;
 --text-lg: 32px;
 --text-md: 26px;
 --text-base: 16px;
 --text-sm: 14px;
}

.font-2xl {
 font-size: var(--text-2xl);
}

.font-xl {
 font-size: var(--text-xl);
}

.font-md {
 font-size: var(--text-md);
}

.font-base {
 font-size: var(--text-base);
}

.font-sm {
 font-size: var(--text-sm);
}

.text_left {
 text-align: left;
}

.text_center {
 text-align: center;
}

.text_right {
 text-align: right;
}

.bg_white {
 background: #fff;
}

.bg_black {
 background: #000;
}

.bg-gray {
 background: #f8f8f8;
}

.col_white {
 color: #fff;
}

.col_black {
 color: #000;
}

.col_red {
 color: red;
}

.dp_pc {
 display: block;
}

.dp_mo {
 display: none;
}

.hidden {
 display: none !important;
}

.w-full {
 width: 100%;
}

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

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

.font-semibold {
 font-weight: 500;
}

.font-normal {
 font-weight: normal;
}

.uppercase {
 text-transform: uppercase;
}

.no-wrap{
  white-space:nowrap;
}

/* color */
.col-main {
 color: var(--main-color);
}

.col-main2 {
 color: var(--sub-color);
}

/* content */
.content-full {
 width: 100%;
 margin: 0 auto;
}

.content-size {
 max-width: 1420px;
 margin: 0 auto;
 padding: 0 20px;
}

/* pd mg */
.mg-0 {
 margin: 0 !important;
}

/* motion */
.motions {
 -webkit-transition: 1s;
 transition: 1s;
 opacity: 0;
}

.motions.delay {
 -webkit-transition-delay: var(--delay);
 transition-delay: var(--delay);
}

.motions.move-y {
 -webkit-transform: translateY(100px);
 transform: translateY(100px);
}

.motions.move-x {
 -webkit-transform: translateX(-100px);
 transform: translateX(-100px);
}

.motions.move-x-reverse {
 -webkit-transform: translateX(100px);
 transform: translateX(100px);
}

.motions.scale {
 -webkit-transform: scale(0.8);
 transform: scale(0.8);
}

.motions.active {
 opacity: 1;
}

.motions.move-y.active {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}

.motions.move-x.active,
.motions.move-x-reverse.active {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}

.motions.scale.active {
 -webkit-transform: scale(1);
 transform: scale(1);
}

/**********************************************************
                        responsive
***********************************************************/
@media screen and (max-width: 1023px) {
 .dp_pc {
  display: none;
 }

 .dp_mo {
  display: block;
 }

 :root {
  --text-2xl: 42px;
  --text-xl: 28px;
  --text-lg: 24px;
  --text-md: 22px;
  --text-base: 16px;
  --text-sm: 14px;
 }

 .motions.delay {
  -webkit-transition-delay: 0s !important;
  transition-delay: 0s !important;
 }
}

@media screen and (max-width: 799px) {}

@media screen and (max-width: 639px) {}

@media screen and (max-width: 480px) {
 :root {
  --text-2xl: 28px;
  --text-xl: 21px;
  --text-lg: 19px;
  --text-md: 16px;
  --text-base: 14px;
  --text-sm: 12px;
 }
}

@media screen and (max-width: 399px) {}