/* style.css */
@charset "utf-8";

/* 웹폰트 */
/* Paperozi */
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

/* SUIT */
@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}


@font-face {
  font-family: 'HsJandari';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2510-2@1.0/HSJandari.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}


/*
- DynaPuff

.dynapuff-<uniquifier> {
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

*/


:root {
  /* 1. 폰트 및 전역 CSS 변수(재할당 금지) 설정 */

  /******************************************
  1-1. 폰트
  ******************************************/

  /* 폰트 크기 설정 */
  /* 폰트 크기 : desktop */
  --pc-size-h2: 120px;
  --pc-line-height-h2: 110px;
  --pc-size-h3: 64px;
  --pc-line-height-h3: 72px;
  --pc-size-p: 24px;
  --pc-line-height-p: 32px;

  /* 폰트 크기 : tablet */
  --tab-size-h2: px;
  --tab-size-h3: px;
  --tab-size-h4: px;
  --tab-size-h5: px;
  --tab-size-h6: px;
  --tab-size-p: px;


  /* 폰트 크기 : mobile */
  --mobile-size-h2: px;
  --mobile-size-h3: px;
  --mobile-size-h4: px;
  --mobile-size-h5: px;
  --mobile-size-h6: px;
  --mobile-size-p: px;

  /* 폰트패밀리 */
  --main-font-01: 'HsJandari';
  --main-font-02: 'Paperozi', sans-serif;
  --main-font-03: 'Suit', sans-serif;
  --sub-font-01: "DynaPuff", system-ui;

  /* 폰트 정렬 기준 */
  * {
    vertical-align: bottom;
  }



  /******************************************
  1-2. 전역 CSS 변수 정의
  - 색상
  ******************************************/
  --deep-black: #000;
  --black: #353535;
  --white: #fff;
  --ivory: #FFFCF3;
  --blue: #ABD2EF;
  --yellow: #FFD43A;
  --orange: #FE9D35;
  --side-pager-color: #353535;


  /******************************************
  1-3. 반응형 너비 breakpoint
  - pc : 1440px~
  ******************************************/

  --maxW-tab: px;
  --maxW-mobile: px;

  /* 1-6. 폰트 설정 */
  --font-weight-nomoral: 600;
  --font-weight-bold: 700;

  font-family: var(--main-font-03);
  font-optical-sizing: auto;
  font-style: normal;
}

/******************************************
2. 반응형마다 다르게 설정할 변수(재할당 가능) 설정
- responsive.css 맨 상단에 변수 재할당하기
******************************************/
/* 2-1. :root */
:root {

  /* 글자 기본 크기 및 line-height */
  html,
  body {
    font-size: var(--pc-size-p);
    color: var(--black);
  }

  /* h : title */
  h2 {
    font-family: var(--main-font-01);
    font-size: var(--pc-size-h2);
    line-height: var(--pc-line-height-h2);
    letter-spacing: -2px;
    font-weight: 400;
  }

  h3 {
    font-family: var(--main-font-02);
    font-weight: var(--font-weight-bold);
    font-size: var(--pc-size-h3);
    line-height: var(--pc-line-height-h3);
  }

  h4 {}

  h5 {}

  h6 {}

  /* p : des, text */
  p {
    font-family: var(--main-font-03);
    font-size: var(--pc-size-p);
    line-height: var(--pc-line-height-p);
    font-weight: var(--font-weight-nomoral);
  }



  html,
  body,
  button,
  a {
    color: var(--black);
    font-size: var(--pc-size-p);
    line-height: var(--pc-line-height-p);
  }

  /******************************************
  기기 별 전체 너비 설정
  - pc
  ㄴ width: 100%
  ㄴ max-width: 100%
  - tab
  ㄴ width: 100%
  ㄴ max-width: 1679px
  ㄴ margin: 
  - mobile
  ㄴ width: 100%
  ㄴ max-width: 100%
  ㄴ margin: 
  ******************************************/

  --pc-width: 100%;
  --pc-con-width: 1440px;
  /* --pc-padding: 0 40px; */
  --tab-width: 100%;
  --tab-con-width: 100%;
  --tab-padding: 0 20px;

  --mobile-width: 100%;
  --mobile-mcon-width: 100%;
  --mobile-padding: 0 16px;

  /* 각종 inner 설정 */

  .inner {
    width: var(--pc-width);
    max-width: var(--pc-con-width);
    margin: 0 auto;
  }

  .inner-header {
    width: 100%;
    max-width: 1800px;
    padding: 0 60px;
  }

  i {
    display: inline-block;
    /* width/height/비율 제어용 */
    width: 48px;
    aspect-ratio: 1 / 1;
    /* 정사각형 유지 */
    color: var(--black);
    /* SVG 색상 상속 기준 */
  }

  i>svg {
    display: flex;
    justify-content: center;
    align-items: center;
    /* inline-svg 여백 제거 */
    fill: none;
    /* 아이콘 내부 채움 없음 */
    /* 부모 color 상속 */
    /* stroke-width: 2; */
    /* 선 굵기는 아이콘마다 각각 조절해야 해서 주석처리 */
  }


  strong {
    font-weight: var(--font-weight-bold);
    color: var(--black);
  }

}

/*******************************************/
/* 3. 기본 스타일 */

/******************************************
3-1.유틸리티 클래스 적용
- .clear
******************************************/
.clear::after {
  content: "";
  display: block;
  clear: both;
}